Tampere MeeGo Meetup - Qt Quick

download Tampere MeeGo Meetup - Qt Quick

of 38

  • date post

    15-Jan-2015
  • Category

    Technology

  • view

    2.961
  • download

    2

Embed Size (px)

description

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

    Rectangle

  • 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

    Bindings

    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

    Boolean

    Strings

    Constants

    Lists

    Scripts

    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

    Image

    Source-property is network transparent

    Can be easily transformed

    BorderImage

    Define stretchable areas on image for scalable assets

    Similar to Androids 9-patch

  • Gradients

    Gradient-property

    Add two or more GradientStops

    Position between 0.0 and 1.0

    Color

    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

    Anchor-based

  • 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

    anchors

    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

    01-basics

  • User input

    Mouse / touch

    Keyboard

  • Mouse/touch input

    MouseArea

    Defines areas on the screen where touch input occurs

    Layout like any other item

    Ways to handle input

    Signals:

    onClicked, onEntered, ...

    Property bindings:

    mouseArea.containsMouse

    GestureArea in Labs

  • Keyboard input

    Two elements: TextInput

    TextEdit

    No decorations. Need to create using other elements

    Navigation between elements Changing focus:

    Clicking

    Attached properties Keys and KeyNavigation

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

  • Demo

    02-input

  • 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

    When-property

    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

    SequentialAnimation

    Run animations in sequence

    ParallelAnimation

    Run animations in parallel

    PauseAnimation

    Insert pauses into animation groups

  • Demo

    03-states

  • Data models

    Pure models

    ListModel

    XmlListModel

    Visual models

    Combine information on how to show data with data

    VisualItemModel

    VisualDataModel

  • 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

    yourself

    Can be used with ListViews, Repeaters, etc.

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

    remove, move

  • Data views

    ListView

    GridView

    PathView

    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

    Sections

    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

    XmlRole

    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

    04-listview

  • Demo

    05-xmllistmodel

  • 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

    http://www.futurice.com/

    @Riussi on Twitter