Qt quickatlinuxcollaborationsummit2010

Rapid Application
Development with
Qt Quick
Henrik Hartz

Monday, April 26, 2010 1

Agenda
• Background
• Structure of a Quick App
• Hello Elements
• Integrating with Native code
• Hello Device
• Adding New Semantics
• Hello Widgets


Background
QWidget QGraphicsView Components
Controls come from Low-level API Convenience of prebuilt
desktop components

Controls are boxed Close to hardware C++

Controls are for Mouse Cumbersome to implement Difficult to customize
fluid UI

Controls are heavyweight Limited API to push UX-specific
hardware capapbilities

Easy to shoot yourself in the
foot


Qt Quick App
QML QtDeclarativeView

Java UI
JavaScriptCore
Script
QtDeclarative
QtWebKit
QtSVG QtOpenGL
QtGui QtXmlPatterns
QtNetwork QtXml QtScript QtSQL

QtCore
System Libs


Qt Meta-Object Language
import Qt 4.7
import "content"

Rectangle {
color: "#545454"
width: 300; height: 300

// Dial with a slider to adjust it
Dial { id: dial; anchors.centerIn: parent; value: slider.x *100 / (container.width - 34) }

Rectangle {
id: container
anchors.bottom: parent.bottom; anchors.bottomMargin: 10
anchors.left: parent.left; anchors.leftMargin: 20
anchors.right: parent.right; anchors.rightMargin: 20; height: 16
gradient: Gradient {
GradientStop { position: 0.0; color: "gray" }
GradientStop { position: 1.0; color: "white" }
}
radius: 8; opacity: 0.7; smooth: true
Rectangle {
id: slider
x: 1; y: 1; width: 30; height: 14
radius: 6; smooth: true
GradientStop { position: 0.0; color: "#424242" }
GradientStop { position: 1.0; color: "black" }
}
MouseArea {
anchors.fill: parent
drag.target: parent; drag.axis: "XAxis"; drag.minimumX: 2; drag.maximumX: container.width - 32
}
}
}
}


import Qt 4.7
Built-in import "content"
Elements
Rectangle {
color: "#545454"


Rectangle {
id: container
}
Rectangle {
id: slider
x: 1; y: 1; width: 30; height: 14
}
MouseArea {
}
}
}
}


import Qt 4.7
import "content"
Local Elements
Rectangle {
color: "#545454"


Rectangle {
id: container
}
Rectangle {
id: slider
x: 1; y: 1; width: 30; height: 14
}
MouseArea {
}
}
}
}


import Qt 4.7
import "content"

Rectangle {
Toplevel color: "#545454"
Window width: 300; height: 300


Rectangle {
id: container
}
Rectangle {
id: slider
x: 1; y: 1; width: 30; height: 14
}
MouseArea {
}
}
}
}


import Qt 4.7
import "content"

Rectangle {
color: "#545454"
Basic width: 300; height: 300
properties // Dial with a slider to adjust it

Rectangle {
id: container
}
Rectangle {
id: slider
x: 1; y: 1; width: 30; height: 14
}
MouseArea {
}
}
}
}


import Qt 4.7

Item {
id: root
property real value : 0


Image { source: "background.png" }

import Qt 4.7 Image {
import "content" x: 93
y: 35
Rectangle { source: "needle_shadow.png"
color: "#545454" transform: Rotation {
width: 300; height: 300 origin.x: 11; origin.y: 67
angle: needleRotation.angle
// Dial with a slider }to adjust it
}
Custom Type Image {
Rectangle { id: needle
id: container x: 95; y: 33
smooth: true
source: "needle.png"
anchors.right: parent.right; Rotation {
transform: anchors.rightMargin: 20; height: 16
gradient: Gradient { id: needleRotation
origin.x: 7; origin.y: 65
GradientStop { position: -130 color: "white" }
angle: 1.0;
} SpringFollow on angle {
spring: 1.4
Rectangle { damping: .15
id: slider to: Math.min(Math.max(-130, root.value*2.6 - 130), 133)
x: 1; y: 1; width: 30; height: 14
}
}
gradient: }Gradient {
GradientStop { position: 0.0; color: "#424242" } }
Image { x: 21; y: 18; source: "overlay.png"
}
}
MouseArea {
}
}
}
}


import Qt 4.7

Item {
id: root



y: 35
}
Image {
smooth: true
Anchor Lines anchors.left: parent.left; anchors.leftMargin: 20
w/Margins anchors.right: parent.right; Rotation {
angle: 1.0;
spring: 1.4
x: 1; y: 1; width: 30; height: 14
}
}
}
}
MouseArea {
}
}
}
}


