Qt App Development - Cross-Platform Development for Android, iOS, Windows Phone and more!

Andreas Jakl [@andijakl]mopius.com

Qt App Development

1 Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com

Digia, Qt and their respective logos are trademarks of Digia Corporation in Finland and/or other countries worldwide.

http://www.mopius.com/

Andreas Jakl

• Startup founder & app developer

– @andijakl, @mopius

– [email protected]

– mopius.com

• History

– Nokia: Technology Wizard

– FH Hagenberg, Mobile Computing: Assistant Professor

– Siemens / BenQ Mobile: Augmented Reality-Apps


https://twitter.com/andijakl

https://twitter.com/mopius

mailto:[email protected]



From Your Idea to the Store

Choose target market(s) for your appEurope, America, Africa, Asia, etc.

Select target platform(s)Andorid, iOS, Windows Phone, BlackBerry, Firefox OS

Choose development technologyHTML5, C++, C#, Java, ObjectiveC, Swift

Design, develop & test

Distribute... and get famous and rich!


Agenda

What? Why? Where? How? When? Now!

5

Qt – What?

Qt App Development v6.0.0 January 27, 2015 © 2015 Andreas Jakl mopius.com

Multi Screen

• Computing world today

– Laptop, Phones, tablets

– TV

– Car IVI

– Wearables

– Virtual and augmented reality

– Specialized devices

– etc.



Multi Platform App Development

Windows | Mac | Linux

Android | iOS | WinRT | BlackBerry* | Sailfish*

Embedded Linux | Embedded Android | Windows Embedded

Integrity | QNX | VxWorks

Native apps

Use operating system and its functions directly

(different code for networking, GPS, etc.)

* Community support only


Multi Platform App Development

Native appsUse operating system and its functions directly

(different code for networking, GPS, etc.)

Your App

Qt framework

Same code works on all platforms,

covers many usecases (GPS, etc.)

(if needed, direct access is still possible)

* Community support only

Windows | Mac | Linux

Android | iOS | WinRT | BlackBerry* | Sailfish*

Embedded Linux | Embedded Android | Windows Embedded

Integrity | QNX | VxWorks



What is Qt?

Developer

Publish to

– Windows

– Linux

– Mac

– Embedded

– Android

– iOS

– etc.

App Source Code

Using Qt SDK for

– Dev. environment

– Testing

– Translation

– Help

Using Qt framework for

– User Interface

– Networking

– Location (GPS)

– Web integration

– ...


Qt 5 Demo

www.youtube.com/watch?v=vhWS_bN-T3k

http://www.youtube.com/watch?v=vhWS_bN-T3k


Qt 5.4

youtube.com/watch?v=wMs1pSZMnG0

https://www.youtube.com/watch?v=wMs1pSZMnG0

13

Qt – Why?


Qt – What’s Inside?• Cross-Platform

– Same source code for 15 platforms

– Maximum performance – native apps!

• Generic

– User Interface

– Declarative UI, animation, gestures, multi-touch, 3D (OpenGL)

– Web (Chromium-based) & JavaScript engine included

– Multimedia (audio, video), Sensors, Bluetooth, Positioning

– Networking, XML

– SQL, files, app settings

– Container classes, object communication, threading, unit testing

– doc.qt.io/qt-5/qtmodules.html

• Extend– Include any 3rd party C++ library / code


http://doc.qt.io/qt-5/qtmodules.html


Qt: On Your PC already!

… and many, many more!

All trademarks and logos are property of their respective owners.More information: http://www.qt.io/qt-in-use/http://lumiaconversations.microsoft.com/2011/03/15/10-qt-use-cases-you-didnt-know/

http://www.qt.io/qt-in-use/

http://lumiaconversations.microsoft.com/2011/03/15/10-qt-use-cases-you-didnt-know/



The Qt Company

Trolltech Nokia Digia Qt Company

(owned by Digia)


Qt.ioOne product. One ecosystem.

Integrates: qt-project.org and qt.digia.com

19

Qt: Free vs. CommercialOpen Source

qt.gitorious.org

Qt can be used in commercial,

closed-source apps

Changes to Qt source

must be shared

Additional UI controls (charts, etc.)

More modules (Qt Quick Compiler, etc.)

More tools (profiling)

Support options

Free (LGPL v2.1 / v3 license) Commercial Licenses


qt-project.org/legal.html

http://qt.gitorious.org/

http://qt-project.org/legal.html

Qt Packages• Community

– open source

– GPL / LGPL (v2.1 -> v3)

• Indie Mobile

– commercial subscription, mobile platforms only

– €20 / month

• Professional

– commercial subscription, mobile + desktop

– €109 / month

• Enterprise

– perpetual commercial license, embedded + mobile + desktop, device creation


Embedded & Internet of Things

• Increasing use of touch screens

• Need for simple to configure &

flexible stack

• Machine to Machine (M2M)

communication



Cross-Platform Alternatives

C#

Commercial

HTML5

(e.g., Apache Cordova)JavaScript

Open Source

many

more …


Number of Target Platforms


