Qt Quick Best PracticesPart 2

Langston BallICS Consulting Engineer

ICS, Inc.

Agenda• Creating New Item• State and Transitions• Dynamic Creation of Items

Creating New Items

Extending Items• Any instance of a QML item is effectively a

subclass• Add member properties• Add member functions• Add signals

• There is no reason to add signals to an instance

Extending ItemsRectangle{

Text {id: labelproperty int count: 1

text: “Count = ” + count

function incrementCount() {count = count+1

}}

Timer { running: trueonTriggered: label.incrementCount()

}}

Property Types• Properties can be almost any type

• Basic: int, real, string, date, time, point• Copies are stored

• Any valid QML type: Rectangle, Text• These are actually pointers

• The “var” type is equivalent to Qvariant• Use explicit types as much as you can

• They are faster

Property TypesRectangle{id: button

property int anInt: 1property real aDouble: 50.5property bool aBool: falseproperty string aString: “”property var anything: 50.5property list<point> points: [ Qt.point(0,0), Qt.point(100,100) ]

}

Dividing Code Into Components• Often a devs to put too much code in one

QML file• Common issue for all programming languages• QML makes it easy to componentize your code

• Component refers to an item that can be instanced multiple times

Creating New Items• Simply create a new .qml file

• Type is named after the filename• Must begin with a capital letter

• Implement• Properties• Signals• Functions

Inline Button CodeRectangle{ // Main.qmlid: toplevelcolor: “black”

Rectangle {id: buttonwidth: 100; height: 50color: “blue”

Text {text: “Click Me”}

MouseArea {anchors.fill: parentonPressedChanged: button.color = (pressed) ? “red” : “blue”onClicked: toplevel.color = “white”

}}

}

Componentized ButtonRectangle{ // Main.qmlid: toplevelcolor: “black”

Button {text: “Click Me”onClicked: toplevel.color = “white”

}}

Componentized ButtonRectangle{ // Button.qmlid: buttonproperty alias text: label.textsignal clicked()

color: “blue”width: 100; height: 50

Text {id: labelanchors.centerIn: parent

}

MouseArea{id: maanchors.fill: parentonClicked: button.clicked()

}}

Alias Properties• Proxies properties to child items

• Allows hiding of implementation details• Saves memory and binding recalculations

Property Scope• Public Scope

• All public properties of the root item• Custom properties defined on the root item

• Private Scope• All child items and their properties

Public MembersRectangle{ // Button.qmlid: buttonproperty alias text: label.textsignal clicked()

color: “blue”

Text {id: labelanchors.centerIn: parent

}

MouseArea{id: maanchors.fill: parentonClicked: button.clicked()

}}

Private MembersRectangle{ // Button.qmlid: buttonproperty alias text: label.textsignal clicked()

color: “blue”

Text {id: labelanchors.centerIn: parent

}

MouseArea{id: maanchors.fill: parentonClicked: button.clicked()

}}

Private PropertiesRectangle { // Button.qmlid: buttonproperty alias text: label.textsignal clicked()

QtObject {id: internalproperty int centerX: button.width()/2

}

Text {x: internal.centerX

} }

Avoid Inheriting Public Members// Inherit from the basic Item type and hide everything else

Item { // Button.qmlid: buttonproperty alias text: label.textsignal clicked()

Rectangle {id: backgroundcolor: “blue”

}

Text {id: labelanchors.centerIn: parent

}...

}

States and Transitions

States• State Machines can make your code “more

declarative”• A basic state machine is built into every Item

• No parallel states or state history

States• Every Item has a states property

• States contain• Name• When Clause• List of PropertyChanges{} objects

Setting States• Item can be set to a give state two ways

• 1) “state” property is set to the name of the State• item.state = “Pressed”

• 2) The when clause of the State is true• When clauses must be mutually exclusive

• They are evaluated in creation order

Button StatesItem {Rectangle { id: bkg; color: “blue” }MouseArea { id: ma }

states: [State {

name: “Pressed”when: ma.pressedPropertyChanges { target: bkg; color: “red” }

},State {

name: “Disabled”when: !(ma.enabled)PropertyChanges { target: bkg; color: “grey” }

}]

}

Default State• The initial bindings are the “Default State”

• The name of the default state is “”• Default state is in effect when

• No when clauses are satisfied• “state” property is set to “”

Properties When in a State• The bindings of a QML document is defined

as• The default state bindings• Overlaid with PropertyChanges from the current

state• This will save you a ton of typing

• States do not need to be unwound• Set common properties in the default state

• Avoids writing duplicate PropertyChanges

Transitions• Run animations on a state change

• Control how properties will change• Qt will automatically interpolate values

• Control in which order properties change

Transitions[ ... ]transitions: [

Transition {from: “”; to: “Pressed”PropertyAnimation { target: bkg

properties: “color”duration: 500

},Transition {

from: “*”; to: “Disabled”PropertyAnimation { target: bkg

properties: “color”duration: 250

}]

[ ... ]

Transition Defaults• Transition{} defaults to

• from: “*”; to: “*”• That Transition will apply to all state changes

• PropertyAnimation• When a target is not specified

• That animation will apply to all items

Button TransitionItem {Rectangle { id: bkg; color: “blue” }MouseArea { id: ma }

states: [State { name: “Pressed”; when: ma.pressed

PropertyChanges { target: bkg; color: “red” }},State { name: “Disabled”; when: !(ma.enabled)

PropertyChanges { target: bkg; color: “grey” }}

]transitions: [

Transition {PropertyAnimation { properties: “color”; duration: 500 }

}]

}

Dynamic Creation of Items

Creating Items Dynamically• Procedural Way

• Component createObject(parent, bindings) function

• Declarative Way• Loader Item• Repeater Item• ListView / GridView Items

Procedural CreationItem {id: screenproperty SettingDialog dialog: undefined

Button {text: “Settings...”onClicked: {

var component = Qt.createComponent(“SettingsDialog.qml”)screen.dialog = component.createObject(screen,

{ anchors.centerIn: screen })

screen.dialog.close.connect(screen.destroySettingsDialog)}

function destroySettingsDialog(){screen.dialog.destroy()screen.dialog = undefined

}}

Procedural / Declarative CreationItem {id: screen

Button {text: “Settings...”onClicked: {

dialogComponent.createObject(screen)}

Component {id: dialogComponent

SettingsDialog {anchors.centerIn: parentonClose: destroy()

}}

}

Declarative CreationItem {

Button {text: “Settings...”onClicked: loader.sourceComponent = dialogComponent

Loader {id: loaderanchors.fill: parent

}

Component {id: dialogComponentSettingsDialog {

anchors.centerIn: parentonClose: loader.sourceComponent = undefined

}}

}

Creating Multiple ItemsItem {width: 400; height: 400color: “black”

Grid {x: 5; y:5rows: 5; columns: 5

Repeater {model: 24Rectangle {

width: 70; height: 70color: “lightgreen”

}}

}}

Creating Multiple ItemsItem {width: 400; height: 400color: “black”

Grid {x: 5; y:5rows: 5; columns: 5

Repeater {model: 24Rectangle {

width: 70; height: 70color: “lightgreen”Text {

anchors.centerIn: parent text: index

}}

}}

}

Repeater• Repeaters can use all type of data models

• ListModel• JSON Data• property list<type>• QList<QObject*>• QAbstractItemModel

• Model data is accessed via attached properties

Thank You!Part III: July 23rd, 2015

Http://www.ics.com/webinarsLangston Ball

ICS Consulting EngineerICS, Inc.