HTML-приложения

До определенного момента развития информационных технологий программы могли создавать только профессионалы в области программирования, с появлением и последующим развитием скриптовых языков, а также браузерных технологий, создание приложений стало более простым для обычного пользователя компьютера. Итак, HTA (HTML Application) — это простая технология, позволяющая создавать полезные приложения даже без знания серьезных языков программирования.

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

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

HTA-приложения можно писать в любом текстовом редакторе или специализированном HTML-конструкторе. Я, например, пользуюсь программой Notepad2.

Чтобы создать новое приложение, откроем блокнот, скопируем туда структуру HTML документа и сохраним как htm-файл.

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

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

Расширение .hta указывает системе, как работать с приложением, а специальный тэг указывает, как отображать окно. Этот тэг предоставляет набор атрибутов, управляющих свойствами окна приложения.

Итак, чтобы указать HTA-приложению, как отобразить окно программы, необходимо задать атрибуты тега .

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

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

Содержит имя приложения. Если свойствоSingleInstanceустановлено в «True», то значение ApplicationName автоматически проверяется перед запуском экземпляра приложения. Чтобы проверка была успешной, значение ApplicationName должно быть уникальным. То есть, значение свойства ApplicationName используется для идентификации единственности запущенного приложения.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Так как HTA-приложения, по сути, являются HTML-страничками, то в них можно использовать скриптовые языки. Так как я хорошо знаю язык Visual Basic Script , то все последующие примеры будут основаны на нем, тем не менее Вы можете использовать как VBS, так и JS для создания своих приложений.

Как быстро создать десктопное приложение на HTML, CSS и JavaScript

Можно ли использовать HTML, CSS и JavaScript для создания десктопных приложений?

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

Electron

Electron может быть использован для создания десктопных приложений, также эти приложения будут мультиплатформенными — Windows, Mac, Linux и другие.

Electron объединяет Chromium и Node.js в одну среду исполнения. Это позволяет нам запускать код HTML, CSS и JavaScript в виде десктопного приложения.

Electron Forge

Если Electron используется напрямую, то перед сборкой приложения потребуется определённая ручная настройка. Также, если вы хотите использовать Angular, React, Vue или любой другой фреймворк или библиотеку, вам нужна будет ручная настройка.

Electron Forge значительно упрощает все вышеперечисленное.

Он предоставляет шаблонные приложения с Angular, React, Vue и другими фреймворками, что позволяет избежать дополнительных танцев с бубном.

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

Предварительная подготовка

Убедитесь, что у вас установлен Node.js. Если нет, то его можно скачать отсюда. Установите Electron Forge глобально, используя следующую команду:

Начнём с приложения

Используйте следующую команду для создания вашего приложения:

simple-desktop-app-electronicjs — это название приложения.

Потребуется некоторое время, чтобы команда, указанная выше, отработала. После завершения предыдущего процесса запустите приложение с помощью следующих команд:

Это должно открыть окно как на скрине ниже:

Разберёмся в структуре и коде

Приложение имеет определенную структуру папок. Здесь я перечислю некоторые важные моменты в этой структуре папок.

package.json

Содержит информацию о приложении, которое вы создаете, все зависимости, необходимые для приложения, и несколько скриптов. Некоторые из скриптов уже предварительно настроены, но вы также можете добавлять новые.

Путь config.forge содержит все конфигурации конкретно для Electron. Например, make-target используется для указания целевых файлов для различных платформ, таких как Windows, Mac или Linux.

Также в package.json есть «main»: «src/index.js» , который указывает, что src/index.js является входной точкой приложения.

src/index.js

Согласно package.json , index.js является основным скриптом. Процесс, который запускает основной скрипт, называется главным процессом. Таким образом, основной процесс запускает скрипт index.js .

Основной процесс нужен для отображения элементов интерфейса. Это делается путем создания страниц. Каждая созданная страница выполняется в процессе, называемом процессом отрисовки.

Главный процесс и процесс отрисовки

Основное предназначение главного процесса — создание страниц с помощью экземпляра BrowserWindow . Экземпляр BrowserWindow использует процесс отрисовки для запуска каждой страницы.

Любое приложение может иметь только один главный процесс, но много процессов визуализации.

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

abcd.html показан в качестве второй веб-страницы в приведенной выше архитектуре. Но в нашем коде у нас не будет второй веб-страницы.

src/index.html

index.js загружает файл index.html в новый экземпляр BrowserWindow .

Это означает, что index.js создает новое окно GUI и загружает его со страницей index.html . Страница index.html запускается в своем собственном процессе отрисовки.

Код в index.js с пояснениями

Большая часть кода, созданного в index.js , содержит хорошие комментарии, объясняющие, что происходит. Здесь я упомяну несколько ключевых моментов, которые следует отметить в index.js :

Приведенный выше фрагмент кода просто создает экземпляр BrowserWindow и загружает index.html в BrowserWindow . Вы увидите, что app часто используется в коде. Например, возьмите приведенный ниже фрагмент:

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

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

Создадим десктопное приложение конвертера температур

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

Сначала давайте установим Bootstrap с помощью следующей команды:

Скопируйте следующий код в src/index.html:

Приведенный выше код выполняет следующие действия:

1. Создаёт поле ввода текста с id=»celcius» . Всякий раз, когда в это поле что-то вводится, вызывается функция celciusToFahrenheit() .
2. Создаёт поле ввода текста с id=»fahrenheit» . Всякий раз, когда в это поле что-то вводится, вызывается функция fahrenheitToCelcius() .
3. Когда в поле ввода «По Цельсию» вводится значение, в поле «По Фаренгейту» показывается та же температура, но в Фаренгейтах.
4. Когда в поле ввода «По Фаренгейту» вводится значение, в поле «По Цельсию» показывается та же температура, но в Цельсиях.

2 функции, которые выполняют преобразование температуры, будут храниться в renderer.js .

Создайте файл с именем renderer.js внутри src . Скопируйте в него следующий код:

Функция celciusToFahrenheit() считывает значение в текстовом поле «По Цельсию», преобразует его в градусы Фаренгейта и записывает новую температуру в текстовое поле «По Фаренгейту».

Функция fahrenheitToCelcius() делает ровно наоборот.

Запускаем приложение

Запустите приложение, используя следующую команду:

Должно открыться следующее окно. Попробуйте ввести разные значения в инпуты.