qml by design webinar
TRANSCRIPT
© Integrated Computer Solutions, Inc. All Rights Reserved
Webinar: QML by DesignMark Decker, Senior Qt EngineerIntegrated Computer Solutionswww.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
© Integrated Computer Solutions, Inc. All Rights Reserved
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
© Integrated Computer Solutions, Inc. All Rights Reserved
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
© Integrated Computer Solutions, Inc. All Rights Reserved
Qt and QMLQt● 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
© Integrated Computer Solutions, Inc. All Rights Reserved
How Does QML Fit In?
5
QML
C++
Touch Display
Signals Data
Underlying System
Data
© Integrated Computer Solutions, Inc. All Rights Reserved
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
© Integrated Computer Solutions, Inc. All Rights Reserved
● 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
© Integrated Computer Solutions, Inc. All Rights Reserved
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
© Integrated Computer Solutions, Inc. All Rights Reserved
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
© Integrated Computer Solutions, Inc. All Rights Reserved
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"
© Integrated Computer Solutions, Inc. All Rights Reserved
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
© Integrated Computer Solutions, Inc. All Rights Reserved
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
© Integrated Computer Solutions, Inc. All Rights Reserved
● 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
© Integrated Computer Solutions, Inc. All Rights Reserved
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
© Integrated Computer Solutions, Inc. All Rights Reserved
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
© Integrated Computer Solutions, Inc. All Rights Reserved
QML Object Contents● Inside the curly braces, there can be properties and/or
nested child objectsRectangle { 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
© Integrated Computer Solutions, Inc. All Rights Reserved
QML File Structure● QML files also have a consistent structureimport 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
© Integrated Computer Solutions, Inc. All Rights Reserved
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
© Integrated Computer Solutions, Inc. All Rights Reserved
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
© Integrated Computer Solutions, Inc. All Rights Reserved
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
© Integrated Computer Solutions, Inc. All Rights Reserved
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
© Integrated Computer Solutions, Inc. All Rights Reserved
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
© Integrated Computer Solutions, Inc. All Rights Reserved
Image
● Supported Formats○ .png - Best○ .jpg - No support for transparency○ .svg - Resolution independent
24
Images and Text
© Integrated Computer Solutions, Inc. All Rights Reserved
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
© Integrated Computer Solutions, Inc. All Rights Reserved
Text Alignment
● Like everything else, text defaults to top left of parent● horizontalAlignment: Text.AlignHCenter
Text.AlignLeft, Text.AlignRight
● verticalAlignment: Text.AlignVCenterText.AlignTop, Text.AlignBottom
26
Images and Text