Multi-Platform Applications with Qt

Tuukka Ahoniemi

[email protected]
@tuukka_a
Santa Clara, CA
(soon back in Tampere, Finland)
1 © 2013 Digia
2
3
So…

• Desktop and mobile OS landscape fragmented

• Android, BlackBerry, iOS, Windows Phone
• Mac OS X market share on desktop is growing
• 14% market share in US, >30% in Norway
• Tablets replacing laptops

• Data often stored in cloud, access from everywhere

• Embedded Device, control from mobile, tablet or PC

• Central heating, Sound system, Set top box
• Factory lines

4
N-Screen Problem

My Application

5
 It’s Not Too Late to Change Your Career!
…Contact Your Local Military Draft Person Today!

6
Let’s Talk About Qt

7 © 2013 Digia
Contents

• Brief Introduction to Qt
• Traditional Qt/C++ with QWidgets
• Qt Quick and QML

• Qt 5 and Qt Roadmap

• Multi-Screen Approaches with Qt Quick

8 © 2013 Digia
Warning!

• We are taking a short-cut!

9
What is Qt?

C++ CROSS-PLATFORM APPLICATION AND UI FRAMEWORK

Cross-
Integrated Cross-
Platform
Development Platform
Class Tools IDE
Library

10 © 2013 Digia Plc

Qt Applications Are Native Applications

Qt Application

Qt APIs

QtGui QtCore QtNetwork QtWebkit QtSql QtMultimedia

Qt/Windows Qt/Mac Qt/X11 Qt/Android

Windows GDI Cocoa X11 Android NDK

Windows Kernel Mac Linux Kernel Android Kernel

PC HW Mac HW PC HW Android HW

11
The Qt/Embedded Stack

Application

QtGui QtCore

Qt/Embedded

QPA

Wayland

Windows
linuxfb
EGL
QPA

X11
Plugins

OS Windows GDI X11

Windows Kernel Linux Kernel

HW PC HW PC HW

12
Supported Platforms

Desktop Embedded Mobile

Windows Embedded
Windows (Standard/Compact 7)
Android (5.2, beta 5.1)

Linux Embedded Linux iOS (5.2, alpha 5.1)

Win8 on ARM
Mac OS X INTEGRITY
(WinRT) (5.2?)

Solaris QNX BlackBerry 10

Enterprise UNIX VxWorks Jolla Sailfish

13 © 2013 Digia Plc

 Programming with Qt/C++

14

14 © 2011 Digia Plc

Qt UI Offering - Match the Purpose
Qt provides a set of UI tools and technologies for developers to choose from

C++, traditional
C++, Cool UI

Qt/
C++
QML Qt/
C++

JS, Web
C++, customized
Java
Script
Qt/ Qt/
QML
C++ C++
QML

15
Small GUI Example with QWidgets 1/2

int main( int argc, char** argv ) {

QApplication app( argc, argv );

window
QWidget window;
QVBoxLayout* layout = new QVBoxLayout( &window );
QLCDNumber* lcd = new QLCDNumber( &window );
layout
QSlider* slider = new QSlider( Qt::Horizontal, &window );
layout->addWidget( lcd );
layout->addWidget( slider );
lcd slider
window.show();
return app.exec();
}

16
Small GUI Example with QWidgets 2/2 1. Slider is moved (to value 21)

int main( int argc, char** argv ) {

QApplication app( argc, argv );
2. emit valueChanged(21)
QWidget window;
QVBoxLayout* layout = new QVBoxLayout( &window );
3. display(21)
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.show();
return app.exec();
}

17
 Tools Integration
Qt Project App
qmake
GCC in
Makefile
[Linux compiler] Linux
[Linux/X11]
Qt/C++
Qt/C++
Qt/C++
code .pro
code
code
files
files
file
files
qmake
App
Makefile Cross compiler in
[Embedded Target HW
Linux]

qmake App
.gpj MULTI in
[INTEGRITY] Target HW
Other
IDE /
Code
Editor
Native tool chains

Qt Creator
© 2013 Digia Plc
 Qt Application
PROJECT FORMS
DEFINITION
FILE mainwindow.ui

.pro

C++ CLASS

main.cpp mainwindow.h
mainwindow.cpp
 Qt Application

Qt Build Tools PROJECT

DEFINITION
FORMS Qt Designer
FILE mainwindow.ui

.pro

C++ CLASS

main.cpp mainwindow.h
mainwindow.cpp

”Code behind”
Non-GUI Qt/C++ Support

• QtCore
• Data types, containers
• Threads, Processes, IPC
• File I/O
• String handling

• QtNetwork
• TCP/UDP, HTTP, FTP, SSL

• QtSql

• QtWebkit

• Qt Serial Port (new in 5.1)

• Etc.

21 © 2013 Digia
 Qt Quick
Bridging the gap between designers and developers

22

22 © 2013 Digia
Qt UI Offering - Match the Purpose
Qt provides a set of UI tools and technologies for developers to choose from

C++, traditional
C++, Cool UI

Qt/
C++
QML Qt/
C++

JS, Web
C++, customized
Java
Script
Qt/ Qt/
QML
C++ C++
QML

23
24
What is Qt Quick?
QML
t
e
x
t

t
e
x
t

Declarative UI Design
t
e
x
t

Qt/C++

Engine / Imperative Logic

Data Access

25
QML at a Glance
import QtQuick 2.1

Rectangle {
width: 200; height: 200

Text {
id: helloText
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: parent.height / 10
font.bold: true
text: “MEET QML!"
}
Image {
id: helloImage
anchors.top: helloText.bottom
anchors.horizontalCenter: parent.horizontalCenter
source: "icons/qt_logo.png"
}
MouseArea { It’s simply all about elements,
anchors.fill: parent
onClicked: { properties and their values!
helloImage.visible = false;
helloText.text = "Bye-bye picture!";
}
}
}

