Multi-PlatformApplications with Qt - NWCPPnwcpp.org/talks/2013/Multi_platform_apps_with_Qt.pdf · Multi-PlatformApplications with Qt ... (WinRT)(5.2?) BlackBerry10 Desktop Embedded

1

Multi-Platform Applications with QtTuukka Ahoniemi

[email protected]@tuukka_a

Santa Clara, CA (soon back in Tampere, Finland)

© 2013 Digia

2

3

4

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

5

N-Screen Problem

My Application

6

6

It’s Not Too Late to Change Your Career!

…Contact Your Local Military Draft Person Today!

7

Let’s Talk About Qt

© 2013 Digia

8

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

© 2013 Digia

9

Warning!

• We are taking a short-cut!

10

What is Qt?

© 2013 Digia Plc

C++ CROSS-PLATFORM APPLICATION AND UI FRAMEWORK

Cross-Platform Class Library

Integrated Development

Tools

Cross-Platform

IDE

11

Qt Applications Are Native Applications

Qt APIs

Windows GDI

Qt/Windows

PC HW

Windows Kernel

QtCoreQtGui

Qt Application

Cocoa

Qt/Mac

Mac HW

Mac

X11

Qt/X11

PC HW

Linux Kernel

Android NDK

Qt/Android

Android HW

Android Kernel

QtNetwork QtWebkit QtSql QtMultimedia

12

The Qt/Embedded Stack

Qt/Embedded

HW

OS

QtCoreQtGui

Application

QPA

QPAPlugins

Wayland

EGL

linuxfb

Windows GDI

PC HW

Windows Kernel

X11

PC HW

Linux Kernel

Windows

X11

13

Supported Platforms

© 2013 Digia Plc

Windows

Linux

Mac OS X

Solaris

Windows Embedded(Standard/Compact 7)

Embedded Linux

INTEGRITY

QNX

VxWorks

Android (5.2, beta 5.1)

iOS (5.2, alpha 5.1)

Win8 on ARM (WinRT) (5.2?)

BlackBerry 10

Desktop Embedded Mobile

Jolla SailfishEnterprise UNIX

14

14

Programming with Qt/C++

© 2011 Digia Plc

15

Qt UI Offering - Match the Purpose

Qt provides a set of UI tools and technologies for developers to choose from

C++, Cool UI

JS, Web

C++, traditional

Qt/C++

JavaScript

QML

QML Qt/C++

C++, customized

Qt/C++

Qt/C++

QML

16

Small GUI Example with QWidgets 1/2

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 );

window.show();

return app.exec();

}

layout

lcd slider

window

17

Small GUI Example with QWidgets 2/2

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.show();

return app.exec();

}

1. Slider is moved (to value 21)

2. emit valueChanged( 21)

3. display(21)

Tools Integration

© 2013 Digia Plc

Qt Project

.profile

Qt/C++codefiles

Qt/C++codefiles

Qt/C++codefiles

OtherIDE / CodeEditor

Qt Creator

qmake

[Linux/X11]

qmake

[Embedded Linux]

MakefileGCC

[Linux compiler]

Makefile Cross compiler

Appin

Linux

Appin

Target HW

Native tool chains

qmake

[INTEGRITY]

.gpj MULTI

Appin

Target HW

Qt Application

FORMS

mainwindow.ui

C++ CLASS

mainwindow.hmainwindow.cpp

main.cpp

PROJECTDEFINITION

FILE

.pro

Qt Application

FORMS

mainwindow.ui

C++ CLASS

mainwindow.hmainwindow.cpp

main.cpp

PROJECTDEFINITION

FILE

.pro

Qt Designer

”Code behind”

Qt Build Tools

21

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.

© 2013 Digia

22

22

Qt Quick

Bridging the gap between designers and developers

© 2013 Digia

23

Qt UI Offering - Match the Purpose

Qt provides a set of UI tools and technologies for developers to choose from

C++, Cool UI

JS, Web

C++, traditional

Qt/C++

JavaScript

QML

QML Qt/C++

C++, customized

Qt/C++

Qt/C++

QML

24

25

What is Qt Quick?

text

text

text

Engine / Data Access

QML

Qt/C++

Declarative UI Design

Imperative Logic

26

QML at a Glance

© 2013 Digia

