и . Сами текстовые поля ввода и кнопки создаются в 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();
//Инициализируем номер текущей записи
|
Читать дальше