Андрей Попов - Windows Script Host для Windows 2000/XP
Рспользование 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 Переход Рє последней записиКоманды, создающие форму, находятся внутри тегов <form> Рё </form>. Сами текстовые поля РІРІРѕРґР° Рё РєРЅРѕРїРєРё создаются РІ HTML-файле СЃ помощью РѕРґРЅРѕРіРѕ Рё того же тега <input>. Внутри этого тега нужно указать несколько атрибутов:
□ type — определяет тип элемента управления (для поля ввода type="text", для кнопки type="button");
□ name — задает имя элемента управления;
□ size — определяет длину строки поля ввода в символах;
□ value — задает надпись на кнопке.
Для того чтобы поля ввода располагались точно друг под другом, мы поместим их в таблицу с невидимыми границами, состоящую из двух столбцов: в первом находится описание (метка) для поля, во втором — сам элемент управления. Таблица в HTML-файле создается с помощью парных тегов <table> и </table>, внутри которых приводятся теги <tr> и </tr>, задающие начало и конец одной строки таблицы соответственно:
<table border="0" width="100%" style="font-family:Arial; font-size:10pt">
В <tr>
В </tr>
</table>
Здесь аргумент border задает ширину границ таблицы (в нашем случае границы невидимы), а в аргументе style указываются название и размер шрифта, которым будет выводиться содержимое таблицы.
