starting development for nokia n9

MeeGo Harmattan

Course Introduction

Digia – Who Are We?

● Digia Plc – http://www.digia.com

● Tino Pyssysalo● Senior Software Specialist● Tampere, Finland

Pre-requisites

● We are going to use both in this training

Basics of and QML

“Goal of the training is to get the developers excited for the tools, the device and technologies rather then pure knowledge transfer.”

Required Tools

● On your laptop:● Qt SDK 1.1.2 including Harmattan targets

● N950● Image flashed

● Installation instructions:● ”Getting Started with the Qt SDK”● E.g. in Windows under Start menu

Course Contents

Course Introduction Content introduction

MeeGo and Harmattan Differences between MeeGo and Harmattan

Development Tools QtCreator 1.1.2 and related tools

MeeGo 1.2 Harmattan API APIs offered to the developer

Application Framework Usage of Qt Components

Mobility APIs QML mobility bindings

QML and C++ Integration Exposing own QObject instances in QML

http://www.developer.nokia.com/Devices/MeeGo /

MeeGo Harmattan

MeeGo and Harmattan

Platforms

N900

Maemo 5

Fremantle

UI: Hildon

Debian packaging

N9/N950

MeeGo 1.2

Harmattan API

UI: MeegoTouch

Debian packaging

?

MeeGo 1.1

UI: MeegoTouch

RPM packaging

MeeGo Harmattan

Development Tools

Qt SDK 1.1.2

● Combines all Qt development under one SDK!● Can be installed on Windows/Mac OSX/Linux

● Main features:● Qt 4.7.3● Qt Quick 1.0 (1.1 for Harmattan)● QtMobility APIs 1.1.3● Qt Creator 2.2.1● Qt Designer ● Harmattan Emulator● Integrated Cross-Compiler (MADDE)● Simulator ● Package support

Targets

● MeeGo 1.2 Harmattan API● MeeGo API + mobility APIs + QtQuick + Qt Quick Components +

some platform APIs

● Harmattan Platform API● Middleware APIs● Build your daemon using D-Bus or GObject interface to

communicate with other components

Emulator

● Uses QEMU● Runs the deivce binary

● Simulator may be useful as well● Easy to test the functionality of mobility APIs

● Note: May crash, if OpenGL mode is set to autodetect● Change it to Software Rendering

Device Deployment

● More straightforward than ever● Launch SDK Connectivity application

● Select USB/WLAN connection

● Create a new device configuration and change the device configuration in Run settings ● Look at the password and hot name in SDK connectivity

Debugging Tools● Run your device in the developer mode and you may run several

debugging tools● Settings > Security > Developer mode● Launch apps from the terminal

● latrace● Traces library calls

● strace● Traces system calls

● valgrind● Memory leaks, heap profiling, cache profiling, call graph

● htop● Process viewer

● sp-memusage● CPU and memory usage

● Energy profiler● Power consumtpion, mobile IP traffic, CPU activities

MeeGo Harmattan

MeeGo 1.2 Harmattan API

MeeGo 1.2 Harmattan API

● Fully productized set of APIs

● One API reference

● Compatibility Promise (Updates)

● APIs cover most development needs

QMLQt

Components Qt Mobility

QtQt

WebkitQt Sparql

GStreamer PulseaudioOpen GL

ES 1.1/2.0

Resource Policy

Signon Telepathy Qt4

Qm SystemOvi

Notifications Engine

Accounts

Basic Mobile Application

● Network – Location –Maps

● Integrated into HarmattanUX

C++ Wrapper

.de

skto

p

ico

nQML Files

.pro

QML Qt Components Qt Mobility

Qt Qt Webkit Qt Sparql

GStreamer PulseaudioOpen GL ES

1.1/2.0

Resource Policy

Signon Telepathy Qt4

Qm SystemOvi Notifications

EngineAccounts

Extended Mobile Multimedia Application

● Multimedia– Tracker● Integrated into Harmattan

UX

C++ Wrapper

.de

skto

p

ico

n

QML Files

.pro

.ae

gis

.qrc

.js Files

C++/Qt Logic

QMLQt

Components Qt Mobility

QtQt

WebkitQt Sparql

GStreamer PulseaudioOpen GL ES

1.1/2.0

Resource Policy

Signon Telepathy Qt4

QmSystem

Ovi Notifications Engine

Accounts

Mobile Game

● Develop on top of standard technologies:● Open GL ES● GStreamer● Pulseaudio

QMLQt

Components Qt Mobility

QtQt

WebkitQt Sparql

GStreamer PulseaudioOpen GL

ES 1.1/2.0

Resource Policy

Signon Telepathy Qt4

QmSystem

OviNotifications

EngineAccounts

Platform API

● If the APIs in the Harmattan API are not sufficient, there is the Platform API, which contains an even richer set of API’s, but:

● We don’t give a compatibility promise!

