HTML Приложения (HTA)

HTA (HTML Application) - это простая технология, позволяющая создавать полезные приложения даже без знания серьезных языков программирования.

Создать HTA-приложение можно, просто написав HTML-страницу и сохранив ее с расширением .hta, которое обрабатывается программой mshta.exe, её задача - обеспечить связь программы с браузером. Так как такие приложения используют движок браузера, то они объединяют в себе все их возможности - их объектную модель, разметку страницы (HTML), каскадные листы стилей (CSS), скрипты (VBS и JS). Также на такие приложения не накладывается ограничения безопасности - они работают как любой исполняемый файл.

То есть при помощи HTML создается абсолютно любой пользовательский интерфейс, причем с минимальными усилиями и без каких-либо существенных ограничений, логика программы организуется кодом на Java Script или Visual Basic Script, а само приложение выходит за рамки браузера - программа на стадии выполнения ничем не будет отличаться от обычных оконных приложений для Windows - запущенное приложение будет присутствовать на панели задач, иметь собственные окно, меню и значок. Хотя здесь нужно оговориться: программа не будет видна среди запущенных приложений в диспетчере задач, единственное средство, которым можно контролировать запущенную программу - это процесс mshta.exe.

В то время, как расширение .hta указывает системе как работать с приложением, новый тег <hta:application> и аттрибуты указывают окну, как себя вести будучи приложением. Этот тег предоставляет ограниченный набор аттрибутов, управляющих всем от стиля границы окна и до программной иконки и меню. Для создания функционирующего HTA, этот тег должен быть описан внутри тега HEAD.

Элемент HTA:APPLICATION требует закрывающего тега.

<HTA:APPLICATION ... > ... </HTA:APPLICATION>

Так как тэг элемента HTA:APPLICATION является пустым, он также может быть закрыт использую следующий прием.

<HTA:APPLICATION ...  />

При использовании вышеуказанного приема, прямому слэшу (/) должен предшествовать пробельный символ.

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

Атрибут и свойство id

Определяет идентификатор объекта - уникального имени внутри файла HTA-приложения.

Атрибут и свойство applicationName

Содержит имя приложения. Свойство не имеет значения по умолчанию.

Будучи установленным в true, свойство singleInstance проверяет значение applicationName перед запуском экземпляра приложения. Чтобы проверка была успешной, значение applicationName должно быть уникальным. Можно использовать значение свойства applicationName для идентификации единственности запущенного приложения, независимо от адреса URL, используемого для доступа к нему.

Атрибут и свойство border

Содержит тип бордюра окна. Свойство border влияет на толщину бордюра и действительно только для окон HTA, у которых есть панель заголовка и сам заголовок. Устанавливая border в "None", вы убираете панель заголовка, иконку программы, и кнопки максимизирования и минимизирования. Это свойство может быть использовано совместно со свойством borderStyle. Возможные значения:

Dialog	Бордюр диалогового окна - пользователь не может изменить размер окна.
None	Окно без бордюра.
Thick	Толстый бордюр окна, плюс бордюр для изменения размера окна. (Значение по умолчанию).
Thin	Тонкий бордюр окна с заголовком.

Примечание

Если не указать параметр BORDER или указать BORDER="thick", то размеры окна программы можно будет изменять при помощи мыши, в остальных же случаях, — размеры окна изменить нельзя.

Атрибут и свойство borderStyle

Содержит стиль бордюра клиентской области окна. Свойство borderStyle устанавливает стиль для бордюра содержимого окна, в то время как свойство border контролирует бордюр окна приложения. Возможные значения:

Complex	Приподнятый и утопленный бордюр.
Normal	Нормальный бордюр. (Значение по умолчанию).
Raised	Приподнятый 3-D бордюр.
Static	3-D бордюр, обычно используемый для окон, не обрабатывающих ввод пользователя.
Sunken	Утопленный 3-D бордюр.

Атрибут и свойство caption

Определяет, будет ли в окне HTML приложения отображаться панель заголовка. Заголовок приложения отображается только тогда, когда свойство caption установлено в "Yes". Отключение свойства caption также отключит кнопки "Свернуть", "Развернуть" и программную иконку. В этом случае нужно не забыть предоставить альтернативный способ выхода из приложения, например, кнопку "Закрыть" на форме приложения, вызывающую метод Window.Close. Возможные значения:

