8/6/2019 Qml Composing Uis

1/33

Qt Quick Composing UIsQt Essentials - Training Course

Produced by Nokia, Qt Development Frameworks

Material based on Qt 4.7, created on January 18, 2011

http://qt.nokia.com

1/33

8/6/2019 Qml Composing Uis

2/33

Module: Composing User Interfaces

Nested Elements

Graphical Elements

Text Elements

Anchor Layout

Composing User Interfaces 2/33

8/6/2019 Qml Composing Uis

3/33

Objectives

Elements are often nested

one element contains others manage collections of elements

Colors, gradients and images

create appealing UIs

Text displaying text handling text input

Anchors and alignment

allow elements to be placed in an intuitive way maintain spatial relationships between elements

Composing User Interfaces 3/33

8/6/2019 Qml Composing Uis

4/33

Module: Composing User Interfaces

Nested Elements

Graphical ElementsText Elements

Anchor Layout

Composing User Interfaces Nested Elements 4/33

8/6/2019 Qml Composing Uis

5/33

Nested Elements

import QtQuick 1.0

Rectangle {

width: 400; height: 400

color: "lightblue"

Rectangle {

x: 50; y: 50; width: 300; height: 300

color: "green"

Rectangle {

x: 200; y: 150; width: 50; height: 50

color: "white"

}

}

} Nested Rectangle elements Each element positioned relative to its parents

Demo qml-composing-uis/ex-elements/nested2.qml

Composing User Interfaces Nested Elements 5/33

http://qml-composing-uis/ex-elements/nested2.qmlhttp://qml-composing-uis/ex-elements/nested2.qml

8/6/2019 Qml Composing Uis

6/33

Module: Composing User Interfaces

Nested Elements

Graphical ElementsText Elements

Anchor Layout

Composing User Interfaces Graphical Elements 6/33

8/6/2019 Qml Composing Uis

7/33

Colors

The colors of elements can be specified in many ways:

As a named color in a string (using SVG names): "red", "green", "blue", ...

With color components in a string:

red, green and blue: #

"#ff0000", "#008000", "#0000ff", ...

Using a built-in function (red, green, blue, alpha):

Qt.rgba(0,0.5,0,1)

With an opacity:

using the opacity property values from 0.0 (transparent) to 1.0 (opaque)

See QML Basic Type: color Documentation

Composing User Interfaces Graphical Elements 7/33

http://qt.nokia.com/doc/latest/qml-color.htmlhttp://qt.nokia.com/doc/latest/qml-color.html

8/6/2019 Qml Composing Uis

8/33

Colors

import QtQuick 1.0

Item {

width: 300; height: 100

Rectangle {

x: 0; y: 0; width: 100; height: 100; color: "#ff0000"

}

Rectangle {

x: 100; y: 0; width: 100; height: 100color: Qt.rgba(0,0.75,0,1)

}

Rectangle {

x: 200; y: 0; width: 100; height: 100; color: "blue"

}

}

Three different ways to specify colors

Demo qml-composing-uis/ex-elements/colors.qml

Composing User Interfaces Graphical Elements 8/33

http://qml-composing-uis/ex-elements/colors.qmlhttp://qml-composing-uis/ex-elements/colors.qml

8/6/2019 Qml Composing Uis

9/33

Images

Represented by the Image element

Refer to image files with the source property using absolute URLs or relative to the QML file

Can be transformed

scaled, rotated about an axis or central point

Composing User Interfaces Graphical Elements 9/33

8/6/2019 Qml Composing Uis

10/33

Images

import QtQuick 1.0

Rectangle {width: 400; height: 400

color: "black"

Image {

x: 150; y: 150

source: "../images/rocket.png"

}

}

source contains a relative path

"../" refers to the parent directory

width and height are obtained fromthe image file

Demo qml-composing-uis/ex-elements/images.qml

Composing User Interfaces Graphical Elements 10/33

http://qml-composing-uis/ex-elements/images.qmlhttp://qml-composing-uis/ex-elements/images.qml

8/6/2019 Qml Composing Uis

11/33

Image Scaling

import QtQuick 1.0

Rectangle {width: 400; height: 400

color: "black"

Image {

x: 150; y: 150

source: "../images/rocket.png"

scale: 2.0

}

}

Set the scale property

By default, the center of the item remains in the same place

Demo qml-composing-uis/ex-elements/image-scaling.qml

Composing User Interfaces Graphical Elements 11/33

http://qml-composing-uis/ex-elements/image-scaling.qmlhttp://qml-composing-uis/ex-elements/image-scaling.qml

8/6/2019 Qml Composing Uis

12/33

Image Rotation

import QtQuick 1.0

Rectangle {width: 200; height: 200

color: "black"

Image {

x: 50; y: 35

source: "../images/rocket.svg"

rotation: 45.0

}

}

Set the rotate property

By default, the center of the item remains in the same placeDemo qml-composing-uis/ex-elements/image-rotation.qml

Composing User Interfaces Graphical Elements 12/33

http://qml-composing-uis/ex-elements/image-rotation.qmlhttp://qml-composing-uis/ex-elements/image-rotation.qml

