HTML-приложения в Internet Explorer (ч.1)

Что нужно, чтобы создать Windows-приложение? Правильно, подходящая среда разработки: Microsoft Visual Studio, Embarcadero RAD Studio или подобная им. В этой среде разработки мы напишем исходный код на каком-либо языке программирования - Visual Basic, C++, C#, Delphi, XAML, - после чего откомпилируем его и получим исполняемый файл - готовое приложение.


1. Введение в HTML-приложения
Но мало кто знает, что существует возможность создавать полноценные Windows-приложения с использованием технологий, обычно применяемых для создания веб-страниц, - HTML, CSS и JavaScript. Такие приложения фактически представляют собой веб-страницы, оформленные особым образом, выполняются в среде Internet Explorer и называются HTML-приложениями (HTML Applications, HTA).

HTML-приложения - довольно старая технология; её поддержка появилась ещё в Internet Explorer 4. Но до сих пор она не снискала большой популярности. Возможно, данная статья послужит популяризации данной технологии.

---

На заметку
Существуют и другие технологии, позволяющие создавать Windows-приложения с использованием HTML, CSS и JavaScript, а также Adobe Flash. Самая известная из них - Abobe AIR.

---

Достоинства HTML-приложений Internet Explorer перечислены ниже:

• Для их создания можно использовать традиционные веб-технологии - HTML, CSS и JavaScript - и навыки веб-дизайна.
• Отсутствует необходимость в установке каких-либо дополнительных программ - Internet Explorer стандартно поставляется в составе Windows. Конкурирующие технологии, например, Adobe AIR, требуют установки на компьютер среды исполнения.
• Предоставляются довольно развитые средства по работе с дисками, папками, файлами и реестром.
• HTML-приложения Internet Explorer исключительно компактны.
• Возможно распространение таких приложений как через Интернет с возможностью запуска их прямо в веб-страницы, так и традиционным способом (архивы или дистрибутивы).

Но, наряду с достоинствами, такой подход в создании Windows-приложений имеет и недостатки:

• По быстродействию HTML-приложения проигрывают приложениям, написанным на компилируемых языках.
• Набор возможностей по созданию приложений сильно ограничен. Так, мы можем использовать только те элементы управления, что поддерживаются Internet Explorer.
  

  ---

  
  На заметку
  Впрочем, мы можем использовать какие-либо JavaScript-библиотеки, например, Ext JS. Они предоставляют, помимо всего прочего, большой набор развитых элементов управления: разнообразных списков, таблиц, наборов вкладок, панелей инструментов и даже меню.
  

  ---

• Многие функции в HTML-приложениях реализуются, скажем так, неочевидно. Например, мы не можем сразу установить размеры окна HTML-приложения или вызвать стандартное диалоговое окно открытия файла.
• HTML-приложение часто представляет собой несколько файлов (веб-страницы, иконка, графические изображения, таблицы стилей, какие-либо файлы данных и пр.), и какой из них следует запустить, не всегда понятно. Это может вызвать затруднения у неопытного пользователя.

Обычно в виде HTML-приложений реализуют небольшие утилиты или прототипы приложений, которые будут впоследствии реализовываться на компилируемых языках программирования. Так, сама Microsoft часто создаёт оболочки своих компакт-дисков именно в виде HTML-приложений.


2. Создание простых HTML-приложений
Рассмотрим процесс создания самых простых HTML-приложений, которые содержат всего одно, если можно так сказать, "окно". Назовём их "однооконными".

2.1. Создание веб-страницы для HTML-приложения
Простое "однооконное" HTML-приложение представляет собой веб-страницу, сохранённую в файле с расширением hta. Это расширение собственно и сообщает Internet Explorer, что перед ним не обычная веб-страница, а HTML-приложение.

Эта веб-страница должна содержать весь пользовательский интерфейс HTML-приложения. В первую очередь, это, конечно, элементы управления - поля ввода, кнопки, флажки, переключатели, списки - и текстовые надписи для них. Также она может включать другие элементы: поясняющий или справочный текст, изображения (логотипы или поясняющие картинки), таблицы и пр.

Ниже приведён код простого HTML-приложения, выполняющего преобразование величин длины из дюймов в миллиметры. Это приложение содержит поле ввода, куда заносится величина в дюймах, кнопку, выполняющую преобразование, и доступное только для чтения поле ввода, где выводится результат в миллиметрах.

