Getting Started with Meego Harmattan Qt Quick Components

This article shows how to create a "Hello World" app for MeeGo using the MeeGo Qt Quick Components in the Qt SDK.

Article Metadata

---

Tested with

SDK: Qt SDK 1.1.3

Devices(s): Nokia N950

---

Compatibility

Platform(s): MeeGo Harmattan

Device(s): All MeeGo Devices

---

Article

Created: chintandave_er (18 Sep 2011)

Last edited: hamishwillee (17 Jul 2012)

Creating MeeGo Qt Quick Components app

To create an app using the MeeGo Harmattan Qt Quick Components, we start from the appropriate Qt Create wizard. From the File Menu do:

File -> New File or Project > Qt Quick Application > Qt Quick Components for MeeGo/Harmattan 

Make sure you have selected Harmattan Emulator as your build target:

First app: Hello world

You need to import com.nokia.meego 1.0 to use MeeGo Qt Quick Component in your application. The Qt Quick components are built with QML and you can use them in your QML application in the same way as any of the standard QML elements. Make the components available to your application by importing them as follows:

import com.nokia.meego      // MeeGo components

Use PageStackWindow as your main element. Under PageStackWindow you should define your ToolBarLayout what tools you have visible in default toolbar and then put your main page to initial Page. If you don’t want to put the Menu in your application, you could remove toolbar-view-menu and menu related form toolbar.

Please note that MeeGo apps don't need Close or Exit button because they are handled by swipe event and Task Manager. You can either have MainPage as separate Qml file that is then loaded as a Component or you could just have it included in same main.qml with Component definition.

Menu

Perhaps the most important part of the main.qml is the place where the navigation page content is declared. The initialPage property for PageStackWindow defines the first Page component that is shown when the PageStackWindow is shown to the user.

initialPage: mainPage

You can use ToolBarLayout to create Menu on your application. You can use the Various IconId to change the menu button like toolbar-view-menu, toolbar-back.

ToolBarLayout 
{
        id: commonTools 
        visible: true 
        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") } 
            MenuItem { text: qsTr("Sample menu item1") } 
            MenuItem { text: qsTr("Sample menu item2") } 
        } 
    }

Here is the Full Main.qml with PageStackWindow as main element and ToolBarLayout inside it.

Main.qml

import QtQuick 1.1 
import com.nokia.meego 1.0
PageStackWindow { 
    id: appWindow 
    initialPage: mainPage
    MainPage { 
        id: mainPage 
    }
    ToolBarLayout { 
        id: commonTools 
        visible: true 
        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") } 
            MenuItem { text: qsTr("Sample menu item1") } 
            MenuItem { text: qsTr("Sample menu item2") } 
        } 
    } 
}

MainPage.qml

import QtQuick 1.1 
import com.nokia.meego 1.0
Page { 
    id: mainpage1 
    tools: commonTools
    Label { 
        id: label 
        anchors { 
        horizontalCenter: parent.horizontalCenter 
        top: parent.top 
        topMargin: 10 
        } 
    }
    TextArea{ 
        id: text1 
         anchors.centerIn: parent 
         anchors.top: label.bottom 
    }
    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: label.text = "Hello " + text1.text + " !" 
    } 
}

Screenshots

On Harmattan Emulator:

On Nokia N950 Device:

Further links

You can find MeeGo 1.2 Harmattan Developer Documentation and API for Qt Quick Component here: MeeGo 1.2 Harmattan Developer Documentation