Header Based Menu for MeeGo-Harmattan

Comments

Maxart - Sort/filter icon?

How about the sort/filter Header glyph used in some of the Nokia N9 default apps (ex. Messages) - capture: http://cl.ly/291K2h261h2U2p2B091o

maxart 08:50, 21 January 2012 (EET)

Log in or Join to leave comments.

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

SDK: Qt SDK 1.1.3

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)

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

• SelectionDialog

• QML PageStackWindow Element
• QML Page Element

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.