Yes	Панель заголовка отображается. (Значение по умолчанию).
No	Панель заголовка не отображается.

Свойство commandLine

Строка, которая содержит путь и параметры командной строки, которые использовались для запуска HTA-приложения. Если HTA-приложение было запущено с использованием HTTP протокола, свойство CommandLine содержит пустую строку.

Атрибут и свойство contextMenu

Определяет, появляется ли контекстное меню при нажатии на правую кнопку мыши. Возможные значения:

Yes	Контекстное меню появляется. (Значение по умолчанию).
No	Контекстное меню не появляется.

Атрибут и свойство icon

Определяет путь к файлу иконки, используемой в HTML приложении. HTA использует системную иконку, если значение не определено. Атрибут Icon распознаёт стандартные файлы с расширением .ico, содержащие изображение размером 32x32 пикселя, а также успешно распознаёт первую иконку из файлов "*.exe", "*.icl" (библиотека иконок), "*.dll", и "*.ocx".

Атрибут и свойство innerBorder

Определяет, отображается ли внутренняя 3-D граница. Возможные значения:

Yes	Внутренняя 3-D граница отображается. (Значение по умолчанию).
No	Внутренняя 3-D граница не отображается.

Атрибут и свойство maximizeButton

Определяет, отображается ли кнопка "Развернуть" на панели заголовка окна HTML приложения. Чтобы отображались кнопки "Свернуть" и "Развернуть", окно должно иметь панель заголовка (атрибут caption). Возможные значения:

Yes	Кнопка "Развернуть" отображается. (Значение по умолчанию).
No	Кнопка "Развернуть" не отображается.

Атрибут и свойство minimizeButton

Определяет, отображается ли кнопка "Свернуть" на панели заголовка окна HTML приложения. Чтобы отображались кнопки "Свернуть" и "Развернуть", окно должно иметь панель заголовка (атрибут caption). Возможные значения:

Yes	Кнопка "Свернуть" отображается. (Значение по умолчанию).
No	Кнопка "Свернуть" не отображается.

Атрибут и свойство navigable

Определяет, в каком окне будут открываться загружаемые документы. Возможные значения:

No	Будут открываться в новых окнах. (Значение по умолчанию).
Yes	Будут открываться в основном окне.

Атрибут и свойство scroll

Определяет, будут ли отображаться полосы прокрутки. Возможные значения:

Yes	Полосы прокрутки отображаются. (Значение по умолчанию).
No	Полосы прокрутки не отображаются.
Auto	Полосы прокрутки появляются только тогда, когда содержимое документа не умещается в клиентской области окна.

Атрибут и свойство scrollFlat

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

Yes	Полосы прокрутки двухмерные.
No	Полосы прокрутки трёхмерные. (Значение по умолчанию).

Атрибут и свойство selection

Определяет, может ли содержимое документа быть выбрано мышкой или с помощью клавиатуры. Значение "No" запрещает появление контекстного меню и присвоение атрибуту contextMenu значения "Yes" не произведёт никакого эффекта. Возможные значения:

Yes	Содержимое может быть выбрано. (Значение по умолчанию).
No	Содержимое не может быть выбрано.

Атрибут и свойство showInTaskBar

Определяет, будет ли HTML приложение появляться на панели задач Windows. Возможные значения:

Yes	Приложение отображается на панели задач. (Значение по умолчанию).
No	Приложение не отображается на панели задач.

Атрибут и свойство singleInstance

Определяет, может ли быть запущенно больше одного экземпляра HTML приложения одновременно. Возможные значения:

Yes	Может быть запущен только один экземпляр приложения.
No	Может быть запущенно несколько экземпляров приложения одновременно. (Значение по умолчанию).

Атрибут и свойство sysMenu

Определяет, отображается ли системное меню в HTML приложении. Системное меню HTA обозначается программной иконкой в левом углу панели заголовка. Системное меню HTA показывает все команды, входящие в стандартное системное меню Windows, включая "Восстановить", "Переместить", "Размер", "Свернуть", "Развернуть", и "Закрыть". Возможные значения:

Yes	Системное меню отображается в панели заголовка. (Значение по умолчанию).
No	Системное меню не отображается в панели заголовка.

Атрибут и свойство version

Определяет номер версии HTML приложения.

Атрибут и свойство windowState

Определяет начальные размеры окна HTML приложения. Возможные значения:

