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

import QtQuick 2.9
import QtQuick.Controls 1.4
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

ApplicationWindow {

property var objList

id: idRoot
    visible: true
    width: 640
    height: 280

SplitView {
        anchors.fill: parent
        orientation: Qt.Horizontal

Rectangle {
            width: 200
            Layout.minimumWidth: 200
            color: "#ff333333"

ScrollView {
                anchors.fill: parent

TextArea {
                    id: idSource
                    objectName: "myTextEdit"
                    anchors.fill: parent
                    color: "silver"
                    font.pointSize: 10
                    text: "Введите QML-код"
                    textFormat: Text.RichText
                    onTextChanged: sourceChanged()
                }
            }
        }
        Rectangle {
            id: idResult
            Layout.minimumWidth: 200
            height: idRoot.height
            color: "#ff663333"
        }
    }

function destroyChildren(){

try{
            objList.destroy()
        }catch(e){}

}

function showResult(){

try{
            objList = Qt.createQmlObject(idSource.getText(0, idSource.length), idResult)

} catch(e){}
    }

function sourceChanged(){

destroyChildren()
        showResult()
    }
}

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

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

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

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

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

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

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

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

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

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

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

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