×
Namespaces

Variants
Actions

Tabbed UI using Meego Qt Quick Components

From Nokia Developer Wiki
Jump to: navigation, search

This code example shows how to create Tabbed type UI based pages using MeeGo Qt Quick Components.

Article Metadata
Code ExampleTested with
Devices(s): N9, N950 Developer device
Compatibility
Platform(s): MeeGo Harmattan
Article
Keywords: ToolBarLayout, TabGroup, TabButton, ButtonRow
Created: chintandave_er (25 Sep 2011)
Last edited: hamishwillee (13 Jun 2012)

Contents

Overview

The example uses following MeeGo Qt Quick Components:


How to

Here, we shall create tabs using TabGroup Element inside the PageStackWindow. In TabGroup QML Element, we create three Page QML Element and assign ids to them - tab1, tab2 and tab3 as shown in the code below.

On each page, we have added some QML controls and some functionality on button’s onClick event. So each page has different control and view from the others.

    TabGroup {  
id: tabgroup
currentTab: tab1
Page {
id: tab1
Label {
id: lbltab1
text: qsTr("This is the Tab 1 page ")
anchors.centerIn: parent
platformStyle: LabelStyle {
textColor: "black"
fontFamily: "Arial"
fontPixelSize: 30
}
}
}
 
Page {
id: tab2
Label {
id: lblresult
anchors.centerIn: parent
platformStyle: LabelStyle {
textColor: "black"
fontFamily: "Arial"
fontPixelSize: 30
}
}
TextArea{
id: text1
anchors {
horizontalCenter: parent.horizontalCenter
top: lblresult.bottom
topMargin: 10
}
}
Label {
id: labelname
text: qsTr("Name:")
anchors {
top: text1.top
topMargin: 10
right: text1.left
rightMargin: 10
}
}
Button{
id: btn
anchors {
horizontalCenter: parent.horizontalCenter
top: text1.bottom
topMargin: 10
}
text: qsTr("Click here!")
onClicked: lblresult.text = "Hello " + text1.text + " !"
}
}
Page {
id: tab3
tools:commonTools
Label {
id: label
anchors.centerIn: parent
text: qsTr("Hello world!")
visible: false
}
Button{
id: btnClick
anchors {
horizontalCenter: parent.horizontalCenter
top: label.bottom
topMargin: 10
}
text: qsTr("Click here!")
onClicked: label.visible = true
}
}
}

Tool Bar Element

Now we have the ToolBarLayout Element inside the PageStackWindow. Inside ToolBarLayout Element, we shall add the TabButton. We add a ButtonRow element and inside which, we add three TabButtons with text Tab 1, Tab 2 and Tab 3 respectively and give the tab ids tab1, tab2 and tab3 as shown in the code below.

ToolBarLayout 
{
id: commonTools
visible: true
 
// for back button
ToolIcon { iconId: "toolbar-back"; onClicked: pageStack.pop(); }
 
// for tabs
ButtonRow {
style: TabButtonStyle { }
TabButton {
text: "Tab1"
tab: tab1
}
TabButton {
text: "Tab2"
tab: tab2
}
TabButton {
text: "Tab3"
tab: tab3
}
}
 
// for menu icon
ToolIcon {
platformIconId: "toolbar-view-menu"
anchors.right: (parent === undefined) ? undefined : parent.right
onClicked: (myMenu.status == DialogStatus.Closed) ? myMenu.open() : myMenu.close()
}
}

As per MeeGo UX guides, most applications have a Back and Menu button in their toolbar. To replicate the same, we create using ToolIcon the back and Menu option on right. Menu QML Element is as below to create menu in toolbar.

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

main.qml (PageStackWindow)

Here is the full code for main.qml file.

import QtQuick 1.1 
import com.nokia.meego 1.0
PageStackWindow {
id: appWindow
initialPage: mainPage
MainPage {
id: mainPage
}
TabGroup {
id: tabgroup
currentTab: tab1
Page {
id: tab1
Label {
id: lbltab1
text: qsTr("This is the Tab 1 page ")
anchors.centerIn: parent
platformStyle: LabelStyle {
textColor: "black"
fontFamily: "Arial"
fontPixelSize: 30
}
}
}
Page {
id: tab2
Label {
id: lblresult
anchors.centerIn: parent
platformStyle: LabelStyle {
textColor: "black"
fontFamily: "Arial"
fontPixelSize: 30
}
}
TextArea{
id: text1
anchors {
horizontalCenter: parent.horizontalCenter
top: lblresult.bottom
topMargin: 10
}
}
Label {
id: labelname
text: qsTr("Name:")
anchors {
top: text1.top
topMargin: 10
right: text1.left
rightMargin: 10
}
}
Button{
id: btn
anchors {
horizontalCenter: parent.horizontalCenter
top: text1.bottom
topMargin: 10
}
text: qsTr("Click here!")
onClicked: lblresult.text = "Hello " + text1.text + " !"
}
}
Page {
id: tab3
Label {
id: label
anchors.centerIn: parent
text: qsTr("Hello world!")
visible: false
}
Button{
id: btnClick
anchors {
horizontalCenter: parent.horizontalCenter
top: label.bottom
topMargin: 10
}
text: qsTr("Click here!")
onClicked: label.visible = true
}
}
}
ToolBarLayout {
id: commonTools
visible: true
ToolIcon { iconId: "toolbar-back"; onClicked: pageStack.pop(); }
ButtonRow {
style: TabButtonStyle { }
TabButton {
text: "Tab1"
tab: tab1
}
TabButton {
text: "Tab2"
tab: tab2
}
TabButton {
text: "Tab3"
tab: tab3
}
}
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") }
}
}
}

Screenshots

You can see the three Tabs, Back button and Menu on Toolbar in below screenshot.

Tab 1

There you can see the first tab page selected.

Ss1 TabbedUI.png

Tab 2

You can see the second page on tab 2. On tab 2, we have added TextArea and button. To click on button, you can see the “Hello” word with entered text on textArea as shows in screenshot below.

Ss21 TabbedUI.png Ss22 TabbedUI.png

Tab 3

You can see the tab 3 page as below. There we have added button which on click show the “Hello World!” text.

Ss31 TabbedUI.png Ss32 TabbedUI.png

Menu

Ss4 TabbedUI.png

Screenshots from Nokia N950 Developer Device

Below are some screenshot of Application running on Nokia N950 Developer device.

Ss6 TabbedUI.png Ss5 TabbedUI.png

Source code

You can download source code from File:QMLTabButtonElement.zip and installation .deb file for meeGo from File:Qmltabbuttonelement 0.0.1 armel.zip

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