Гайд - [Библиотека] Neutron.ahk - Веб-интерфейс для AutoHotkey / html ahk

Ну добро пожаловать User в Neutron

Neutron предоставляет мощный набор инструментов для создания пользовательских интерфейсов на основе HTML с помощью AutoHotkey. В нем используется движок Trident, известный по использованию в Internet Explorer, благодаря его глубокой интеграции с операционной системой Microsoft Windows и широкой доступности в различных системах.

Примечательные особенности:
Создавайте графические интерфейсы с помощью HTML, CSS, JS и AHK, работающих вместе.
Создание отзывчивых пользовательских интерфейсов, которые разворачиваются при изменении размера окна и прокручиваются, когда элементы уходят из поля зрения.
Полная настройка строки заголовка, включая шрифты и цвета.
Создавайте интерфейсы лучшего качества с помощью веб-фреймворков, таких как Bootstrap.
Компилируйте ресурсы в свой скрипт и получайте к ним доступ без извлечения. Очень полезно для включения изображений в скрипт!

Начало работы с Neutron

Библиотека Neutron разработана таким образом, чтобы быть минимально инвазивной и легко включаться в существующие сценарии без существенных изменений. Графические интерфейсы Neutron создаются и управляются аналогично родным графическим интерфейсам AutoHotkey, но имеют больший функционал и гибкость настройки!

AutoHotKey:

; --- Создание GUI ---
; Традиционный синтаксис:
Gui, name:New,, title
Gui, name:Add, ...
; Neutron синтаксис:
name := new NeutronWindow("html", "css", "js", "title")
; или
name := new NeutronWindow("<!DOCTYPE html><html>full html document</html>")
; или
name := new NeutronWindow()
name.Load("file.html")

; --- Присваивание параметров окну  ---
; Традиционный синтаксис:
Gui, name:+Option +Option
; Neutron синтаксис:
name.Gui("+Option +Option")

; --- Показывает графический интерфейс ---
; Традиционный синтаксис:
Gui, name:Show, w800 h600 ; ширина и высота интерфейса
; Neutron синтаксис:
name.Show("w800 h600")

; --- Обработка событий ---
; Традиционный синтаксис:
Gui, name:+LabelNamedGui
return
NamedGuiClose:
NamedGuiEscape:
NamedGuiDropFiles:
MsgBox, Events!
return
; Neutron синтаксис:
name.Gui("+LabelNamedGui")
return
NamedGuiClose:
NamedGuiEscape:
NamedGuiDropFiles:
MsgBox, Events!
return

; --- Скрытие графического интерфейса ---
; Традиционный синтаксис:
Gui, имя:Hide
; Neutron синтаксис:
name.Hide()

; --- Очистка\отключение графического интерфейса ---
; Традиционный синтаксис:
Gui, name:Destroy
; Neutron синтаксис:
name.Destroy()

Поскольку все элементы управления теперь создаются с помощью HTML, который вы передаете в Neutron, вам понадобится новый способ установки обработчиков событий, таких как gLabels кнопок, знакомых вам по родным графическим интерфейсам. Neutron предоставляет HTML/JS способ вызова функций. Это очень удобный метод для установки обработчиков событий.

Функция AHK будет принимать любые параметры, переданные JavaScript, с дополнительным параметром "neutron", переданным первым, который содержит экземпляр Neutron, вызвавший событие.

AutoHotKey:

neutron := new NeutronWindow("<button onclick='ahk.Clicked(event)'>Hi</button>")
neutron.Show()
return

Clicked(neutron, event)
{
    MsgBox, % "Ты нажал: " event.target.innerText
}

Neutron предлагает ряд сокращений ( Это очень круто ) и вспомогательных методов, облегчающих взаимодействие со страницей из AutoHotkey. Ниже приведен их неполный список:

AutoHotKey:

neutron := new NeutronWindow("<span>a</span><span>b</span><span>c</span>")

; neutron.doc
; Эквивалент "document" в JS, используется для доступа к содержимому страницы
MsgBox, % neutron.doc.body.outerHTML

; neutron.wnd
; Эквивалент "window" в JS, используется для доступа к функциям и переменным JS
neutron.wnd.alert("Hi")

; neutron.qs("CSS Selector")
; Эквивалент "document.querySelector" в JS
element := neutron.qs(".main span")

; neutron.qsa("CSS Selector")
; Эквивалент "document.querySelectorAll" в JS
elements := neutron.qsa(".main span")

; neutron.Each(collection)
; Позволяет перечислять JS массивы / коллекции элементов
for index, element in neutron.Each(elements)
    MsgBox, % index ": " element.innerText

