Tabbed UI using Meego Qt Quick Components
This code example shows how to create Tabbed type UI based pages using MeeGo Qt Quick Components.
Article Metadata
Code Example
Tested with
Compatibility
Article
Contents |
Overview
The example uses following MeeGo Qt Quick Components:
- QML PageStackWindow Element
- QML Page Element
- QML Label Element
- QML Menu Elements
- QML ToolBar Element
- QML ToolBarLayout Element
- QML TabGroup Element
- QML TabButton Element
- QML ButtonRow Element
- QML ToolIcon Element
- QML TextArea Element
- QML MenuLayout Element
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.
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.
Tab 3
You can see the tab 3 page as below. There we have added button which on click show the “Hello World!” text.
Menu
Screenshots from Nokia N950 Developer Device
Below are some screenshot of Application running on Nokia N950 Developer device.
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
(no comments yet)