DroidScript

Разделение и упорядочивание QML-кода

DroidScript
инструменты для мобильной разработки

Разделение и упорядочивание QML-кода

Оглавление  

Возьмём в качестве примера код редактора из статьи Редактор QML-кода с живым просмотром. Для лучшей на наглядности удалим комментарии.

main.qml

Сначала выберем общую стратегию - править код в данном файле или создать для этого копию. Если работа будет происходить в копии, то в файле проекта main.cpp в качестве ресурса нужно указать его имя вместо main.qml. Мы же выберем первый вариант.

Для каждого компонента создадим отдельные файлы (требование QML):

MainWindow.qml
MySplitView.qml
CodeView.qml
ResultView.qml

Также создадим ресурсные файлы для стиля и функций JavaScript:

style.js
func.js

Ниже показан один из подходов по созданию и использованию стилей.

style.js

MainWindow.qml

Значения свойств теперь заданы не литералами, а в виде свойств подключенного ресурса style.js. Web-разработчикам такая конструкция может показаться какой-то нелепой имитацией CSS, но, заметим, что в основе QML лежит ООП, а не HTML.

Инструкция .pragma library объявляет ресурс в качестве библиотеки. Библиотека защищена от повторного включения и имеет своё пространство имён. Для доступа к QML объектам в qml-файле, в который импортируется библиотека, их нужно передать через параметры функций. Без инструкции .pragma library ресурс имеет общее пространство имён с QML, что позволяет напрямую обращаться к существующим в нём объектам.

MySplitView.qml

ResultView.qml

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

Создадим свой сигнал codeChanged, в параметре которого передадим ссылку на текст области ввода.

CodeView.qml

Функции JavaScript также копируются практически без изменений, за исключением добавления параметра p_text.

func.js

После выполнения всех действий в главном файле main.qml остаётся подправить блок импорта, изменить названия блоков на названия компонентов, которые в точности соответствуют названиям их файлов без расширений, удалить ненужный код и вынести обработку сигнала из блока MySplitView в типовой блок Connections.

main.qml

Теперь код главного файла выглядит просто и красиво.

В показанном примере компоненты (MainWindow, MySplitView и др.) являются полностью готовыми к использованию. Но чаще их делают в виде заготовок для удобного повторного использования. Компонент чем-то напоминает класс: в его блоке определяются общие свойства и поведение, которые при использовании могут быть настроены индивидуально.

Оглавление  
© 2016 droidscript.ru admin@droidscript.ru