Использование Internet Explorer для создания диалоговых окон
Процесс создания сценария WSH, использующего Internet Explorer в качестве интерфейса, можно условно разделить на несколько этапов:
□ создание HTML-формы в отдельном файле;
□ написание функции для сценария WSH, в которой будет производиться вывод на экран построенной формы;
□ написание части сценария, в которой будет реализована необходимая функциональность (например, обмен информацией между формой и внешним файлом с данными, корректное отображение данных в форме и т.д.);
□ добавление в сценарий функций-обработчиков событий, связанных с поведением браузера Internet Explorer;
□ добавление в сценарий функций-обработчиков событий, которые генерируются элементами управления в форме.
Ниже мы рассмотрим каждый из этих этапов на примере создания сценария IEPhoneBook.js для работы с записной книжкой, которая хранится, как и прежде, в XML-файле book.xml.
Разработка HTML-формы для диалогового окна
В качестве интерфейса записной книжки мы создадим диалоговое окно (пользовательскую форму), которое показано на рис. 7.3.
Рис. 7.3. Диалоговое окно для работы с записной книжкой
Эта форма реализуется с помощью HTML-файл Phone.htm, который полностью приведен в листинге 7.6.
В самом начале файла Phone.htm ставится тег <html>, указывающий на то, что содержимым файла является текст в формате HTML, а также теги <head> и </head>, внутри которых задаются используемая кодировка (charset=windows-1251) и заголовок формы (теги <title> и </title>):
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Форма для записной книжки</title>
</head>
Для того чтобы задать цвет формы, в теге <body> используется атрибут bgcolor со значением "silver":
<body bgcolor="silver" scroll="no">
Атрибут scroll="no" указывает на то, что в диалоговом окне не должно быть полос прокрутки.
Наша форма состоит из семи текстовых полей ввода (табл. 7.2) и восьми кнопок (табл. 7.3).
Таблица 7.2. Поля ввода диалогового окна для работы с записной книжкой
| Имя поля | Размер поля (символов) | Назначение |
|---|---|---|
txtLastName |
50 | Поле для ввода фамилии |
txtName |
50 | Поле для ввода имени |
txtPhone |
15 | Поле для ввода номера телефона |
txtStreet |
50 | Поле для ввода названия улицы |
txtHouse |
10 | Поле для ввода номера дома |
txtApp |
5 | Поле для ввода номера квартиры |
txtNote |
80 | Поле для ввода примечания |
Таблица 7.3. Кнопки диалогового окна для работы с записной книжкой
| Текст кнопки | Имя кнопки | Назначение |
|---|---|---|
| << | btnFirst |
Переход к первой записи |
| < | btnPrevious |
Переход к предыдущей записи |
| Новая запись | btnNew |
Добавление новой пустой записи |
| Записать | btnSave |
Сохранение сделанных изменений в XML-файле |
| Отменить | btnCancel |
Отмена сделанных в форме изменений |
| Удалить | btnDelete |
Удаление текущей записи |
| > | btnNext |
Переход к следующей записи |
| >> | btnFinal |
Переход к последней записи |