QML application framework on Ubuntu OS and ubuntuosqml framework

QML application framework on Ubuntu OS and ubuntuosqml framework

When writing a QML application, we sometimes need to consider how we can use a good framework to complete our application in advance. How many pages are there in our application and how the navigation between pages looks like. This is very important for us to design our applications at the beginning. In this article, we will introduce how to design our application framework on the upper layer.

1) Use tab to create a plane navigation application. We can use our Ubuntu SDK to create an application named TabApp:


 

In this way, we have generated one of our most basic applications. We set the application width and height to the following values:

    width: units.gu(50)    height: units.gu(75)

At the same time, we also modify our Main. qml as follows:

import QtQuick 2.0import Ubuntu.Components 1.1import Ubuntu.Components.ListItems 1.0 as ListItemMainView {    // objectName for functional testing purposes (autopilot-qt5)    objectName: "mainView"    // Note! applicationName needs to match the "name" field of the click manifest    applicationName: "tabapp.ubuntu"    /*     This property enables the application to change orientation     when the device is rotated. The default is false.    */    //automaticOrientation: true    // Removes the old toolbar and enables new features of the new header.    useDeprecatedToolbar: false    width: units.gu(50)    height: units.gu(75)    Tabs {        id: tabs        Tab1 {            objectName: "Tab1"        }        Tab2 {            objectName: "Tab2"        }    }}

Here we define two Tab pages: Tab1 and Tab2. Their content is:

import QtQuick 2.0import Ubuntu.Components 1.1Tab {    title: i18n.tr("Tab 1")    Action {        id: reloadAction        text: "Reload"        iconName: "reload"        onTriggered: {            console.log("reload is clicked")        }    }    page: Page {        Label {            anchors.centerIn: parent            text: i18n.tr("This is page one")        }        tools: ToolbarItems {            ToolbarButton {                action: reloadAction            }        }    }}

import QtQuick 2.0import Ubuntu.Components 1.1Tab {    title: i18n.tr("Tab 2")    page: Page {        Label {            anchors.centerIn: parent            text: i18n.tr("This is page two")        }    }}

This is the simplest Tab navigation application. Run:



All source code can be downloaded at the address:
Git clone https://gitcafe.com/ubuntu/TabApp1.git

We can also modify Main. qml as follows:

import QtQuick 2.0import Ubuntu.Components 1.1import Ubuntu.Components.ListItems 1.0 as ListItemMainView {    // objectName for functional testing purposes (autopilot-qt5)    objectName: "mainView"    // Note! applicationName needs to match the "name" field of the click manifest    applicationName: "tabapp.ubuntu"    /*     This property enables the application to change orientation     when the device is rotated. The default is false.    */    //automaticOrientation: true    // Removes the old toolbar and enables new features of the new header.    useDeprecatedToolbar: false    width: units.gu(50)    height: units.gu(75)    Action {        id: reloadAction        text: "Reload"        iconName: "reload"        onTriggered: {            console.log("reload is clicked")        }    }    Tabs {        id: tabs        Tab {            title: i18n.tr("Simple page")            page: Page {                Label {                    id: label                    anchors.centerIn: parent                    text: "A centered label"                }                tools: ToolbarItems {                    ToolbarButton {                        action: reloadAction                    }                }            }        }        Tab {            id: externalTab            title: i18n.tr("External")            page: Loader {                id: loader                anchors.fill: parent                source: (tabs.selectedTab === externalTab) ? Qt.resolvedUrl("ExternalPage.qml") : ""                onLoaded: {                    console.log( loader.source + " is loaded")                }            }        }        Tab {            title: i18n.tr("List view")            page: Page {                ListView {                    clip: true                    anchors.fill: parent                    model: 20                    delegate: ListItem.Standard {                        iconName: "compose"                        text: "Item "+modelData                    }                }            }        }    }}

Run our application:



All source code is in:
Git clone https://gitcafe.com/ubuntu/TabApp2.git

If we want to use pagestack In the Tab architecture, we must make some modifications to our application. We can only push Tabs as the first page to the PageStack stack. The specific implementation of Main. qml is as follows:

import QtQuick 2.0import Ubuntu.Components 1.1import Ubuntu.Components.ListItems 1.0 as ListItemMainView {    // objectName for functional testing purposes (autopilot-qt5)    objectName: "mainView"    // Note! applicationName needs to match the "name" field of the click manifest    applicationName: "tabapp.ubuntu"    /*     This property enables the application to change orientation     when the device is rotated. The default is false.    */    //automaticOrientation: true    // Removes the old toolbar and enables new features of the new header.    useDeprecatedToolbar: false    width: units.gu(50)    height: units.gu(75)    Action {        id: reloadAction        text: "Reload"        iconName: "reload"        onTriggered: {            console.log("reload is clicked")        }    }    PageStack {        id: pageStack        Component.onCompleted: push(tabs)        Tabs {            id: tabs            Tab {                title: "Tab 1"                page: Page {                    Button {                        anchors.centerIn: parent                        onClicked: pageStack.push(page3)                        text: "Press"                    }                }            }            Tab {                title: "Tab 2"                page: Page {                    Label {                        anchors.centerIn: parent                        text: "Use header to navigate between tabs"                    }                }            }        }        Page {            id: page3            visible: false            title: "Page on stack"            Label {                anchors.centerIn: parent                text: "Press back to return to the tabs"            }        }    }}

Run our application. We can see that:


As shown above, there is a Page on stack ". You can press the return arrow to return to the previous page.
Specific Code:
Git clone https://gitcafe.com/ubuntu/TabApp3.git
2) use PageStack for navigation
This section describes how to use PageStack to manage our pages. After entering the next page to complete your work, you can press the return arrow in the title bar to return to the previous page. Follow the same steps above to create a project called PageStack. The Design of Main. qml is as follows:

import QtQuick 2.0import Ubuntu.Components 1.1import Ubuntu.Components.ListItems 1.0 as ListItem/*!    \brief MainView with a Label and Button elements.*/MainView {    // objectName for functional testing purposes (autopilot-qt5)    objectName: "mainView"    // Note! applicationName needs to match the "name" field of the click manifest    applicationName: "pagestack.ubuntu"    /*     This property enables the application to change orientation     when the device is rotated. The default is false.    */    //automaticOrientation: true    // Removes the old toolbar and enables new features of the new header.    useDeprecatedToolbar: false    width: units.gu(50)    height: units.gu(75)    PageStack {        id: pageStack        Component.onCompleted: {            push(page0)        }        Page {            id: page0            title: i18n.tr("Root page")            visible: false            Column {                anchors.fill: parent                ListItem.Standard {                    text: i18n.tr("Page one")                    onClicked: pageStack.push(page1, {color: UbuntuColors.orange})                    progression: true                }                ListItem.Standard {                    text: i18n.tr("Page two")                    onClicked: pageStack.push(Qt.resolvedUrl("Page2.qml"))                    progression: true                }            }        }        Page {            title: "Rectangle"            id: page1            visible: false            property alias color: rectangle.color            Rectangle {                id: rectangle                anchors {                    fill: parent                    margins: units.gu(5)                }            }        }    }}

Here we create a PageStack when the application is started, and press "page0" into the stack at the same time. Make it the first page. In "page0", we have two list items to go to the next page.
Run our application:


We can see a returned arrow on each page.
The source code of the entire project is as follows:
Git clone https://gitcafe.com/ubuntu/PageStack.git