Security Framework

● Applications must announce the possible protected resources they require and provide● Protected resources are listed in the Aegis manifest XML file

● Qt SDK generates the Aegis manifest file automatically for most protected resources when the app is packaged

● In case of “Access denied” errors or secure services, provided by you app, you have to edit the manifest file manually

● The goal is:● Configurable access control● Integrity checking for all executable files● Protection of sensitive data● Protection of software deployment chain

MeeGo 1.2 Harmattan API

Platform API

SE

CU

RIT

Y F

W

Aegis Manifest File

<aegis> <request>

<!-- My first app credentials --> <credential name="Location" /> <for path="/usr/bin/MyApp1 />

</request> <request>

<!-- My second app credentials --> <credential name="Cellular" /> <credential name="Location" /> <for path="/usr/bin/MyApp2" />

</request> </aegis>

● Credentials can be seen from @credential tag in the header files● Package component may request or provide credentials

● CAP::capability● UID::user● GID::group

● Cellular● Location● Synchronization

● TrackerReadAccess● TrackerWriteAccess

MeeGo Harmattan

Application Framework

Qt Quick & QML

● ”Qt User Interface Creation Kit”● Declarative UI technology● Introduced in Qt 4.7.0● QML – ”Qt Meta-Object Language”● QtDeclarative – New C++ module in Qt

● Aimed at designers and developers alike● Drag’n’drop designer tool provided● GIMP & Adobe Photoshop plugins also available

Application Framework

QtDeclarative

Qt Components

C++ Business Logic QML User-Interface

JS Environment QML Primitives

MeeGo Plug-ins

Mobility Plug-ins

Application Plug-ins

Application

Qt Quick Components

● Component library allowing the creation of user-interfaces of a Qt Quick application from a set of ready UI components● Window (PageStackWindow)● PageStack● Page● TabGroup● ToolbarLayout (toolbar)● TextArea (TextField)● Sheet● Screen● SelectionDialog, QueryDialog, Dialog● Buttons (Radio, Sheet, Tool)● ScrollDecorator

Application Structure● Window

● Main container for Qt components● Typically one in the application● Provides several orientation change signals● User navigates between the pages● Use the sub-element PageStackWindow to provide a frame for the

application

● Page● Has status (active/inactive)● May have a page-specific toolbar and menu

● PageStack● Implements common navigational patterns● Pages are pushed and popped from the stack● User can use right (previous page) and left (next page) swipe to

navigate between pages

Navigational Patterns● Identify your application type● Productive

● Pragmatic tasks, such as sending a message● Simple, intuitive, typically drill-down and simple toolbar pattern● Often using Qt Quick components

● Immersion● Entertaining or visually rich UI● Video player, map player, games● Typically, full screen● Possibly, customized layout and controls● Application menu pattern

● Flat experience

Simple Application UIimport QtQuick 1.1 import com.meego 1.0 PageStackWindow {

id: appWindow initialPage: mainPageMainPage {id: mainPage}

ToolBarLayout { id: commonToolsvisible: true ToolIcon {

platformIconId: "toolbar-view-menu"; anchors.right: parent===undefined ? undefined : parent.right

onClicked: (myMenu.status == DialogStatus.Closed) ? myMenu.open() : myMenu.close() }

}}

import QtQuick 1.1 Import com.nokia.meego 1.0 Page {

id: listPageanchors.margins: rootWindow.pageMarginfunction openFile(file) {

var component = Qt.createComponent(file) if (component.status == Component.Ready)

pageStack.push(component); else

console.log("Error loading component:", component.errorString()); } // Page contentMouseArea {

id: mouseAreaanchors.fill: background // Note this element is not shown in the example (page content) onClicked: {

listPage.openFile(page) }

}

Page Navigation// Pages can be created using any elementExamplePage {

id: examplePagegreeting: "Hello World!"

} // orComponent {

id: examplePageExamplePage {

greeting: "Hello World!" }

}

// In case you have multiple pages, you should consider lazy loading of pagesPage {

