Testing the toolbar

The toolbar in the test application has one menu entry that doesn’t currently do anything. However, it is really easy to modify the menu so that it will display a new page. In the main.qml file we just need to add the new page (SidePage) and then add the onClicked property to the menu item so that it will push the new page into the page stack (appWindow.pageStack).

import QtQuick 1.1
import com.nokia.meego 1.0

PageStackWindow {
    id: appWindow

    initialPage: mainPage

    MainPage {
        id: mainPage
    }

    SidePage {
        id: sidePage
    }

    ToolBarLayout {
        id: commonTools
        visible: true
        ToolIcon {
            platformIconId: "toolbar-view-menu"
            anchors.right: (parent === undefined) ? undefined : parent.right
            onClicked: (myMenu.status === DialogStatus.Closed) ? myMenu.open() : myMenu.close()
        }
    }

    Menu {
        id: myMenu
        visualParent: pageStack
        MenuLayout {
            MenuItem {
                text: qsTr("Sample menu item")
                onClicked: pageStack.push(sidePage)
            }
        }
    }
}

We can keep the MainPage.qml file as it is, maybe just change the welcome text to point to the toolbar.

import QtQuick 1.1
import com.nokia.meego 1.0

Page {
    tools: commonTools

    Label {
        id: label
        anchors.centerIn: parent
        text: qsTr("Use the toolbar!")
        visible: false
    }

    Button{
        anchors {
            horizontalCenter: parent.horizontalCenter
            top: label.bottom
            topMargin: 10
        }
        text: qsTr("Click here!")
        onClicked: label.visible = true
    }
}

Then we need to create the contents for the SidePage.qml file. Let’s just copy the contents from the TestApp2 project and modify that. Instead of using the commonTools toolbar from the main.qml file let’s create our own page specific toolbar and let’s just add one button there that allows us to go back to the MainPage by popping the SidePage from the page stack.

import QtQuick 1.1
import com.nokia.meego 1.0

Page {
    tools: ToolBarLayout {
        id: sideTools
        visible: true
        ToolIcon {
            platformIconId: "toolbar-back"
            anchors.left: parent.left
            onClicked: pageStack.pop()
        }
    }

    Label {
        id: label
        anchors.centerIn: parent
        text: qsTr("Hello world!")
        font.pixelSize: 32
        color: "steelblue"
        visible: true
    }

}

The platform icons can be found from the QtSDK installation folder.  Please take a look at the QtCreator Application Output window when running an application. In my case there is a message about the “assets” folder:

LocalThemeDaemonClient: Looking for assets in "U:\Apps\QtSDK\Simulator\Qt\mingw\/harmattanthemes\blanco\meegotouch"

The icons are found in the sub-folder called “icons”:

The toolbar test files are available in GitHub at the address:

https://github.com/n9dyfi/TestApp3.git