<HTML>

  <HEAD>

    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">

    <TITLE>Преобразователь</TITLE>

    <SCRIPT>

      function convert()

      {

        var oTxtInches = document.getElementById("txtInches");

        var oTxtMillimetres = document.getElementById("txtMillimetres");

        var fInches = parseFloat(oTxtInches.value);

        var fMillimetres = fInches * 25.4;

        oTxtMillimetres.value = fMillimetres;

      }

    </SCRIPT>

  </HEAD>

  <BODY>

    <FORM>

      <P>Дюймы: <INPUT TYPE="text" ID="txtInches"></P>

      <P><INPUT TYPE="button" VALUE="Преобразовать" ONCLICK="convert();"></P>

      <P>Миллиметры: <INPUT TYPE="text" ID="txtMillimetres" READONLY></P>

    </FORM>

  </BODY>

</HTML>

ODY>
</HTML>[/code]
Прежде всего, нам обязательно следует указать в секции заголовка веб-страницы (в теге <HEAD>) тег <TITLE>, задающий её название. Это название будет выведено в заголовке окна Internet Explorer, в котором будет открыто данное HTML-приложение. А окно приложения без заголовка, согласитесь, выглядит как-то нелепо.

Событие click возникает в любом элементе веб-странице при щелчке на нём, а применительно к кнопке - при нажатии этой кнопки. Мы пользуемся этим, чтобы запустить при нажатии кнопки Преобразовать преобразование введённой величины, для чего привязываем к событию click этой данной обработчик - функцию convert. Отметим, что для этого мы использовали атрибут ONCLICK, в качестве значения которого указали выражение JavaScript, вызывающее данную функцию.

Поле ввода txtMillimetres, где будет выводиться результат, мы делаем доступным только для чтения, для чего помещаем в создающий его тег <INPUT> атрибут READONLY.

Функция convert, которая и выполняет преобразование из дюймов в миллиметры, очень проста и требует минимальных пояснений.

Открытую в браузере веб-страницу представляет экземпляр объекта HTMLDocument. Экземпляр этого объекта, представляющий текущую веб-страницу, создаётся самим браузером и доступен в любом сценарии через переменную document.

Объект HTMLDocument поддерживает метод getElementById. В качестве единственного параметра он принимает имя элемента, заданное с помощью атрибута ID, в виде строки. Возвращает же он экземпляр объекта, представляющий данный элемент веб-страницы; если же элемента с таким именем на веб-странице нет, возвращается значение null. Метод getElementById обычно используется, чтобы получить доступ к нужному элементу страницы (в нашем случае - к полям ввода) из веб-сценария.

Все объекты, представляющие элементы управления, поддерживают свойство value. Оно содержит текущее значение элемента управления, например, текст, введённый в поле ввода.

Функция parseFloat принимает в качестве значения строку, содержащую число с плавающей точкой, и возвращает это же число в собственно числовом виде. Если переданная данному методу строка не может быть преобразована в число, возвращается значение NaN.

Каждый дюйм равен 25,4 миллиметрам. Поэтому, чтобы пребразовать какую-либо величину, заданную дюймами, в миллиметры, нам следует умножить её на это 25,4.

Сохраним данную веб-страницу в файле, которому дадим расширение hta. Мы сразу увидим, что Проводник Windows выведет возле имени этого файла ту же иконку, которой обозначаются запускаемые файлы, не имеющие встроенных иконок. Так Windows даёт нам знать, что этот файл хранит приложение, которое можно запустить щелском мыши или как-то ещё.

Запустим же его. На экране появится окно Internet Explorer, в котором будет открыта наша веб-страница, точнее, HTML-приложение (см. рис. 1). Мы сразу увидим, что это окно не имеет строки меню, панели инструментов, поля ввода интернет-адреса и строки статуса, вдобавок, оно не поддерживает вкладки. В случае HTML-приложения всё это просто не нужно.

2.2. Задание параметров HTML-приложения
Ещё мы можем указать некоторые параметры окна Internet Explorer, в котором будет открываться HTML-приложение, и самого этого HTML-приложения. Сейчас мы выясним, как это делается.

Для указания параметров HTML-приложения и окна, в котором оно будет открыто, применяется особый парный тег <HTA:APPLICATION>. Этот тег помещается в секцию заголовка веб-страницы (в тег <HEAD>).

Сами параметры указываются в качестве значений атрибутов этого тега. Рассмотрим эти атрибуты.

Атрибут APPLICATIONNAME задаёт уникальное имя HTML-приложения. Рекомендуется всегда его указывать.

