Académique Documents
Professionnel Documents
Culture Documents
Workshop Objectives
To get a really good overview on
What is Qt development especially on mobile platforms
QtMobility APIs
To go technical enough
To actually be able to start doing something meaningful after the course! Qt is C++, so prior C++ knowledge is required
If you have any questions at any point, please do not hesitate to ask! For more information:
http://www.forum.nokia.com http://developer.qt.nokia.com
2
Schedule Estimate
Practicalities, Qt Mobile Overview & Status Nokia Qt SDK Free Ovi Store Symbian Signing Smart Installer and Publishing to Ovi Store Qt essentials
Qt Animation Framework Qt GraphicsView Creating Outstanding UIs with QtQuick Porting iPhone / Android apps to Qt Qt Mobility APIs
Required Tools
Laptop:
Qt for Desktop (windows/linux/mac) Nokia Qt SDK
includes QtMobility APIs includes Qt for Symbian includes Qt Creator IDE
Course Material
Please copy the material from the USB stick Contains:
Course slides Exercise book Exercise solutions A few additional sample applications
A few N8 devices available for you to try out during the hands-on exercises!
Qt Overview
Qt Status for Mobile Devices
What is Qt?
Cross-Platform APIs
Cross-platform Qt APIs are wrappers around native services
Application 1 Application 2 Application 3
Qt APIs Qt
Different Qt Platforms
Qt/X11
Qt/MeeGo
Qt/Win
Qt/Mac
Symbian development
source: developer.symbian.org
10
Symbian in N8
Its the newest Symbian platform that
Is based on Symbian^1 (and ^2) that back then was S60 5th ed. => Symbian with touch screen Supports Qt Has an UI framework made still with AVKON (S60 UI FW) The new Nokia N8 is using, and the forthcoming ones
11
Qt Developer Offering
Qt Quick, Qt Quick Components
UI
QtDeclarative QtWebkit
QtSvg
QtGUI
QtOpenGL
Engine
Qt
QtScript QtSql QtXml QtMultimedia QtCore QtXmlPatterns QtNetwork
Qt Mobility APIs
Symbian C++
Open C / POSIX
Desktop OSs
Symbian Symbian
Linux MeeGo
12
13
What is MeeGo?
Moblin
Maemo
14
MeeGo Architecture
Netbook UX
Netbook UI + Apps Netbook UI Framework
QtCore, QtGui, QtNetwork, Qt Mobility APis, etc
Qt Quick
Handset UX
MeeGo API
Media Services
Media FW GStreamer Camera GStreamer plug-in Codecs GStreamer plug-in Audio PulseAudio UPnP GUPnP
Comms Services
Connection Mgmt ConnMan Telephony oFono VOIP, IM, Pres Telepathy Bluetooth BlueZ
Internet Services
Layout Engine WebKit Web Run-Time WebKit Web Services Lib SocialWeb Location GeoClue
Visual Services
3D Graphics OpenGL / ES 2D Graphics Cairo, QPainter I18n Rendering Pango, QText GTK /Clutter
Data Mgmt
Content Framework Tracker Context Framework ContextKit Package Manager PackageKit
Device Services
Device Health
Personal Services
PIM Services
Sensor Framework
Device Sync
Resource Manager
MeeGo Kernel
16
Build Tools
Configure, Qmake, Moc, Uic and Rcc
Development Tools
Qt Creator, Qt Designer, Qt Assistant, Qt Linguist
QtOpenGl
QtOpenVG
QtSvg
QtWebKit
QtXmlPatterns
QtGui
QtSql
QtXml
QtNetwork
QtScript
Phonon
QtMultimedia
QtCore
17
18
19
Nokia Qt SDK
20
Nokia Qt SDK
Since 4/2010 the Nokia Qt SDK has been available for all Qt related development
Windows Linux, Mac (remote compilation)
Includes
Qt for Symbian and Maemo (4.6.3) QtMobility APIs 1.0.2 Qt Creator IDE 2.0 Qt Simulator ODD for all devices
21
Compile Execute Debug applications for all Nokia devices by just one click Provides quick-test tool for mobile UI / mobile events
Qt Simulator
22
23
24
Target Platforms
All your Qt target platforms are visible in the project wizard You can more targets later to your project
25
26
Work Flow
3. Try in Qt Simulator
27
Work Flow
3. Try in Qt Simulator
28
Qt Simulator
Try out UI in phone LAF Simulate mobile events Only for quick-testing!
29
OVI Suite (or older PC Suite) is also required for the data connection between Nokia device and your device
30
31
32
Qt/Symbian applications are Symbian processes from the OSs point of view
Need capabilities for accessing secured services!
33
http://developer.symbian.org/wiki/index.php/Capabilities_(Symbian_Signed)
34
35
36
Smart Installer
Publishing to Ovi Store
37
Smart Installer
Your killer Qt app
Nokia N8 (Qt-ready!)
???
38
Smart Installer
Your killer Qt app
Nokia N8 (Qt-ready!)
Smart Installer
39
Smart Installer
Check requirements
Smart Installer
41
Self-sign:
C:\Sources\Application> make install_sis
Symbian Signed:
<first create signed sis>
42
Qt 4.6.3 (4.6.4) pre-installed Second wave of devices will have Qt 4.7 Capasitive touch screen Multi-touch and Gestures work A GPU! HW accelerated graphics usable with QtOpenVG rasterization mode
43
Qt Essentials
44
Qt APIs Qt
45
46
47
lcd
slider
48
49
Signals
A signal is a way to inform a possible observer that something of interest has happened inside the observed class
A QPushButton is clicked
QPushButton::clicked()
Signals are member functions that are automatically implemented in the metaobject
Only the function declaration is provided by the developer
50
Slots
A slot is a function that is to be executed when a signal has been emitted.
(When QPushButton is clicked), close QDialog (When service is ready), ask for the value and store it (When QSlider value is changed), display the value in QLCDNumber
51
52
Connections
To receive a signal in a slot, signal and slot must be connected
bool success = QObject::connect( senderObject, SIGNAL(valueChanged(int)), observerObject, SLOT(display(int)));
Signal and slot signatures must match (signal may have more parameters)
No compile time error checking is made!
53
Some Object
slot function
Some Object
2. Event is generated and delivered for the corresponding objects event handler function
QEvent (mouse press)
slot function
Hey! Im
Event handler
54
55
valueChanged()
Hey! Im clicked()
Some Object
slot function
56
2. emit valueChanged(21)
int main( int argc, char** argv ) { QApplication app( argc, argv ); QWidget window; QLCDNumber* lcd = new QLCDNumber( &window ); QSlider* slider = new QSlider( Qt::Horizontal, &window ); QObject::connect( slider, SIGNAL(valueChanged(int)), lcd, SLOT(display(int))); window.showMaximized(); return app.exec(); }
3. display(21)
57
Application works, but is not exactly what was intented Maybe a layout manager would be nice to add!
58
window
QWidget window; QVBoxLayout* layout = new QVBoxLayout( &window ); QLCDNumber* lcd = new QLCDNumber( &window ); QSlider* slider = new QSlider( Qt::Horizontal, &window ); layout->addWidget( lcd ); layout->addWidget( slider );
layout
lcd
QObject::connect( slider, SIGNAL(valueChanged(int)), lcd, SLOT(display(int))); window.showMaximized(); return app.exec(); }
slider
59
60
Summary on Qt Basics
Tree of Objects One main widget acts as the parent Signals and slots are used for making objects interact with each other Layout managers used instead of hard coded positions
61
Qt Designer
Comes with Desktop Qt as a separate application
Also integrated to Carbide.c++ and QtCreator, as Form Designer
Dragndrop UI designer Outputs XML-based .ui files .ui files are converted automatically to .h files by uic (ui compiler)
myproject.ui -> ui_myproject.h
62
63
64
UI Class
QMainWindow
65
Single inheritance
Extend functionality with custom slots
66
Direct Approach
In the .pro file, add FORMS += Slider.ui
#include ui_Slider.h int main( int argc, char** argv ) { QApplication app( argc, argv ); Ui::SliderClass ui; QMainWindow window; ui.setupUi( &window );
UI Class
QMainWindow
window.showMaximized(); return app.exec(); }
67
Single Inheritance
Easy to add custom functionality with custom slot functions UI Class becomes a member variable
#include "ui_Slider.h" class SliderApplication : public QMainWindow { Q_OBJECT public: SliderApplication(QWidget *parent = 0); ~SliderApplication(); public slots: void changeLcdColor(int value);
QMainWindow
SliderApplication UI Class
68
void Slider::changeLcdColor(int value) { QPalette pal = ui.lcdNumber->palette(); pal.setBrush( QPalette::WindowText, QBrush(QColor(value*2.55, value*2.55, value*2.55)) ); ui.lcdNumber->setPalette(pal); }
Dragging the slider now also changes the color of the LCD Number (from black to white)
69
Summary
Own GUI often is an extended version of QMainWindow (or QDialog)
The main widget also acts as a parent for all other widgets/objects
Custom behaviour is added with custom slot functions that are connected to suitable signals Qt Designer can be used for quick UI layouting Qt Simulator can be used for quick mobile UI simulating Device deployment in Nokia Qt SDK pretty straightforward
70
Hands-On!
Try it! Make it work!
71
72
Introduction 1(2)
In Qt 4.6 a new Animation Framework was introduced The idea is to provide an easy and scalable way of creating animated and smooth GUIs
Hides the complexity of handling timers Provides a set of pre-defined easing curves, custom curves can be provided by the developer as needed
Works by modifying the properties of the QObjects being animated An animation is a linear interpolation of an objects property from the start value to the end value over a given time duration
73
Introduction 2(2)
Can also be used easily together with the State Machine Framework to provide animated transitions between states Normally the animations have a finite duration
QTimeLine used as a timer behind the scenes Can be made to loop and run backwards
If loopCount is set to -1, the animation will run until explicitly stopped
74
Main Classes
75
QPushButton button("Animated Button"); button.show(); QPropertyAnimation animation(&button, "geometry"); animation.setDuration(10000); animation.setStartValue(QRect(0, 0, 100, 30)); animation.setKeyValueAt(0.5, QRect(250, 250, 100, 30)); animation.setEndValue(QRect(0, 0, 100, 30)); animation.start();
Demo
76
77
78
Easing Curves
The Animation FW provides multiple pre-made easing curves for your convenience
Represented by the class QEasingCurve Custom curves can made by the developer; see the class documentation for details
Typically used to control e.g. how the animation starts and/or finishes
QEasingCurve::OutBounce QEasingCurve::InOutQuad
QPropertyAnimation animation(&button, "geometry"); animation.setEasingCurve(QEasingCurve::OutBounce);
Graphics Effects
Graphics effects provide an easy-to-use mechanism for adding effects on QGraphicsItems and QWidgets
QGraphicsItem::setGraphicsEffect(QGraphicsEffect*) QWidget::setGraphicsEffect(QGraphicsEffect*)
80
Standard Effects
QGraphicsBlurEffect QGraphicsOpacityEffect
Source
QGraphicsColorizeEffect
QGraphicsDropShadowEffect
81
Demo
82
Hands-On Animations!
Play around with
Qt Creator Nokia QT SDK Animations Framework Graphics Effects
83
Qt GraphicsView
84
Mobile Qt UI Offering
QGraphicsView
CUSTOM LAF
QWidgets
NATIVE LAF
85
Custom UI w/ QGraphicsView
QGraphicsView is a QWidget, designed for showing custom 2D graphics inside: er e
tom Cus ph s gra go th
If the only widget (the window itself) is a QGraphicsView, the whole UI is then custom:
86
QGraphicsScene
is a 2D container for
QGraphicsItem
87
88
Qt Quick
Creating Outstanding UIs with Qt Quick
89
What is Qt Quick?
Qt User Interface Creation Kit
Combines concepts such as Declarative UI and QML
90
91
QML
Qt Meta-Object Language A declarative, script-like language for defining the elements of a graphical UI
Actually an extension to ECMAScript (cf. JavaScript) Provides a mechanism to build an object tree of QML elements Enables interaction between QML elements and Qts QObject-based C++ objects
92
QtDeclarative
QtDeclarative is a new module in Qt
Enables running applications (partly) written in QML Also provides facilities for embedding QML content into Qt/C++ applications Implements the necessary QML <-> C++ bindings
Contains a tool called qmlviewer (qmlviewer.exe) for running standalone QML/JavaScript applications
I.e. allows viewing of .qml files without them being loaded into a proper Qt application Meant for development and testing purposes only! Provides a mechanism of providing dummy dynamic data for the QML code
The data are normally, of course, provided by Qt/C++ code when the final application version is run
93
Development Tools
Qt Creator is the de facto tool for Qt development
Also for Qt Quick, of course!
To write proper Qt Quick UIs embedded in Qt/C++ applications, you will also need a Qt 4.7 SDK A WYSIWYG editor is coming, already a preview available
94
Qt Quick
QML Intro
95
Introduction
As mentioned, QML is a declarative language for defining how:
An application looks like, and How it behaves
A QML UI is composed of a tree of elements with certain properties Prior knowledge of JavaScript (+ HTML and CSS) is an advantage when learning QML
Not strictly required, though
96
Lets start off with a simple example: a light blue rectangular area on the screen Easy to read and understand?
Very JavaScriptish, right?
97
Each element has a body between { and } A set of default elements are included in the Qt module
98
There are also elements that are used for describing the behavior of the application
State, PropertyAnimation, Transition, Timer, DateTimeFormatter, Connection, ... Referred to as QML declarative elements in the documentation
99
Item Element
Has no visual appearance, but defines all the properties that are common to all UI elements
As mentioned, all UI elements inherit the Item element
100
Elements contain properties Each property is defined using its name and a value
name : value value can also be a piece of JavaScript
}
Qt for N8 - Digia Plc
Properties
QML supports properties of many types
Int, bool, real, color, string, list,
102
Example Summary
/* woodenhead.qml starts here, with a multiline comment */ import Qt 4.7 Rectangle { width: 350 // Single line comment height: 200 color: "lightblue" }
A Rectangle element with a body: { } three properties, width, height and color When executed in qml viever, will produce a light blue window of size 350x200
103
Tree of Elements
104
Example
Traffic Lights
105
Summary
QML is a language for declaring UIs
Not imperative, line-by-line, code With JS can embed some logic to the QML code as well
One QML document defines one QML component that is a tree-like structure of Elements Elements consist of properties that can either have a fixed value or be bound into value of another property
106
Qt Quick
User Interaction & Components
107
If you want to use a button, line edit or slider you will do it yourself
button = rectangle with a text and a mouse area accepting mouse clicks
New QML Components are very easy to do An official library of Mobile QML Components is also on its way
108
*click*
109
110
111
112
113
So, monetizing Qt Quick applications is soon to come, but now Qt 4.6.3 is the choice!
114
Compile project manually or with Nokia Qt SDK by selecting the correct Symbian SDK And thats it!
115
116
Inside Flowd
Qt/C++ Engine
117
No components (yet)
no styling
118
Qt Mobility Bindings
Qt Mobility 1.1 (now in beta) includes QML Bindings for all classes You can access mobility APIs functionality directly from QML RotationSensor { onReadingChanged: { } }
119
QGraphicsView
Qt Quick
QtWebkit
CUSTOM LAF
QWidgets
NATIVE LAF
120
Qt Quick Components
The abstraction level for QML programming will also rise Component libraries that allow creation of Qt Quick programs from a set of ready UI components
Components imitate existing LAF
121
122
Contents
Different Application Approaches in Nokia Devices Porting from iPhone or Android to Qt, no code re-use
Mapping concepts
123
Qt C++
WEB
124
Qt Applications
Qt C++
Qt Quick UI Qt C++, UI with QWidgets C++, UI with Graphics View C++ Native LAF Custom LAF Custom LAF with
easy-to-develop More native applications script-like syntax multiple UI approaches Extensive engine support through Qt and Qt Mobility APIs
125
QtWebkit
WEB
Qt C++
Possibility to embed dynamic contents to Qt C++ program E.g. create the whole UI with Web technologies and show it in QWebView Widget Collaborate between JavaScript and C++ Re-use existing web documents
126
127
iPhone Overview
Applications in iPhone are written using the Objective-C programming language Development of Objective-c applications requires the use of Apple environment Tools in use
Objective-C: XCode Qt/Symbian: Qt Creator, Carbide.c++
128
The Cocoa framework consists of libraries, APIs and runtimes that form the development layer for all of Mac OS X
Applications automatically inherit the same Mac OS X LooknFeel
129
Only one foreground iPhone application can be executed at a time (excluding iPhone 4)
When user selects application icon from menu, new process launches Pressing home screen button closes the application process Applications try to imitate background execution by state saving
130
131
Android does not use standard Java APIs, such as J2SE or J2ME
Not compatible with Java apps written for other platforms
Android apps do not provide one entry point (like main function) but a set of essential components
Activities, services, broadcast receivers and content providers Application process is started when any part of it is needed, and instantiate Java objects for that part
132
Android Views
View structure
Views
Dialog
QDialog
133
Qt Quick UI
C++
C++, UI with Graphics View
134
Porting Summary
iPhone & Android
No code re-use Web content/graphics can be re-used Different alternatives for re-implementation for different purposes (Qt, Qt w/ Graphics View, Qt Quick, QtWebkit, WRT)
135
Qt Mobility APIs
136
Background
Qt originally designed for desktop OSs
Originally no APIs for mobile device related features
137
1.1
Later?
Service Framework
Organizer
Augmented Reality
Publish&Subscribe
Versit
Document Gallery
Face Recognition
Messaging
Sensors
Feedback
Contacts
System Information
138
Status at 1.1
139
Installation
Comes with Nokia Qt SDK Install the .sis for the device
Also comes with Nokia Qt SDK
140
141
int main( int argc, char *argv[] ) { QApplication app( argc, argv ); QSystemInfo s; QLabel *label = new QLabel( "Current language is "+ s.currentLanguage() + " and you're using Qt " + s.version(QSystemInfo::QtCore) ); label->show(); return app.exec(); }
All classes within Mobility APIs are placed inside namespace QtMobility. You can raise the whole namespace or either use syntax QtMobility::<ClassName>, like QtMobility::QSystemInfo
142
QSystemInfo provides access to various general information from the system, like here the language and version of Qt Libs
int main( int argc, char *argv[] ) { QApplication app( argc, argv ); QSystemInfo s; QLabel *label = new QLabel( "Current language is "+ s.currentLanguage() + " and you're using Qt " + s.version(QSystemInfo::QtCore) ); label->show(); return app.exec(); }
143
144
Compiling
Nokia Qt SDK
Symbian
qmake make release-gcce To create/install the .sis createpackage i hw_template.pkg release-gcce
145
QSystemDisplayInfo
QSystemInfo
QSystemNetworkInfo
QSystemScreenSaver
QSystemStorageInfo
146
QSystemDeviceInfo Example
Small application to show the current profile, battery level and power status
Profile status naturally not available in Windows
Demo
147
148
149
150
151
Functionality can be shared between applications Developer has device independent methods for finding/using/implementing services
152
153
Sensors API
The API supports sensors that poll for their data and sensors that push data to the app as it arrives
Application Code QSensor QSensorBackend
QSensorReading
Device Plugin
QSensor (and its subclasses) provide application with access to data input from a sensor
Direct subclass instantiation QSensorReading subclasses represent single readings from a single sensor
QSensorBackend can be used to make sensors available through the same API, by creating plugins
154
155
156
157
Messaging API
Access to messaging services
Search and sort Create and modify Send and retrieve Launch preferred message client
A unified interface for manipulation and storage of SMS, MMS, Email and XMPP messages is provided
158
159
Creating a Message
// The developer creates a QMessage object and then sets the necessary message details. First set the message type, the default account for messages of the specified type will be used for sending : QMessage message; message.setType(QMessageAddress::Email); // Now a recipient is set : QString recipient(user@example.com); message.setTo(QMessageAddress(QMessageAddress::Email, recipient)); // For email a subject and a body are set, and any relevant attachments added : message.setSubject(Example subject); message.setBody(Example body text); QStringList attachmentPaths; attachmentPaths << images/landscape.png; message.appendAttachments(attachmentPaths);
160
161
Location API
This API provides an easy to use interface that encapsulates basic geographical information obtained from satellite or other sources about the user
QGeoPositionInfo class contains information gathered on a global position, direction and velocity at a particular point in time
162
163
164
Demo! - Locationer
Get your location and send to your friend via SMS!
165
Contacts API
The Contacts API allows developers to manage contact data in a platform independent way.
A contact is the digital representation of a person, group or entity A contact consists of a set of contact details with own semantics of usage and storage with different context info (like separate phone number for work and home)
166
QContactDetail
QContactManager
Access to contacts stored in particular backend Used to select contacts through QContactManager Interface for performing actions to contacts (like Send email or Dial)
QContactFilter
QContactAction
167
Versit API
Functionality for reading and writing Versit documents such as vCards
QVersitDocument QVersitReader QVersitWriter
168
Allows comparison and prioritization of the access and use of grouped access points When using Bearer Management the developer does not need to worry about locating the best connection
User selects best Transparent selection
169
QNetworkConfigurationManager
QNetworkSession
Control over the system's access points and enables session management for cases when multiple clients access the same access point
170
Application lists available network configurations and shows small information on the selected one
UI consists only of a QListView and a QTextBrowser QListView uses QStringListModel (which has the names of the configurations)
For a more complex example, see Bearer Monitor example of the Mobility APIs
Demo
171
Multimedia APIs
Play audio & video of various formats Record audio Playing and managing of an FM radio With QtMultimedia, will eventually replace Phonon API Access of multimedia services with minimal code and maximal flexibility
172
Included in 1.1.0
173
1.1
Later?
Service Framework
Organizer
Augmented Reality
Publish&Subscribe
Versit
Document Gallery
Face Recognition
Messaging
Sensors
Feedback
Contacts
System Information
174
Summary
175
Thank You!
www.digia.com
176