Normal	Размер окна - стандартный размер для Microsoft Internet Explorer. (Значение по умолчанию).
Minimize	Появляется только заголовок окна на панели задач.
Maximize	Окно появляется развёрнутым во весь экран.

Пример

В этом маленьком примере объединены объектная модель, разметка страницы (HTML), каскадный лист стилей (CSS), Javascript и элементы WSH.

В папке "MyHTA_files" размещаются следующие файлы:

• text.txt- любой текстовый файл;
• test.js- файл, содержащий только одну строку: WScript.Echo ("Hello script!");
• MyHTA.ico - любая иконка;
• MyHTA.css - файл стилей;
• MyHTA.js- файл, содержащий все скрипты.

Листинг файла "MyHTA.hta"

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Моё HTA-приложение</title>
  <hta:application
      Id = "oHTA"
      ApplicationName = "MyTestApplication"
      Border = "Dialog"
      Icon = "MyHTA_files\MyHTA.ico"
      InnerBorder = "No"
      MaximizeButton = "No"
      MinimizeButton = "No"
      Scroll = "Auto"
      Selection = "No"
      ShowInTaskBar = "No"
      SingleInstance = "Yes"
      Version = "1.1"
    />
   <script src="MyHTA_files/MyHTA.js" type="text/javascript"></script>
   <link href="MyHTA_files/MyHTA.css" rel="stylesheet" type="text/css" media="screen" />
  </head>
  <body onload="WindowOnLoad()">
    <table>
      <tr class="Header_Row">
        <td colspan="2">
          <h1>Моё HTA-приложение</h1>
        </td>
      </tr>
      <tr class="Content_Row">
        <td id="StaticMenu_Cell">
          <input id="CommandPrompt" type="button" value="Командная строка" onclick="RunApplication(this.id)" />
          <input id="TestScript" type="button" value="Сценарий test.js" onclick="RunApplication(this.id)" />
          <input id="TextFile" type="button" value="Файл test.txt" onclick="RunApplication(this.id)" />
          <input id="TempDir" type="button" value="Папка Temp" onclick="RunApplication(this.id)" />
          <input id="Attributes" type="button" value="Атрибуты (Свойства)" onclick="RunApplication(this.id)" />
        </td>
        <td id="DynamicContent_Cell">
          <div id="DynamicContent_Div">
            Добро пожаловать
          </div>
        </td>
      </tr>
      <tr class="Footer_Row">
        <td>
          <div id="Version_Div">
            Версия: X.X
          </div>
        </td>
        <td>
          <div id="Button_Div">
            <input id="CloseButton" type="button" value="Закрыть" onclick="window.close()" />
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>

Листинг файла "MyHTA_files\MyHTA.js"

//  Процедура инициализации окна формы
function WindowOnLoad () 
  { var iWidth = 800, iHeight = 500; // Размер окна
   
    // Изменение размера окна и его центрирование
    var iLeft = (  screen.availWidth - iWidth)  / 2;
    var iTop  = ( screen.availHeight - iHeight) / 2;
    focus();
    resizeTo (iWidth, iHeight);
    moveTo ( iLeft, iTop );
    // Вывод версии приложения на форму
    Version_Div.innerHTML = "Версия: " + oHTA.Version;
  }

var attributes = ["id","",
"applicationName","",
"border","Thick",
"borderStyle","Normal",
"caption", "Yes",
"commandLine","Yes",
"contextMenu","",
"icon","",
"innerBorder","Yes",
"maximizeButton","Yes",
"minimizeButton","Yes",
"navigable","No",
"scroll","Yes",
"scrollFlat","No",
"selection","Yes",
"showInTaskBar","Yes",
"singleInstance","No",
"sysMenu","Yes",
"version","",
"windowState","Normal" ];