Top 10 App Quality


Time Savings


Cost Performance Ratio

27

Qt – Where?



Technologies & Platforms

C++

OpenGL

QML

HTML5

CSS3

JavaScript

Windows

Mac

Linux

Embedded Linux

Embedded Android

Windows Embedded

Integrity

QNX

VxWorks

WinRT

Android

iOS

BlackBerry

Sailfish

Android

• Full integration

– Android 2.3.3+ (API level 10)

– Originally based on community port

– Optional: Ministro

– Avoid multiple Qt installations on device

– Issues with Android 5.0

• Qt 5.2+


iOS

• Full iOS support

– iPhone 3GS+

– iPad 2+

• Device deployment & publishing

– Qt Creator integration

– OS X & Xcode required

– iOS Developer Program membership required

• Qt 5.2+


Qt on Windows Runtime• Compliant with Windows Store

– Windows 8.1+

– Windows Phone 8.1+

• Feature set

– Qt Essential modules

– Geopositioning

– Qt Quick Enterprise Controls

– Engin.io

– Qt Quick Compiler

– Multimedia

• Qt 5.4+


BlackBerry 10

• Qt as major dev framework in BB10

– QNX Operating System

– Cascades UI framework (based on Qt 4.8)

– Qt 5 possible (as overlay for SDK)


Jolla / Sailfish OS

• Smartphone OS

– Builds on MeeGo / Mer / Nemo foundation


jolla.com

sailfishos.org

http://www.jolla.com/

https://sailfishos.org/

Ubuntu for Phones

• Apps: HTML5 and native (Qt)

– Qt 5 based

– QML toolkit

– www.ubuntu.com/phone

– developer.ubuntu.com/apps/qml/


http://developer.ubuntu.com/apps/qml/

http://developer.ubuntu.com/apps/qml/

Symbian & Qt– Works on S60 3.1+

(E71, E72, 5800, N97, N8, X7, 700, 808, etc.) *

– Last Symbian phone: Nokia 808 PureView

– Qt 4.8


* Qt can be installed on all compatible devices. Not all devices are enabled for Qt content in the Nokia Store. Current list of Nokia Store device deployment support for Qt apps:

http://www.developer.nokia.com/Distribute/Packaging_and_signing.xhtml

Series 60

1.0

Series 60

2.0

(+ 3 FPs)

S60

3.0

S60

3.1

S60

3.2

S60 5.0

=

Symbian^1

Symbian^2 Symbian^3

Qt Compatibility

Nokia E71(S60 3.1, 2008)

Qt Pre-Installed

Nokia 700(Nokia Belle, 2011)

Symbian Anna

Nokia Belle

Deprecated

(only Qt 4)

http://www.developer.nokia.com/Distribute/Packaging_and_signing.xhtml

Harmattan

• Open Source Linux for Mobile Computers

– Based on Maemo and MobLin

→ transformed to Tizen by Samsung

(HTML5-based apps)

• Nokia N9

– MeeGo 1.2 Harmattan

– Only product with OS


Deprecated

(only Qt 4)

Raspberry Pi

• Qt 5 runs on Raspberry Pi

– $25 / $35 hardware

– 3D-accelerated Qt Quick, 60 FPS

– www.raspberrypi.org


http://www.raspberrypi.org/

Qt for Device Creation


* http://qt.digia.com/QtEnterpriseEmbedded

http://qt.digia.com/QtEnterpriseEmbedded



• 2D Renderer for devices without

OpenGL

• Wayland for multi-process support

• Qt Creator deployment + wizard for

flashing device images

• Virtual keyboard

blog.qt.digia.com/blog/2014/07/04/making-an-android-

device-boot-to-qt/

http://blog.qt.digia.com/blog/2014/07/04/making-an-android-device-boot-to-qt/



* http://qt.digia.com/QtEnterpriseEmbedded

http://qt.digia.com/QtEnterpriseEmbedded

Qt Cloud Services


• Backend as a service

+ Platform as a service

– APIs to store & retrieve cloud data

– Included server maintenance,

load balancing & backup

– Server-side dev possible

– C++ & QML support, REST access

• https://qtcloudservices.com/

https://qtcloudservices.com/

Qt Cloud Services


Qt WebEngine• Module for embedding web contents

– Simple to create a fully functional

browser

– Full support for Qt Widgets and

Qt Quick

– Great performance

– Full compliance with latest web

standards

• LGPLv3 or commercial


44

Qt – How?


Developer Environment Setup

• One-click installation

– IDE

– Tool-chains

– Documentation

– Examples


Compiler

Qt SDKworks on

Windows,

Linux, Mac

Tool-Chain

DocumentationIDE

Examples

Qt Creator• Complete IDE

– C++, QML, JavaScript

– Same dev experience for all platforms

• Development

– One-click deployment to desktop, iOS, Android, WP

– Syntax highlighting, autocompletion

– UI Designer

– Static code analyser

– Profiler



Start: Application UIC++ QML / JavaScript

HTML / JavaScript / CSS Other

QWidgets QPainter

OpenGLQtWebengine

