Cross Platform Mobile development with qt


Adam Pigg

What is Qt (pronounced cute)?

  • Qt is an application framework for GUI and Console programs
  • Qt is old mature (version 0.90 made public in may 1994)
  • Qt is the framework used by KDE (started in 1996)
  • Qt is Cross-Platform and now supports 19+ platforms
  • Qt is modular
  • Qt is available in OSS and Commercial editions

Not just for mobile

  • Useful for all sorts of traditional GUI applications

  • Uses C++ but bindings available for Python, Perl, Ruby

  • Applications compatible with Linux (X11/Wayand), Windows, MacOS

  • Qt widgets range from Labels and CheckBoxes to WebViews and OpenGL scenes!

  • Qt 4.7 introduced QtQuick, a declarative way of building highly dynamic user interfaces with fluid transitions and effects

For (nearly) all mobile platforms

  • Qt 5.3 will run on Androd, iOS, Windows Phone, Blackberry, Ubuntu, Sailfish and Tizen

  • Write the application logic in C++, with different UI for each platform/form factor in QtQuick/QML

  • Can use Javascript if you're not familiar with C++

  • Most platforms can be developed for in Linux, however iOS requires MacOSX/XCode, and Windows Phone 8 requires Windows 8/Visual Studio

  • QtCreator, the Qt IDE can help hide the packaging, deploying and debugging differences for each platform
    •

hello world

import QtQuick 2.0
Item {

    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }

    Text {
        text: "Hello Code Cumbria!"
        anchors.centerIn: parent    }}

but what does it all mean?

import QtQuick 2.0                  <-Allow use of basic types
Item {                              <-Create a basic Item (the root item)

    MouseArea {                     <-Create a Mouse-Handling child item
        anchors.fill: parent        <-The item fills the parent
        onClicked: {             
            Qt.quit();              <-and executes this when clicked
        }
    }

    Text {                          <-Create a Text child element
        text: "Hello Code Cumbria!" <-With this text
        anchors.centerIn: parent    <-Centered in the Parent    }}

making it beautiful with animations

QML is ideal for mobile apps as it contains a comprehensive animation framework for making beautiful, fluid transitions which are expected by todays users.

By simply binding an animation to a property, it will be automatically animated whenever the property is changed.  eg:

 Behavior on x {
         NumberAnimation { duration: 1000 }
  }
Will animate the x property whenever it changes by automatically assigning values to it over a second

where is the complicated c++?

  • The QML backend is a traditional C++ program
  • QtCreator creates a program for you which you can modify to suit if required
  • C++ is optional, but its good to know how it works.  A lot can be achieved in QML
  • Basic C++ includes main and the qtquickapplicationviewer only.  Extra classes can be added as required

    More on c++

    It is useful to know C++ for the following scenarios:
    • Re-use of common logic that is already implemented in native code
    • Using the pre-processor to select different QML files for each platform (Q_OS_* definitions)
    • Performance requirements (native code is quicker than javascript)
    • Extending QML with new datatype and objects

    the creator

    • A cross-platform IDE supporting C++, QML and Javascript
    • Code completion, highlighting, refactoring and analysis
    • Handles all aspects of developing for a mobile device
    • Cross compilation
    • Packaging
    • Deploying
    • Signing
    • Even debugging
    • All from one friendly GUI!
    • All you need to do is upload the final package to your preferred market

    advanced qml

    The built-in QML items are flexible but basic.  These have been built upon to create complex and featureful sets of reusable components, for both mobile and desktop applications.

    These come shipped with Qt, and can be added to a project with the appropriate import line, such as:
    import QtSensors 5.0  (phone sensors such as accelerometer)
    import QtMultimedia 5.0  (audio, video camera etc)
    import QtBluetooth 5.2  (bluetooth device access)
    import QtQuick.Controls 1.1  (a full range of cross platform reusable widgets such as buttons, scroll bars, check boxes etc)

    built for the web

    • Qt contains an advanced network API supporting the creation of low level TCP or UDP clients and servers
    • A high level API for HTTP access
    • The web engine is based on Blink from Google, which was forked from WebKit , which Apple forked from the KDE KHTML project
    • Qt 5.3 will support WebSockets and SPDY 
    • Both JSON and XML parsers for interfacing with web applicaions

    further info

    http://qt-project.org/doc/qt-5/index.html
    http://qt-project.org/doc/qt-5/android-support.html
    http://qt-project.org/wiki/BlackBerry
    http://qt-project.org/doc/qt-5/ios-support.html
    http://qt-project.org/doc/qt-5/qtquick-statesanimations-topic.html
    http://qt-project.org/wiki/category:tools::qtcreator


    http://www.piggz.co.uk


    questions?



    (slides are available from https://slides.com/adampigg/deck)

    deck

    By Adam Pigg

    Made with Slides.com

    deck

    • 1,821

    More from Adam Pigg