DroidScript

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

© 2016-2018 Автор материалов - Александр Страшко admin@starport.ru
DroidScript
инструменты для мобильной разработки

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

© 2016-2018 Автор материалов - Александр Страшко admin@starport.ru
Qt Quick  
Дата изменения 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.

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

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

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

    После успешной загрузки в папке проекта появится папка qmlcore

  4. Для генерации каркаса приложения выполните команду:

    python qmlcore/build --boilerplate

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

  5. Для сборки (компиляции) приложения введите команду

    python qmlcore/build

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

  6. Для запуска приложения откройте в браузере index.html.

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

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

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

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

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

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

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

Qt Quick