×
Namespaces

Variants
Actions

QML ToolBar element in Meego Qt Quick Components

From Nokia Developer 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
Compatibility
Platform(s): MeeGo Harmattan
Article
Keywords: Qt Quick Component for MeeGo Harmattan
Created: chintandave_er (25 Sep 2011)
Last edited: hamishwillee (13 Jun 2012)

Contents

Introduction

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 com.nokia.meego 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.open() : 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 com.nokia.meego 1.0
 
Page {
tools: commonTools
Label {
id: label
anchors.centerIn: parent
text: qsTr("Hello world!")
visible: false
}
Button{
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 File:QMLToolBarElement.zip

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