Download - QML by Design Webinar

© 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


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 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


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

http://www.december.com/html/spec/colorsvg.html

http://www.december.com/html/spec/colorsvg.html


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 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


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


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.AlignVCenterText.AlignTop, Text.AlignBottom

26

Images and Text

Download - QML by Design Webinar

Top Related