8/6/2019 Qml Composing Uis

13/33

Image Rotation

import QtQuick 1.0

Rectangle {width: 200; height: 200

color: "black"

Image {

x: 50; y: 35

source: "../images/rocket.svg"

rotation: 45.0

transformOrigin: Item.Top

}

}

Set the transformOrigin property

Now the image rotates about the top of the item

Composing User Interfaces Graphical Elements 13/33

8/6/2019 Qml Composing Uis

14/33

Gradients

Define a gradient using the gradient property:

With a Gradient element as the value Containing two or more GradientStop elements, 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 cannot be repositioned

Issues with gradients: rendering is CPU intensive gradients may not be animated as you expect use images of gradients instead

Gradients override color definitions

See QML Gradient Element Reference Documentation

Composing User Interfaces Graphical Elements 14/33

http://qt.nokia.com/doc/latest/qml-gradient.htmlhttp://qt.nokia.com/doc/latest/qml-gradient.html

8/6/2019 Qml Composing Uis

15/33

Gradients

import QtQuick 1.0

Rectangle {

width: 400; height: 400

gradient: Gradient {

GradientStop {

position: 0.0; color: "green"

}

GradientStop {position: 1.0; color: "blue"

}

}

}

A gradient with two gradient stops Note the definition of an element as a property value It is often faster to use images instead

Demo qml-composing-uis/ex-elements/gradients.qml

Composing User Interfaces Graphical Elements 15/33

http://qml-composing-uis/ex-elements/gradients.qmlhttp://qml-composing-uis/ex-elements/gradients.qml

8/6/2019 Qml Composing Uis

16/33

Gradient Images

import QtQuick 1.0

Rectangle {width: 425; height: 200

Image {

x: 0; y: 0

source: "../images/vertical-gradient.png"

}

Image {

x: 225; y: 0

source: "../images/diagonal-gradient.png"

}

}

Use two-predefined images of gradients

Artists can create the desired gradients

Demo qml-composing-uis/ex-elements/image-gradients.qml

Composing User Interfaces Graphical Elements 16/33

http://qml-composing-uis/ex-elements/image-gradients.qmlhttp://qml-composing-uis/ex-elements/image-gradients.qml

8/6/2019 Qml Composing Uis

17/33

Module: Composing User Interfaces

Nested Elements

Graphical ElementsText Elements

Anchor Layout

Composing User Interfaces Text Elements 17/33

8/6/2019 Qml Composing Uis

18/33

Text Elements

import QtQuick 1.0

Rectangle {

width: 400; height: 400

color: "lightblue"

Text {

x: 100; y: 100

text: "Qt Quick"

font.family: "Helvetica"font.pixelSize: 32

}

}

Simple text display

Width and height determined by the font metrics and text Can also use rich text use HTML tags in the text: "Qt Quick"

Demo qml-composing-uis/ex-elements/text.qml

Composing User Interfaces Text Elements 18/33

http://qml-composing-uis/ex-elements/text.qmlhttp://qml-composing-uis/ex-elements/text.qml

8/6/2019 Qml Composing Uis

19/33

Text Input

import QtQuick 1.0

Rectangle {width: 400; height: 400

color: "lightblue"

TextInput {

x: 50; y: 100; width: 300

text: "Editable text"

font.family: "Helvetica"; font.pixelSize: 32

}

}

Simple editable text item no decoration (not a QLineEdit widget)

Gets the focus when clicked need something to click on

text property changes as the user enters text

Demo qml-composing-uis/ex-elements/textinput.qml

Composing User Interfaces Text Elements 19/33

http://qml-composing-uis/ex-elements/textinput.qmlhttp://qml-composing-uis/ex-elements/textinput.qml

8/6/2019 Qml Composing Uis

20/33

Module: Composing User Interfaces

Nested Elements

Graphical ElementsText Elements

Anchor Layout

Composing User Interfaces Anchor Layout 20/33

8/6/2019 Qml Composing Uis

21/33

Anchors

Used to position and align items

Line up the edges or central lines of items Anchors refer to

other items (centerIn, fill) anchors of other items (left, top)

See Anchor-based Layout Documentation

Composing User Interfaces Anchor Layout 21/33

http://qt.nokia.com/doc/latest/anchor-layout.htmlhttp://qt.nokia.com/doc/latest/anchor-layout.html

8/6/2019 Qml Composing Uis

22/33

Anchors

import QtQuick 1.0

Rectangle {

width: 400; height: 400

color: "lightblue"

id: rectangle1

Text {

text: "Centered text"; color: "green"

font.family: "Helvetica"; font.pixelSize: 32anchors.centerIn: rectangle1

}

}

anchors.centerIn centers the Text element in the Rectangle

refers to an item not an anchor

Demo qml-composing-uis/ex-anchor-layout/anchors.qml

Composing User Interfaces Anchor Layout 22/33

http://qml-composing-uis/ex-anchor-layout/anchors.qmlhttp://qml-composing-uis/ex-anchor-layout/anchors.qml

8/6/2019 Qml Composing Uis

23/33

Anchors

