Assemble different qml files in one Qt quick app

Use qml to define GUI, we can separate the whole GUI into different parts. One main.qml file indicates the whole layout, and the other qml files define partial GUI.

I create a project called assemble, the main.qml is defined as following:

import QtQuick 2.1
import QtQuick.Window 2.1
import QtQuick.Controls 1.1
import QtQuick.XmlListModel 2.0
Window {
    title: "Assemble Demo"
    width: 538 + frame.margins * 2
    height: 360 + frame.margins * 2
    ToolBar {
        id: toolbar
        width: parent.width
        Text {
            text: "Assemble Demo"
        }
    }
    SystemPalette {id: syspal}
    color: syspal.window
    Rectangle {
        id: r1
        anchors.top: toolbar.bottom
        anchors.right: parent.right
        anchors.left: parent.left
        anchors.bottom:  parent.bottom
        anchors.margins: 16
        TabView {
            id:frame
            focus:true
            property int margins: Qt.platform.os === "osx" ? 16 : 0
            height: 120
            anchors.right: parent.right
            anchors.left: parent.left
            anchors.margins: margins
            Tab {
                title: "Tab1"
                source: "menu.qml"
            }
            Tab {
                title: "Tab2"
                source: "menu.qml"
            }
        }
    }
}

Note, in above two Tab elements, I use source attribute to include external menu.qml file.

Below is menu.qml file:

import QtQuick 2.0
import QtQuick.Controls 1.1
Rectangle {
    Button {
        id: createMenu
        text: "Create"
    }
    Button {
        id: loadMenu
        anchors.left: createMenu.right
        text: "Load"
    }
}

Also, need to add two qml files into resources.qrc.

Now have a look at the screenshot.