%in Bahrain+277-882-255-28 abortion pills for sale in Bahrain
Qt for Beginners Part 3 - QML and Qt Quick
1. Qt For Beginners - Part 3
QML and Qt Quick
Eric Magnuson, Qt Consultant
Integrated Computer Solutions
Visit us at http://www.ics.com
Watch the video: http://bit.ly/qt-beginners-qml-quick
Copyright 2016, Integrated Computers Solutions, Inc.
This work may not be reproduced in whole or in part without the express written consent of
Integrated Computer Solutions, Inc.
1
2. ● Introduction
● Qt Quick Hello World
● QML Concepts
● Composing User Interfaces
● Nested Elements
● Graphical Types
● Text Items
Agenda
2
4. ● Introduction
● Qt Quick Hello World
● QML Concepts
● Composing User Interfaces
● Nested Elements
● Graphical Types
● Text Items
Agenda
4
5. What is QML?
Declarative language for User Interface structure
● Describes the user interface
○ What items look like
○ How items behave
● UI specified as tree of QML structures with properties
○ Elements and identities
○ Properties and property binding
5
6. ● Introduction
● Qt Quick Hello World
● QML Concepts
● Composing User Interfaces
● Nested Elements
● Graphical Types
● Text Items
Agenda
6
8. ● Introduction
● Qt Quick Hello World
● QML Concepts
● Composing User Interfaces
● Nested Elements
● Graphical Types
● Text Items
Agenda
8
9. Properties
Objects are described by properties
● Simple name-value definitions
○ width, height, color, ...
○ With default values
○ Each has a well-defined type
○ Separated by semicolons or line breaks
● Used for
○ Customizing their appearance
○ Changing their behavior
9
10. Types of Properties
● Standard properties can be given values:
Text {
text: "Hello world"
height: 50
}
● Grouped properties keep related properties together
Text {
font.family: "Helvetica"
font.pixelSize: 24
}
● Attached properties are applied to QML structures
TextInput {
text: "Hello world"
KeyNavigation.tab: nextInput
}
○ KeyNavigation.tab is not a standard property of TextInput
○ Is a standard property that is attached to Items
● Custom properties can be added to any QML type
Rectangle {
property real mass: 100.0
}
10
11. Binding Properties
import QtQuick 2.0
Item {
width: 400; height: 200
Rectangle {
x: 100; y: 50
width: height * 2; height: 100
color: "lightblue"
}
}
● Properties can contain expressions
○ See above: width is twice the height
● Not just initial assignments
● Expressions are re-evaluated when needed
11
12. Identifying QML Structures
The id defines an identity of a QML structure
● Lets other QML structures refer to it
○ For relative alignment and positioning
○ To access or modify an Item's properties
○ To re-use common structures (e.g., gradients, images)
● Used to create relationships between structures
● id is not a property
○ Not stored in the QObject with other properties
○ More like a "label"
○ A single Item can have different identities in other
files/scopes.
● parent is a special id referring to the relative
parent structure
12
13. Using Identities
Text {
id: title
x: 50; y: 25
text: "Qt Quick"
font.family: "Helvetica"
font.pixelSize: 50
}
Rectangle {
x: 50; y: 95; height: 5
width: title.width
color: "green"
}
● Text item has the identity, title
● width of Rectangle bound to width of title
● Try using TextInput instead of Text
13
14. Methods
● Most features are accessed via properties
● Methods are also used, to perform actions
○ TextInput has a selectAll() method
○ Timer has start(), stop() and restart() methods
○ Particles has a burst() method
● All methods are public in QML
● Other methods are used to convert values between
types:
○ Qt.formatDateTime(datetime, format)
○ Qt.md5(data)
○ Qt.tint(baseColor, tintColor)
14
15. Property values can have different types:
● Numbers (int and real): 400 and 1.5
● Boolean values: true and false
● Strings: "Hello Qt"
● Constants: AlignLeft
● Lists: [ ... ]
○ Lists with one item can be written as just the item itself
● Scripts:
○ Included directly in property definitions
● Other types:
○ colors, dates, times, rects, points, sizes, 3D vectors, ...
○ Usually created using constructors
Basic Types
15
16. ● Introduction
● Qt Quick Hello World
● QML Concepts
● Composing User Interfaces
● Nested Elements
● Graphical Types
● Text Items
Agenda
16
17. Why use nested items, anchors and components?
● Concerns separation
● Visual grouping
● Pixel perfect items placing
and layout
● Encapsulation
● Reusability
● Look and feel changes
17
18. ● Introduction
● Qt Quick Hello World
● QML Concepts
● Composing User Interfaces
● Nested Elements
● Graphical Types
● Text Items
Agenda
18
22. Images
● Represented by the Image class
● Refer to image files with the source property
○ Using absolute URLs or relative to the QML file
import QtQuick 2.0
Rectangle {
width: 400; height: 400
color: "black"
Image {
x: 150; y: 150
source: "../images/rocket.png"
}
}
○ width and height are obtained from the image file
● Can be transformed
○ Scaled, rotated
○ About an axis or central point
22
23. Gradients
Define a gradient using the gradient property:
● As Gradient containing GradientStop values, each with
○ A position: a number between 0 (start point) and 1 (end point)
○ A color
● The start and end points are on the top and bottom edges of the item
● Gradients override color definitions
import QtQuick 2.0
Rectangle {
width: 400; height: 400
gradient: Gradient {
GradientStop {
position: 0.0; color: "green"
}
GradientStop {
position: 1.0; color: "blue"
}
}
}
● Alternative to gradients: A simple background image.
23
24. ● Create border using part of an image:
○ Corners (regions 1, 3, 7, 9) are not scaled
○ Horizontal borders (2 and 8) are scaled according to horizontalTileMode
○ Vertical borders (4 and 6) are scaled according to verticalTileMode
○ Middle (5) is scaled according to both modes
● There are 3 different scale modes
○ Stretch: scale the image to fit to the available area.
○ Repeat: tile the image until there is no more space.
○ Round: like Repeat, but scales the images down to ensure that the last
image is not cropped
BorderImage {
source: "content/colors.png"
border { left: 30; top: 30; right: 30; bottom: 30; }
horizontalMode: BorderImage.Stretch
verticalMode: BorderImage.Repeat
...
}
Border Images
24
25. ● Introduction
● Qt Quick Hello World
● QML Concepts
● Composing User Interfaces
● Nested Elements
● Graphical Types
● Text Items
Agenda
25
26. Text Items
import QtQuick 2.0
Rectangle {
width: 400; height: 400
color: "lightblue"
Text {
x: 100; y: 100
text: "Qt Quick"
font.family : "Helvetica"
font.pixelSize : 32
}
}
● Width and height determined by the font metrics and text
● Can also use use HTML tags in the text:
"<html><b>Qt Quick</b></html>"
26
27. import QtQuick 2.0
Rectangle {
width: 400; height: 400 color: "lightblue"
TextInput {
x: 50; y: 100; width: 300
text: "Editable text"
font.family : "Helvetica" ; font.pixelSize : 32
}
}
● No decoration (not a QLineEdit widget)
● Gets the focus when clicked
○ Need something to click on
● text property changes as the user types
Text Input
27
29. Anchors
● Used to position and align items
● Line up edges or central lines of items
● anchors, an attached property, can specify
○ A position in another item: (centerIn, fill)
○ An AnchorLine of another item: (left, top)
AnchorLines:
29
30. import QtQuick 2.0
Rectangle {
width: 400; height: 400
color: "lightblue"
id: rectangle1
Text {
text: "Centered text" ; color: "green"
font.family : "Helvetica" ; font.pixelSize : 32
anchors.centerIn : rectangle1
}
}
● anchors.centerIn centers the Text item in
the Rectangle
○ Refers to an Item, not an AnchorLine
anchors.centerIn
30
31. import QtQuick 2.0
Rectangle {
// The parent element
width: 400; height: 400
color: "lightblue"
Text {
text: "Centered text" ; color: "green"
font.family : "Helvetica" ; font.pixelSize : 32
anchors.centerIn : parent
}
}
● Each item can refer to its parent Item
○ Using the parent ID
● Can refer to ancestors and named children of
ancestors
Anchors and Parent
31
32. Connecting AnchorLines Together
import QtQuick 2.0
Rectangle {
width: 300; height: 100
color: "lightblue"
Text {
y: 34
text: "Right-aligned text" ; color: "green"
font.family : "Helvetica" ; font.pixelSize : 32
anchors.right : parent.right
}
}
● AnchorLines must be parallel
○ right to left but not bottom
● AnchorLines of other items are referred to directly:
○ Use parent.right, not parent.anchors.right
32
33. Margins
● Used with anchors to add space
● Specify distances
○ In pixels
○ Between Items connected with anchors
33
35. Hints and Tips – Anchors
● Anchors can only be used with parent and sibling
items
● Anchors work on constraints
○ Some items need to have well-defined positions and sizes
○ Items without default sizes should be anchored to fixed or well-
defined items
● Anchors creates dependencies on geometries of
other items
○ Creates an order in which geometries are calculated
○ Avoid creating circular dependencies
■ e.g., parent → child → parent
● Margins are only used if the corresponding
anchors are used
○ e.g., leftMargin needs left to be defined
35
36. Strategies for Use – Anchors
Identify Items with different roles in the user interface:
● Fixed items
○ Make sure these have id defined
○ Unless these items can easily be referenced as parent items
● Items that dominate the user interface
○ Make sure these have id defined
● Items that react to size changes of the dominant
items
○ Give these anchors that refer to the dominant or fixed items
36
38. QML Types
● Item is the base type for Visible QML objects
○ Has a position, dimensions
○ Usually used to group other visual Items
○ Often used as the top-level Item
○ Rectangle, Text, TextInput, ...
● Non-visual structures also exist:
○ State, Transition, ...
○ ListModel, ListElement, Path, ...
○ Gradient, Timer, ...
● QQuickItem extends QObject and thus, has properties
○ QML Objects can be extended with custom properties from C++
or QML
38
40. Qt Quick Controls
● A set of controls to build entire user interfaces
in Qt Quick
● Originally designed to provide a set of ready to
use components for traditional desktop
applications
○ Application Windows, Navigation and Views, Controls,
Menus
○ Layouts
○ System and Theme integration
● Idea and design extensible to touchscreen
applications
40
41. Qt Quick Controls
● Platforms supported include Windows, OS X,
Android, Linux and iOS
● Qt Quick Controls 1 are designed for desktop
platforms and look like native widgets
● Qt Quick Controls 2 (aka Qt Labs Controls) are
designed for embedded platforms and are
lighter weight
● Controls have similar APIs
41
43. Mouse Areas
Mouse areas define parts of the screen where cursor
input occurs
● Placed and resized like ordinary items
○ Using anchors if necessary
● Two ways to monitor mouse input:
○ Handle signals
○ Dynamic property bindings
43
46. Mouse Area Hints and Tips
● A mouse area only responds to its
acceptedButtons
○ The handlers are not called for other buttons, but
○ Any click involving an allowed button is reported
○ The pressedButtons property contains all buttons
○ Even non-allowed buttons, if an allowed button is also
pressed
● With hoverEnabled set to false
○ containsMouse can be true if the mouse area is clicked
46
48. Touch Events
QML types that already recognize Touch events:
● Single-touch (MouseArea)
● Multi-touch (MultiPointTouchArea)
● Gestures:
○ Swipe (Flickable, ListView)
○ Pinch (PinchArea)
○ Tap and Hold (MouseArea onPressAndHold)
48
49. Multi-Touch Events
MultiPointTouchArea {
anchors.fill : parent
touchPoints : [
TouchPoint { id: point1 }, TouchPoint { id: point2 }, TouchPoint { id: point3 }
]
}
TouchPoint properties:
● int x
● int y
● bool pressed
● int pointId
49
50. MultiPointTouchArea Signals
● onPressed(list<TouchPoint> touchPoints) onReleased(…)
touchPoints is list of changed points.
● onUpdated(…)
Called when points is updated (moved) touchPoints is list of changed
points.
● onTouchUpdated(…)
Called on any change touchPoints is list of all points.
50
51. 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.
51
52. Swipe Gestures
● Built into Flickable, ListView
● snapMode: ListView.SnapOneItem
The view settles no more than one item away from the first visible item at
the time the mouse button is released.
● orientation: ListView.Horizontal
52
54. Pinch Gestures
● Signals for manual pinch handling
○ onPinchStarted(PinchEvent pinch)
○ onPinchUpdated(PinchEvent pinch)
○ onPinchFinished()
● PinchEvent properties:
○ point1, point2, center
○ rotation
○ scale
○ accepted
Set to false in the onPinchStarted handler if the gesture should
not be handled
54
56. Keyboard Input
Basic keyboard input is handled in two different
use cases:
● Accepting text input
○ TextInput and TextEdit
● Navigation between Items
○ Changing the focused Item
○ Directional (arrow keys), tab and backtab
56
57. Raw Keyboard Input
● Raw key input can be handled by items
○ With predefined handlers for commonly used keys
○ Full key event information is also available
● The same focus mechanism is used as for
ordinary text input
○ Enabled by setting the focus property
● Key handling is not an inherited property of items
○ Enabled using the Keys attached property
● Key events can be forwarded to other objects
○ Enabled using the Keys.forwardTo attached property
○ Accepts a list of objects
57