import Qt 4.7

Item {
id: root



y: 35
}
Image {
smooth: true
angle: 1.0;
spring: 1.4
x: 1; y: 1; width: 30; height: 14
}
}
}
}
MouseArea {
Mouse anchors.fill: parent
Interaction area }

}
}
}


import Qt 4.7

Item {
id: root



y: 35
}
Image {
smooth: true
angle: 1.0;
spring: 1.4
x: 1; y: 1; width: 30; height: 14
}
}
}
}
MouseArea {
}
}
}
}


Code Walkthrough
• (MeeGo?) RSS viewer
• Written in-ﬂight; ~4 hrs
• Single window, 2 lists
• Graphics borrowed


Hello Elements
• Item, Rectangle
• MouseArea, LineEdit
• Model,View
• BorderImage, Gradient, Rotation


What’s Quick about it?
• Simplicity of language and intuitive structure
• Created with Designers in mind
• Easy to pick up
• Good separation between code and presentation
• Designers and developers in same environment
• Common understanding of semantics
• Design around same constraints
• Hardware accelerated
• Openl GL (ES), OpenVG


States and Transitions
• State represents a conﬁguration of
properties for some items
• PropertyChanges, ParentChange,
AnchorChanges
• Transitions deﬁne interpolation between two
states
• PropertyAnimation, SequentialAnimation/
ParallelAnimation, PauseAnimation


Integrating with Native Code
• QtDeclarative == Qt, native C++
• QGraphicsView runtime environment
populated by QDeclarativeEngine::load()
• All QMetaObject information exposed
• Signals, Slots, Properties
➡Easy to bind to native business logic


Hello Device
• QML UI ‘runtime’ identical on Desktop and
Device
• Device-speciﬁc features can be guarded and
added in executable
• Device-speciﬁc packaging apply
• Lets do it..


Adding New Semantics
• Any QGraphicsItem can be exposed
#define QML_DECLARE_TYPE(T)

int qmlRegisterType ( const char * uri,
int versionMajor,
int versionMinor,
const char * qmlName )

• Must subclass QObject, default-constructor
• Properties can be bound to if
NOTIFY is present


Hello Widgets

http://qt.gitorious.org/qt-components

Roadmap
✓ Emulate MeeGo Netbook UX with Qt (QML)
• WIP components to enable easy app creation, starting with
embedded/mobile space
• MeeGo handset-optimized
• ...but will work on others too
• Enable bindings of other UX
(QGraphicsView-based) to QML
• Working on controller API for UI
• i.e. models pluggable to multiple UX
• http://qt.gitorious.org/qt-components


Where, What, How?
• http://qt.nokia.com/developer/qt-roadmap
• http://qt.nokia.com/doc/4.7-snapshot/declarativeui.html
• 4.7 branch of git://gitorious.org/qt/qt.git
• http://labs.trolltech.com/blogs/category/labs/graphics/
kinetic/declarative_ui/
• http://twitter.com/#search?q=QML
• http://chaos.troll.no/~hhartz/
QtQuickAtLinuxCollaborationSummit2010.pdf
• #qt-qml on irc.freenode.org


Qt quickatlinuxcollaborationsummit2010

More Related Content

Viewers also liked (20)

Similar to Qt quickatlinuxcollaborationsummit2010 (20)

Qt quickatlinuxcollaborationsummit2010