×
Namespaces

Variants
Actions
Revision as of 07:33, 30 January 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Creating Menu navigation using ContextMenu in Qt Quick

From Nokia Developer Wiki
Jump to: navigation, search

This code example shows how to create menu navigation in Qt Quick using a custom ContextMenu element and a FocusScope. This article shows how to create a hideable menu and change the page from menu. We use a State element to create various pages.

Tip.pngTip: While this custom code will work, we highly recommend that you use the Qt Quick Components for Symbian or MeeGo as these provide a full platform specific application framework.

Article Metadata
Code ExampleTested withCompatibility
Platform(s):
Symbian
Article
Created: jaydipNokia (09 Jun 2011)
Last edited: hamishwillee (30 Jan 2013)

Contents

Screen Shots

QtContxtmenuHome.jpg QtContxtmenu.jpg

QtContxtmenuPage1.jpg

ContextMenu QML Component

We need to create Context Menu QML Component to create Show and hide type menu. In this ContextMenu.qml, we need to use FocusScope QML Element. We also added Text QML Element with OnClick events to create links. So by clicking on this link, we change the state of the page with different content.


ContextMenu.qml File

 import QtQuick 1.0
FocusScope {
id: container
property bool open: false
Item {
anchors.fill: parent
Rectangle {
id: contectmenu;
anchors.fill: parent
color: "#D1DBBD"
focus: true
 
Text {
id: menu
anchors { top: parent.top; horizontalCenter: parent.horizontalCenter; margins:20 }
color: "black"
font.pixelSize: 14
text: "Menu"
font.bold: true
font.underline: true
styleColor: "#0f0e0e"
}
Text {
id: pagehome
color: "#807777"
anchors { top: menu.bottom; horizontalCenter: parent.horizontalCenter; margins: 10 }
text: "Home"
styleColor: "#756f6f"
MouseArea {
anchors.fill: parent;
onClicked: rect.state = ""
}
}
Text {
id: pageimg1
color: "#807777"
anchors { top: pagehome.bottom; horizontalCenter: parent.horizontalCenter; margins: 10 }
text: "Page 1"
styleColor: "#696464"
MouseArea {
anchors.fill: parent;
onClicked: rect.state = "contextMenuClosePage1"
}
}
Text {
id: pageimg2
color: "#807777"
anchors { top: pageimg1.bottom; horizontalCenter: parent.horizontalCenter; margins: 10 }
anchors.leftMargin: 30
text: "Page 2"
MouseArea {
anchors.fill: parent;
onClicked: rect.state = "contextMenuClosePage2"
}
}
Text {
id: quit
color: "#807777"
anchors { top: pageimg2.bottom; horizontalCenter: parent.horizontalCenter; margins: 10 }
anchors.leftMargin: 30
text: "Quit"
MouseArea {
anchors.fill: parent;
onClicked: Qt.quit();
}
}
}
}
}

Main QML file

Here we added ContextMenu QML Component with such properties that it looks like hided on left side.

ContextMenu { id: contextMenu; x: -256; y: 0; width: 260; height: parent.height ;open: false }

To show the Menu, we add image tag and there we change the state, that having contextMenu with different properties value. So it looks like open. To make it more animated, we add transitions Animation.

transitions: Transition {
NumberAnimation { properties: "x,opacity"; duration: 590; easing.type: Easing.OutQuint }
}

To create the page, we added various states with different content.

states: [
State {
name: "contextMenuOpen"
when: !mainView.activeFocus
PropertyChanges { target: contextMenu; x: -130; y: 0; width: 816;height:480; open: true }
PropertyChanges { target: rect; x: 130 }
},
State {
name: "contextMenuClosePage1"
PropertyChanges {
target: text1
color: "#e8e0d5"
text: "This is Page 1"
styleColor: "#d9a5a5"
font.family: "Verdana"
font.pixelSize: 22
horizontalAlignment: "AlignLeft"
opacity: 1
}
PropertyChanges { target: txt1; visible: false }
},
State {
name: "contextMenuClosePage2"
PropertyChanges {
target: text1
color: "#e8e0d5"
text: "This is Page 2"
styleColor: "#d9a5a5"
font.family: "Verdana"
font.pixelSize: 22
horizontalAlignment: "AlignLeft"
opacity: 1
}
PropertyChanges { target: txt1; visible: false }
}
]

Main.qml File

import QtQuick 1.0
import "Core"
Rectangle {
id: rect
width: 800; height: 480 // Display Size for N900
color: "#3E606F"
Text {
id: txt1
text: "This is Home Page."
visible: true
anchors.centerIn: parent
}
FocusScope {
id: mainView
width: parent.width; height: parent.height
focus: true
 
states: State {
name: "showListViews"
}
transitions: Transition {
NumberAnimation { properties: "y"; duration: 600; easing.type: Easing.OutQuint }
}
}
Image {
source: "Core/images/arrow.png"
rotation: 90
anchors.verticalCenter: parent.verticalCenter
MouseArea {
anchors.fill: parent; anchors.margins: -10
onClicked: rect.state = "contextMenuOpen"
}
}
 
ContextMenu { id: contextMenu; x: -256; y: 0; width: 260; height: parent.height ;open: false }
Text {
id: text1
x: 365
y: 128
width: 80
height: 20
text: "text"
font.pixelSize: 12
opacity: 0
}
states: [
State {
name: "contextMenuOpen"
when: !mainView.activeFocus
PropertyChanges { target: contextMenu; x: -130; y: 0; width: 816;height:480; open: true }
PropertyChanges { target: rect; x: 130 }
},
State {
name: "contextMenuClosePage1"
PropertyChanges {
target: text1
color: "#e8e0d5"
text: "This is Page 1"
styleColor: "#d9a5a5"
font.family: "Verdana"
font.pixelSize: 22
horizontalAlignment: "AlignLeft"
opacity: 1
}
PropertyChanges { target: txt1; visible: false }
},
State {
name: "contextMenuClosePage2"
PropertyChanges {
target: text1
color: "#e8e0d5"
text: "This is Page 2"
styleColor: "#d9a5a5"
font.family: "Verdana"
font.pixelSize: 22
horizontalAlignment: "AlignLeft"
opacity: 1
}
PropertyChanges { target: txt1; visible: false }
}
]
transitions: Transition {
NumberAnimation { properties: "x,opacity"; duration: 590; easing.type: Easing.OutQuint }
}
}

Video

The media player is loading...

Source Code

You can download source code of this article from File:Creating Menu navigation using ContextMenu in Qt Quick.zip

This page was last modified on 30 January 2013, at 07:33.
141 page views in the last 30 days.