Tampere MeeGo Meetup - Qt Quick

download Tampere MeeGo Meetup - Qt Quick

of 38

  • date post

  • Category


  • view

  • download


Embed Size (px)


Short introduction to Qt Quick at Tampere MeeGo Meetup meeting on 23rd November 2010.

Transcript of Tampere MeeGo Meetup - Qt Quick

  • Qt Quick

    Basic introduction Juha Ristolainen / Futurice Oy

    @Riussi on Twitter

    Tampere MeeGo Meetup on 23rd November 2010

  • What?

    Qt Quick is an umbrella term: Qt Metaobject Language (QML)

    Language runtime integrated with Qt

    QtDeclarative C++ module in Qt

    Qt Creator IDE-support and graphical designer (2.1)

    Qt UI Creation Kit

    Complete toolkit for creating dynamic custom UIs

  • Why?

    Rapid UI prototyping Creating and changing UIs has been difficult in the

    past No compilation step needed, easy and fast to modify

    and test

    Design oriented Accessible tools for designers, easy to use Blank canvas

    Qt Quick Components will provide basic components

    Lightweight and customizable components

    Intuitive and great looking user interfaces

  • QML

    QML is a new declarative language

    QML describes the user interface

    Described as a tree of elements with properties

    Compose UIs from elements

    Text Image


  • Elements

    Elements are the basic structures in QML

    QML provides only a set of basic elements

    Rectangle, Text, Image, ...

    Also non-visible elements

    Item, States, transitions, models, paths, timers, ...

    Elements contain properties

    Can be extended with custom properties

  • Properties

    Elements are described by properties

    Simple name-value definitions with default values

    Used for:

    Customizing appearance

    Changing behaviour


    Identifying elements

  • Properties, pt 2

    Id-property Used for referencing elements

    Standard properties Width, height, color, ...

    Grouped properties Font.family, font.pixelSize

    Attached properties Properties that elements dont have by default but can be

    attached KeyNavigation.tab: anotherElement

    Custom properties Property string username:

  • QML: Basic types

    Property values can have different types: Numbers






    Other basic type: colors, dates, times, rects, points, sizes

  • Property binding

    Property values can contain expressions

    Expressions can be blocks of Javascript

    Expressions are evaluated when needed

    Uses Qt signals/slots

  • Images


    Source-property is network transparent

    Can be easily transformed


    Define stretchable areas on image for scalable assets

    Similar to Androids 9-patch

  • Gradients


    Add two or more GradientStops

    Position between 0.0 and 1.0


    Using gradients is CPU-intensive

    Preferable to use images

  • Layouts

    Used to position and align elements

    Line up edges or central lines of elements

    Dynamic layouts

    Avoid hardcoded values, use anchors and bindings. Remember when using the graphical editor


  • Anchors

    Anchors Can refer to other elements

    centerIn, fill, ...

    Can refer to anchors of other elements Left, right, top, bottom, verticalCenterm ...

    Margins Specify margins between elements connected with


    Constraints Some items need to be well-defined Avoid circular dependencies

  • Hello World import Qt 4.7

    Rectangle {

    id: mainRect

    width: 500; height: 500

    color: "lightblue" // color takes SVG colornames as well

    // Add an image in the middle of the rectangle

    Image {

    id: faceImage

    source: "face.png"

    smooth: true

    height: parent.height / 2; width: parent.width / 2

    anchors.centerIn: parent // refer to parent or use mainRect


    // Put a text field underneath it

    Text {

    anchors.top: faceImage.bottom; anchors.topMargin: 20

    anchors.horizontalCenter: faceImage.horizontalCenter

    text: qsTr("Hello, World")

    font.family: "Nokia Sans; font.pixelSize: 32



  • Demo


  • User input

    Mouse / touch


  • Mouse/touch input


    Defines areas on the screen where touch input occurs

    Layout like any other item

    Ways to handle input


    onClicked, onEntered, ...

    Property bindings:


    GestureArea in Labs

  • Keyboard input

    Two elements: TextInput


    No decorations. Need to create using other elements

    Navigation between elements Changing focus:


    Attached properties Keys and KeyNavigation

    Raw keyboard input Predefined handlers for common keys: e.g. onLeftPressed

  • Demo


  • States

    Items can define states

    State is a set of property values for an item

    States-property: list of items named states

    State-property: current state

    Property values are set when entering a state

  • State changes

    Explicitly on user interaction

    MouseArea events, TextInput events

    Let the state decide


    Make sure when is true only for one state at a time

  • Transitions

    Transitions define how items change when switching states

    Usually for animating state changes

    From and to-properties

    Wildcard * allowed

    Reversible transitions

    Used with when

  • Animations

    Can be applied to any visible elements Animations update element properties to cause a

    visual change Specialized types

    NumberAnimation ColorAnimation RotationAnimation Vector3dAnimation ...

    Easing curves for variable speed animations

  • Multiple animations


    Run animations in sequence


    Run animations in parallel


    Insert pauses into animation groups

  • Demo


  • Data models

    Pure models



    Visual models

    Combine information on how to show data with data



  • ListModel

    Contains simple sequences of elements No information on how to display data. Data view

    items need to define a delegate for showing data

    ListElement No pre-defined properties, define all properties


    Can be used with ListViews, Repeaters, etc.

    Dynamic list of items Can be operated on with methods like append,

    remove, move

  • Data views




    Define a path where to show data from the model

  • ListView

    Model for data, Delegate for drawing (no default delegate

    Flickable surface with no decorations

    Header, footer, highlight

    Current item


    Categorize and sort on some property

  • XmlListModel

    Maps XML data to model properties using Xpath-queries

    Define a source for XML data

    local or network

    Define a query for single item of data in XML


    Query different pieces of data from single item

  • // XmlListModel getting data from a public RSS-feed

    XmlListModel {

    id: listModel

    source: "http://labs.qt.nokia.com/feed/"

    query: "/rss/channel/item"

    XmlRole {

    name: "title"; query: "title/string()"


    XmlRole {

    name: "pubDate"; query: "pubDate/string()"


    XmlRole {

    name: "link"; query: "link/string()


    XmlRole {

    name: "description"; query: "description/string()



  • Demo


  • Demo


  • Not covered

    Defining custom components In pure QML or C++

    QML C++ integration Creating QML-plugins with C++ Expose QObjects to QML, use signals/slots

    Embed QML inside C++ application For bigger projects think about using a C++

    engine and QML for UI Qt Mobility QML bindings (Maps, Location,

    Gallery, etc)

  • What are you waiting for?

    Get started today

    All you need:

    Qt 4.7

    Qt Creator 2.1 (beta currently available)

    For mobile development Nokia Qt SDK

  • More information

    Qt 4.7 documentation: http://doc.qt.nokia.com/4.7/index.html

    Qt Developer Network: http://developer.qt.nokia.com/

  • Shameless plug

    Visit Tampere MeeGo network: http://www.meetup.com/Tampere-MeeGo-Network/

    MeeGoLandia in Tampere April 2011: http://meegolandia.com/

  • Thank you

    Juha Ristolainen

    Senior Consultant at Futurice Oy


    @Riussi on Twitter