function RunApplication(sApplication) {
  var sCommandLine = "";
  var oShell = new ActiveXObject("WScript.Shell");
  switch (sApplication)
   { case "CommandPrompt":
      sCommandLine = "%ComSpec%";
      DynamicContent_Div.innerHTML = "Командная строка открыта";
      break;
     case "TestScript":
       if (CheckFile(oShell.CurrentDirectory + "\\MyHTA_files\\Test.js") )
         { sCommandLine = 'WScript "' + oShell.CurrentDirectory + '\\MyHTA_files\\Test.js"';
             DynamicContent_Div.innerHTML = "Скрипт " + oShell.CurrentDirectory + 
             "\MyHTA_files\Test.js" + " выполнен"; 
         }
       else DynamicContent_Div.innerHTML = "Файл не найден";
       break;
     case "TextFile":
       if ( CheckFile(oShell.CurrentDirectory + "\\MyHTA_files\\Test.txt") )
         { DynamicContent_Div.innerHTML = "<div>Выберите режим отображения содержимого файла:<ul>" + 
             '<li class="NormalLink" id="TextFile_Notepad" onclick="RunApplication(this.id)">Открыть файл в блокноте</li>' +
             '<li class="NormalLink" id="TextFile_Form" onclick="RunApplication(this.id)">Отобразить здесь</li></div>'; 
         }
       else  DynamicContent_Div.innerHTML = "Файл не найден";
       break;
     case "TextFile_Form":
       DynamicContent_Div.innerHTML = '<div style="float: left; font-size: 10pt;">Текстовый файл: ' + 
         oShell.CurrentDirectory + '\\MyHTA_files\\Test.txt</div>' +
         '<div class="NormalLink" style="float: right;" id="TextFile_Close" onclick="RunApplication(this.id)">Закрыть</div>' +
         '<pre class="TextFile">' +
         ReadFile(oShell.CurrentDirectory + "\\MyHTA_files\\Test.txt") +
         "</pre>";
       break;
     case "TextFile_Notepad":
       sCommandLine = 'Notepad "' + oShell.CurrentDirectory + '\\MyHTA_files\\Test.txt"';
       DynamicContent_Div.innerHTML = "Файл " + oShell.CurrentDirectory + "\\MyHTA_files\\Test.txt" + " открыт в блокноте";
       break;
     case "TextFile_Close":
       DynamicContent_Div.innerHTML = "Добро пожаловать";
       break;
     case "TempDir":
       sCommandLine = "Explorer " + oShell.ExpandEnvironmentStrings("%Temp%");
       DynamicContent_Div.innerHTML = "Папка временных файлов открыта";
       break;
     case "Attributes":
       var s = '<b>Атрибуты ( Свойства )</b><div class="attr">';
       for (var i=0; i < attributes.length; i+=2)
            s += '<i>'+ attributes[i]+ '</i> = <span>' + 
            (oHTA[attributes[i]] || attributes[i+1]) + '</span><br />';
        DynamicContent_Div.innerHTML = s + '</div>';
       break;
     case "default":
       sCommandLine ="";
       break;
   }
 if (sCommandLine.length > 0 ) oShell.Run (sCommandLine,1,0 );
}

function ReadFile(sFileName)
  { var oFSO = new ActiveXObject("Scripting.FileSystemObject");
    var oInFile = oFSO.OpenTextFile(sFileName, 1, false, 0)
    var sFileContent = oInFile.ReadAll();
    oInFile.Close();
    return sFileContent;
  }

function CheckFile(sFilePath)
  { var oFSO = new ActiveXObject("Scripting.FileSystemObject")
    return oFSO.FileExists(sFilePath) ? true : false;
  }

Листинг файла "MyHTA_files\MyHTA.css"

body
  { background-color: buttonface; font-family: Tahoma; }
  
h1 { font-size: 18px; margin: 0px;}

table
  { height: 100%;  width: 100%; }

.Header_Row
  { height:40px; }

.Content_Row
  { vertical-align: top; }

#StaticMenu_Cell
  { width: 20%;  text-align: center; }

#StaticMenu_Cell input
 { width: 150px;  margin: 2px; }

#DynamicContent_Cell
  { margin: 2px; }

#DynamicContent_Cell #DynamicContent_Div
  { text-align: center; }

.NormalLink
  { font-family: Tahoma;
    font-size: 10pt;
    color: navy;
    cursor: pointer;
    text-align: left;
    padding-right: 20px
  }

.NormalLink:hover
  { color: red; }

#DynamicContent_Cell #DynamicContent_Div .TextFile
  { font-family: Tahoma;
    font-size: 10pt;
    text-align: left;
    margin-top: 10px;
  }

.Footer_Row
  {  height:30px; }

#Version_Div
  { float: left; }

#Button_Div
  { float: right; }

.attr 
  { text-align: left; 
    font-size: 10pt; 
    margin-left:20px;
  }

Загрузить пример