qml by design webinar

Download QML by Design Webinar

Post on 24-Jan-2018

536 views

Category:

Software

3 download

Embed Size (px)

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

    Designers 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 dont use it unless you

    really need it Add a yellow rectangle inside the red one.

    12

    Rectangles

  • Integrated Computer Solutions, Inc. All Rights Reserved

    QML Coordinate System

    13

  • 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

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

  • 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 its 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 isnt 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

  • Integrated Computer Solutions, Inc. All Rights Reserved 27

    QML by DesignSeptember 13 - 15

    Sunnyvale, CA

    https://www.ics.com/learning/training/qml-design-sept