×
Namespaces

Variants
Actions

MeeGo Qt Quick Component - Static Page Navigation

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to make static page navigation using Component Element in Qt Quick MeeGo app.

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

Contents

How to

In only one page, we have added two Component elements to create static pages. To create static page, we used Component element and gave ids to each component element and gave id to page to use as static page 1.

Component 
{
id: staticpage2
Page {
tools: ToolBarLayout {
id: staticToolbar1
ToolIcon { iconId: "toolbar-back"; onClicked: pageStack.pop(); }
ToolIcon { iconId: "toolbar-view-menu" }
}
Column {
spacing: 30
anchors.centerIn: parent.Center;
Text {id:txt1; text: "This is static page two."; font.pixelSize: 25; anchors.centerIn: parent.Center; }
Button {
text: "Page Three"
onClicked: pageStack.push(staticpage3)
}
}
}
}

On each Component, we have added Page element with some controls and tools to create toolbar. Here is the full code with PageStackWindow page.

MainPage.qml (Page)

import QtQuick 1.1 
import com.nokia.meego 1.0
Page {
id: staticpage1
Component {
id: staticpage2
Page {
tools: ToolBarLayout {
id: staticToolbar1
ToolIcon { iconId: "toolbar-back"; onClicked: pageStack.pop(); }
ToolIcon { iconId: "toolbar-view-menu" }
}
Column {
spacing: 30
anchors.centerIn: parent.Center;
Text {id:txt1; text: "This is static page two."; font.pixelSize: 25; anchors.centerIn: parent.Center; }
Button {
text: "Page Three"
onClicked: pageStack.push(staticpage3)
}
}
}
}
Component {
id: staticpage3
Page {
tools: ToolBarLayout {
id: staticToolbar1
ToolIcon { iconId: "toolbar-back"; onClicked: pageStack.pop(); }
ToolIcon { iconId: "toolbar-view-menu" }
}
Column {
spacing: 30
anchors.centerIn: parent.Center;
Text { text: "This is static page three."; font.pixelSize: 25 }
Button {
text: "Page One"
onClicked: pageStack.pop(staticpage1)
}
}
}
}
 
tools: ToolBarLayout {
id: staticToolbar1
ToolIcon { iconId: "toolbar-back"; onClicked: pageStack.pop(); }
ToolIcon { iconId: "toolbar-view-menu" }
}
Column {
spacing: 30
anchors.centerIn: parent.Center;
Text { text: "This is static page one."; font.pixelSize: 25 }
Button {
text: "Page Two"
onClicked: pageStack.push(staticpage2)
}
Button {
text: "Page Three"
onClicked: pageStack.push(staticpage3)
}
}
}

main.qml (PageStackWindow)

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

Screenshots

Static Page 1

SS1 Static2.png

Static Page 2

SS1 Static1.png

Static Page 3

SS1 Static3.png

Source Code

You can download the source code for this article on this link File:MeeGoStatic Page Navigation.zip

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