Джим Тернер

Впервые поддержка приложений HTML Applications (HTA) появилась в Internet Explorer (IE) 5.0, то есть уже достаточно давно. Но лично я долгое время не использовал HTA, пока наконец я не решил разобраться, каким же образом сделана замечательная программа Scriptomatic 2.0.

Приложение HTA представляет собой обычную страницу HTML, но с расширением HTA. При этом на странице HTA не распространяются жесткие ограничения безопасности, которые применяются для страниц HTML. Это позволяет использовать HTA в качестве пользовательского интерфейса для сценариев VBScript - можно создать страницу для удобного ввода данных, при этом вызов программного кода осуществляется простым нажатием кнопок, связанных с процедурами VBScript.

В предыдущей статье " Применение HTA" (http://www.osp.ru/text/302/2627996/) были рассмотрены основные структуры файлов HTA и элементы кодирования, и были приведены простые формы для ввода данных, содержащие два текстовых поля и две кнопки. В настоящей статье будет предложен более универсальный пользовательский интерфейс, позволяющий управлять сценариями VBScript и утилитами. Мы рассмотрим основные элементы управления, используемые в пользовательском интерфейсе, и разберемся, как привязывать процедуры VBScript к этим элементам управления.

Использование HTA для ввода пользователем данных

Изображенная на рисунке 1 страница ввода данных VBScripting Using an HTA User Interface содержит следующие элементы:

  • Текстовое поле ввода
  • Поле ввода пароля
  • Список с возможностью выбора одного элемента
  • Список с возможностью выбора нескольких элементов
  • Трех позиционный переключатель
  • Раскрывающийся список выбора с действием On Change
  • Три поля для флажка
  • Кнопки запуска исполнения процедур VBScript для всех перечисленных элементов управления, кроме раскрывающегося списка с действием On Change.
  • Кнопка Exit

Рисунок 1. Диалоговое окно ввода VBScripting Using an HTA User Interface

Файл VBScriptUI.hta содержит код для формирования этой страницы и обработки нажатия пользователем кнопок. При просмотре этого файла в текстовом редакторе, в первую очередь виден код HTML для формирования следующих элементов управления:

Текстовое поле ввода. Поле RGB or Hex Value представляет собой обычное поле ввода, которое принимает любые вводимые символы. В нашем тестовом приложении оно служит для ввода значения цвета в формате RGB. После нажатия кнопки Change TextBox Color цвет текстового поля меняется на выбранное пользователем значение. Ожидается, что пользователь введет текст в формате RGB(r,g,b) или шестнадцатеричное значение #hhhhhh. Каждое из значение RGB должно лежать в промежутке от 0 до 255, шестнадзатеричное значение цвета должно быть представлено числом между 000000 и fffff (шестнадцатеричный префикс - символ решетки - можно опустить).

При этом выполняется проверка корректности введенного значения, в случае неверного значения выдается соответствующее сообщение об ошибке, а значение будет заменено кодом rgb(64,255,64).

Поле ввода пароля. Демонстрирует использование поля inputBtype для ввода пароля. Введенная пользователем произвольная текстовая строка скрывается символами звездочка. При нажатии кнопки DisplayPassword на экран выводится окно сообщения, в котором представлена введенная текстовая строка в открытом виде.

Список с однократным выбором. Это простой список, содержащий три значения. Пользователь может выбрать из списка любое значение с помошью мыши или клавиатуры. При нажатии кнопки SingleSelect выводится сообщение, содержащее выбранное из списка значение.

Список с возможностью выбора нескольких значений. Внешне не отличается от предыдущего, но позволяет выбирать комбинацию значений. Для выбора нескольких значений следует при выборе значений держать нажатой калвишу Shift или Ctrl, которые работают так же, как в проводнике Windows или любой другой стандартной программе Windows. При нажатии кнопки MultiSelect выводится сообщение, содержащее все выбранные из списка значения.

Радио-кнопки. В каждый момент времени пользователь может выбрать только одно из трех положений переключателя. При нажатии кнопки RadioButton Selected на экран выводится сообщение, содержащее название выбранной позиции. Очевидно, в реальной программе при этом может выполняться какое-то действительно осмысленное действие. Этот пример показывает способ определения переключателя для выполнения действий.

Поле с раскрывающимся списком On Change. При выборе значения из раскрывающегося списка никаких кнопок нажимать не приходится - связанная с полем процедура вывода на экран сообщения о выбранном элементе вызывается сразу после изменения значения благодаря использованию атрибута onchange.

Поля флажок. Пользователь может поставить флажок в одном или нескольких полей. После нажатия кнопки CheckBox Selected связанная с событием onclick процедура выводит сообщение для каждого из отмеченных флажков. Конечно, для каждого можно запрограммировать свое действие.

Кнопка Exit. Кнопка Exit закрывает приложение и окно приложения простым вызовом self.close. При использовании этого метода необходимо соблюдать в процедурах соответствующие заверщающие действия, например очиску переменных путем присвоения им предопределенного значения Nothing. С другой стороны, эти завершающие действия можно собрать в процедуре, вызываемой при нажатии Exit, а не сразу закрывать приложение.

Обратите внимание, что в данном приложении для обработки нажатий на кнопки выполняется вызов процедур-обрабтчиков. В поле с раскрывающимся списком On Change вызов процедуры происходит при изменении значения в поле. Если вы решите воспользоваться этим приложением в качестве шаблона при разработке собственного приложения, вам, скорее всего, потребуются аналогичные элементы управления - кнопки, флажки, текстовые поля ввода, а также аналогичные процедуры. Конечно, код в этих процедурах-обработчиках будет другим.

Блок заголовка Head

Полный код сценария VBScripting Using an HTA User Interface слишком велик для представления в рамках журнальной статьи, поэтому подробно будут рассмотрены только основные элементы. В листинге 1 представлены элементы заголовка и стиля сценария VBScriptUI.hta, которые определяют внешний вид окна ввода. Внутри блока находятся элементы залоговка title и приложения HTA:APPLICATION. Элемент title определяет заголовок окна HTA. Семь строк кода в разделе HTA:APPLICATION задают стиль отображения окна - без полос прокрутки, только единственный экземпляр, раскрывание на весь экран при запуске. Список атрибутов, их возможных значений и значения по умолчанию, используемых HTA:APPLICATION, был приведен в предыдущей статье.

Элемент «стиль» определяет внешний вид окна приложения. В данном случае, здесь задаются цвета, шрифт и размеры полей. В качестве фона выбран цвет кнопок - обычно светло-серый, для шрифта указывается имя и размер в типографских пунктах, размеры полей задаются в точках.

Блок кода сценария Script

Элемент Script сценария VBScriptUI.hta определяет, что в качестве языка сценариев страницы является VBScript. В нем же определяются семь процедур, которые, собственно, и выполняют все действия, выполняемые приложением. Поле ввода HTA является основным средством ввода информации от пользователя, а пользователь может управлять работой приложения, выбирая те или иные элементы интерфейса. Как правило, для каждой кнопки создается собственная процедура-обработчик. Я не стану описывать все процедуры, но некоторые все же заслуживат отдельного упоминания.

Процедура Window_Onload, представленная в листинге 2, выполняется при запуске файла HTA. В этой процедуре выполняются действия по инициализации, которые не требуют пользовательского вмешательства.

Процедура RadioButtons (листинг 3) вычисляет, какое из положений переключателя было выбрано. Для этого используется свойство Checked объекта.

If RadioButton(0) _.Checked Then ...

Как видно из названия, позиции переключателя организованы в виде массива, первый элемент которого имеет индекс 0.

Аналогично, процедура ChBx (листинг 4) использует свойство Checked для определения, установлен ли флажок в поле. Но в отличие от переключателя, флажки не организованы в массив, поэтому их выбор осуществляется по имени:

If CheckBox1.Checked Then ...
If CheckBox2.Checked Then ...
If CheckBox3.Checked Then ...

Процедура SelectMulti (см. листинг 5) использует свойство Selected для вычисления отмеченных элементов массива. Для списка элементов используется конструкция For . . . Next следующего вида.

If (MultiSelect.Options(i) _.Selected) Then ...

Тело сценария - HTA Body

Весь пользовательский интерфейс - кнопки, поля и раскрывающиеся списки определяются в том же файле HTA. При этом внимание следует обратить на следующие атрибуты HTML.

В данном приложении атрибут input type может принимать значения button, text, radio, checkbox и password. Для группирования позиций переключателя (input type="radio") им присваивается одинаковое имя - атрибут name. В группе позиций в каждый момент времени может быть выбрана только одна. Для группирования полей с флажком (input type="checkbox") используется атрибут value.

Атрибут name задает имя объекта. Используя имя объекта, сценарий VBScript может изменять и получать значение объекта или введенного в поле текста. При этом используется запись <имя объекта> <точка> <свойство>. Например, для вывода на экран сообщения с введенным значением пароля, когда пользователь нажимает кнопку Display Password, используется оператор

MsgBox passwordtextbox.value

Для очистки пароля и замены его пустой строкой используется строка сценария:

passwordtextbox.value = ""

Атрибут value объекта Textbox используется для задания, изменения и вывода на экран значения объекта. Например, в первом текстовом поле, которое изначально содержит значение rgb(192,0,0). Значением атрибута value объекта кнопка является надпись на кнопке.

Атрибут onclick (его можно рассматривать как метод объекта), активно используемый в данном демонстрационном примере, определяет действие, выполняемое при щелчке мышью на объекте. За исключением кнопки Exit, со всеми остальными кнопками связаны соответствующие процедуры. Чтобы связать процедуру с атрибутом onclick надо указать для атрибута имя, совпадающее с именем процедуры. Так, для кнопки ChangeColor используется конструкция onclick="changecolor", вызывающая процедуру изменения цвета фона для первого текстового поля.

Раскрывающиеся списки и списки выбора начинаются с атрибута select size. Select указывает, что данный объект можно выбрать, size определяет, сколько элементов будут выведены на экран. Например, select size="3" означает, что при выборе поля с раскрывающимся списком и будет отображать три элемента. Для создания списка с множественным выбором следует включить атрибут multiple. Затем следует создать каждый элемент списка с помощью предложения option. Ели элемент должен быть выделен сразу при запуске приложения, требуется указать атрибут selected как в следующем примере .

Атрибут onchange (его можно рассматривать как событие в языках программирования), который был использован для обработки события в поле с раскрывающимся списком On Change, действует точно также, как и атрибут onclick для выполнения действия. Отличие заключается только в том, что действие выполняется сразу при изменении значения в поле. При изменении значения объекта происходит выполнение связанной процедуры - в данном случае это процедура OnChangeEx.

Последний важный элемент - кнопка Exit. В этом демонстрационном примере для выполнения связанного с кнопкой действия используется артибут onclick, но вместо вызова процедуры VBScript происходит просто обращение к встроенному методу self.close.

Знания - в жизнь

HTA позволяет настроить удобный и простой пользовательский интерфейс для обычных сценариев. При этом вы можете комбинировать произвольное число отдельных сценариев, выполняющих простые и сложные задачи в единый удобный интерфейс - надо только освоить основы HTML.

Листинг 1. Элементы Head и Style.

VBScripting Using an HTA User Interface
Листинг 2. Процедура Window_Onload.
Sub Window_Onload
  self.Focus()
  self.ResizeTo 700,450
End Sub
Листинг 3. Процедура RadioButtons.
Sub RadioButtons
  If RadioButton(0).Checked Then
    Msgbox "Run a subroutine associated
 with Radio Button 1 selected"
  End If
  If RadioButton(1).Checked Then
    Msgbox "Run a subroutine associated
 with Radio Button 2 selected"
  End If
  If RadioButton(2).Checked Then
    Msgbox "Run a subroutine associated
 with Radio Button 3 selected"
  End If
End Sub
Листинг 4. Процедура ChBx.
Sub ChBx
  If CheckBox1.Checked Then
    MsgBox "Do routine associated with Checkbox 1"
  End If
  If CheckBox2.Checked Then
    MsgBox "Do routine associated with Checkbox 2"
  End If
  If CheckBox3.Checked Then
    MsgBox "Do routine associated with Checkbox 3"
  End If
End Sub
Листинг 5. Процедура SelectMulti.
Sub SelectMulti 
  For i = 0 to (MultiSelect.Options.Length - 1)
    If (MultiSelect.Options(i).Selected) Then
      Items = Items & MultiSelect.Options(i).Value & VbCrLf
    End If
  Next
  Items = Items & "Selected"
  MsgBox Items
End Sub