Creating Dynamic UIs with Qt Declarative UI

Transcription

1 Creating Dynamic UIs with Qt Declarative UI Alex Luddy 8/25/2010

2 Purpose To inspire your usage of Qt s declarative UI Show how to use it Show how cool it is 1

3 Agenda Why Declarative UI? Examples Things on screen Things moving Communicating with C++ Questions 2

4 Traditional Qt User Interface 3

5 Problem!= Fluid User Interfaces 4

6 Solution Qt Declarative User Interface 5

7 Overview Tools QML User Interface Elements QML C++ Binding Underlying Qt Technology (Graphics View, Qt Script) 6

8 Overview Tools QML User Interface Elements QML C++ Binding Underlying Qt Technology (Graphics View, Qt Script) 7

9 QML Qt Modeling Language Inspired by Javascript Specify user interface declaratively The flow of the application QGraphicsView and QtScript below Supported within Qt Creator 8

10 Example: Remove Component 9

11 Red Rectangle // imports basic elements import Qt 4.6 // a red rectangle Rectangle { id: RedRectangle width: 400 height: 200 color: "red" } 10

12 Elements and Properties Fundamental QML object Start with upper-case letter All elements can have an id Necessary for binding Various element types 11

13 Various Element Types 12

14 Example Reference Documentation 13

15 Power of Elements Traditional QPushButton A Text Element over an Image Element Elements are not restricted 14

16 Hierarchy QML applications have a root element All elements have a parent property QML is fundamentally a hierarchy of objects with properties 15

17 Position x, y, width, height Anchor Positioners Views 16

18 Anchors and Positioners Anchors Position an item by specifying its relationship with other items Fill to anchor completely to an item Positioners Similar to layouts Grid, Column, Row 17

19 Review Elements Hierarchy Bind properties Position 18

20 Mouse Input Use MouseRegion Generally created as child of area to receive input 19

21 Mouse Input 20

22 Script An ECMAScript block can be the value of properties inside QML Enables complex logic at QML level Commonly used to react to signals 21

23 Components An element hierarchy that can be reused Components can declare properties, signals and slots 22

24 Review Elements Hierarchy Bind properties Position Input Components 23

25 States Elements have a set of states All states have a name and a set of property changes Target component and a set of properties/values Can also change parent Elements can explicitly enter a state 24

26 Transitions 25

27 Transitions and Animations Animations apply to particular properties of the component Sequential and parallel animations Can control various animation properties 26

28 Overview Tools QML User Interface Elements QML C++ Binding Underlying Qt Technology (Graphics View, Qt Script) 27

29 Overview Tools QML User Interface Elements QML C++ Binding Underlying Qt Technology (Graphics View, Qt Script) 28

30 Rendering QML from C++ Use QmlView setqml execute URL based Like everything else in QML 29

31 Binding to a C++ Property Can bind to a property of a QObject derived class Instantiate in C++ Use QmlContext rootcontext on QmlView setcontextproperty( nameofpropertyinqml, object) Object can now be accessed as a property in QML 30

32 Binding to a C++ Property Example class MyScreen : public QObject { Q_OBJECT Q_PROPERTY(int brightness READ brightness WRITE setbrightness NOTIFY brightnesschanged); public: MyScreen(QObject* parent = 0); int brightness() const; void setbrightness(int b); signals: void brightnesschanged(); /... 31

33 Binding to a C++ Property Example QmlView *view = new QmlView; view->seturl("myui.qml"); MyScreen* screen = new MyScreen; QmlContext* context = view->rootcontext(); context->setcontextproperty("screen", screen); 32

34 Binding to a C++ Property Example BrightnessDisplay { } value: screen.brightness 33

35 Model View Elements representing views Delegates allow for animation Can set a model that is exposed from C++ 34

36 Make C++ Object Available in QML QObject derived class Use QML_DECLARE_TYPE and QML_DEFINE_TYPE Give it a QML name Possible to instantiate type from QML 35

37 Summary Tools QML User Interface Elements QML C++ Binding Underlying Qt Technology (Graphics View, Qt Script) 36

38 Questions 37