и . Сами текстовые поля ввода и кнопки создаются в HTML-файле с помощью одного и того же тега . Внутри этого тега нужно указать несколько атрибутов:
□ type— определяет тип элемента управления (для поля ввода type="text", для кнопки type="button");
□ name— задает имя элемента управления;
□ size— определяет длину строки поля ввода в символах;
□ value— задает надпись на кнопке.
Для того чтобы поля ввода располагались точно друг под другом, мы поместим их в таблицу с невидимыми границами, состоящую из двух столбцов: в первом находится описание (метка) для поля, во втором — сам элемент управления. Таблица в HTML-файле создается с помощью парных тегов
и , внутри которых приводятся теги
|
, задающие начало и конец одной строки таблицы соответственно:
Здесь аргумент borderзадает ширину границ таблицы (в нашем случае границы невидимы), а в аргументе styleуказываются название и размер шрифта, которым будет выводиться содержимое таблицы.
В свою очередь, внутри тегов
|
находятся теги
и |
, определяющие одну ячейку таблицы, например:
Фамилия |
|
Для тегов
указывается аргумент width, задающий ширину строки в процентах от общей ширины строки.
Кнопки в форме выводятся друг за другом, нужное расстояние между ними достигается с помощью неразрывных пробелов (escape-последовательность ), например:
Листинг 7.6. Описание формы в HTML-файле (Phone.htm)
| Фамилия |
|
| Имя |
|
| Телефон |
|
| Улица |
|
| Дом |
|
| Кв. |
|
| Примечание |
|
Создание объекта для обмена данными между XML-файлом и формой
В отличие от рассмотренного выше сценария PhoneBook.wsf, в сценарии IEPhoneBook.js функции для работы с записной книжкой не будут разделены по разным заданиям, поэтому для более четкой организации сценария мы воспользуемся объектно-ориентированным подходом и создадим два объекта Personи ListPersons, методы которых и будут осуществлять обработку данных и связь между XML-файлом и пользовательской формой.
Как и раньше, в свойствах объекта Personбудет храниться запись об одном человеке. Кроме этого, мы добавим в объект Personметод LoadDialog, который будет заполнять поля ввода в форме данными из соответствующих свойств объекта Person:
//Конструктор объекта Person
function Person() {
//Инициализируем свойства объекта
this.LastName="";
this.Name="";
this.Phone="";
this.Street="";
this.House="";
this.App="";
this.Note="";
//Устанавливаем для метода LoadDialog указатель на
//функцию Person_LoadDialog
this.LoadDialog=Person_LoadDialog;
}
//Заполнение полей в форме для текущей записи
function Person_LoadDialog() {
//Заполняем поля ввода в форме значениями соответствующих
//свойств объекта Person
doc.all.txtLastName.value = this.LastName;
doc.all.txtName.value=this.Name;
doc.all.txtPhone.value=this.Phone;
doc.all.txtStreet.value=this.Street;
doc.all.txtHouse.value=this.House;
doc.all.txtApp.value = this.App;
doc.all.txtNote.value = this.Note;
}
Принцип доступа к полям ввода формы по их именам, который используется в методе LoadDialog(), объясняется ниже (см. разд. "Обработка событий, генерируемых элементами управления формы").
Основным объектом, который обеспечивает обмен данными между XML-файлом записной книжки и разработанной нами формой, является объект ListPersons. Этот объект будет содержать три свойства и десять методов.
Первым свойством объекта ListPersonsмы сделаем массив PersonArrобъектов Person; этот массив будет служить промежуточным буфером при чтении данных из XML-файла для отображения в форме и при записи измененных данных из формы в файл. В остальных двух свойствах СurRecordи IsChangedобъекта ListPersonsбудут соответственно храниться номер текущей записи и логическое значение ( trueили false), являющееся признаком того, были ли изменены пользователем данные в форме.
Назначение методов объекта ListPersonsясно из комментариев, которые приведены в конструкторе этого объекта (листинг 7.7).
Листинг 7.7. Конструктор объекта ListPersons
function ListPersons() {
// Свойства объекта
//Создаем массив PersonArr экземпляров объекта Person
this.PersonArr = new Array();
//Инициализируем номер текущей записи
|
Читать дальше