import QtQuick 2.1

Rectangle { width : 200; height : 200

Text { id : helloTextanchors.horizontalCenter : parent.horizontalCenter font.pixelSize : parent.height / 10 font.bold : true text : “MEET QML!"

} Image {

id : helloImageanchors.top: helloText.bottomanchors.horizontalCenter : parent.horizontalCentersource : "icons/qt_logo.png"

} MouseArea {

anchors.fill : parent onClicked : {

helloImage.visible = false; helloText.text = "Bye-bye picture!" ;

} }

}

It’s simply all about elements, properties and their values!

27

C++ Integration – Minimal Example

© 2013 Digia

QT += quick

TARGET = minimalappTEMPLATE= app

SOURCES+= main.cpp

2: minimalapp.proLink against the QtQuick module

Rectangle { width : 200; height : 100color: "lightblue"Text {

anchors.centerIn : parent font.pixelSize : 18 text : "I'm QML in a C++ app!"

} }

#include <QtGui/QGuiApplication>#include <QtQuick/QQuickView>

int main ( int argc, char *argv[]) {QGuiApplication a(argc, argv);QQuickView v(QUrl::fromLocalFile("main.qml"));v.show();return a. exec ();

}

1: main.qmlWrite your QML UI

3: main.cppUse the widget

QQuickView to display your QML UI

28

28

A Bit More QML

Let’s look at some demos!

© 2013 Digia

29

Qt 5 and Qt Roadmap

© 2013 Digia

30 © 2013 Digia Plc

Tailored Parts for Embedded and Mobile

Compelling and performantgraphics

New modularizationBetter touch support

Re-Factored InternalArchitecture

Same APIs, Re-designed internals

Qt Platform AbstractionNew Platforms

Modern Graphics Offering

”Velvet-like” AnimationsOpenGL based Qt Quick 2

Improved MultimediaGraphics EffectsOpenGL Shaders

Ease-of-Use

Qt 4 compatibilityQt Creator 2.7

Device Deployment

Power of Web Connectivity

Qt Webkit 2Native JSON support

5

Highlights

31

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

© 2013 Digia Plc

32

This Is What It’s All About!

© 2013 Digia Plc

Two different Android deviceswith different OS versions

iPad

BlackBerry Z10

Freescale i.MX 6 board running QNX

33

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

34

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

35

35

Multi-Screen Approaches with Qt

Where Are We Going with All This?

© 2013 Digia

36

text

text

text


QML

Qt/C++

Declarative UI Design

Imperative Logic

Technical Enablers

Wide platformsupport

+

37

UIs Scale by Default

text

text

text


QML

Qt/C++

38

N-Screen Approaches – Different UI Designs

text

text

text


Mobile Layout

Qt/C++

text

text

text

Desktop Layouttext

text

text

Tablet Layout

Allows incrementaldevelopment, dynamic

replament of UIs

text

text

text

Car Layout

text

text

text

Tablet Layout v.2

39

N-Screen Approaches – Mass-Customization


Qt/C++

text

text

Generic Automotive Layout

text

text

text

Car MF 1 branded

text

text

text

Car MF 2 branded

Mass-customizationby Qt customer

40

Platform Specific Functionality

text

text

text


Mobile Layout

Qt/C++

text

text

text

Desktop Layouttext

text

text

Tablet Layout

Embedded Linux on ARMfunctionality

Androidfunctionality Hardware adaptation/optimization,

Bindings to native services,Extra platform specific features

41

N-Screen Approaches – Partially Remote UI


Dynamic QML UI

Qt/C++

text

text

text

42

N-Screen Approaches – Remote UI


Remotely Loaded QML UI

Qt/C++

text

text

text

43

Structure of an N-screen App

Qt

Application logic (C++ or JS)

Common UI (Quick)

Small screen Large screenMedium screen

50-80%

20-50%

<5%

Blackberry DesktopAndroid iOS <5%

44

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++

Thank You !

[email protected]

www.qt.digia.com

© 2013 Digia

Documents

Multi-PlatformApplications with Qt - NWCPPnwcpp.org/talks/2013/Multi_platform_apps_with_Qt.pdf · Multi-PlatformApplications with Qt ... (WinRT)(5.2?) BlackBerry10 Desktop Embedded