Если в параметрах HTML-приложения указано, что возможен запуск только одного его экземпляра (как это сделать, мы узнаем потом), то при запуске любого HTML-приложения Internet Explorer будет просматривать список всех запущенных в данный момент приложений на предмет того, не присутствует ли там приложение с тем же именем, что и запускаемое в данный момент. Если это так, запуск HTML-приложения будет отменён, и будет активизировано приложение, запущенное ранее.

Атрибут BORDER задаёт вид рамки окна, в котором будет открываться HTML-приложение. Для него доступны четыре следующих значения:

• thick - толстая рамка с возможностью изменения размеров окна (значение по умолчанию);
• dialog - толстая рамка без возможности изменения размеров окна; такую рамку имеют диалоговые окна;
• thin - тонкая рамка без возможности изменения размеров окна;
• none - рамка отсутствует. Отметим, что при этом отсутствовать будут также заголовок окна, системное меню и кнопки максимизиции, минимизации и закрытия окна (или, как сейчас говорят, хром (chrome)).

Отметим, что в случае, если включен интерфейс Aero, значения dialog и thin дают совершенно одинаковый результат - толстую рамку.

Атрибут CAPTION указывает, должно ли окно, в котором будет открываться HTML-приложение, содержать заголовок, системное меню и кнопки максимизации и минимизации. Если указано значение yes (это, кстати, значение по умолчанию), то окно будет содержать всё это, если же указать значение no - не будет. Отметим, что в последнем случае, если для атрибута BORDER было указано значение, отличное от thick, окно также не будет содержать рамки.

Атрибут CONTEXTMENU указывает Internet Explorer, выводить ли контекстное меню при щелчке на содержимом приложения правой кнопкой мыши. Если указано значение yes (это значение по умолчанию), контекстное меню будет выводиться, если задать значение no - не будет.

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

Атрибут ICON задаёт интернет-адрес файла иконки, которая будет выведена на кнопке Панели задач, соответствующей данному приложению, и использована в качестве значка системного меню окна приложения. Допускается указание только относительных интернет-адресов. Иконка должна храниться в файле формата ICO и иметь размеры 32х32 пиксела.

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

Атрибут MAXIMIZEBUTTON задаёт доступность кнопки максимизации окна, в котором будет открыто HTML-приложение. Значение yes (это значение по умолчанию) делает её доступной, а значение no - недоступной.

Недоступной кнопку максимизации следует делать только в том случае, если окно приложения имеет строго заданные размеры, изменить которые пользователь не может. Другими словами, если для атрибута BORDER задано значение dialog или thin.

Атрибут MINIMIZEBUTTON задаёт доступность кнопки минимизации окна, в котором будет открыто HTML-приложение. Значение yes (это значение по умолчанию) делает её доступной, а значение no - недоступной.

На взгляд автора, недоступной кнопку минимизации следует делать только в том случае, если окно приложения, имеет очень маленькие размеры, и пользователь не имеет возможности их изменить. В этом случае в кнопке минимизации нет большой нужды.

---

На заметку
Если сделать недоступными и кнопку максимизации, и кнопку минимизации, обе эти кнопки станут невидимыми.

---

Атрибут NAVIGABLE будет полезен только в том случае, если в HTML-приложении присутствуют гиперссылки, указывающие на другие веб-страницы. Значение no данного атрибута (это значение по умолчанию) указывают Internet Explorer выводить эти веб-страницы в новом окне, а значение yes - в том же окне, что и само приложение.

Атрибут SCROLL указывает, будут ли в окне приложения присутствовать полосы прокрутки. Здесь доступны три значения:

• yes - полосы прокрутки выводятся в любом случае (это значение по умолчанию);
• no - полосы прокрутки не выводятся в любом случае;
• auto - полосы прокрутки выводятся только в том случае, если содержимое приложения не помещается в окне.

Атрибут SELECTION указывает Internet Explorer, следует ли давать возможность пользователю выделять текст, являющийся содержимым HTML-приложения. Значение yes (это значение по умолчанию) даёт ему такую возможность, а значение no - не даёт.

Вероятно, этот атрибут предусмотрен для того, чтобы сделать HTML-приложения более похожими на обычные приложения Windows. Ведь мы не можем выделить произвольный текст в окне Windows-приложения, если, конечно, он не является содержимым поля ввода или области редактирования.

Атрибут SHOWINTASKBAR задаёт, будет ли в панели задач Windows присутствовать кнопка, соответствующая запущенному HTML-приложению. Если указано значение yes (это значение по умолчанию), кнопка будет присутствовать в панели задач, если указано значение no - не будет.

