Qt Quick – Overview and basic GUI            SERIOUS ABOUT SOFTWARETimo Strömmer, Jan 3, 2011                             ...
Contents • Quick start    •   Environment installation • Qt Quick overview    •   Qt Quick components    •   QML language ...
Creating a hello world project with QtCreatorQUICK START                                                3
Installation •   Qt SDK mess      • http://qt.nokia.com/downloads/downloads            • Latest Qt meant for desktop      ...
Installation               5
Installation •   Install Qt 4.7 from Ubuntu repositories      • sudo apt-get install build-essential libqt4-dev         qt...
Installation •   Select Help / About plugins from menu      • Enable QmlDesigner and re-start qtcreator                   ...
Installation •   Check Tools / Options that Qt libraries exist      • Rebuild debug helper for C++ development            ...
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      • Add three other text entries      • Add an im...
OverviewQT QUICK           15
What is Qt Quick •   QML – a language for UI design and     development •   Qt declarative – Module for integrating QML   ...
QML overview •   JavaScript-based declaractive language      • Expressed as bindings between properties that          are ...
QML overview •   Contrast with an imperative language                             Property bindings are                   ...
QML overview •   JavaScript / JSON, not XML      • unlike MXML (Flash), XUL (Gecko), XAML (.Net)      • But, has support f...
Qt Declarative •   Declarative module is a C++ framework for     gluing QML and C++ code together      • Integrating QML ”...
Qt Creator •   Qt Creator integrates C++ and QML     development into single IDE      • QML designer for visual editing   ...
Qt Creator intro •   This is interactive part…      • QML editor      • QML designer      • Project management           •...
QML editor             23
QML designer               24
QML project properties                         25
Session management •   File -> Sessions -> Session Manager                                           26
Designer exercise •   Create a new project      • Make a similar UI as was done in previous         exercise              ...
Overview of what’s in thereQT MODULES                              28
Qt modules walkthrough •   Qt documentation integrated to QtCreator      • API reference -> Class and Function        Docu...
Core module •   Frameworks discussed during this course      • Qt object model (QObject, QMetaObject)      • Strings (QStr...
Core module •   Frameworks not discussed in this course      • Multithreading (QFuture & related)      • I/O devices (QIOD...
GUI module •   ”Traditional” widgets                             32
GUI module •   Graphics view      • Graphics items      • Graphics widgets      • Proxy widgets •   This course focuses on...
Network module •   Sockets, including secure ones      • QTcpSocket, QSslSocket •   Simple HTTP and FTP API’s      • QNetw...
Multimedia modules •   OpenGL for 3D rendering •   OpenVG for 2D rendering •   Svg for processing vector graphics files • ...
Scripting modules •   QtDeclarative and QtScript      • QtScript -> Basically QML without the         declarative parts   ...
Other modules •   XML      • SAX and DOM parsers •   XmlPatterns      • XPath, XQuery, XSLT, schemas •   WebKit browser en...
Mobile development •   Mobility API’s are not part of standard QT      • GPS, contacts, calendar, messaging, etc.      • L...
Basic conceptsQML PROGRAMMING                  39
QML syntax •   Based on ECMA-262 specification      • Operating environment differs from the usual         web browser    ...
Components•   A QML document (.qml file) describes the    structure of one Component     • Component name is file name    ...
Components•    An instance of a component is created     when the program is run     Creates FlipText and      MouseArea o...
Components•   Internals of component are not    automatically visible to other components•   Component’s API is defined vi...
Properties •   Properties can be referenced by name      • Always starts with lower-case letter •   A property expression ...
Properties •   The basics of properties:      • id is used to reference an object      • list properties are a collection ...
Properties •   Public properties are specified with     property syntax      • Value properties, for example:             ...
Alias properties •   Property alias exposes an internal property     to public API of component                      Not w...
Properties •   Properties can be grouped or attached      • Both are referenced with ’.’ notation      • Grouping and atta...
Signals •   A component may emit signals, which are     processed in signal handlers      • Signal handlers follow onSigna...
Signals •   Property changes may be bound to signals      • on<Property>Changed syntax      • Note the capital case, simil...
Signals •   Signals can be defined with signal keyword        Custom signal        Calling the signal       Custom signal ...
Functions •   A component may export functions that     can be called from other components      • Note: Not declarative w...
Visual GUI itemsQML GUI BASICS                   53
QML Item •   Item is a base for all GUI components •   Basic properties of an GUI item:      • Coordinates: x, y, z, width...
Basic visual elements •   Rectangle and Image      • Basic building blocks      • Image can be loaded from web •   Text, T...
Rectangle •   Rectangle is the basic visual element      • color and gradient      • border and radius •   Color can be a ...
Image•   Image element for standard image formats     • jpg, png, svg…     • File or URL source          • Loads web image...
Text •   Text element supports plain and rich text      • HTML markup support      • Fonts and styles from platform       ...
TextInput •   TextInput is used for single-line input      • Font and styles as in Text      • Text selection supported   ...
TextEdit •   TextEdit for multi-line editing      • Supports both plain and rich text      • Mostly similar as Text and Te...
Item transformations •   Each Item has two basic transformations      • rotation            • Around z-axis in degrees    ...
Item transformations •   Transform objects allow more options      • Rotation in 3-D            • Around arbitrary axis (x...
Putting the blocks togetherITEM LAYOUTS                              63
Item layouts •   Relative coordinates •   Anchors between items •   Positioner objects      • Row, Column, Flow, Grid     ...
Item coordinates •   Position is defined by x and y                                                y                      ...
Item coordinates •   z defines how overlapping areas are drawn •   Example in Coordinates directory                       ...
Item anchors •   Each item has 6 anchor lines (+1 for text)      • Side anchors:            • top, bottom, left, right    ...
Item anchors •   Anchors may contains spacing      • Side anchors have margins           • topMargin, bottomMargin, leftMa...
Anchors and coordinates •   Anchoring rules      •   Can only anchor to parent or          siblings      •   Anchors will ...
Positioners •   Four positioner types:      • Row lays out child items horizontally      • Column lays them vertially     ...
Positioners •   Positioners inherit from Item      • Thus, have for example anchors of their own      • Can be nested insi...
Getting started with QMLPROGRAMMING EXERCISE                           72
Day 1 exercise - layouts                                            Text input and button •   Create a QML application    ...
74
Upcoming SlideShare
Loading in...5
×

QtQuick Day 1

2,222

Published on

Symbio, a leading software foundry, provides software product engineering and R&D co-creation services to the world's technology innovators. With offices in Finland, Sweden, USA and China, Symbio serves such world-leading companies like China Mobile, Google, Nokia, PayPal and ST-Ericsson. www.symbio.com.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,222
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
98
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

QtQuick Day 1

  1. 1. Qt Quick – Overview and basic GUI SERIOUS ABOUT SOFTWARETimo Strömmer, Jan 3, 2011 1
  2. 2. Contents • Quick start • Environment installation • Qt Quick overview • Qt Quick components • QML language overview • Qt modules overview • Programming with QML • Basic concepts and GUI elements • GUI layouts
  3. 3. Creating a hello world project with QtCreatorQUICK START 3
  4. 4. 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) • Only ”preliminary support for Qt 4.7” • Will be merged into one product in the future 4
  5. 5. Installation 5
  6. 6. Installation • Install Qt 4.7 from Ubuntu repositories • sudo apt-get install build-essential libqt4-dev qt4-qmlviewer • Download and install the forum Nokia version of Nokia Qt SDK • Repository version doesn’t have QML designer • Run qtcreator • ~/NokiaQtSDK/QtCreator/bin/qtcreator 6
  7. 7. Installation • Select Help / About plugins from menu • Enable QmlDesigner and re-start qtcreator 7
  8. 8. Installation • Check Tools / Options that Qt libraries exist • Rebuild debug helper for C++ development 8
  9. 9. Quick start • Select File / New File or Project 9
  10. 10. Quick start 10
  11. 11. Quick start 11
  12. 12. Quick start Will be changed to import QtQuick 1.0 12
  13. 13. Quick start • Run the program with Ctrl+R 13
  14. 14. Exercise • Try it out, create and run a QML application project • Add three other text entries • Add an image to the middle 14
  15. 15. OverviewQT QUICK 15
  16. 16. What is Qt Quick • QML – a language for UI design and development • Qt declarative – Module for integrating QML and Qt C++ libraries • Qt Creator tools – Complete development environment • QML design and code • C++ integration • Packaging and deployment 16
  17. 17. QML overview • JavaScript-based declaractive language • Expressed as bindings between properties that are structured into object tree Objects Properties and their bindings 17
  18. 18. QML overview • Contrast with an imperative language Property bindings are statements that get evaluated whenever property changes Statements are evaluated once 18
  19. 19. QML overview • JavaScript / JSON, not XML • unlike MXML (Flash), XUL (Gecko), XAML (.Net) • But, has support for XPath queries, so can easily integrate with XML-based web services 19
  20. 20. Qt Declarative • Declarative module is a C++ framework for gluing QML and C++ code together • Integrating QML ”scripts” into C++ application • Integrating C++ plug-in’s into QML application • Still lacking some basics • First official version with Qt4.7 (2010/09/21) • GUI component project in development • Buttons, dialogs etc. 20
  21. 21. Qt Creator • Qt Creator integrates C++ and QML development into single IDE • QML designer for visual editing • QML and C++ code editors • Same code can be run at desktop or device 21
  22. 22. Qt Creator intro • This is interactive part… • QML editor • QML designer • Project management • Adding / removing / renaming files • Session management 22
  23. 23. QML editor 23
  24. 24. QML designer 24
  25. 25. QML project properties 25
  26. 26. Session management • File -> Sessions -> Session Manager 26
  27. 27. Designer exercise • Create a new project • Make a similar UI as was done in previous exercise 27
  28. 28. Overview of what’s in thereQT MODULES 28
  29. 29. Qt modules walkthrough • Qt documentation integrated to QtCreator • API reference -> Class and Function Documentation -> All Qt Modules 29
  30. 30. Core module • Frameworks discussed during this course • Qt object model (QObject, QMetaObject) • Strings (QString, QByteArray) • Containers (QList, QMap, QHash, QLinkedList) • Data models (QAbstractItemModel & related) 30
  31. 31. Core module • Frameworks not discussed in this course • Multithreading (QFuture & related) • I/O devices (QIODevice, Qfile & related) • State machines (QStateMachine & related) 31
  32. 32. GUI module • ”Traditional” widgets 32
  33. 33. GUI module • Graphics view • Graphics items • Graphics widgets • Proxy widgets • This course focuses on the QML-side, not C++ graphics framework 33
  34. 34. Network module • Sockets, including secure ones • QTcpSocket, QSslSocket • Simple HTTP and FTP API’s • QNetworkAccessManager 34
  35. 35. Multimedia modules • OpenGL for 3D rendering • OpenVG for 2D rendering • Svg for processing vector graphics files • Phonon multimedia framework • Not in mobile devices 35
  36. 36. Scripting modules • QtDeclarative and QtScript • QtScript -> Basically QML without the declarative parts • Different C++ engines • QtDeclarative gets the hype nowadays 36
  37. 37. Other modules • XML • SAX and DOM parsers • XmlPatterns • XPath, XQuery, XSLT, schemas • WebKit browser engine • SQL for accessing databases 37
  38. 38. Mobile development • Mobility API’s are not part of standard QT • GPS, contacts, calendar, messaging, etc. • Latest release 1.1: • http://qt.nokia.com/products/qt-addons/mobility/ • Symbian .sis packages available for download • N900 package can be installed from repository - libqtm-… packages with apt-get install • Works in Qt Simulator on PC • QML integration in progress 38
  39. 39. Basic conceptsQML PROGRAMMING 39
  40. 40. QML syntax • Based on ECMA-262 specification • Operating environment differs from the usual web browser • DOM vs. QtDeclarative • Supports v5 features (notably JSON) • Declarative concepts added on top • Quite a lot can be done without any ”scriptiness” 40
  41. 41. Components• A QML document (.qml file) describes the structure of one Component • Component name is file name • Name follows camel-case conventions • Components have inheritance hierarchy FunWithQMLextends Rectancle 41
  42. 42. Components• An instance of a component is created when the program is run Creates FlipText and MouseArea objects as children of Rectangleid property is used when referencing instances 42
  43. 43. Components• Internals of component are not automatically visible to other components• Component’s API is defined via properties, functions and signals: • Property - expression that evaluates to a value • Function - called to perform something • Signal - callback from the component 43
  44. 44. Properties • Properties can be referenced by name • Always starts with lower-case letter • A property expression that references another property establishes a binding • Whenever the referenced property changes, the bound property changes Simple values Bindings 44
  45. 45. Properties • The basics of properties: • id is used to reference an object • list properties are a collection of elements • default property can be used without a name • The data list in following example 45
  46. 46. Properties • Public properties are specified with property syntax • Value properties, for example: • int, bool, real, string • point, rect, size • time, date http://doc.qt.nokia.com/4.7/qdeclarativebasictypes.html 46
  47. 47. Alias properties • Property alias exposes an internal property to public API of component Not working directly 47
  48. 48. Properties • Properties can be grouped or attached • Both are referenced with ’.’ notation • Grouping and attaching is done on C++ side, not within QML font contains a group of Properties related to the font of the text field All properties of Keys component have been attached to Text and can be used by ’.’ notation 48
  49. 49. Signals • A component may emit signals, which are processed in signal handlers • Signal handlers follow onSignalName syntax Mouse click signal handler 49
  50. 50. Signals • Property changes may be bound to signals • on<Property>Changed syntax • Note the capital case, similarly as with other signal handlers 50
  51. 51. Signals • Signals can be defined with signal keyword Custom signal Calling the signal Custom signal handler 51
  52. 52. Functions • A component may export functions that can be called from other components • Note: Not declarative way of doing things • Destroys property bindings 52
  53. 53. Visual GUI itemsQML GUI BASICS 53
  54. 54. QML Item • Item is a base for all GUI components • Basic properties of an GUI item: • Coordinates: x, y, z, width, height, anchors • Transforms: rotation, scale, translate • Hierarchy: children, parent • Visibility: visible, opacity • state and transitions • Does not draw anything by itself 54
  55. 55. Basic visual elements • Rectangle and Image • Basic building blocks • Image can be loaded from web • Text, TextInput and TextEdit • For non-editable, single-line editable and multiline editable text areas • And that’s about it  • Qt components project is in progress 55
  56. 56. Rectangle • Rectangle is the basic visual element • color and gradient • border and radius • Color can be a name or hex representation • Gradient is always vertical • Can be rotated • Example in Rectangles directory 56
  57. 57. Image• Image element for standard image formats • jpg, png, svg… • File or URL source • Loads web images asynchronously • Image has sourceSize • Scaled to width and height by default • Inherited by AnimatedImage• Example in Images directory 57
  58. 58. Text • Text element supports plain and rich text • HTML markup support • Fonts and styles from platform Text.AlignTop Text.AlignVCenter • Text alignment Text.AlignBottom • verticalAlignment, horizontalAlignment Text.AlignLeft Text.AlignHCenter • Multiline text wrapping supported Text.AlignRight 58
  59. 59. TextInput • TextInput is used for single-line input • Font and styles as in Text • Text selection supported • Integrates with system clipboard • Echo modes for password input • Text input validators • IntValidator, DoubleValidator, RegExpValidator • Example in TextInput directory 59
  60. 60. TextEdit • TextEdit for multi-line editing • Supports both plain and rich text • Mostly similar as Text and TextInput • Note readOnly and selectByMouse flags • Text that can be copied to system clipboard 60
  61. 61. Item transformations • Each Item has two basic transformations • rotation • Around z-axis in degrees • scale Item.TopLeft Item.TopRight Item.Top • smaller < 1.0 < larger Item.Left Item. Center Item.Right • Both relative to transformOrigin (default) • ”Stick through the screen” Item.Bottom Item.BottomLeft Item.BottomRight • Additionally, item has transform list 61
  62. 62. 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 • Combination of any above • With arbitrary origin points 62
  63. 63. Putting the blocks togetherITEM LAYOUTS 63
  64. 64. Item layouts • Relative coordinates • Anchors between items • Positioner objects • Row, Column, Flow, Grid 64
  65. 65. 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
  66. 66. Item coordinates • z defines how overlapping areas are drawn • Example in Coordinates directory 66
  67. 67. Item anchors • Each item has 6 anchor lines (+1 for text) • Side anchors: • top, bottom, left, right • fill special anchor • Center anchors: • verticalCenter, horizontalCenter • Text has baseline anchor 67
  68. 68. Item anchors • Anchors may contains spacing • Side anchors have margins • topMargin, bottomMargin, leftMargin, rightMargin • margins special value • Center anchors have offset • verticalCenterOffset, horizontalCenterOffset • Example in Anchors directory 68
  69. 69. Anchors and coordinates • Anchoring rules • Can only anchor to parent or siblings • Anchors will always overwrite x and y • width or height needed with single anchor • width or height overwritten when both sides anchored • Example in AnchorsCoordinates 69
  70. 70. Positioners • Four positioner types: • Row lays out child items horizontally • Column lays them vertially • Flow is either horizontal or vertical • Row or Column with wrapping • Grid is two-dimensional • Child item doesn’t need to fill the ”slot” 70
  71. 71. Positioners • Positioners inherit from Item • Thus, have for example anchors of their own • Can be nested inside other positioners • Positioners have spacing property • Specifies the distance between elements, quite similarly as margins of anchors • Same spacing for all child item • Example in Positioners directory 71
  72. 72. Getting started with QMLPROGRAMMING EXERCISE 72
  73. 73. Day 1 exercise - layouts Text input and button • Create a QML application • Build following layout • Add some interaction List of items Empty for now • When Submit is pressed, status bar text changes to whatever has been typed into text input • If a color is clicked, status bar text changes to represent that color Status bar • ”red”, ”green” etc. 73
  74. 74. 74
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×