QML ToolBar element in Meego Qt Quick Components

Comments

Phoenixcuibj - cool

very simple

phoenixcuibj 05:57, 8 November 2011 (EET)

Log in or Join to leave comments.

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

Article Metadata

---

Code Example

Source file: Media:QMLToolBarElement.zip

---

Tested with

SDK: Qt SDK 1.1.3

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)

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.

Source code

You can download source code for this wiki article on this link File:QMLToolBarElement.zip