; neutron.GetFormData(formElement)
; Более простая обработка данных формы
formData := neutron.GetFormData(formElement)
MsgBox, % formData.fieldName ; Pull a single field
for name, value in formData ; Iterate all fields
    MsgBox, %name%: %value%

; Эскейп-значения для размещения в HTML
; neutron.EscapeHTML("unsafe text")
neutron.qs(".main").innerHTML := "<div>" neutron.EscapeHTML("a<'&>z") "</div>"
; neutron.FormatHTML("format string", "unsafe text 1", "unsafe text 2", ...)
neutron.qs(".main").innerHTML := neutron.FormatHTML("<div>{}</div>", "a<'&>z")

О Neutron можно многое узнать из его исходного текста и примеров. Исходный текст Neutron подробно прокомментирован, и многие методы имеют в комментариях рядом с собой полные запускаемые примеры использования.

Примеры Neutron

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

Template

Complexity: 1 / 5

|Этот пример предназначен для того, чтобы показать, как использовать страницу шаблона Neutron по умолчанию. Поскольку в нем используется шаблон по умолчанию, он также является самым простым примером для использования и настройки новичком. Он также призван показать, как можно применить собственную тематику к шаблону, не изменяя его напрямую, путем применения CSS-стилей к встроенным элементам строки заголовка шаблона.

Изображения

Complexity: 2 / 5

|Этот пример демонстрирует отображение изображений через многостраничный интерфейс с вкладками. При компиляции эта галерея изображений останется в exe-файле без необходимости извлекать ресурсы изображений для использования их на странице.

Complexity: 3 / 5

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

Complexity: 1 / 5

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

Компиляция сценариев Neutron

Некоторые скрипты Neutron могут требовать множество дополнений, таких как HTML, CSS, JS, SVG и файлы изображений. Следуя нескольким правилам, ваш сценарий Neutron может быть скомпилирован в переносимый exe-файл, который содержит все эти зависимости внутри, без необходимости извлекать их во временный каталог для использования. Следуйте этим правилам, чтобы ваш скрипт работал наилучшим образом при компиляции:

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

In AHK: neutron.Load("index.html")
In HTML: <script src="index.js">, <link href="index.css" rel="stylesheet">, <img src="image.jpg">

3. Расположите FileInstall для каждого зависимого файла где-нибудь в сценарии. Поместите это место так, чтобы до него нельзя было добраться, например, чуть ниже "return" после раздела автовыполнения.

Отказ от авторских прав

Основные компоненты этой библиотеки выпускаются под лицензией MIT License, но некоторые примеры содержат код сторонних разработчиков, где могут применяться другие или дополнительные лицензионные ограничения.
Examples/Bootstrap/bootstrap.min.css

AutoHotKey:

/*!
 * Bootstrap v4.5.0 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

Examples/Bootstrap/bootstrap.min.js

AutoHotKey:

/*!
  * Bootstrap v4.3.1 (https://getbootstrap.com/)
  * Copyright 2011-2019 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */

Examples/Bootstrap/jquery.min.js

AutoHotKey:

/*! jQuery v3.5.1 | (c) JS Foundation and other contributors | jquery.org/license */

Слушайте и смотрите о Neutron на YouTube, из записи вебинара, проведенного в мае 2020 года. Это было сделано для очень ранней версии Neutron, но она все еще содержит многие из основных концепций.

Переведено и дополнено SiresMacro
Оригинал статьи https://www.autohotkey.com/boards/viewtopic.php?t=76865 (модеры не баньте)

Последнее редактирование: 24 Окт 2022

Реакции: try0raw, Roman Grudov, baillora и 2 других

Нажмите для раскрытия...

Поиск

Поиск

Гайд [Библиотека] Neutron.ahk - Веб-интерфейс для AutoHotkey / html ahk

Ну добро пожаловать User в Neutron

Начало работы с Neutron

Примеры Neutron

Компиляция сценариев Neutron

Отказ от авторских прав

Вложения

IM_UZBEK

Участник

SIRESMACRO

Новичок

degrando

Известный

_doomsday_

Новичок

SIRESMACRO

Новичок

Похожие темы

Гайд [Библиотека] Neutron.ahk - Веб-интерфейс для AutoHotkey / html ahk

Ну добро пожаловать User в Neutron​

Начало работы с Neutron​

Примеры Neutron​

Компиляция сценариев Neutron​

Отказ от авторских прав​

Вложения

IM_UZBEK

Участник

SIRESMACRO

Новичок

degrando

Известный

_doomsday_

Новичок

SIRESMACRO

Новичок

Похожие темы

Ну добро пожаловать User в Neutron

Начало работы с Neutron

Примеры Neutron

Компиляция сценариев Neutron

Отказ от авторских прав