Introduction to Qt Quick

Qt Quick requirement

• Platform must support OpenGL ES2  
• Needs at least QtCore, QtGui, QtV8 and QtDeclarative module
• Other module can be used to add new features:
  • QtGraphicalEffects: add effects like blur, drop shadow …
  • Qt3D: 3D programming in QML
  • QtMultimedia: audio, video  and camera items

Qt modules

The Qt framework is split into modules:

• Examples: QtCore, QtGui, QtWidgets, QtWebKit, QtMultimedia
• Modules contain libraries, plugins and documentation
• Libraries are linked to your applications
• Libraries group a set of common features (xml, dbus, network…)
• QtCore is mandatory for all Qt applications

What is Qt Quick

A set of technologies including:

• Declarative markup language: QML
• Imperative Language: JavaScript
• Language runtime integrated with Qt
• C++ API for integration with Qt applications
• Qt Creator IDE support for the QML language
• Graphical design tool

Philosophy of Qt Quick

• Intuitive User Interfaces
• Design-Oriented
• Rapid  Prototyping and Production
• Easy Deployment
• Enable designer and developers to work on the same sources

What is QML

• Declarative language for User Interface elements
• Describes the user interface
• What elements look like
• How elements behave
• UI specified as tree of elements with properties

A simple example

import QtQuick 2.0
Rectangle {
    width: 400; height: 400
    color: “lightblue”
}

• Locate the example: rectangle.qml
• Launch the QML runtime:

                       qmlscene rectangle.qml                               

Elements

• Elements are structures in the markup language
  • Represent visual and non-visual parts
• Item is the base type of visual elements
  • not visible itself
  • has a position, dimensions
  • usually used to group visual elements
  • often used as the top-level element
  • Rectangle, Text, TextInput, …
• Non-visual elements
  • states, transitions, …
  • models, paths, …
  • gradients, timers, etc.
• Elements contain properties
  • Can also be extended with custom properties

Properties

Elements are described by properties

• Simple name-value definitions
  • width, height, color, …
  • with default values
  • each has a well-defined type
  • separated by semicolons or line breaks
• Used for
  • identifying elements (id property)
  • customizing their appearance
  • changing their behavior

Property Examples

• Standard properties can be given values:

Text {
    text: "Hello World"
    height: 50
}

• Grouped properties keep related properties together:

Text {
    font.family: "Helvetica"
    font.pixelSize: 24
}

• Identity property gives the element a name:

Text{
    id:label
    text:"HelloWorld"
}

• Attached properties are applied to elements:


TextInput{
    text:"Hello World"
    KeyNavigation.tab: nextInput
 }

• • KeyNavigation.tab is not a standard property of TextInput

• • is a standard property that is attached to elements
• Custom properties can be added to any elements

Rectangle{
    propertyrealmass:100.0
}
 
Circle{
    propertyrealradius:50.0
}

 

Binding Properties

import QtQuick 2.0

Item {
    width: 400; height: 200
    Rectangle {
        x: 100; y: 50
        width: height * 2; height: 100									
        color: "lightblue"
    }
}

•  Properties can contain expressions
  • see above: width is twice the height
• Not just initial assignments
• Expressions are re-evaluated when needed

Identifying Elements

The id property defines an identity for an element

• Lets other elements refer to it
  • for relative alignment and positioning
  • to use its properties
  • to change its properties (e.g., for animation)
  • for re-use of common elements (e.g., gradients, images)
• Used to create relationships between elements

import QtQuick 2.0
Item{
    width: 300; height: 100
    Text {
        id: title
        x: 50; y: 25
        text: "Qt Quick"
        font.family: "Helvetica"
        font.pixelSize: 50
    }
    
    Rectangle {
        x: 50; y: 75; height: 5
        width: title.width
        color: "green"
    }
}

                       

• Text element has the identity – title
• width of Rectangle bound to width of title
• Try using TextInput instead of Text

Methods

• Most features are accessed via properties
• Some actions cannot be exposed as properties
• Elements have methods to perform actions:
  • TextInput has a selectAll() method
  • Timer has start(), stop() and restart() methods
  • Particles has a burst() method
• All methods are public in QML
• Other methods are used to convert values between types:
  • Qt.formatDateTime(dateTime, format)
  • Qt.md5(data)
  • Qt.tint(baseColor, tintColor)

Basic Types

Property values can have different types:

• Numbers (int and real): 400 and 1.5
• Boolean values: true and false
• Strings: “Hello Qt”
• Constants: AlignLeft
• Lists: […]
  • lists with one item can be written as just the item itself
• Scripts:
  • included directly in property definitions
• Other types:
  • colors, dates, times, rects, points, sizes, 3D vectors, …
  • usually created using constructors

Summary

• QML defines user interfaces using elements and properties
  • elements are the structures in QML source code
  • items are visual elements
• Standard elements contain properties and methods
  • properties can be changed from their default values
  • property values can be expressions
  • id properties give identities to elements
• Properties are bound together
  • when a property changes, the properties that reference it are updated
• Some standard elements define methods
• A range of built-in types is provided