starting development for nokia n9
DESCRIPTION
This is a short descrption of MeeGo Harmattan developmentTRANSCRIPT
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