×
Namespaces

Variants
Actions

MeeGo Hatmattan Qt Quick Component - Changing Toolbar at runtime

From Nokia Developer Wiki
Jump to: navigation, search

This wiki article explains how to change an application's toolbar at runtime.

Article Metadata
Code ExampleTested with
SDK: Qt SDK 1.1.3
Devices(s): N9, N950 Developer Device
Compatibility
Platform(s): MeeGo Haramattan
Article
Keywords: Qt Quick Component for MeeGo
Created: chintandave_er (30 Sep 2011)
Last edited: hamishwillee (13 Jun 2012)

Contents

Introduction

This wiki article explains how to change the ToolBar at runtime of the application.

Article uses following MeeGo Harmattan Qt Quick Components

Here to change the toolbar we are toggling the visibility of ToolBar Items like ToolIcon and other elements like TextField inside it. Here we used Switch QML Element to make the ON-OFF kind of UI. So Making particular switch on, makes the some ToolBar Items visible and making switch off, hide that Toolbar Item.

You can change the visibility of the ToolBar Items by changing the visible property.

MainPage.qml (Page)

import Qt 4.7  
import com.nokia.meego 1.0
Page {
id: mainpage1
tools: layout1
ToolBarLayout {
id:commanTools
ToolIcon {
id : backIcon;
visible:backbutton.checked
iconId: "toolbar-back"; onClicked: pageStack.pop();
}
TextField {
id: textfield;
visible:textbutton.checked
}
ToolIcon {
id : extraItem;
iconId: "toolbar-headphones"
visible:headphones.checked
}
ToolIcon {
id : menuItem;
iconId: "toolbar-view-menu"
visible:menubutton.checked
}
}
Column {
id: buttons
spacing: 10
anchors.horizontalCenter: parent.horizontalCenter
 
Label{
id:lblbackbutton
text: "Back Button"
anchors.right: backbutton.left
anchors.centerIn: backbutton.bottom
}
Switch {
id: backbutton
platformStyle: SwitchStyle {
inverted: true
}
}
Label{
id:lblmenubutton
text: "Menu Button"
anchors.right: menubutton.left
}
Switch {
id: menubutton
platformStyle: SwitchStyle {
inverted: true
}
}
Label{
id:lblheadphones
text: "headphone Button"
anchors.right: headphones.left
}
Switch {
id: headphones
platformStyle: SwitchStyle {
inverted: true
}
}
Label{
id:lbltextbutton
text: "Text Button"
anchors.right: headphones.left
}
Switch {
id: textbutton
platformStyle: SwitchStyle {
inverted: true
}
}
}
}


main.qml (PageStackWindow)

import QtQuick 1.1  
import com.nokia.meego 1.0
PageStackWindow {
id: appWindow
initialPage: mainPage
MainPage {
id: mainPage
}
}

Screenshot

Ss1 c.png

Ss2 c.png

Source Code

File:MeeGo Hatmattan Qt Quick Component - Changing Toolbar at runtime.zip

This page was last modified on 13 June 2012, at 13:55.
50 page views in the last 30 days.