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.

Andreas Jakl
• Startup founder & app developer
– @andijakl, @mopius
– andreas.jakl@mopius.com
– mopius.com
• History
– Nokia: Technology Wizard
– FH Hagenberg, Mobile Computing: Assistant Professor
– Siemens / BenQ Mobile: Augmented Reality-Apps

From Your Idea to the Store
Choose target market(s) for your app
Europe, America, Africa, Asia, etc.
Select target platform(s)
Andorid, iOS, Windows Phone, BlackBerry, Firefox OS
Choose development technology
HTML5, 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.

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

Qt 5.4
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

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/

The Qt Company
Trolltech Nokia Digia Qt Company
(owned by Digia)

Qt.io
One product. One ecosystem.
Integrates: qt-project.org and qt.digia.com

19
Qt: Free vs. Commercial
Open 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

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

Ubuntu for Phones
• Apps: HTML5 and native (Qt)
– Qt 5 based
– QML toolkit
– www.ubuntu.com/phone
– 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)

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

Qt for Device Creation
* 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://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/

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 SDK
works 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 UI
C++ 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 concepts
Full and direct control over appearance
No ready-made common UI components available
Development 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

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 GL
Good if you have existing codebase & assets, cross-platform
Pure OpenGL is hard work
Angry Birds and Bounce
by 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 UI
Reuse web components (online help, etc.)
Complex UIs and interaction probably more difficult
Less 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.4
Rectangle {
width: 200
height: 200
Image {
source: "QtLogo.png"
}
}

QML
• Interactivity
– Interact with
mouse / touch
– Execute JavaScript in
signal handlers
import QtQuick 2.4
Rectangle {
width: 200
height: 200
Image {
}
MouseArea {
anchors.fill: parent
onClicked: parent.color = "green"
}
}

QML
• Dynamic property update
– Move image with mouse
import QtQuick 2.4
Rectangle {
width: 200
height: 200
Image {
x: myMouse.mouseX
y: myMouse.mouseY
}
MouseArea {
id: myMouse
hoverEnabled: true
anchors.fill: parent
onClicked: 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"
}
}

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

63
Qt – Now!

Download
qt.io/download/

Where to find help?
• Qt SDK
– Help, examples
• Discussion boards, wikis
– Qt Project: qt-project.org
• Community
– www.qtcentre.org

Thank You.
Andreas Jakl [@andijakl]
mopius.com

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

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Qt App Development - Cross-Platform Development for Android, iOS, Windows Phone and more! (20)

More from Andreas Jakl (20)

Recently uploaded (20)

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