Beruflich Dokumente
Kultur Dokumente
• Qt Quick overview
• Qt Quick components
• Qt modules overview
• GUI layouts
Creating a hello world project with QtCreator
QUICK START
3
Installation
• Qt SDK mess
• http://qt.nokia.com/downloads/downloads
• Latest Qt meant for desktop
• http://www.forum.nokia.com/Develop/Qt/
• Meant for mobile devices (but not desktop)
4
Installation
5
Installation
• Install Qt 4.7 from Ubuntu repositories
• Run qtcreator
• ~/NokiaQtSDK/QtCreator/bin/qtcreator
6
Installation
• Select Help / About plugins from menu
7
Installation
• Check Tools / Options that Qt libraries exist
8
Quick start
• Select File / New File or Project
9
Quick start
10
Quick start
11
Quick start
Will be changed to
import QtQuick 1.0
12
Quick start
• Run the program with Ctrl+R
13
Exercise
• Try it out, create and run a QML application
project
14
Overview
QT QUICK
15
What is Qt Quick
• QML – a language for UI design and
development
• C++ integration
Objects
Properties
and their
bindings
17
QML overview
• Contrast with an imperative language
Statements are
evaluated once
18
QML overview
• JavaScript / JSON, not XML
19
Qt Declarative
• Declarative module is a C++ framework for
gluing QML and C++ code together
20
Qt Creator
• Qt Creator integrates C++ and QML
development into single IDE
21
Qt Creator intro
• This is interactive part…
• QML editor
• QML designer
• Project management
• Adding / removing / renaming files
• Session management
22
QML editor
23
QML designer
24
QML project properties
25
Session management
• File -> Sessions -> Session Manager
26
Designer exercise
• Create a new project
27
Overview of what’s in there
QT MODULES
28
Qt modules walkthrough
• Qt documentation integrated to QtCreator
29
Core module
• Frameworks discussed during this course
30
Core module
• Frameworks not discussed in this course
31
GUI module
• ”Traditional” widgets
32
GUI module
• Graphics view
• Graphics items
• Graphics widgets
• Proxy widgets
33
Network module
• Sockets, including secure ones
• QTcpSocket, QSslSocket
• QNetworkAccessManager
34
Multimedia modules
• OpenGL for 3D rendering
35
Scripting modules
• QtDeclarative and QtScript
36
Other modules
• XML
• XmlPatterns
37
Mobile development
• Mobility API’s are not part of standard QT
• Works in Qt Simulator on PC
38
Basic concepts
QML PROGRAMMING
39
QML syntax
• Based on ECMA-262 specification
40
Components
• A QML document (.qml file) describes the
structure of one Component
FunWithQML
extends Rectancle
41
Components
• An instance of a component is created
when the program is run
42
Components
• Internals of component are not
automatically visible to other components
43
Properties
• Properties can be referenced by name
Simple values
Bindings
44
Properties
• The basics of properties:
45
Properties
• Public properties are specified with
property syntax
• time, date
http://doc.qt.nokia.com/4.7/qdeclarativebasictypes.html
46
Alias properties
• Property alias exposes an internal property
to public API of component
47
Properties
• Properties can be grouped or attached
48
Signals
• A component may emit signals, which are
processed in signal handlers
Mouse click
signal handler
49
Signals
• Property changes may be bound to signals
• on<Property>Changed syntax
50
Signals
• Signals can be defined with signal keyword
Custom signal
51
Functions
• A component may export functions that
can be called from other components
52
Visual GUI items
53
QML Item
• Item is a base for all GUI components
54
Basic visual elements
• Rectangle and Image
55
Rectangle
• Rectangle is the basic visual element
• Can be rotated
56
Image
• Image element for standard image formats
• Inherited by AnimatedImage
57
Text
• Text element supports plain and rich text
Text.AlignVCenter
• Text alignment Text.AlignBottom
Text.AlignHCenter
58
TextInput
• TextInput is used for single-line input
59
TextEdit
• TextEdit for multi-line editing
60
Item transformations
• Each Item has two basic transformations
• rotation
• Around z-axis in degrees
61
Item transformations
• Transform objects allow more options
• Rotation in 3-D
• Around arbitrary axis (x, y, z)
• Scale
• Separate scale factors for x and y axis
• Translate
• Moves objects without affecting their x and y position
62
Putting the blocks together
ITEM LAYOUTS
63
Item layouts
• Relative coordinates
• Positioner objects
64
Item coordinates
• Position is defined by x and y
y
x
• Relative to parent item
height
width
• Size is defined by width and height
65
Item coordinates
• z defines how overlapping areas are drawn
66
Item anchors
• Each item has 6 anchor lines (+1 for text)
• Side anchors:
• top, bottom, left, right
• Center anchors:
• verticalCenter, horizontalCenter
67
Item anchors
• Anchors may contains spacing
68
Anchors and coordinates
• Anchoring rules
• Example in
AnchorsCoordinates
69
Positioners
• Four positioner types:
• Grid is two-dimensional
70
Positioners
• Positioners inherit from Item
71
Getting started with QML
PROGRAMMING EXERCISE
72
Day 1 exercise - layouts
Text input and button
• Create a QML application
73
74