This is a short descrption of MeeGo Harmattan development

1. MeeGo Harmattan
Course Introduction

2. Digia – Who Are We?
● Digia Plc – http://www.digia.com
● Tino Pyssysalo
● Senior Software Specialist
● Tampere, Finland

3. Pre-requisites
Basics of
and QML
● We are going to use both in this training
“Goal of the training is to get the developers
excited for the tools, the device and technologies
rather then pure knowledge transfer.”

4. 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

5. 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 /

6. MeeGo Harmattan
MeeGo and Harmattan

7. Platforms
N900 N9/N950 ?
Maemo 5 MeeGo 1.2 MeeGo 1.1
Fremantle Harmattan API
UI: Hildon UI: MeegoTouch UI: MeegoTouch
Debian packaging Debian packaging RPM packaging

8. MeeGo Harmattan
Development Tools

9. 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

10. 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

11. 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

12. 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

13. 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

14. MeeGo Harmattan
MeeGo 1.2 Harmattan API

15. MeeGo 1.2 Harmattan API
● Fully productized set of Qt
QML Qt Mobility
Components
APIs
● One API reference Qt
Qt Qt Sparql
Webkit
● Compatibility Promise
(Updates)
Open GL
GStreamer Pulseaudio
● APIs cover most ES 1.1/2.0
development needs
Resource
Signon Telepathy Qt4
Policy
Ovi
Qm System Notifications Accounts
Engine

16. Basic Mobile Application
● Network – Location –
.desktop
Maps QML Files
icon
.pro
● Integrated into Harmattan
UX
C++ Wrapper
QML Qt Components Qt Mobility
Qt Qt Webkit Qt Sparql
Open GL ES
GStreamer Pulseaudio
1.1/2.0
Resource
Signon Telepathy Qt4
Policy
Ovi Notifications
Qm System Accounts
Engine

17. Extended Mobile Multimedia Application
● Multimedia– Tracker QML Files
● Integrated into Harmattan .js Files
.desktop
.aegis
UX
icon
.pro
.qrc
C++ Wrapper
C++/Qt Logic
Qt
QML Qt Mobility
Components
Qt Qt Sparql
Qt
Webkit
Open GL ES
GStreamer Pulseaudio
1.1/2.0
Resource
Signon Telepathy Qt4
Policy
Qm Ovi Notifications
Accounts
System Engine

18. Mobile Game
● Develop on top of Qt
QML Qt Mobility
Components
standard technologies:
● Open GL ES
Qt Qt Sparql
● GStreamer Qt
Webkit
● Pulseaudio
Open GL
GStreamer Pulseaudio
ES 1.1/2.0
Resource
Signon Telepathy Qt4
Policy
Ovi
Qm
Notifications Accounts
System
Engine

19. 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!

20. 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:
SECURITY FW
MeeGo 1.2
● Configurable access control Harmattan API
● Integrity checking for all executable files
● Protection of sensitive data
Platform API
● Protection of software deployment chain

21. Aegis Manifest File
● Credentials can be seen from @credential tag in the
header files
● Package component may request or provide credentials
● CAP::capability ● Cellular ● TrackerReadAccess
● UID::user ● Location ● TrackerWriteAccess
● GID::group ● Synchronization
<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>

22. MeeGo Harmattan
Application Framework

23. 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

24. Application Framework
C++ Business Logic QML User-Interface
Application Plug-ins
Application
Mobility Plug-ins
MeeGo Plug-ins Qt Components
JS Environment QML Primitives
QtDeclarative

25. 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

26. 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

27. 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

28. Simple Application UI
import QtQuick 1.1
import com.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()
}
}
}
import QtQuick 1.1 I
mport com.nokia.meego 1.0
Page {
id: listPage
anchors.margins:
rootWindow.pageMargin
function openFile(file) {
var component = Qt.createComponent(file)
if (component.status == Component.Ready)
pageStack.push(component);
else
console.log("Error loading component:", component.errorString());
}
// Page content
MouseArea {
id: mouseArea
anchors.fill: background // Note this element is not shown in the example (page content)
onClicked: {
listPage.openFile(page)
}
}

29. Page Navigation
// Pages can be created using any element // It is possible to provide property bindings
ExamplePage { pageStack.push(examplePage, { foo: bar, foz: baz });
id: examplePage
greeting: "Hello World!" // If Component element is used, an Item is created and
} // or // destroyed automatically
Component {
id: examplePage // If any other element type is used (Item), then the owenership
ExamplePage { // is changed and returned when the page is pushed and
greeting: "Hello World!" // popped
}
}
// In case you have multiple pages, you should consider lazy loading of pages
Page {
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: componentDynamic
Item {

30. Styling and Theming
● Qt Quick components provide a system-specific common
look-and-feel
● However, the components themselves do not provide a
common LAF import "UIConstants.js" as UIConstants
UIConstants.DEFAULT_MARGIN
● Use system-specific constants UIConstants.BUTTON_SPACING
UIConstants.HEADER_DEFAULT_HEIGHT_PORTRAIT
UIConstants.HEADER_DEFAULT_HEIGHT_LANDSCAPE
● Elements have style attribute UIConstants.FONT_XLARGE // 32 px
● Menu => MenuStyle UIConstants.FONT_XSMALL // 18 px
UIConstants.FONT_SLARGE // 26 px
UIConstants.FONT_DEFAULT // 24 px
● Platform-dependent style UIConstants.FONT_LSMALL // 22 px
● There is a theming daemon
● Shares the most common graphics and icons between apps
● Do not consume app memory
BorderImage {
source: "image://theme/meegotouch-list-background-pressed-center"
}

31. MeeGo Harmattan
Mobility APIs

32. QtMobility APIs
1.0.2 1.1 (Qt SDK) 1.2 (Tech Preview)
Bearer Management Local Connectivity
Service Framework Organizer
(to QtNetwork in 4.7) (BT, NFC)
Out-of-Process
Document Gallery Augmented Reality?
Publish&Subscribe Versit Face Recognition?
Feedback
Messaging Sensors
QML Bindings
Multimedia
Contacts
Camera
System Information
Location
Landmarks, Maps,
Navigation

33. QML QtMobility API Bindings
Note: some APIs are still under
development – subject to
change!

34. Location API and Map
import QtQuick 1.0
import QtMobility.location 1.1
Import the API you need…
Item {
width: 500; height: 500; focus: true
Map {
id: map …and use it the QML way!
plugin: Plugin { name : "nokia" }
size.width: parent.width
size.height: parent.height
zoomLevel: 12
center: Coordinate {
latitude: 61.4979781
longitude: 23.7649307
}
MapCircle{
center: Coordinate {
latitude: 61.4979781
longitude: 23.7649307
}
radius: 1000.0
}
}
}

35. Location API and Map
Item {
...
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;
}
}
}

36. 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

37. MeeGo Harmattan
QML and C++ Integration

38. 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

39. 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

40. Example: Class Header
class MyCounter : public QObject
{
Q_OBJECT
Q_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;
};

41. 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);
}

42. 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/Javascript
import Qt 4.7
Rectangle {
id: theWindow
width: 200; height: 200
Text {
anchors.centerIn: theWindow
text:"The counter="+theCounter.currentValue
}
MouseArea {
anchors.fill: parent
onClicked: {
theCounter.increaseCounter()
}
}
}

43. 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