Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

QML ToolBar element in Meego Qt Quick Components

From Wiki
Jump to: navigation, search

This article explains how to use ToolBar Component in Qt Quick Component Application for Meego Harmattan.

Article Metadata
Code ExampleTested with
Devices(s): Nokia N950
Platform(s): MeeGo Harmattan
Keywords: Qt Quick Component for MeeGo Harmattan
Created: chintandave_er (25 Sep 2011)
Last edited: hamishwillee (13 Jun 2012)



The ToolBar can be used either with or without the PageStack. Logically the tool bar is split into three levels:

  • The actual ToolBar Component, which forms the visual tool bar that is typically created once per application and placed in some static place on the edge of the screen.
  • Tools, i.e. items that go into the tool bar. These are things like tool bar buttons but can also in principle be anything else such as text fields, icons, etc.
  • A container for the tools. This handles the layout of the tools inside the tool bar. Depending on the situation this could be the QML standard Row element or the Qt Components ToolBarLayout component, which implements a very particular algorithm that is suitable for many standard tool bar item layouts.

Using the tool bar is a simple matter of specifying the tools - as a single QML item - with the tools property of the ToolBar item. This single QML item is typically the tool container and contains items that are the actual tools.

Here we use ToolBarLayout Component inside PageStackWindow Element to create the ToolBar. Inside it, we use ToolButton, ToolItem , ToolIcon Component as shown in code.

main.qml (PageStackWindow)

import QtQuick 1.1 
import 1.0
PageStackWindow {
id: appWindow
initialPage: mainPage
MainPage {
id: mainPage
ToolBarLayout {
id: commonTools
visible: true
ToolItem { iconId: "icon-m-toolbar-back"; onClicked: pageStack.pop(); }
ToolButton { text: "One" }
ToolButton { text: "Two" }
ToolIcon {
platformIconId: "toolbar-view-menu"
anchors.right: (parent === undefined) ? undefined : parent.right
onClicked: (myMenu.status == DialogStatus.Closed) ? : myMenu.close()
Menu {
id: myMenu
visualParent: pageStack
MenuLayout {
MenuItem { text: qsTr("Sample menu item") }

Now we assign id of the tools (that in our case is commonTools) into the page element as seen in the code below.

mainpage.qml (page)

import QtQuick 1.1 
import 1.0
Page {
tools: commonTools
Label {
id: label
anchors.centerIn: parent
text: qsTr("Hello world!")
visible: false
anchors {
horizontalCenter: parent.horizontalCenter
top: label.bottom
topMargin: 10
text: qsTr("Click here!")
onClicked: label.visible = true

- You can see the Toolbar layout in the screenshot below.

SS1 tool.png

Source code

You can download source code for this wiki article on this link

This page was last modified on 13 June 2012, at 10:56.
60 page views in the last 30 days.