qt for mobile
TRANSCRIPT
-
7/30/2019 QT for mobile
1/204
1
Qt for Mobile
Tuukka Ahoniemi
Technical Trainer
Digia Plc
-
7/30/2019 QT for mobile
2/204
2Qt for Mobile
?
Thats where me and ~1499 other computerish professionals work
G lobal, based in F inland
~50 % work with mobile technologies A large, traditional S ymbian house
S ince day 1, heavily involved with Q t on mobile devices
Qt Training Partner
http://www.digia.com
-
7/30/2019 QT for mobile
3/204
3Qt for Mobile
Objectives 1/2
To get a really good overview on
What is Qt development especially on mobile platforms
Q tMobility APIs
Howdo you work with the new Nokia N8
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
-
7/30/2019 QT for mobile
4/204
4Qt for Mobile
Objectives 2/2
QWidgets NATIVE LAF
QGraphicsView CUSTOM LAFQtWebkitQt Quick
In addition to Qt basics , we will take a look at the various ways a UI can
be created in Qt
To understand the variety of Qt offering for a developer!
-
7/30/2019 QT for mobile
5/204
5Qt for Mobile
Schedule Estimate, Day 1
Practicalities
Qt Mobile O verview & S tatus
Qt E ssentials
F irst Qt Application
Lunch
Working with the Nokia Q t S DK
Tutorial
More Qt E ssentials, S ignals and S lots!
Hands-on
Qt Mobility APIs intro
Hands-on
-
7/30/2019 QT for mobile
6/204
6Qt for Mobile
Schedule Estimate, Day 2
Qt Mobility APIs walkthrough
Hands-on
Porting Issues & R e-Using Platform C ode
Lunch
Mobile Qt UI Offering QWidgets
Animation FW + H ands-on
G raphics Viev, Q tWebKit
Qt Quick intro!
-
7/30/2019 QT for mobile
7/204
7Qt for Mobile
Required Tools
Laptop:
Qt S DK for Desktop (Windows/Linux/Mac)
Nokia Qt S DK for mobile development Includes Qt Mobility APIs
Includes Qt for S ymbian and Maemo
Includes Qt C reator IDE
S ymbian device (if you have one):
Qt libraries
Qt Mobility libraries
TR K application
-
7/30/2019 QT for mobile
8/204
8Qt for Mobile
Course Material
Please copy the material from the US B stick
C ontains: C ourse slides
E xercise solutions
A fewadditional sample applications
A few N8 devices available for you to try out during the hands-on
exercises!
-
7/30/2019 QT for mobile
9/204
9
Qt Overview
Qt Status for Mobile Devices
-
7/30/2019 QT for mobile
10/204
10Qt for Mobile
What is Qt?
-
7/30/2019 QT for mobile
11/204
11Qt for Mobile
Cross-Platform APIs
C ross-platform Qt APIs are wrappers around native services
HW
Windows Kernel Mac
Win32 GDI Carbon / Cocoa
Qt/Windows Qt/Mac
Symbian
S60 / OpenC
Qt/Symbian
Qt
Qt APIs
Application 1 Application 2 Application 3
-
7/30/2019 QT for mobile
12/204
12Qt for Mobile
Different Qt Platforms
Qt is currently ported to
Desktops: Windows, Linux (X11), Mac
Mobile platforms: E mbedded Linux, Windows C E ,
Maemo/MeeG o, and S ymbian
Qt/X11 Qt/Win Qt/MacQt/Embedded
LinuxQt/WinCE Qt/SymbianQt/MeeGo
One and unified Cross-Platform API
-
7/30/2019 QT for mobile
13/204
13Qt for Mobile
What is Qt on Mobile?
-
7/30/2019 QT for mobile
14/204
14Qt for Mobile
What is Symbian^3?
Actually, just S ymbian (or the New S ymbian)
The latest S ymbian platform release
Multiple home screens Multi-point touch
HD multimedia capabilities
Improved multitasking
Improved graphics architecture Q t libraries pre-installed!
Nokia N8 is the first S ymbian 3 device
More devices coming out shortly!
E .g. Nokia E 7
-
7/30/2019 QT for mobile
15/204
15Qt for Mobile
Qt and the Nokia N8
The first Symbian^3 device
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 separate GPU! HW accelerated graphics QtOpenVG rasterization mode
-
7/30/2019 QT for mobile
16/204
16Qt for Mobile
Qt & Older Symbian Releases
Qt-based applications can potentially be run on any S ymbian platform
starting from S 60 3rd E dition, F eature Pack 1
Millions of target devices out there already!
However, note the lesser computing power of such devices
These older devices do not have Qt libraries pre-installed
S ymbian smart installer to the rescue! http://wiki.forum.nokia.com/index.php/Nokia_ S mart_ Installer_ for_ S ymbian
-
7/30/2019 QT for mobile
17/204
17Qt for Mobile
Smart Installer
Market of Zillions of Symbianphones, BUT yet without
Qt libraries
Your Qt app
Nokia N8 (Qt-ready!)
? ? ?
-
7/30/2019 QT for mobile
18/204
18Qt for Mobile
Smart Installer
Market of Zillions of Symbianphones, BUT yet without
Qt libraries
Your Qt app
Nokia N8 (Qt-ready!)
Smart Installer
-
7/30/2019 QT for mobile
19/204
19Qt for Mobile
Smart Installer server
Distribution.sis package
Smart Installer
Your Qt app
Check requirementsSmart Installer
Download and installmissing requirements
-
7/30/2019 QT for mobile
20/204
20Qt for Mobile
What is MeeGo?
Maemo
IntelsMoblin
-
7/30/2019 QT for mobile
21/204
21Qt for Mobile
MeeGo Architecture
Settings Database
GConf
Platform Info
libudev
Message Bus
D-Bus
System Libraries
glibc, glib
MeeGo Kernel
MeeGo API
CommsServices
Connection Mgmt
ConnMan
Netbook UX Netbook UI + Apps
Netbook UI Framework
Telephony
oFono
VOIP, IM, Pres
Telepathy
Bluetooth
BlueZ
InternetServices
Layout Engine
WebKit
Web Run-Time
WebKit
Web Services
Lib SocialWeb
Location
GeoClue
VisualServices
3D Graphics
OpenGL / ES
2D Graphics
Cairo, QPainter
I18n Rendering
Pango, QText
GTK /Clutter
MediaServices
Media FW
GStreamer
Camera
GStreamer plug-in
Codecs
GStreamer plug-in
Audio
PulseAudio
Data Mgmt
Content Framework
Tracker
Context Framework
ContextKit
Package Manager
PackageKit
DeviceServices
Device Health
Sensor Framework
Resource Manager
Backup & Restore
PersonalServices
PIM Services
Device Sync
Accts & SSO
Handset UX Handset UI + Apps
Handset UI Framework
X UPnP
GUPnP
-
7/30/2019 QT for mobile
22/204
22Qt for Mobile
MeeGo Architecture
Settings Database
GConf
Platform Info
libudev
Message Bus
D-Bus
System Libraries
glibc, glib
MeeGo Kernel
MeeGo API
CommsServices
Connection Mgmt
ConnMan
Netbook UX Netbook UI + Apps
Netbook UI Framework
Telephony
oFono
VOIP, IM, Pres
Telepathy
Bluetooth
BlueZ
InternetServices
Layout Engine
WebKit
Web Run-Time
WebKit
Web Services
Lib SocialWeb
Location
GeoClue
VisualServices
3D Graphics
OpenGL / ES
2D Graphics
Cairo, QPainter
I18n Rendering
Pango, QText
GTK /Clutter
MediaServices
Media FW
GStreamer
Camera
GStreamer plug-in
Codecs
GStreamer plug-in
Audio
PulseAudio
Data Mgmt
Content Framework
Tracker
Context Framework
ContextKit
Package Manager
PackageKit
DeviceServices
Device Health
Sensor Framework
Resource Manager
Backup & Restore
PersonalServices
PIM Services
Device Sync
Accts & SSO
Handset UX Handset UI + Apps
Handset UI Framework
X UPnP
GUPnP
Qt Quick
QtCore, QtGui, QtNetwork, Qt Mobility APis, etc Qt
-
7/30/2019 QT for mobile
23/204
23Qt for Mobile
Qt and All These?
== E V E R Y W H E R E !
-
7/30/2019 QT for mobile
24/204
24Qt for Mobile
DesktopOSs
Symbian MeeGo
Symbian Linux
Qt Mobility APIs
Linux C /C ++libraries
Qt Developer Offering
O pen C / PO S IX
Qt
S ymbian C ++
UI
Engine
MobileMobileMobileMobile
FeaturesFeaturesFeaturesFeatures
Low level
Native access
QtNetworkQtXml
QtGUI
QtCoreQtScript QtSql
QtSvg
QtXmlPatterns
QtWebkit
QtMultimedia
QtOpenGL
NativeAPIs
85% ofuse cases
**
15% of
use cases**
QtDeclarative
Qt Quick, Qt Quick C omponents
-
7/30/2019 QT for mobile
25/204
25Qt for Mobile
Working with Qt on Mobile Devices
Nokia Qt S DK is the easiest approach
Full IDE , Qt C reator
All Nokia S DKs included (S ymbian, Maemo)
Qt S imulator
On-device debugging (ODD)
Y ou will get plenty of hands-on exercise with this!
-
7/30/2019 QT for mobile
26/204
26Qt for Mobile
Install Qt, Get What?
~15 modules
~ 700 API classes
Build Tools
C onfigure, qmake, moc, uic and rcc
Development Tools
Qt C reator, Qt Designer, Qt Assistant, Q t Linguist
QtCore
QtGui QtNetworkQtSql QtXml
QtOpenGl QtSvg Qt3Support
Phonon
QtWebKit
QtScript
QtXmlPatternsQtOpenVG
QtMultimedia
QtMobility APIs
-
7/30/2019 QT for mobile
27/204
27Qt for Mobile
Camera
Landmarks, Maps,Navigation
Mobility API Roadmap
Service Framework
Publish&Subscribe
Messaging
Contacts
Bearer Management
(to QtNetwork in 4.7)
Versit
Sensors
Multimedia
System InformationLocation
Organizer
Document Gallery
Feedback
Telephony Events
1.0.2 1.1
Local Connectivity
(BT, NFC)
Later?
Face Recognition
Augmented Reality
removed!
-
7/30/2019 QT for mobile
28/204
28
Qt Essentials
-
7/30/2019 QT for mobile
29/204
29Qt for Mobile
What is Qt Programming?
Heavily object based C ++
Hundreds of ready-made classes, names start with Q
High abstraction level
UIs built from widgets
= UI Building Block, derived from QWidget
S ignalsnS lots, used for Object-to-object communication
Meta-Objects
And Q O bject as a common base class
Parent and C hild Objects
Memory management, window sharing
Has similarities to J ava
BUT is still C ++!
-
7/30/2019 QT for mobile
30/204
30Qt for Mobile
Very First Application
#include
#include
int main( int argc, char** argv )
{
QApplication app( argc, argv );
QLabel label( "Hetken kest elm..." );label.show(); // or showMaximized()
return app.exec();
}
-
7/30/2019 QT for mobile
31/204
31Qt for Mobile
Building Qt Applications in General
1. qmake project
C reates a Qt project file (.pro). This can also be created
manually.
2. qmake Uses the .pro file as input and produces platform-specific
Makefile(s)
3. make
C ompiles the program for the current platform
E xecutes also additional tools, such as moc, uic and rcc
Project
file (.pro)
Platformspecific
Makefiles
ApplicationBinary
makeqmake
-projectqmake
-
7/30/2019 QT for mobile
32/204
32Qt for Mobile
Creating Your Own Qt Application
Widgets
UI building blocks, base class QWidget
Label (QLabel)
One line text editor (QLineEdit)
Main window(QMainWindow)
Button (QPushButton)
etc.
Often your application UI is a composite widget which consists of multiple
contained widgets
We will see plenty of examples during the course
-
7/30/2019 QT for mobile
33/204
-
7/30/2019 QT for mobile
34/204
34Qt for Mobile
Input & Selection Widgets
Push buttons (QPushButton)
S election buttons (QR adioButton,QC heckBox)
Text input Line input (QLineE dit)
Plain text input (QPlainTextE dit)
Plain & rich text input (QTextE dit)
S pin boxes (QS pinBox)
Dial (QDial)
S croll bars (QS crollBar)
S liders (QS lider)
-
7/30/2019 QT for mobile
35/204
35Qt for Mobile
Qt Assistant
Y ou can use Q t Assistant to see how to use all the widgets
Provides not only profound class documentation but also good
articles on Qt conventions
-
7/30/2019 QT for mobile
36/204
-
7/30/2019 QT for mobile
37/204
-
7/30/2019 QT for mobile
38/204
38Qt for Mobile
More Widgets?
int main( int argc, char** argv )
{
QApplication app( argc, argv );
QLabel label( "Hetken kest elm..." );
label.show();
QLabel label2( "...ja sekin synkk ja ikv." );
label2.show();
return app.exec();
}
Not exactly what was intented E ach widget withouta parent becomes a windowof its own!
Why does S ymbian show only the latter one?
-
7/30/2019 QT for mobile
39/204
39Qt for Mobile
QObject Class Role
Heart of Qt's object model
Base class for all object classes
All QWidgets are QObjects also!
Provides object trees and object ownership
QObject's responsibility is to provide a central location for the
most important concepts in Qt
Has three major responsibilities
Memory Management
Introspection
E vent handling
-
7/30/2019 QT for mobile
40/204
-
7/30/2019 QT for mobile
41/204
-
7/30/2019 QT for mobile
42/204
42Qt for Mobile
Another Try
int main( int argc, char** argv )
{
QApplication app( argc, argv );
QLabel label( "Hetken kest elm..." );QLabel* label2 = new QLabel( "...ja sekin synkk ja ikv.",
&label );
label.show();
return app.exec();}
Nearly, but not quite enough
We need to use layouts!
-
7/30/2019 QT for mobile
43/204
Back to Our Example:
-
7/30/2019 QT for mobile
44/204
44Qt for Mobile
Back to Our Example:Final Try, Now With a Layout
int main( int argc, char** argv )
{
QApplication app( argc, argv );
QWidget window; // Needed, cos layout can not become a window
QVBoxLayout* layout = new QVBoxLayout(&window);
layout->addWidget( new QLabel( "Hetken kest elm...") );
layout->addWidget( new QLabel( "...ja sekin synkk ja ikv."));
window.show();
return app.exec();
}
-
7/30/2019 QT for mobile
45/204
-
7/30/2019 QT for mobile
46/204
46
Nokia Qt SDK
N ki Qt SDK
-
7/30/2019 QT for mobile
47/204
47Qt for Mobile
Nokia Qt SDK
S ince 4/2010 the Nokia Qt S DK has been available for all Qt-related
development
Available for Windows, Linux & Mac
Includes
Qt 4.6.3 for S ymbian and Maemo
QtMobility APIs 1.0.2
Qt C reator IDE 2.0
Qt S imulator
ODD for all devices
E xperimental remote compilation service Mainly aimed at Linux and Mac users wishing to compile for S ymbian
However, can be used to compile for any supported target device from any Nokia
Q t S DK desktop environment!
-
7/30/2019 QT for mobile
48/204
-
7/30/2019 QT for mobile
49/204
-
7/30/2019 QT for mobile
50/204
Work Flow
-
7/30/2019 QT for mobile
51/204
51Qt for Mobile
Work Flow
1. Design UI
2. Code Logic
5. Press Play and be amazed ofyour Awesomeness!
3. Try in Qt Simulator
4. Plug in device(s)and select target
-
7/30/2019 QT for mobile
52/204
-
7/30/2019 QT for mobile
53/204
First a Small GUI Example Slider
-
7/30/2019 QT for mobile
54/204
54Qt for Mobile
First, a Small GUI Example Slider
int main( int argc, char** argv ) {
QApplication app( argc, argv );
QWidget window;
QLCDNumber* lcd = new QLCDNumber( &window );
QSlider* slider = new QSlider( Qt::Horizontal, &window );
window.showMaximized(); // or show()
return app.exec();
}
window
lcd slider
Signals and Slots
-
7/30/2019 QT for mobile
55/204
55Qt for Mobile
Signals and Slots
Observer pattern
Type-safe callbacks
More secure than callbacks, more flexible than virtual methods
Many-to-many relationship
Implemented in QO bject
R equires meta-object (macro Q_ OBJ E C T)
Signals
-
7/30/2019 QT for mobile
56/204
56Qt for Mobile
Signals
A signalis a way to inform a possible observer that something of interest hashappened inside the observed class
A QPushButton is clicked
QPushButton::clicked()
An asynchronous service handler is finished QNetworkAccessManager::finished( QNetworkReply* reply )
Value of QS lider is changed (and the new value is informed as a parameter)
QSlider::valueChanged( int )
S ignals are member functions that are automatically implemented in the meta-object
Only the function declaration is provided by the developer
S ignal is sent, or emitted, using the keyword emit emit clicked();
emit someSignal(7, Hello);
-
7/30/2019 QT for mobile
57/204
Signal and Slot Implementation
-
7/30/2019 QT for mobile
58/204
58Qt for Mobile
Signal and Slot Implementation
class NewClass :public QObject
{
Q_OBJECT // Meta-object file needed
// Code convention recommends Q_OBJECT use always,// otherwise qobject_cast fails
signals:
// Implementation in the meta-object
voidnewSignal(int myInt, QString myString);
voidanotherSignal();
public slots:
// Slots are implemented as normal member functions
voidnewSlot(int i, QString s);
voidsomeSlot();
}
Connections
-
7/30/2019 QT for mobile
59/204
59Qt for Mobile
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)));
E mitted signal results
In an immediate slot function call, if signal and slot implemented in objects
in the same thread
S ignal and slot signatures must match (signal may have moreparameters)
No compile time error checking is made!
-
7/30/2019 QT for mobile
60/204
Events vs. Signals
-
7/30/2019 QT for mobile
61/204
61Qt for Mobile
g
S o, if you C R E ATE your own widgets
Y ou create event handlers:
What does this widget do when someone clicks it?
What does it do when keyboard is pressed?
What does it do when it is requested to paint itself (i.e. how does it paintitself)?
Y ou also tell, when does it emit signals
MyWidgetEvent handler
Hey! Im
clicked()
Event handler
Event handler
Events vs. Signals
-
7/30/2019 QT for mobile
62/204
62Qt for Mobile
g
If you US E existing widgets
Y ou are interested in existing signals
What do I want to do (somewhere else) when the widget is clicked()?
Y ou connect slot functions to the signals
SomeWidget
Hey!
valueChanged()
Hey! Im
clicked()
Some Object
slot function
Some Object
slot function
-
7/30/2019 QT for mobile
63/204
-
7/30/2019 QT for mobile
64/204
Slider Example w/ Layout Manager
-
7/30/2019 QT for mobile
65/204
65Qt for Mobile
int main( int argc, char** argv ) {
QApplication app( argc, argv );
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 );
QObject::connect( slider, SIGNAL(valueChanged(int)),
lcd, SLOT(display(int)));
window.showMaximized();
return app.exec();
}
layout
lcd slider
window
-
7/30/2019 QT for mobile
66/204
Summary on Qt Basics
-
7/30/2019 QT for mobile
67/204
67Qt for Mobile
Tree of O bjects
One main widget acts as the parent
S ignals and slots are used for making objects interact with each other
Layout managers used instead of hard coded positions
Do we always need to code the whole G UI? Nope! Lets check Qt Designer!
-
7/30/2019 QT for mobile
68/204
Qt Designer
-
7/30/2019 QT for mobile
69/204
69Qt for Mobile
C omes with Desktop Qt as a separate application
Also integrated to C arbide.c++ and QtC reator, 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
-
7/30/2019 QT for mobile
70/204
-
7/30/2019 QT for mobile
71/204
Lets Try It Out!
-
7/30/2019 QT for mobile
72/204
72Qt for Mobile
BMI C alculators layout!
-
7/30/2019 QT for mobile
73/204
-
7/30/2019 QT for mobile
74/204
-
7/30/2019 QT for mobile
75/204
-
7/30/2019 QT for mobile
76/204
-
7/30/2019 QT for mobile
77/204
-
7/30/2019 QT for mobile
78/204
Work Flow, Concretely!
-
7/30/2019 QT for mobile
79/204
79Qt for Mobile
1. Design UI
Work Flow, Concretely!
-
7/30/2019 QT for mobile
80/204
80Qt for Mobile
1. Design UI
2. Code Logic
-
7/30/2019 QT for mobile
81/204
-
7/30/2019 QT for mobile
82/204
-
7/30/2019 QT for mobile
83/204
Configuring the Devices
-
7/30/2019 QT for mobile
84/204
84Qt for Mobile
The first time, youll need
For symbian, install TR K (comes with S DK), for ODD
For maemo, configure MADDE connection
For any device, install Qt (+ QtMobility) libraries O r! Use smart-installer
F ind Getting Started with Nokia Qt SDKdocumentation forinstructions
OVI S uite (or older PC S uite) is also required for the data connection
between Nokia device and your device
Work Flow, Concretely
-
7/30/2019 QT for mobile
85/204
85Qt for Mobile
1. Design UI
2. Code Logic
5. Press Play and be amazed ofyour Awesomeness!
3. Try in Qt Simulator
4. Plug in device(s)and select target
Qt Simulator
-
7/30/2019 QT for mobile
86/204
86Qt for Mobile
Try out UI in phone LAF
S imulate mobile events
Only for quick-testing!
-
7/30/2019 QT for mobile
87/204
Hands-On, Try It Out!
-
7/30/2019 QT for mobile
88/204
88Qt for Mobile
C reate a simple mobile Q t application
C reate the infamous Polish C urrency C onverter!
O ruse Qt Designer to create a simple UI with whatever you wish (a button, a
slider, anything you like)
Write a little bit of logic so that your application reacts to UI events (button clicks
etc.)
Make it work!
Try out in the simulator first
R un on a real device as well!
-
7/30/2019 QT for mobile
89/204
89
Qt Mobility APIs
Introduction
-
7/30/2019 QT for mobile
90/204
-
7/30/2019 QT for mobile
91/204
Status at 1.0.2
-
7/30/2019 QT for mobile
92/204
92Qt for Mobile
Status at 1.1.0
-
7/30/2019 QT for mobile
93/204
93Qt for Mobile
*) Backend not enabled in pre-built packages
-
7/30/2019 QT for mobile
94/204
First Intro to Mobility APIs
Were using class QSystemInfo from
-
7/30/2019 QT for mobile
95/204
95Qt for Mobile
#include
#include
#include
QTM_USE_NAMESPACE;
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();
}
We re using class QSystemInfo fromthe System Information API
In Symbian, well need to use#include
elsewhere#include is ok
First Intro to Mobility APIs
E i i l t t
-
7/30/2019 QT for mobile
96/204
96Qt for Mobile
#include
#include
#include
QTM_USE_NAMESPACE;
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();
}
Equivivalent tousing namespace QtMobility;
All classes within Mobility APIs areplaced inside namespace QtMobility.
You can raise the whole namespace oreither use syntax
QtMobility::, likeQtMobility::QSystemInfo
Mobilizing the Project File
TEMPLATE = app
-
7/30/2019 QT for mobile
97/204
97Qt for Mobile
TEMPLATE = app
TARGET =
DEPENDPATH += .
INCLUDEPATH += .
CONFIG += mobility
MOBILITY += systeminfo# Input
SOURCES += main.cpp
Compiling
Nokia Q t S DK
-
7/30/2019 QT for mobile
98/204
98Qt for Mobile
Nokia Q t S DK
Windows (with mingw32-make)
qmake
mingw32-make release
S ymbianqmake
make release-gcce
To create/install the .siscreatepackage i hw_template.pkg release-gcce
-
7/30/2019 QT for mobile
99/204
What Capabilities Are There?
-
7/30/2019 QT for mobile
100/204
100Qt for Mobile
http://developer.symbian.org/wiki/index.php/C apabilities_ (S ymbian_ S igned)
How to Gain Capabilities?
Declare the needed capabilities in the .pro file:
-
7/30/2019 QT for mobile
101/204
101Qt for Mobile
Declare the needed capabilities in the .pro file:
Symbian {
TARGET.CAPABILITY += Location NetworkServices
}
Application needs to be signed
S elf-signing works for lightest capabilities (user grantable)
S ymbian signed online for a bit heavier capabilities
C heck the link on the previous slide for details
-
7/30/2019 QT for mobile
102/204
More System Information APIClasses
Device information (battery, power state, input method type, IME I, manufacturer,QS t D i I f
-
7/30/2019 QT for mobile
103/204
103Qt for Mobile
Memory and disk information (drive types, free space)QSystemStorageInfo
Access to screen saver (inhibiting it)QSystemScreenSaver
Network information (network name, signal strength, network mode, etc.)QSystemNetworkInfo
G eneral system information (like in the previous example)QSystemInfo
Display information (color depth, brightness)QSystemDisplayInfo
( y, p , p yp , , ,
profile status etc.)QSystemDeviceInfo
QSystemDeviceInfo Example
-
7/30/2019 QT for mobile
104/204
104Qt for Mobile
S mall application to show the current profile, battery level and power status
Profile status naturally not available on Windows
Demo
-
7/30/2019 QT for mobile
105/204
Using QSystemDeviceInfo Example (2/4)Constructor
-
7/30/2019 QT for mobile
106/204
106Qt for Mobile
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow), m_device( new QSystemDeviceInfo(this) )
{
ui->setupUi(this);
// batteryBar is a QProgressBar
ui->batteryBar->setValue(m_device->batteryLevel());
changePowerState(m_device->currentPowerState()); // Self-created slot function
changeProfileInfo(m_device->currentProfile()); // Self-created slot function
connect( m_device, SIGNAL(batteryLevelChanged(int)),
ui->batteryBar, SLOT(setValue(int)) );connect( m_device, SIGNAL(powerStateChanged(QSystemDeviceInfo::PowerState)),
this, SLOT(changePowerState(QSystemDeviceInfo::PowerState)));
connect( m_device, SIGNAL(currentProfileChanged(QSystemDeviceInfo::Profile)),
this, SLOT(changeProfileInfo(QSystemDeviceInfo::Profile)));
}
-
7/30/2019 QT for mobile
107/204
Using QSystemDeviceInfo (4/4) Examining the Profile Change
void MainWindow::changeProfileInfo( QSystemDeviceInfo::Profile profile ) {switch( profile ) {
QS t D i I f Sil tP fil
-
7/30/2019 QT for mobile
108/204
108 Qt for Mobile
case QSystemDeviceInfo::SilentProfile:
ui->profileLabel->setText( "Silent" );
break;
case QSystemDeviceInfo::NormalProfile:
ui->profileLabel->setText( "Normal" );
break;
case QSystemDeviceInfo::LoudProfile:
ui->profileLabel->setText( "Loud!" );
break;
case QSystemDeviceInfo::OfflineProfile:
ui->profileLabel->setText( "Offline" );
break;
case QSystemDeviceInfo::CustomProfile:
ui->profileLabel->setText( "Custom" );
break;
default:
// VibProfile or PowersaveProfile are not handled separately
ui->profileLabel->clear();
}}
-
7/30/2019 QT for mobile
109/204
-
7/30/2019 QT for mobile
110/204
110
Qt Training
Day 2
Day 2
Mobility APIs API Walkthrough
-
7/30/2019 QT for mobile
111/204
111 Qt for Mobile
QWidgets NATIVE LAF
QGraphicsView CUSTOM LAFQtWebkitQt Quick
Hands-on
Porting & R e-using platform code
Lunch!
UI Afternoon, Qt Mobile UI O ffering:
-
7/30/2019 QT for mobile
112/204
112
Qt Mobility APIs
API Overviews
-
7/30/2019 QT for mobile
113/204
-
7/30/2019 QT for mobile
114/204
Mobility API Checklist
Mobility API libraries in the device
-
7/30/2019 QT for mobile
115/204
115 Qt for Mobile
Mobilize .pro file
Include classes (with classname.h)
QTM_ US E _ NAME S PAC E ;
S ee yesterdays slides for examples!
-
7/30/2019 QT for mobile
116/204
Publish & Subscribe
The Publish and S ubscribe API enables applications to read item
-
7/30/2019 QT for mobile
117/204
117 Qt for Mobile
ppvalues, navigate through and subscribe to change notifications
Values are represented by a QValueSpace
Hierarchical tree of which each node or leaf can optionally contain aQVariant value
QVariant is a union data type
Nodes act as Paths which can
be subscribed to
Access with QValueSpaceSubscriber
R ead values, receive change notifications, navigate through QValueS pace
New values are added with QValueSpacePublisher
Serialized QValueSpace example:
/Device/Buttons = 3
/Device/Buttons/1/Name = Menu
/Device/Buttons/1/Usable = true
/Device/Buttons/2/Name = Select/Device/Buttons/2/Usable = false
/Device/Buttons/3/Name = Back
/Device/Buttons/3/Usable = true
Messaging API
Access to messaging services
S earch and sort
-
7/30/2019 QT for mobile
118/204
118 Qt for Mobile
S earch and sort
C reate and modify
S end and retrieve
Launch preferred message client
A unified interface for manipulation and storage of S MS , MMS , E mail and
XMPP messages is provided
Key Classes for Messaging
C omposition and manipulation of messages:
QMessage
-
7/30/2019 QT for mobile
119/204
119 Qt for Mobile
QMessage
QMessageAddress
Accessing message accounts QMessageAccount
QMessageFolder
S orting and filtering
QMessageStore
QMessageFilter
Accessing message services
QMessageService
Creating a Message
// The developer creates a QMessage object and then sets thenecessary message details. First set the message type, thedefault account for messages of the specified type will be used
-
7/30/2019 QT for mobile
120/204
120Qt for Mobile
default account for messages of the specified type will be usedfor sending :
QMessage message;
message.setType(QMessageAddress::Email);// Now a recipient is set :
QString recipient([email protected]);
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
-
7/30/2019 QT for mobile
121/204
121Qt for Mobile
QMessageService *m_service = new QMessageService();
if (!m_service->send(message)) {
QMessageBox::warning(0, tr(Failed), tr(Unable to send
message));
}
// Will open the default composer for messages of this type and
with the existing message as the initial situation
QMessageService *m_service = new QMessageService();
m_service->compose(message)
Opening the Default Composer
-
7/30/2019 QT for mobile
122/204
Monitoring Position Data
Default position source may be available on some platforms
QGeoPositionInfoSource::createDefaultSource()
-
7/30/2019 QT for mobile
123/204
123Qt for Mobile
QG eoPositionInfoS ource is simple to use startUpdates() (andsetUpdateInterval())
positionUpdated( QGeoPositionInfo ) [signal] is emitted after each interval
stopUpdates()
Simple Client Receiving Location Data
class MyClass : public QObject {Q_OBJECT
public:
-
7/30/2019 QT for mobile
124/204
124Qt for Mobile
MyClass(QObject *parent = 0) : QObject(parent) {
QGeoPositionInfoSource *source =
QGeoPositionInfoSource::createDefaultSource(this);
if (source) {
connect(source, SIGNAL(positionUpdated(QGeoPositionInfo)),
this, SLOT(positionUpdated(QGeoPositionInfo)));
source->startUpdates();
}
}
private slots:
void positionUpdated(const QGeoPositionInfo &info) {
qDebug()
-
7/30/2019 QT for mobile
125/204
125
Qt for Mobile
Contacts API
The C ontacts API allows developers to manage contact data in a platformindependent way.
-
7/30/2019 QT for mobile
126/204
126
Qt for Mobile
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 andhome)
QContactManager unifies one or more platform-specific contact
backends
Main Contact Classes
Addressbook contactQContact
-
7/30/2019 QT for mobile
127/204
127
Qt for Mobile
S ingle detail of a QContactQContactDetail
Interface for performing actions to
contacts (like S end email or Dial)
QContactAction
Used to select contacts throughQContactManager
QContactFilter
Access to contacts stored in particular
backend
QContactManager
Versit API
Functionality for reading and writing Versit documents such as vC ards
QVersitDocument
-
7/30/2019 QT for mobile
128/204
128
Qt for Mobile
QVersitReader
QVersitWriter
Utilities to import/export QC ontacts from/to Versit documents
QVersitContactImporter
QVersitContactExporter
Bearer Management API
Now part of Qt 4.7 QtNetwork!
Manages the connectivity state to the network
-
7/30/2019 QT for mobile
129/204
129
Qt for Mobile
Allows user to start or stop network interfaces
Is device online and how many available interfaces there are
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
Automatic roaming between cellular and WLAN networks
-
7/30/2019 QT for mobile
130/204
Small Example on Bearer Management
-
7/30/2019 QT for mobile
131/204
131
Qt for Mobile
Application lists available network configurations and shows information on theselected 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
Multimedia APIs
Play audio & video of various formats
R ecord audio
-
7/30/2019 QT for mobile
132/204
132
Qt for Mobile
Playing and managing of an FM radio
With QtMultimedia, will eventually replace Phonon API
Access to multimedia services with minimal code and maximal flexibility
Overview on Multimedia API(Main Classes Only)
-
7/30/2019 QT for mobile
133/204
133
Qt for Mobile
Included in
1.1.0
Sensors API
The API supports sensors that poll for their data and sensorsthat push data to the app as it arrives
-
7/30/2019 QT for mobile
134/204
134
Qt for Mobile
p pp
QSensor (and its subclasses) provide application with access
to data input from a sensor
Direct subclass instantiation
QS ensorR eading subclasses represent single readings from asingle sensor
QSensorBackend can be used to make sensors availablethrough the same API, by creating plugins
Application Code QSensor QSensorBackend
QSensorReading Device Plugin
Existing QSensor Subclasses
Ambient light sensorQAmbientLightSensor
Linear acceleration along the X, Y and Z
axes
QAccelerometer
-
7/30/2019 QT for mobile
135/204
135
Qt for Mobile
R otationQRotationSensor
Tap sensor (registers tap and double tapevents in 6 directions)QTapSensor
Proximity (if something is close)QPromiximitySensor
OrientationQOrientationSensor
MagnetometerQMagnetometer
C ompassQCompass
Ambient light sensorQAmbientLightSensor
Demo: Using Sensors
-
7/30/2019 QT for mobile
136/204
136
Qt for Mobile
ProximitySensor Test
Horizonize with Orientation sensor
-
7/30/2019 QT for mobile
137/204
Mobility API Roadmap
Service FrameworkBearer Management
(to QtNetwork in 4.7)Organizer
1.0.2 1.1 Later?
Augmented Reality
-
7/30/2019 QT for mobile
138/204
138
Qt for Mobile
Camera
Landmarks, Maps,Navigation
Publish&Subscribe
Messaging
Contacts
Versit
Sensors
Multimedia
System InformationLocation
Document Gallery
Feedback
Telephony Events
Local Connectivity
(BT, NFC)
Face Recognition
removed!
Porting Mobile
-
7/30/2019 QT for mobile
139/204
139
Porting MobileApplications to Qt
Contents
Different Application Approaches in Nokia Devices
Porting from iPhone or Android to Qt no code re-use
-
7/30/2019 QT for mobile
140/204
140
Qt for Mobile
Porting from iPhone or Android to Qt, no code re-use
Mapping concepts
Porting from native S ymbian/Maemo to Qt, how to re-use platform code
Porting Alternatives:
Hybrid UI
E ngine Wrapping
Different Application Approaches inNokia Devices
Qt C++WEB
WEB
-
7/30/2019 QT for mobile
141/204
141
Qt for Mobile
A variety of technologies available for selecting the most suitable approach
Qt C++
Qt C++
WEB
1. Qt 2. QtWebkit 3. Symbian WebRuntime
Qt ApplicationsQt C++
-
7/30/2019 QT for mobile
142/204
142
Qt for Mobile
More native applications
Multiple UI approaches E xtensive engine support through Qt and Qt Mobility APIs
Qt C++,UI with QWidgets
C++,UI with
Graphics ViewC++
Qt Quick UI
Native LAF
Custom LAFCustom LAF with
easy-to-developscript-like syntax
QtWebkit
WEB
-
7/30/2019 QT for mobile
143/204
143
Qt for Mobile
Possibility to embed dynamic content to Q t C ++ programs
E .g. create the whole UI with web technologies and show it in a QWebView
widget
C ollaborate between J avaS cript and C ++
R e-use existing web documents
Qt C++
More Concretely, fromiPhone/Android to Qt?
iPhone (Objective-C ) and Android applications only work on their nativeplatforms which are not Qt-compatibile
-
7/30/2019 QT for mobile
144/204
144
Qt for Mobile
R eusing parts of applications is basically not possible when porting to Qt
Porting requires complete code level re-implementation with Qt
Lets look briefly into a few fundamental characteristics of both platforms
C omparison to Qt C onceptual mapping of native elements to Qt
iPhone Overview
Applications in iPhone are writtenusing the Objective-C programming
language
-
7/30/2019 QT for mobile
145/204
145
Qt for Mobile
Development of Objective-Capplications requires the use of Apple
environment
Tools in use
Objective-C : XC ode
Qt/S ymbian: Q t C reator, C arbide.c++
Objective-C Application Framework
Applications for iPhone are writtenusing Objective-C and using the
C ocoa framework
Obj ti C i t ll
-
7/30/2019 QT for mobile
146/204
146
Qt for Mobile
Objective-C is actually an
extension of ANS I C
The C ocoa framework consists of
libraries, APIs and runtimes that
form the development layer for all ofMac O S X
Applications automatically inherit
the same Mac OS X LooknFeel
O bjective-C application
architecture
iPhone Application Features
UIKit is iPhones runtime UI framework which provides a set of UIcomponents but also access to device services (like camera and
accelometer)
S et of UI components is rather similar to Qt
-
7/30/2019 QT for mobile
147/204
147
Qt for Mobile
S et of UI components is rather similar to Qt
Homogenous LAF
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
iPhone supports multitouch events by nature
UIEvent consists ofUITouch objects (one for each finger) Qt 4.6 introduced a new G esture Framework to provide fluent touch UI support
Android Platform Overview
Android is an open and free platform for mobile phones (and mobilephones only)
Based on Linux-kernel, but G oogle says it is not a Linux O S
-
7/30/2019 QT for mobile
148/204
148
Qt for Mobile
Own windowing system
Not supporting full set of standard Linux libraries, like G NU C Library
R euse of existing Linux apps or libraries difficult
Android Applications Overview
Applications developed with J ava using a proprietary Dalvik VM Device services, like touch screen and storage accessed through G oogle
services API
-
7/30/2019 QT for mobile
149/204
149
Qt for Mobile
Android does not use standard J ava APIs, such as J 2S E or J 2ME
Not compatible with J ava apps written for other platforms
Android apps do not provide one entry point (like main function) but a setof essential components
Activities, services, broadcast receivers and content providers
Application process is started when any part of it is needed and J ava objects
for that part are instantiated
Comparing Android and Qt UIConcepts
Activity QWidget that is a window (main widget) Android Views Qt Widgets
Different set of widgetsActivity
Main widget(QWidget)
-
7/30/2019 QT for mobile
150/204
150
Qt for Mobile
View structure Qt Parent/child relationship
Dialog QDialog
S imilar Layout managers
E vent handling:
dispatch () QObject::event()
on E vent() QObject:: E vent() -
Looper::loop() QApplication::exec()
Views
contains
Child widgets(QWidget)
contains
Porting Different Types of MobileApps to Qt
Applications based on web technologies or applications with embeddedweb content
QtWebkit
R e-use of graphics, extend engine with C ++ Qt C++
WEB WEB
-
7/30/2019 QT for mobile
151/204
151
Qt for Mobile
g p , g
(S ymbian Web R untime)
Applications with standard device UI
Qt C ++ with standard QWidgets
G ames without heavy graphics-rendering requirements
Qt Quick
G ames with heavy, real-time graphics and/or 3D Qt with G raphics V iew
Q
C++,UI with
Graphics View
C++
Qt Quick UI
Qt C++,UI with
QWidgets
Porting Mobile
-
7/30/2019 QT for mobile
152/204
152
gApplications to Qt
Re-using Platform Code
What is Qt for Symbian? (1/2)
Applications are implementedusing cross-platform Q t APIs
Qt APIs are implemented using
native APIs
Application 1 Application 2 Application 3
-
7/30/2019 QT for mobile
153/204
153
Qt for Mobile
native APIs
HW
Windows Kernel Mac
Win32 GDI Carbon / Cocoa
Qt/Windows Qt/Mac
Symbian
Eikon / OpenC
Qt/Symbian
Qt
Qt APIs
What is Qt for Symbian? (2/2)
When you install Q t/S ymbian the Qt libraries are compiled as S ymbianDLLs
QtC ore.dll, Q tG ui.dll, etc.
-
7/30/2019 QT for mobile
154/204
154Qt for Mobile
Y our own applications are compiled using a native compiler
From S ymbian OS s point of view your applications are just normal
S ymbian processes But! Program code is no longer S ymbian, but cross-platform Qt code
No S ymbian coding conventions!
C an be directly re-compiled for other Qt platforms
Y ou can mix native platform code with Qt!
GUI
GUI
Application Partitioning in Symbian
App UI& Views(EXE)
App UI& Views(EXE)
(Avkon in S60)
YourSymbian
-
7/30/2019 QT for mobile
155/204
155Qt for Mobile
BaseBase
EngineSupport
Engine
Support
GraphicsGraphics
ApplicationEngine
(DLL)
ApplicationEngine(DLL)
(EXE)( ) y
application
Porting Alternative 1/3 Hybrid UI
App UI& Views
App UI& Views(EXE)
New UI with Qt widgets Engine left untouched
Di t t S bi
Qt UI(EXE)
Qt UI(EXE)
-
7/30/2019 QT for mobile
156/204
156Qt for Mobile
ApplicationEngine
(DLL)
ApplicationEngine
(DLL)
(EXE)(EXE) Direct access to Symbianengine inside Qt UI code
=> Hybrid code (Qt+Symbian
mixed), not cross-platform
(EXE)( )
(Bad!) Example on Hybrid UI
#include
#include
void MyUiClass::doSomething() {
TRAPD( err, CSymbianEngine* engine = CSymbianEngine::NewL() );
if( err != KErrNone )
{
-
7/30/2019 QT for mobile
157/204
157Qt for Mobile
{
CleanupStack::PushL( engine );
engine->SetSomethingL( EFalse );
QLabel* l = new QLabel( engine->GetText(), this );
CleanupStack::PopAndDestroy();
}
}Works!
but only in Symbian, so not cross-platform!Problems in readability, error handling etc.
Porting Alternatives 2/3 Engine Wrapper
App UI& Views(EXE)
App UI& Views(EXE)
New UI with Qt widgets Engine left untouched Engine wrapped with a
Qt UI(EXE)
Qt UI(EXE)
-
7/30/2019 QT for mobile
158/204
158Qt for Mobile
(EXE)(EXE) Engine wrapped with aseparate Qt class Engine wrapperimplementation hybrid code, UI
plain Qt
=> Clean UI code, possibility toport engine later
Qt EngineWrapper
( )
Application
Engine(DLL)
Application
Engine(DLL)
Hiding Platform Dependency 1 Simple Wrapper
By simplest we can just wrap our existing S ymbian engine class with a
UI Code (Qt) EngineWrapper (Hybrid) CEngineClass (Symbian)
-
7/30/2019 QT for mobile
159/204
159Qt for Mobile
By simplest we can just wrap our existing S ymbian engine class with a
hybrid class
Qt class with Qt interface and mechanisms (like S ignals&S lots)
Y et, dependencies on S ymbian in class interface
UI code stays clean and plain Qt but is actually dependent on S ymbian
through E ngineWrappers interface
+ Quickneasy
- Not very flexible, possible problems with S C /BC if going cross-platform
Example Interface
#include // Symbian dependency
class EngineWrapper : public QObject {
Q_OBJECT
-
7/30/2019 QT for mobile
160/204
160Qt for Mobile
public:// Qt-style interface for engine services
signals:
private:
CSymbianEngineClass* m_engine; // Symbian dependency
};
Hiding Platform Dependency 2 Private Implementation
More flexibility can be achieved by keeping even the E ngineWrappers
Ui Code (Qt) EngineWrapper (Qt) EngineWrapperPrivate (Symbian) CEngineClass (Symbian)
-
7/30/2019 QT for mobile
161/204
161Qt for Mobile
More flexibility can be achieved by keeping even the E ngineWrapper s
interface as pure platform independent Q t
All platform dependent functionality and data are placed inside a private
class A simple design pattern calledprivate implementation
Qt itself has been implemented for different platforms using the same
mechanism!
Private Implementation in ItsSimplest
// a.h
class A {
...
private:
// a.h
class AP;
class A {
// a.cpp
class AP {
private:
-
7/30/2019 QT for mobile
162/204
162Qt for Mobile
private:
int x;
int y;
};
class A {
...
private:
AP* d_ptr;
};
private:
int x;
int y;
};
...
Header file stays the same regardless of the contents of class AP
Binary C ompatibility for A remains despite AP being changed
More on Private Implementation
If engine is ported for different platforms, only the private class needs to bereplaced.
UI Code (Qt) EngineWrapper (Qt) EngineWrapperPrivate (Symbian) CEngineClass (Symbian)
-
7/30/2019 QT for mobile
163/204
163Qt for Mobile
As mentioned, this mechanism is also used for building cross-platform
APIs (like Qt itself!)
One unified API
Platform-specific private implementation classes
EngineWrapperPrivate (maemo) MaemoEngineClass (maemo)
More on Private Implementation
In S ymbian, using a native service quite often requires the use of ActiveObjects
Asynchronous communication
The private implementation class can act as an Active Object and
-
7/30/2019 QT for mobile
164/204
164Qt for Mobile
UI Code (Qt) EngineWrapper (Qt) EngineWrapperPrivate (Symbian)
CActive
Some Symbian Native Server
transform S ymbian AO mechanism to Qt S ignals&S lots
Porting Alternatives 3/3 Re-Implementation
Qt provides strong and easy-to-use engine support so re-implementing the whole engine
Qt UI(EXE)
Qt UI(EXE)
Qt UI
Qt UI
-
7/30/2019 QT for mobile
165/204
165Qt for Mobile
p g gis something to also consider
Mobility APIs extend Qt enginesupport to mobile devices
Qt Engine(DLL)
Qt Engine(DLL)
+Engine(EXE)
+Engine(EXE)
OR
Pros/Cons of Full Qt Reimplementation
+ Platform independency All Qt platforms achievable
+ Better maintainability
-
7/30/2019 QT for mobile
166/204
166Qt for Mobile
Less code, clearer, only one code technology in use
- More work- Obviously
- E fficiency in some cases
- One more code layer
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/
-
7/30/2019 QT for mobile
167/204
167Qt for Mobile
G raphics View, Qt Quick, QtWebkit, WR T)
S ymbian & Maemo
C ode re-use possible
UI should be ported and E ngine should be wrapped
Introduction to
-
7/30/2019 QT for mobile
168/204
168
Mobile Qt UI
Mobile Qt UI Offering
-
7/30/2019 QT for mobile
169/204
169Qt for Mobile
QWidgets NATIVE LAF
Native Look-and-Feel w/ QWidgets
C ode once, look native everywhere
Pretty straightforward
-
7/30/2019 QT for mobile
170/204
170Qt for Mobile
C an customize, a bit S tyle sheets
Widget properties
Own custom widgets
C omplete customization not easy/possible
G ames, completely different kind of UIs
Quite desktop-oriented
Missing mobile concepts, like views Not really there yet, at least in S 3
Animations &
Eff
-
7/30/2019 QT for mobile
171/204
171
Effects
Spicing Up QWidget UIs
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
i t d d th G UI
-
7/30/2019 QT for mobile
172/204
172Qt for Mobile
animated and smooth G UIs 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
Main Classes
-
7/30/2019 QT for mobile
173/204
173Qt for Mobile
Example Animating a Button
What do you think the example below does?
QPushButton button("Animated Button");
button.show();
-
7/30/2019 QT for mobile
174/204
174Qt for Mobile
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
Animation Groups 1(2)
C lasses QSequentialAnimationGroup andQParalleAnimationGroup can be used to run multiple
animations in sequence or in parallel
An animation group can be used wherever a normal animation
could e g a group within a group
-
7/30/2019 QT for mobile
175/204
175Qt for Mobile
could e.g. a group within a group E nables building very complex animation sequences
Animation Groups 2(2)
QPropertyAnimation* animation1 = new QPropertyAnimation(...);
QPropertyAnimation* animation2 = new QPropertyAnimation(...);
QPropertyAnimation* animation3 = new QPropertyAnimation(...);
QPropertyAnimation* animation4 = new QPropertyAnimation(...);
QParallelAnimationGroup *parallel = new QParallelAnimationGroup();
-
7/30/2019 QT for mobile
176/204
176Qt for Mobile
QParallelAnimationGroup parallel new QParallelAnimationGroup();
parallel->addAnimation(animation2);
parallel->addAnimation(animation3);
QSequentialAnimationGroup* seq = new QSequentialAnimationGroup();
seq->addAnimation(animation1);
seq->addAnimation(parallel);
seq->addAnimation(animation4);
seq->start();
Easing Curves
The Animation FW provides multiple pre-made easing curves
for your convenience
R epresented by the class QEasingCurve
-
7/30/2019 QT for mobile
177/204
177Qt for Mobile
Typically used to control e.g. how the animation starts and/or
finishes
QEasingCurve::OutBounce
QEasingCurve::InOutQuad
Take a look at the E asing C urves example in the Q t Demo tool
QPropertyAnimation animation(&button, "geometry");
animation.setEasingCurve(QEasingCurve::OutBounce);
Demo
Graphics Effects
G raphics effects provide an easy-to-use mechanism for addingeffects on QGraphicsItems and QWidgets
QGraphicsItem::setGraphicsEffect(QGraphicsEffect*)
QWidget::setGraphicsEffect(QGraphicsEffect*)
-
7/30/2019 QT for mobile
178/204
178Qt for Mobile
A group of standard effects are provided
S ee next slide for examples
C ustom effects can be created by the developer
S imply a matter of imlementing a virtual draw() function
S ee documentation in the base class QGraphicsEffect for details
and guidelines
Standard Effects
Source Image
QGraphicsBlurEffect QGraphicsOpacityEffect
-
7/30/2019 QT for mobile
179/204
179Qt for Mobile
g
QGraphicsColorizeEffect QGraphicsDropShadowEffect
Applying and Animating an Effect
// Set up an effect
QGraphicsOpacityEffect* effect = new QGraphicsOpacityEffect(this);
effect->setOpacity(1.0); // 0.0 means fully transparent, 1.0 fully opaque
// Apply to a graphics item
QGraphicsPixmapItem *item = new QGraphicsPixmapItem(...);
-
7/30/2019 QT for mobile
180/204
180Qt for Mobile
QGraphicsPixmapItem item new QGraphicsPixmapItem(...);
item->setGraphicsEffect(effect);
// Animate the effect
QPropertyAnimation* animation = new QPropertyAnimation(effect, opacity);
animation->setDuration(1000);
animation->setStartValue(1.0);
animation->setEndValue(0.0);
animation->start();
Demo
Hands-On Animations!
Play around with Animation FW
G raphics E ffects
Make the two buttons change
-
7/30/2019 QT for mobile
181/204
181Qt for Mobile
Make the two buttons changechange place
Make a slider follow the other, with
a delay
Mobile Qt UI
-
7/30/2019 QT for mobile
182/204
182
Mobile Qt UI
Graphics View
Mobile Qt UI Offering
-
7/30/2019 QT for mobile
183/204
183Qt for Mobile
QWidgets NATIVE LAF
QGraphicsView CUSTOM LAF
Custom UI w/ QGraphicsView
QG raphicsView is a Q Widget, designed for showing custom 2D graphics :
Custom
graphs
gothe
re
-
7/30/2019 QT for mobile
184/204
184Qt for Mobile
If the only widget (the window itself) is a Q G raphicsView, the whole UI is
then custom:
Graphics View Architecture
Actually, inside a Q G raphicsView, lies an architecture of its own S uper-duper optimized for doing everything fast and being flexible
QGraphicsView
-
7/30/2019 QT for mobile
185/204
185Qt for Mobile
QGraphicsItem
QGraphicsScene
Shows contents of one
is a 2D container for
Working with GraphicsView
Y ou code your mice yourself!
C reate a custom graphics item:
Derive from QG raphicsItem (or some other QG raphics* base class)
Write code for painting operations with QPainter
-
7/30/2019 QT for mobile
186/204
186Qt for Mobile
Write code for event handling
Write code for animations
etc.
Mobile Qt UI
-
7/30/2019 QT for mobile
187/204
187
Mobile Qt UI
QtWebKit
Mobile Qt UI Offering
-
7/30/2019 QT for mobile
188/204
188Qt for Mobile
QWidgets NATIVE LAF
QGraphicsView CUSTOM LAFQtWebkit
Hybrid Apps with QtWebkit
Write UI (+logic) with standard web technologies
E mbed in a Qt/C ++ Application
Key C ++ classes:
QWebView MyUi.html
-
7/30/2019 QT for mobile
189/204
189Qt for Mobile
QWebPage
QWebFrame
Qt/C++ Application
QWebView
*.js
*.css
Shows contents of
Hybrid Apps w/ QtWebkit
Web technology experts can contribute easily to Q t applications
Qt C ++ engine and Web UI can interact!
Logic can be written with J avaS cript as well
Port easily from an existing Web app (like an iPhone app)
-
7/30/2019 QT for mobile
190/204
190Qt for Mobile
UI loaded dynamically (HTML/J avaS cript)
C an actually be a dynamic UI with online content!
http://wiki.forum.nokia.com/index.php/Q t_ hybrid_ applications
http://wiki.forum.nokia.com/index.php/Hybrid_ Application_ G enerator
Demo: Worlds Simplest WebBrowser
-
7/30/2019 QT for mobile
191/204
191Qt for Mobile
Mobile Qt UI
-
7/30/2019 QT for mobile
192/204
192
Mobile Qt UI
Qt Quick
Mobile Qt UI Offering
-
7/30/2019 QT for mobile
193/204
193Qt for Mobile
QWidgets NATIVE LAF
QGraphicsView CUSTOM LAFQtWebkitQt Quick
What is Qt Quick?
Qt User Interface C reation Kit
UIs written in a J avaS cript-like language called QML
A high-level UI technology for easily creating attractive UIs
No C ++ skills needed, knowledge of J avaS cript helps quite a bit
Aimed at both UI designers and developers alike
-
7/30/2019 QT for mobile
194/204
194Qt for Mobile
Aimed at both UI designers and developers alike
E nables designers and developers to speak the same language!
Both parties can be involved in iterative development simultaneously
No need for separate F lash or PowerPoint UI prototypes
This is the future of UI development in Qt! Qt Quick was officially launched in Q t 4.7
R eleased 9/2010
Demonstrations
Lets study this a bit by looking at a few examples
-
7/30/2019 QT for mobile
195/204
195Qt for Mobile
GPU Accelerated Qt Quick in N8:Flowd Example flowd.com
-
7/30/2019 QT for mobile
196/204
196Qt for Mobile
Inside Flowd
QtMobility APIs QtDeclarative
QML UI
-
7/30/2019 QT for mobile
197/204
197Qt for Mobile
Qt/C++ Engine
Experiences with Serious Qt QuickDevelopment
R eally Quick to develop
Fast prototyping
Also, great fun
BUT, Lots of things missing:
-
7/30/2019 QT for mobile
198/204
198Qt for Mobile
g g
No UI FW
View switching
manual loading/unloading of resources
portrait/landscape
No components (yet) no styling
Qt Mobility Bindings
Qt Mobility 1.1 (now in beta) includes QML Bindings for some parts
Y ou can access mobility APIs functionality directly from Q ML
At the moment the following are available to Qt Quick:
G allery
-
7/30/2019 QT for mobile
199/204
199Qt for Mobile
G allery
Location
Multimedia
S ervice F ramework
Messaging
Summary
-
7/30/2019 QT for mobile
200/204
200
Summary
New Features in Qt 4.7
Qt Quick, the Qt Ui C reation Kit
QML , a declarative, J S -like, language for designers and developers for
creating animated and fluid User E xperience
QtDeclarative, a C ++ library to integrate QML declarations into the Q t
G raphics View
QtC reator 2.0 supports QML editing
-
7/30/2019 QT for mobile
201/204
201Qt for Mobile
New networking possibilities
Bearer Management API from QtMobility integrated to the QtNetwork module
Overall performance improvements
E specially in QtWebKit for faster web page rendering
Things Expected Later
QtOpenG L in Qt/S ymbian
Developer version of Q t 4.7.0 containing QtOpenG L already available however,
cannot be used for creating applications to be published in Ovi S tore!
New multimedia functionality
Phonon will be replaced by Multimedia of QtMobility
Nearly made it to Qt 4.7 already
-
7/30/2019 QT for mobile
202/204
202Qt for Mobile
y Q y
Quite a bunch of new QtMobility APIs
Qt Quick Designer (Dragndrop editor for QML) finalized
Qt Quick C omponents
QtWebkit constantly improved (HTML5 etc)
Qt Developer Offering
Qt
UI
Engine QtNetworkQtXml
QtGUI
QtCoreQtScript QtSql
QtSvg
QtXmlPatterns
QtWebkit
QtMultimedia
QtOpenGL
85% of
use cases
**
QtDeclarative
Qt Quick, Qt Quick C omponents
-
7/30/2019 QT for mobile
203/204
203Qt for Mobile
DesktopOSs
Symbian MeeGo
Symbian Linux
Qt Mobility APIs
Linux C /C ++libraries
O pen C / PO S IX
S ymbian C ++
MobileMobileMobileMobile
FeaturesFeaturesFeaturesFeatures
Low level
Native access
NativeAPIs
15% of
use cases
**
Thank You!
-
7/30/2019 QT for mobile
204/204
204Qt for Mobile
www.digia.com