26 © 2013 Digia
C++ Integration – Minimal Example
1: main.qml
Rectangle {
width: 200; height: 100 Write your QML UI
color: "lightblue"
Text {
anchors.centerIn: parent
font.pixelSize: 18
text: "I'm QML in a C++ app!"
}
}

QT += quick
2: minimalapp.pro
TARGET = minimalapp Link against the QtQuick module
TEMPLATE = app

SOURCES += main.cpp

#include <QtGui/QGuiApplication>
#include <QtQuick/QQuickView> 3: main.cpp
int main(int argc, char *argv[]) { Use the widget
QGuiApplication a(argc, argv);
QQuickView v(QUrl::fromLocalFile("main.qml"));
QQuickView to display
v.show(); your QML UI
return a.exec();
}

27 © 2013 Digia
 A Bit More QML
Let’s look at some demos!

28

28 © 2013 Digia
Qt 5 and Qt Roadmap

29 © 2013 Digia
 Re-Factored Internal
Architecture

Same APIs, Re-designed

internals
Tailored Parts for Qt Platform Abstraction Modern Graphics Offering
Embedded and Mobile New Platforms
”Velvet-like” Animations
Compelling and performant OpenGL based Qt Quick 2
graphics Improved Multimedia
New modularization Graphics Effects
Better touch support OpenGL Shaders
5
Highlights
Ease-of-Use Power of Web
Connectivity
Qt 4 compatibility
Qt Creator 2.7 Qt Webkit 2
Device Deployment Native JSON support

30 © 2013 Digia Plc

Qt 5.1 Highlights

• Performance and Stability

• 3000+ bug fixes done since 5.0

• Qt Quick Controls
• Qt Quick just got serious on desktop as well

• Android and iOS as technology preview

• Let the projects begin!

• New modules
• Qt Sensors, Qt Serial Port, X11 Extras, Wayland

31 © 2013 Digia Plc

This Is What It’s All About!
Freescale i.MX 6
board running QNX

iPad

BlackBerry Z10
Two different Android devices
with different OS versions
32 © 2013 Digia Plc
Qt Quick Controls and Layouts

• Finally, a UI control library for QML language (Qt Quick)

• Toolbox of premade, re-usable UI components.

• 5.1 has desktop controls with native look-and-feel
• 5.2 will have more, like touch controls, industry specific controls

33
 Qt on New Mobile Platforms – Tech Previews
• Qt/Android (”beta”)
• Regular Qt applications running on regular Android OS (phones, tablets)
• Most of Qt functionality already there
• No Android functionality (native look-and-feel, back-button, in-app purchase)
• Qt Creator integration in good shape
• Deployment (to Google Play) not recommended even though might work

• Qt/iOS (”alpha”)
• Qt applications on iPhone or iPad
• Some Qt modules already there (Widgets, Qt Quick 1). No Qt Quick 2 or Webkit
• No Qt Creator integration, works in XCode
• Major internal changes taking place for 5.2 before deployment can be done

34
 Multi-Screen Approaches with Qt
Where Are We Going with All This?

35

35 © 2013 Digia
 Technical Enablers

QML
t
e
x
t

t
e
x
t

Declarative UI Design
t
e
x
t

Wide
+ platform
Qt/C++
support
Engine / Imperative Logic
Data Access

36
UIs Scale by Default
QML
t
e
x
t

t
e
x
t

t
e
x
t

Qt/C++

Engine /
Data Access

37
 N-Screen Approaches – Different UI Designs
Mobile Layout Desktop Layout Tablet Layout Car Layout
t
e t t
t
x e e
e
t x x
x
t t
t

t
e t t
t
x e e
e
t x x
x
t t
t

t
e t t
t
x e e
e
t x x
x
t t
t

Tablet Layout v.2

t
e
x
t

Qt/C++ t
e
x
t

Engine / t
e

Data Access x
t

Allows incremental
development, dynamic
replament of UIs

38
N-Screen Approaches – Mass-Customization
Generic Automotive Layout
t
e
x
t
Car MF 1 branded
t
e
x
t

t
e
x
t

t
e
x
t

t
e
x
t

Mass-customization
by Qt customer

Car MF 2 branded
t
e
x
t

Qt/C++
t
e
x
t

Engine /
Data Access t
e
x
t

39
Platform Specific Functionality
Mobile Layout Desktop Layout Tablet Layout
t
e t t
x e e
t x x
t t

t
e t t
x e e
t x x
t t

t
e t t
x e e
t x x
t t

Qt/C++

Engine / Android
Data Access functionality Hardware adaptation/optimization,
Bindings to native services,
Embedded Extra platform specific features
Linux on ARM
functionality

40
N-Screen Approaches – Partially Remote UI

Dynamic QML UI
t
e
x
t

t
e
x
t

t
e
x
t

Qt/C++

Engine /
Data Access

41
N-Screen Approaches – Remote UI
Remotely Loaded QML UI

t
e
x
t

t
e
x
t

t
e
x
t

Qt/C++

Engine /
Data Access

42
Structure of an N-screen App

Blackberry Android iOS Desktop <5%

Small screen Medium screen Large screen <5%

Common UI (Quick) 20-50%

Application logic (C++ or JS) 50-80%

Qt

43
Summary – Developer Story of Qt in 2013

• Write Once, Deploy Everywhere

• Desktop, Embedded, Phone

• Technical enablers in place for different multi-screen approaches

• Maximize code re-use with Qt Quick

• In Native We Trust
• The Power really lies in C++

44
 Thank You!
[email protected]

www.qt.digia.com

© 2013 Digia