×
Namespaces

Variants
Actions

Header Based Menu for MeeGo-Harmattan

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how you can launch an app menu from the app header. This user interface design can provide a great user experience as the header is always visible to the user - it is used on MeeGo applications like Messaging and Facebook, etc.

Article Metadata
Tested with
Devices(s): N950
Compatibility
Platform(s): MeeGo Harmattan
Article
Keywords: Qt Quick Component for MeeGo Harmattan
Created: gaba88 (28 Sep 2011)
Last edited: hamishwillee (13 Jun 2012)

Meego headermenu 01.png Meego headermenu 02.png Meego headermenu 03.png

Contents

Approach

Different approaches can be followed to achieve this feature. I have used a simple Rectangle and a MouseArea Component of plain QML to make the header.

When user clicks on the Header, different UI components can be shown to the user, for example in this article a simple SelectionDialog has been used.

Instead of a SelectionDialog something custom can also be used to complete this.

MeeGo QML Components Used

Many other plain QML components have also been used like Rectangle, ListModel, ListElement etc.

Code Snippet

Following is the simple code snippet used for implement the above mentioned approach.

import QtQuick 1.1 
import com.nokia.meego 1.0
Page {
id:mainPage
tools: commonTools
SelectionDialog{
id:simpleSelectionDialog
titleText: "Header Menu"
selectedIndex: 0
model: ListModel{
ListElement{name:"Option One"}
ListElement{name:"Option Two"}
ListElement{name:"Option Three"}
ListElement {name:"Option Four"}
}
}
Rectangle{
id: headerRect
anchors.top:mainPage.top; anchors.left: mainPage.left; anchors.right: mainPage.right
width: mainPage.width ; height: mainPage.height/10
color: "cyan"
Text {
id: titleText
anchors.centerIn: headerRect
font.bold: true
font.pointSize: 20
text: qsTr("Click For Options")
}
MouseArea{
anchors.fill: headerRect
onClicked: {
console.log("headerRect Clicked")
simpleSelectionDialog.open()
}
onPressed: {
headerRect.opacity = 0.7
}
onReleased: {
headerRect.opacity = 1
}
}
}
Label{
id:testLabel
anchors.top:headerRect.bottom; anchors.topMargin: 30
text:simpleSelectionDialog.model.get(simpleSelectionDialog.selectedIndex).name
color: "black"
font.pixelSize: 30
}
}


Summary

This is the simplest way a header menu can be implemented. This article will be further extended to show how we can incorporate a custom QML component with the header menu.

This page was last modified on 13 June 2012, at 10:53.
40 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×