×
Namespaces

Variants
Actions

Getting Started with Meego Harmattan Qt Quick Components

From Nokia Developer Wiki
Jump to: navigation, search

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
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)

Contents

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 
SS ComponentMeego.jpg

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

SS TargetMeego.jpg

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:

Harmmaten Emulator1.png Harmmaten Emulator 2.jpg

On Nokia N950 Device:

Harmmaten N950 2.png Harmmaten N950.png

Further links

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

This page was last modified on 17 July 2012, at 05:46.
83 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.

×