QML Programming

Fundamentals and Beyond

1
Course Outline
Session 1: April 28, Introduction to QML Session 5: May 15, Custom Items & Components
● About QML ● Creating your own Components
● Properties ● Creating a Module
● Basic Types
Session 6: May 19, Model / View
Session 2: May 1, QML Item Placement ● Model / View
● How to correctly size and place items ● QML Models
● When to use Anchors, Layouts and Positioners ● QML Views

Session 3: May 5, Touch Interaction Session 7: May 22, C++ Integration

● QML Signals ● Why expose C++ to QML
● Touch Events ● Exposing C++ Objects
● Single and Multi-Touch ● Exposing C++ Classes
● Swipe and Pinch Gestures

Session 4: May 8, States & Transitions

● Creating and defining states
● Using Transitions

2
About ICS

ICS Designs User Experiences and Develops Software for

Connected Devices
• Largest source of independent Qt expertise in North America since 2002
• Headquartered in Waltham, MA with offices in California, Canada, Europe
• Includes Boston UX, ICS’ UX design division

• Embedded, touchscreen, mobile and desktop applications

• Exclusive Open Enrollment Training Partner in North America

3
UX/UI Design and Development for Connected
Devices Across Many Industries

4
Agenda
User Interactions
● QML Signals and Handlers
● Mouse area
● Touch Events
● Tap Handler
● Multi-touch events
● Touch Gesture

5
Qml Signals
● Many Qml Objects have predefined signals.
● Signals are emitted by specific user interactions with an object.
● Each signal has a handler. Handlers are named onSignal where Signal is the name of
the signal beginning with an uppercase letter.

Slider {
id: mySlider
onValueChanged: {
numberDisplay.value = value
}
}

MyCustomNumberDisplay {
id: outputDisplay
value: 20
}

6
Mouse Area
● A non-visual object that provides mouse handling
○ This non-visual object has a visible property used to describe if visible to the mouse.
○ Placed and resized like ordinary items

● Two ways to monitor mouse input:

○ Signal handlers: onClicked, onDoubleClick, onPressAndHold, onWheel , etc.
○ Bind properties: pressed, containsMouse, pressedButtons, etc.

7
Signals vs. Property Bindings
● Signals can be easier to use in some cases
○ When a signal only affects one other item
● Property bindings rely on named objects
○ Many items can react to a change by referring to a property
● Use the most intuitive approach for the use case
● Favor simple assignments over complex scripts

8
Mouse Area, Clicks

Rectangle {
width: 400; height: 200; color: "lightblue”
Text {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
text: qsTr("Press me”); font.pixelSize: 48
MouseArea {
anchors.fill: parent
onPressed: parent.color = "green"
onReleased: parent.color = "black"
}
}
}

9
Hints and Tips
● A mouse area only responds to acceptedButtons
○ acceptedButtons takes a Qt::MouseButton
○ Qt.LeftButton is the default
○ Only clicks involving allowed buttons are reported
○ The pressedButtons property always reports all pressed buttons

● With hoverEnabled false, containsMouse can be true if the MouseArea was clicked

● Setting the drag properties allows you to make items draggable.

○ drag is of type Drag
■ Contains several properties to describe the drag event
■ target, axis, etc ….
○ Can be used along with a DropArea to allow Drag and Drop
○ Cannot be used with anchored items.

10
Touch Events
● Single-touch (TapHandler/MouseArea)
● Multi-touch (MultiPointTouchArea)
● Gestures
○ Tap and Hold (TapHandler/MouseArea)
○ Swipe (Flickable)
○ Pinch (PinchArea)

11
Tap Handler
● Similar to the MouseArea
○ Has Signals onSingleTapped, onDoubleTapped
onLongPressed, onTapCountChanged
● Provides some additional properties helpful for touch
○ acceptedDevices: Filter out input by PointerDevice.
○ acceptedModifiers: Different input based on modifier status
○ grabPermissions: Use a PointerHandler to set how events are passed
● Fills the parent by default

12
TapHandler Example
Rectangle {
width: 400; height: 200; color: "lightblue”
Text {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
text: qsTr("Press me”); font.pixelSize: 48

TapHandler {
acceptedDevices: PointerDevice.Mouse | PointerDevice.Stylus
onPressedChanged: {
parent.color = pressed ? "green" : "black"
}
}
}
}

13
Multi-Touch Events
MultiPointTouchArea { TouchPoint properties:
anchors.fill: parent ● real x, y
touchPoints: [
TouchPoint { id: point1 }, ● real previousX, previousY
TouchPoint { id: point2 }, ● bool pressed
TouchPoint { id: point3 },
] ● int pointId
} ● real pressure

Rectangle {
width: 30
height: 30
color: "red"
x: point2.x
y: point2.y
}

14
MultiPointTouchArea Signals
• onPressed(list<TouchPoint> touchPoints)

• onReleased(list<TouchPoint> touchPoints)
• touchPoints is list of changed points

• onUpdated(list<TouchPoint> touchPoints)
• Called when points is updated (moved)
• touchPoints is list of changed points

• onTouchUpdated(list<TouchPoint> touchPoints)
• Called on any change
• touchPoints is list of all points

15
MultiPointTouchArea Signals
• onGestureStarted(GestureEvent gesture)
• Cancel the gesture using gesture.cancel()

• onCanceled(list<TouchPoint> touchPoints)
• Called when another item takes over touch handling.
• Useful for undoing what was done on onPressed.

16
Touch Gestures: Tap And Hold
Tap and Hold can be done in both a MouseArea or TapHandler

MouseArea {
onPressAndHold: console.log("Tap and Hold")
anchors.fill : parent
}

TapHandler {
onLongPressed: console.log("Tap and Hold")
}

17
Touch Gestures: Swiping
A Flickable is a surface that can be flicked and dragged. It is built into several “views”.

Flickable {
anchors.fill: parent
contentWidth: image.width; contentHeight: image.height
boundsMovement: Flickable.StopAtBounds
Image {
id: image
source: "largeImage"
}
}

● contentWidth and contentHeight determine the inner size of the Flickable

● boundsMovement allows you to set how the Flickable’s bounds act.

18
Touch Gestures: Pinching
Automatic pinch setup using the target property:

Item {
PinchArea {
anchors.fill: parent
pinch.target: parent
pinch.minimumScale: 0.33;
pinch.maximumScale: 1.5
pinch.minimumRotation: -3600;
pinch.maximumRotation: 3600
}
}

19
Touch Gestures: Pinching
PinchEvent signals:
● pinchStarted(PinchEvent pinch)
● pinchUpdated(PinchEvent pinch)
● pinchFinished()

PinchEvent properties:
● point1, point2, center
● rotation
● scale
● accepted
● set false in the onPinchStarted handler to ignore the gesture.

20
Q&A Session

21