Download - 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 don’t 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 Android’s 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 item’s 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