QML by Design Webinar

© Integrated Computer Solutions, Inc. All Rights Reserved
Webinar: QML by Design
Mark Decker, Senior Qt Engineer
Integrated Computer Solutions
www.ics.com
Copyright 2017, 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. Material based on Qt 5.9.1, last updated July 2017
1

Introduction
2
Introduction
Mark Decker
● Senior Qt Engineer at ICS
● Software Engineer for many years
● Worked closely with artists at Dreamworks Animation
for 13 years
● Developed multiple commercial products using QML

Why This Class?
QML was created, in part, to be accessible to artists
● But nobody was teaching it that way!
● In 2016 ICS was asked to develop a class
○ Design it from the ground up for artists
○ Don’t assume any programming knowledge
● I spent 4 months developing it
○ Approach material visually
○ Taught it 3 times, refining it each time
● Result was a 3 day class
○ What you see today is the very first part
3
Introduction

Qt and QML
Qt
● Cross platform framework for programmers
○ Desktops: Mac, Windows, Linux
○ Mobile: iOS, Android
○ Various embedded devices
● Created in the 90s, and widely used
● C++
QML (Qt Meta Language)
● Declarative layer on top of C++
● Created in 2010
4
Introduction

How Does QML Fit In?
5
QML
C++
Touch Display
Signals Data
Underlying System
Data

What is QML?
● A declarative language for UI
● An effective tool for prototyping modern,
responsive UI
● A means to a clean separation between UI and
business logic
● What it’s not:
○ Efficient for an entire program
○ A good place to store data
6
Introduction

● More effective communications between
designers & programmers
● Common terms and concepts
● Reduce need for documentation
● Easier design revisions
● Better understanding of QML capabilities
● Rapid prototypes
Goals of Teaching QML
to Designers
7
Introduction

Designer’s Role in writing QML
● Everything you already do
○ Make it beautiful
○ Make it easy to use
● Break down the layout
● Create Components to populate it
● Provide sample data
● Design for ease of modification
● UX prototyping
8
Introduction

Qt Creator - New Project
● Click + New Project
● Select Other Project, then Qt Quick UI, click Choose..
● Name the project QMLclass
○ Choose a directory to store the project dir
○ Click Next
● Choose the most recent Qt Version
○ Do NOT check With ui.qml file
○ Click Next
● Click Finish
● Click Green triangle to run
9
Introduction

Simplest QML Program
Rectangles
10
● Start even simpler.
○ Delete all text except for the import line
○ Type the following:
Rectangle {
width: 500
height: 400
}
● This is the simplest QML program possible
● Set color:
color: "gray"

Rectangle
● Rectangle, basic visual unit
○ This outermost one also doubles as our window
● Create a new Rectangle inside the first
Rectangle {
width: 200
height: 100
color: "red"
}
● Because it is inside, the new Rectangle is a child of
the first
● Add another Rectangle colored blue
11
Rectangles

Rectangle
● Objects drawn last appear on top
● Position by using x: y: properties
● All positions are relative to parent
● Children can draw outside parent
○ clip: true to prevent that
○ Clipping is expensive, so don’t use it unless you
really need it
● Add a yellow rectangle inside the red one.
12
Rectangles

QML Coordinate System
13

● Draw outline with border
○ Width of border is inside the rectangle
border.width: 4
border.color: "black"
● Rounded corners
○ Set radius: 10
○ Makes a circle if radius equals half the width
14
Rectangles
Rectangle

Color Constants
● Always quoted, unlike CSS
● SVG color names:
http://www.december.com/html/spec/colorsvg.html
● Possible values for hexadecimal include:
○ #rgb
○ #rrggbb
○ #aarrggbb - alpha comes first
15
Rectangles

Basic QML Object Structure
● Every QML object has the same basic structure
QMLType {
}
● It begins with the object type
○ Types always begin with a capital letter
● Followed by open and close curly braces
16
Rectangles

QML Object Contents
● Inside the curly braces, there can be properties and/or
nested child objects
Rectangle {
width: 300
color: "gray"
Rectangle {
}
}
● The order of properties does not matter
● The order of child objects determines overlap
○ 1st object painted first
○ 2nd object painted on top of it
17
Rectangles

QML File Structure
● QML files also have a consistent structure
import QtQuick 2.8
Rectangle {
width: 300
color: "gray"
}
● All begin by importing a version of QtQuick
○ Contains definitions of the basic QML objects
● Followed by exactly one QML object
○ All other objects must be nested inside that
outermost root object as children of it
18
Rectangles

Creating a QML File
● In the Projects list, Right click your project name
(QMLclass) and choose Add New…
● Select Qt from the list on the left
● Select QML File (Qt Quick 2) from the list on the right
● Click Choose
● Name the file (call this one GreenSquare)
○ Must begin with a capital letter
● Click Next button, then Finish button on the next page.
● It creates the file, adds it to the project, adds the
import and opens it for editing.
19
Rectangles

Creating a Component File
● Every QML file in the project with a capitalized name
is automatically available as a component.
● Replace the Item and its curly braces with this:
Rectangle {
width: 100
height: width
color: "green"
}
● Save the file.
20
Rectangles

Using a Component
● From the Open Documents list, click QMLclass to go
back to your main file.
● At the end of the file, just before the final closing curly
brace, add this:
GreenSquare {}
● Can Override properties
○ Change it’s width: 300
● Add another GreenSquare with x: 200
21
Rectangles

Image
Images and Text
Use Image item to load pictures
Image {
width: 300
height: 200
source: "images/icon_close.svg"
}
● Path to image file source:
● Size isn’t necessary
● sourceSize.width: width fixes .svg resolution
22

Image
● fillMode can be used to fill the size of a parent
○ Image.PreserveAspectFit
○ Image.PreserveAspectCrop
○ fillMode changes the scale
● Use rotation to rotate image
23
Images and Text

Image
● Supported Formats
○ .png - Best
○ .jpg - No support for transparency
○ .svg - Resolution independent
24
Images and Text

Text
● Use the Text item to display text of any size
Text {
text: "Hi!"
color: "white"
}
● Change font properties
font {
pixelSize: 40
family: "Times New Roman"
bold: true
}
25
Images and Text

Text Alignment
● Like everything else, text defaults to top left of parent
● horizontalAlignment: Text.AlignHCenter
Text.AlignLeft, Text.AlignRight
● verticalAlignment: Text.AlignVCenter
Text.AlignTop, Text.AlignBottom
26
Images and Text

QML by Design Webinar

Recommended

Recommended

More Related Content

More from ICS

More from ICS (20)

Recently uploaded

Recently uploaded (20)

QML by Design Webinar