import QtQuick 1.0

Rectangle {

// The parent element

width: 400; height: 400

color: "lightblue"

Text {

text: "Centered text"; color: "green"

font.family: "Helvetica"; font.pixelSize: 32anchors.centerIn: parent

}

}

Each element can refer to its parent element

using the parent ID Can refer to ancestors and named children of ancestors

Demo qml-composing-uis/ex-anchor-layout/anchors2.qml

Composing User Interfaces Anchor Layout 23/33

http://qml-composing-uis/ex-anchor-layout/anchors2.qmlhttp://qml-composing-uis/ex-anchor-layout/anchors2.qml

8/6/2019 Qml Composing Uis

24/33

Anchors

import QtQuick 1.0

Rectangle {

width: 300; height: 100color: "lightblue"

Text {

y: 34

text: "Right-aligned text"; color: "green"

font.family: "Helvetica"; font.pixelSize: 32anchors.right: parent.right

}

}

Connecting anchors together

Anchors of other items are referred to directly use parent.right not parent.anchors.right

Demo qml-composing-uis/ex-anchor-layout/anchor-to-anchor.qml

Composing User Interfaces Anchor Layout 24/33

http://qml-composing-uis/ex-anchor-layout/anchor-to-anchor.qmlhttp://qml-composing-uis/ex-anchor-layout/anchor-to-anchor.qml

8/6/2019 Qml Composing Uis

25/33

Margins

Used with anchors to add space

Specify distances in pixels between elements connected with anchors

Composing User Interfaces Anchor Layout 25/33

M i

8/6/2019 Qml Composing Uis

26/33

Margins

import QtQuick 1.0

Rectangle {width: 400; height: 200

color: "lightblue"

Image { id: book; source: "../images/book.svg"

anchors.left: parent.left

anchors.leftMargin: parent.width/16

anchors.verticalCenter: parent.verticalCenter }

Text { text: "Writing"; font.pixelSize: 32

anchors.left: book.right

anchors.leftMargin: 32

anchors.baseline: book.verticalCenter }

}

Use margins to add space between items

Demo qml-composing-uis/ex-anchor-layout/alignment.qml

Composing User Interfaces Anchor Layout 26/33

Hi t d Ti A h

http://qml-composing-uis/ex-anchor-layout/alignment.qmlhttp://qml-composing-uis/ex-anchor-layout/alignment.qml

8/6/2019 Qml Composing Uis

27/33

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

Composing User Interfaces Anchor Layout 27/33

St t i f U A h

8/6/2019 Qml Composing Uis

28/33

Strategies for Use Anchors

Identify item with different roles in the user interface:

Fixed items make sure these have id properties defined unless these items can easily be referenced as parent items

Items that dominate the user interface

make sure these have id properties defined

Items that react to size changes of the dominant items give these anchors that refer to the dominant or fixed items

Composing User Interfaces Anchor Layout 28/33

E i It

8/6/2019 Qml Composing Uis

29/33

Exercise Items

The image on the right shows two items and

two child items inside a 400 400 rectangle.

1 Recreate the scene using Rectangle items.

2 Can items overlap?Experiment by moving the light blue or green

rectangles.

3 Can child items be displayed outside their parents?

Experiment by giving one of the child items negative coordinates.

Composing User Interfaces Anchor Layout 29/33

Exercise Colors and Gradients

8/6/2019 Qml Composing Uis

30/33

Exercise Colors and Gradients

1 How else can you write these colors?

"blue"

"#ff0000" Qt.rgba(0,0.5,0,1)

2 How would you create these items using the gradient

property?

3 Describe another way to create these gradients?

Composing User Interfaces Anchor Layout 30/33

Exercise Images and Text

8/6/2019 Qml Composing Uis

31/33

Exercise Images and Text

1 When creating an Image, how do you specify the location of

the image file?

2 By default, images are rotated about a point inside the

image. Where is this point?

3 How do you change the text in a Text element?

Composing User Interfaces Anchor Layout 31/33

Lab Images Text and Anchors

8/6/2019 Qml Composing Uis

32/33

Lab Images, Text and Anchors

Using the partial solutions as hints, create a user interfacesimilar to the one shown above.

Use the background image supplied in the common images

directory for the background gradient.

Lab qml-composing-uis/lab-text-images-anchors

Composing User Interfaces Anchor Layout 32/33

http://qml-composing-uis/lab-text-images-anchorshttp://qml-composing-uis/lab-text-images-anchors

8/6/2019 Qml Composing Uis

33/33

c 2010 Nokia Corporation and its Subsidiary(-ies).

The enclosed Qt Training Materials are provided under the Creative

Commons Attribution ShareAlike 2.5 License Agreement.

The full license text is available here:

http://creativecommons.org/licenses/by-sa/2.5/legalcode

Nokia, Qt and the Nokia and Qt logos are the registered trademarks of

Nokia Corporation in Finland and other countries worldwide.

Composing User Interfaces Legal 33/33

http://creativecommons.org/licenses/by-sa/2.5/legalcodehttp://creativecommons.org/licenses/by-sa/2.5/legalcode