id: root anchors.margins: 0 Item {

id: container } property Item containerObject; onVisibleChanged: {

if (visible) { var object = componentDynamic.createObject(container); containerObject = object;

} else { containerObject.destroy(); }

} Component {

id: componentDynamicItem {

// It is possible to provide property bindingspageStack.push(examplePage, { foo: bar, foz: baz });

// If Component element is used, an Item is created and // destroyed automatically

// If any other element type is used (Item), then the owenership// is changed and returned when the page is pushed and // popped

Styling and Theming

● Qt Quick components provide a system-specific common look-and-feel

● However, the components themselves do not provide a common LAF

● Use system-specific constants● Elements have style attribute

● Menu => MenuStyle● Platform-dependent style

● There is a theming daemon● Shares the most common graphics and icons between apps● Do not consume app memory

import "UIConstants.js" as UIConstants

UIConstants.DEFAULT_MARGINUIConstants.BUTTON_SPACINGUIConstants.HEADER_DEFAULT_HEIGHT_PORTRAITUIConstants.HEADER_DEFAULT_HEIGHT_LANDSCAPE

UIConstants.FONT_XLARGE // 32 pxUIConstants.FONT_XSMALL // 18 pxUIConstants.FONT_SLARGE // 26 pxUIConstants.FONT_DEFAULT // 24 pxUIConstants.FONT_LSMALL // 22 px

BorderImage { source: "image://theme/meegotouch-list-background-pressed-center"

}

MeeGo Harmattan

Mobility APIs

QtMobility APIs

Out-of-Process

Camera

Landmarks, Maps,Navigation

Service Framework

Publish&Subscribe

Messaging

Contacts

Bearer Management(to QtNetwork in 4.7)

Versit

Sensors

Multimedia

System Information Location

Organizer

Document Gallery

Feedback

1.0.2 1.1 (Qt SDK)

Local Connectivity(BT, NFC)

1.2 (Tech Preview)

Augmented Reality?Face Recognition?

QML Bindings

QML QtMobility API Bindings

Note: some APIs are still under

development – subject to

change!

Location API and Mapimport QtQuick 1.0 import QtMobility.location 1.1

Item { width: 500; height: 500; focus: true Map {

id: map

plugin : Plugin { name : "nokia" }

size.width: parent.widthsize.height: parent.heightzoomLevel: 12

center: Coordinate { latitude: 61.4979781 longitude: 23.7649307

}

MapCircle{ center: Coordinate {

latitude: 61.4979781 longitude: 23.7649307

} radius: 1000.0

} }

}

Import the API you need…

…and use it the QML way!

Location API and MapItem {

...Map { id: map; ... }MyButton { text: "Street Map"MouseArea {

onClicked: map.mapType = Map.StreetMap;}

} MyButton { text: "Satellite"MouseArea {

onClicked: map.mapType = Map.SatelliteMapDay; }

} MyButton { text: "Zoom Out"MouseArea {

onClicked: map.zoomLevel -= 1; }

} MyButton { text: "Zoom In"MouseArea {

onClicked: map.zoomLevel += 1; }

}}

Notes on the Location API

● Current implementation always downloads maps from the Ovi Maps server● Does not utilize maps installed on device for the the Ovi Maps

application

● To get information about user’s current location, use the PositionSource QML element● Gives you latitude and longitude you can pass to the Map● Also provides altitude and speed information

● See the Location API documentation & sources for details& examples

MeeGo Harmattan

QML and C++ Integration

Using QObjects from QML

● QObjects are accessible from QML code● All things specified in meta-data of QObject can be seen

in QML● Signals● Slots● Properties

Steps to Expose QObjects

Assuming the QObject has a well defined (Qt-like) interface consisting signals, slots, and properties the steps are straightforward

1. Refer to a context, QDeclarativeContext, in the QML engine, or QDeclarativeEngine

2. Set the context property● In other words, give a name for your instance of QObject derived

class

Example: Class Header

class MyCounter : public QObject{

Q_OBJECTQ_PROPERTY(int currentValue READ currentValue WRITE setValue NOTIFY

currentValueChanged)

public:explicit MyCounter(QObject *parent = 0);

signals:void currentValueChanged();

public slots:void reset();void increaseCounter();

public:void setValue(int value);int currentValue() const;

protected:int counter;

};

Example: Implementation

void MyCounter::increaseCounter(){

const int valueNow = currentValue();setValue(1 + valueNow);

}

void MyCounter::setValue(int value){

counter = value;emit currentValueChanged();

}

int MyCounter::currentValue() const{

return counter;}

int main(…) {

… QDeclarativeEngine* engine = view.engine();QDeclarativeContext* context = engine->rootContext();

MyCounter counter;context->setContextProperty("theCounter", &counter);

}

Using QObject from QML

● Properties of Qobject can be accessed in the same way as QML properties

● The update signal of a property is required to QML runtime to notice the change of the property

● Any slot function can be called from QML/Javascriptimport Qt 4.7Rectangle {

id: theWindowwidth: 200; height: 200Text {

anchors.centerIn: theWindowtext:"The counter="+theCounter.currentValue

}MouseArea {

anchors.fill: parentonClicked: {

theCounter.increaseCounter()}

}}

Course Summary

● QtCreator 1.1.2 now supports Harmattan target as well● Plenty of debugging/profiling tools on the device● MeeGo 1.2 Harmattan API provided

● MeeGo API (Qt), Moility APIs, Qt Quick, Qt Components● Qm system, Qt sparql, Qt4 telepathy etc.● Security framework

● Applications written in QML using Qt Components● Stylable, themable● OpenGL, QtWebKit, and Qt can be used as well

● Application logic with C++/C● Using Qt APIs, mobility APIs or platform APIs