PureQML: фреймворк для запуска QML в браузере

07.01.2018

PureQML - это декларативная интерфейсная платформа, предназначенная для облегчения создания сложных пользовательских интерфейсов с использованием языка QML. Платформа также позволяет запускать pureqml-код в браузерах. Да, pureqml имеет ряд расширений, и по этой причине не идентичен QML. С одной стороны эти расширения позволяют упростить ряд конструкций QML и кодирование, например, осуществить непосредственную обработку событий элементами без использования MouseArea или при помощи новых свойств настроить объект без применения других объектов, таких как Rectangle. С другой стороны, данная несовместимость усложняет разработку из-за необходимости производить адаптацию QML в PureQML и наоборот. В среде разработки Qt Creator, в общем случае, невозможно запустить pureqml-код и придётся создавать отдельную версию интерфейса для компиляции её под браузеры.

Перейдём к установке и запуску PureQML на Windows.

Модули PureQML можно загрузить из GitHub, а для работы PureQML требуется Python 2.x. Проверить наличие в системе и доступность в командной строке cmd Git и Python можно командами вывода их версий:

git --version

python -V

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

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

Создайте папку проекта hellopureqml.
Запустите командную строку в этой папке. Для этого можно зажать кнопку Shift и щёлкнуть правой кнопкой мыши на названии папки. Откроется контекстное меню, в котором выберите опцию "Открыть окно команд".
Для загрузки ядра PureQML в командной строке выполните команду:

git clone https://github.com/pureqml/qmlcore

После успешной загрузки в папке проекта появится папка qmlcore
Для генерации каркаса приложения выполните команду:

python qmlcore/build --boilerplate

В папке проекта появится файл манифеста .manifest (возможно, пустой) и директория src, с находящимся в ней файлом исходного кода app.qml.
Для сборки (компиляции) приложения введите команду

python qmlcore/build

В случае успеха в папке проекта появится папка build.web, в которой среди прочих долны находиться три необходимых для запуска приложения файла - index.html, modernizr-custom.js и qml.app.js (остальные файлы можно удалить)
Для запуска приложения откройте в браузере index.html.

Ядро qmlcore содержит минимальный набор элементов. Остальные находятся в модуле controls:

git clone https://github.com/pureqml/controls

После этого откройте файл исходного кода и добавьте в него блок:

Button{
    paddings.all: 8;
    text: "Test";
}

Скомпилируйте проект командой python qmlcore/build и откроте index.html в браузере для проверки изменений.

Дополнительную информацию можно посмотреть в документации на официальной странице или уточнить у разработчиков на канале Telegram.

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

actech