Достаточно странный атрибут... Вообще, по мнению автора, любое запущенное приложение должно отображаться на панели задач в виде кнопки. Или разработчики решили помочь создателям вредоносного ПО (которое, как всем известно, должно быть как можно менее заметным)?

Следует, однако, иметь в виду, что, даже если в панели задач нет кнопки, соответствующей запущенному HTML-приложению, это приложение всё равно будет отображаться в списке диспетчера задач Windows, и на него можно будет переключиться с помощью комбинаций клавиш <Alt>+<Tab> и <Windows>+<Tab>.

Атрибут SINGLEINSTANCE указывает, разрешается ли пользователю запускать сразу несколько экземпляров данного HTML-приложения. Значение yes делает возможным запуск только одного экземпляра приложения, а значение no (это значение по умолчанию) - произвольного количества экземпляров.

Атрибут SYSMENU задаёт доступность системного меню окна, в котором открывается HTML-приложение. Значение yes (это значение по умолчанию) делает системное меню видимым, а значение no - невидимым.

Отметим, что, если сделать системное меню невидимым, кнопки максимизации и минимизации окна также станут невидимыми.

Атрибут VERSION задаёт версию приложения в произвольном формате.

Атрибут WINDOWSTATE задаёт изначальное состояние окна, в котором открывается HTML-приложение. Здесь доступны три значения:

• normal - окно имеет обычное состояние (значение по умолчанию);
• minimize - окно изначально минимизировано;
• maximize - окно изначально максимизировано.

А теперь рассмотрим ещё три атрибута тега <HTA:APPLICATION>, которые, хоть и упоминаются в документации, но, похоже, не работают как положено.

Атрибут BORDERSTYLE задаёт вид рамки, которая рисуется вокруг содержимого HTML-приложения, внутри клиентской области его окна. Здесь доступны пять следующих значений: normal, complex, raised, static и sunken. Однако, насколько удалось выяснить автору, при указании любого значения данного атрибута вокруг содержимого приложения рисуется рамка одного и того же вида - тонкая и как бы вдавленная.

Атрибут INNERBORDER указывает Internet Explorer, следует ли выводить внутреннюю трёхмерную рамку внутри рамки, вид которой задаётся атрибутом BORDERSTYLE. Здесь доступны значения yes (выводить) и no (не выводить). Однако, судя по всему, никакого реального влияния этот атрибут на вид HTML-приложения не оказывает.

Атрибут SCROLLFLAT должен задавать вид полос прокрутки: обычный трёхмерный (значение no; это значение по умолчанию) или плоский (значение yes). Но, похоже, он не работает - при любом значении этого атрибута полосы прокрутки имеют один и тот же - трёхмерный - вид.

---

На заметку
Возможно, эти атрибуты оказывали какой-то эффект во времена старых версий Internet Explorer. Но сейчас они не работают.

---

[code]<HTA:APPLICATION APPLICATIONNAME="appConvertor" BORDER="dialog"
ICON="Convertor.ico" MAXIMIZEBUTTON="no" SCROLL="no" SELECTION="no"
SINGLEINSTANCE="yes" VERSION="1.0"></HTA:APPLICATION>[/code]
Здесь мы указали для нашего приложения-преобразователя тег <HTA:APPLICATION>, задающий следующие параметры:

• имя приложения - appConvertor;
• рамка окна - толстая, без возможности изменения размеров;
• файл иконки - Convertor.ico. Он должен находиться в той же папке, что и сам HTA-файл приложения;
• кнопка максимизации отсутствует;
• полосы прокрутки отсутствуют в любом случае;
• текст, являющийся содержимым приложения, выделять нельзя;
• можно запустить только один экземпляр данного приложения;
• версия приложения - 1.0.

Вставим приведённый выше HTML-код в секцию заголовка (тег <HEAD>) нашего HTML-приложения и запустим его. Изменения, произошедшие с ним, мы заметим сразу.


Дополнительные материалы

• Статья об HTML-приложениях на веб-сайте MSDN
• Статья о теге <TITLE>
• Статья о событии click
• Статья об атрибуте тегов READONLY элементов управления
• Статья о методе getElementById
• Статья об атрибуте тегов ID
• Статья о свойстве value элементов управления
• Статья о функции parseFloat (интересно, что на самом деле это не функция, а метод объекта Global)
• Статья о теге <HTA:APPLICATION>

Окончание следует...