All these can be mixed in the same app if needed

Qt Quick Qt Quick Controls

QWidgets

• UI Elements (QLabel, QPushButton, etc.)

– Use platform UI design

– Support style sheets

– Drag & drop UI designer


Great for desktop.

Static layouts make effects difficult.Small UI, different interaction paradigms.

QPainter

• Low level 2D paining engine

– Forms, gradients, transparency, transforms

– QGraphicsView: scene graph for 2D scene

management


Well-known conceptsFull and direct control over appearance

No ready-made common UI components availableDevelopment focus on Qt Quick

Qt Quick

• Qt Quick

– QML language and JavaScript

– Declarative syntax, animations and states

– Drag & drop UI designer


Very easy to make slick, fluid UIs.Most important for mobile devices!

Still different UI controls for some platforms (Blackberry)

* Project page: https://bugreports.qt-project.org/browse/QTCOMPONENTS

https://bugreports.qt-project.org/browse/QTCOMPONENTS

Qt Quick Controls


• QML UI controls

– Native look and feel

– Custom design: Style API

• Layout managers

OpenGL

• Low level

– Basic setup provided by Qt

– Includes OpenGL ES 3.0 / 3.1

– Or: integration with QtQuick


Complete control over GLGood if you have existing codebase & assets, cross-platform

Pure OpenGL is hard work

Angry Birds and Bounceby Rovio

Qt Webengine• Open source browser engine

– Display HTML(5) and JavaScript

– Combine Qt QML / C++ and web code if needed to get best of both worlds

• Qt WebView: embed native web view on Android & iOS


Use your existing web skills to create the UIReuse web components (online help, etc.)

Complex UIs and interaction probably more difficultLess performance than native code (but improving)


Recommendations ...

QPainter

Qt Quick

OpenGL

Web

QWidgets

Desktop App Mobile App Game

Recommended

OK

Not recommended


Hello World

#include <QApplication>

#include <QPushLabel>

int main(int argc, char *argv[])

{

QApplication app(argc, argv);

QLabel helloLabel("Hello World");

helloLabel.setAlignment(Qt::AlignCenter);

helloLabel.showMaximized();

return app.exec();

}

import QtQuick 2.4

Rectangle {

width: 360

height: 360

Text {

anchors.centerIn: parent

text: "Hello World"

}

}

~ 300 lines of code,

~ 15 files

Native Symbian C++

Qt C++

Qt Quick

QML language

QML• Describe UI by tree structure of

property bindings

– Properties dynamically

evaluated

– Communication through

signals & slots

– Bindings to C++ code

possible

– Animate properties using

states and transitions


import QtQuick 2.4Rectangle {

width: 200height: 200Image {

source: "QtLogo.png"anchors.centerIn: parent

} }

QML

• Interactivity

– Interact with

mouse / touch

– Execute JavaScript in

signal handlers




source: "QtLogo.png"anchors.centerIn: parent

} MouseArea {

anchors.fill: parentonClicked: parent.color = "green"

} }

QML

• Dynamic property update

– Move image with mouse




source: "QtLogo.png"x: myMouse.mouseXy: myMouse.mouseY

} MouseArea {

id: myMousehoverEnabled: trueanchors.fill: parentonClicked: parent.color = "green"

} }

QML

• Qt Quick Controls

– Native-looking UI

controls

– Custom styling possible

– Not 100% cross-platform

(e.g., Blackberry: own UI)


import QtQuick 2.3

import QtQuick.Controls 1.2

ApplicationWindow {

title: "My Application"

Button {

text: "Push Me"

anchors.centerIn: parent

}

}


Qt Quick & Qt C++

Quick Prototype

Viewer on PC & mobile: Testing 100% pure QML directly

Deployable App

Qt C++ app to load and show QML

Can include C++ for app logic

61

Qt – When?


Timeline• Qt 5.4

– December 10th, 2014

– http://qt-project.org/wiki/Qt-5.4-release

• Qt 5.4.1

– Bug-fix release

– https://bugreports.qt-project.org/browse/QTBUG/fixforversion/14400

• Qt 5.5

– April 28th, 2015

– Bluetooth (LE) on Windows RT, iOS

– In-App Purchasing on Windows RT

– Native dialogs and more pop-ups on iOS

– Improved QML/JS <> C++ integration

– New garbage collector

– http://qt-project.org/wiki/Qt-5.5-release


• Qt 6.0



http://qt-project.org/wiki/Qt-5.4-release

https://bugreports.qt-project.org/browse/QTBUG/fixforversion/14400

http://qt-project.org/wiki/Qt-5.5-release



63

Qt – Now!



Download

qt.io/download/

http://www.qt.io/download/

Where to find help?

• Qt SDK

– Help, examples

• Discussion boards, wikis

– Qt Project: qt-project.org

• Community

– www.qtcentre.org


http://qt-project.org/

http://www.qtcentre.org/

Thank You.


Andreas Jakl [@andijakl]mopius.com


Software

Qt App Development - Cross-Platform Development for Android, iOS, Windows Phone and more!