App Developer Week -- Qt Quick: Elements/Animations/States -- jryannel -- Thu, Apr 14th, 2011
1 [17:05] <dpm> Everyone welcome the first speaker of today. It's Qt's jryannel, who's going to talk about Qt Quick: Elements/Animations/States
2 [17:05] <c2tarun> jryannel: hello :)
3 [17:06] <jryannel> Hi all,
4 [17:06] <jryannel> Before we do, plase download: http://get.qt.nokia.com/training/QtQuickforCppDevelopers/slides/qml-composing-uis.pdf
5 [17:06] <TheEvilPhoenix> wait a sec, why hasnt Classbot +m'd the place yet? shouldn't it be doing that?
6 [17:07] <jryannel> Can I continue?
7 [17:08] <jryannel> There are also the examples/labs available at: http://get.qt.nokia.com/training/QtQuickforCppDevelopers/addons/addon-qml-composing-uis.zip
8 [17:09] <jryannel> This is part of our Qt Quick Essentials Training Material. Available to download from: http://qt.nokia.com/developer/learning/online/training/materials/qt-essentials-qt-quick-edition
9 === basso_ is now known as basso
10 [17:10] <jryannel> We skip the first slides (we covered it roughtly yesterday) and go ahead to slide 21 (Anchors)
11 [17:10] <jryannel> We learned yesterday we can position elements by x, y and width/height.
12 [17:11] <jryannel> Often we want to layout elements
13 [17:11] <jryannel> this is done with anchors
14 [17:11] <jryannel> A anchors is another contract
15 [17:12] <jryannel> It says roughly this element shall always be on the left site of the other element
16 [17:12] <jryannel> anchors.left: other.left
17 [17:12] <jryannel> So also when you move one element the other will always follow
18 [17:13] <jryannel> You have top/bottom/left/right anchors
19 [17:13] <jryannel> and also horizontalCenter/verticalCenter
20 [17:13] <jryannel> Slide 22:Anchors
21 [17:13] <jryannel> This is an example how to use anchors
22 [17:14] <jryannel> remember you can reference other elements by id
23 [17:14] <jryannel> anchors.centerIn: rectangle1
24 [17:14] <jryannel> centerIn centers rectangle1 in this element (width and height is not changed)
25 [17:15] <jryannel> We jump to slide 25: Margins
26 === ChanServ changed the topic of #ubuntu-classroom to: Welcome to the Ubuntu Classroom - https://wiki.ubuntu.com/Classroom || Support in #ubuntu || Upcoming Schedule: http://is.gd/8rtIi || Questions in #ubuntu-classroom-chat || Event: Ubuntu App Developer Week - Current Session: Qt Quick: Elements/Animations/States - Instructors: jryannel
27 [17:16] <jryannel> An anchors fixes on eelement to another element.
28 [17:16] <ClassBot> Logs for this session will be available at http://irclogs.ubuntu.com/2011/04/14/%23ubuntu-classroom.html following the conclusion of the session.
29 [17:17] <jryannel> For reference: We use the slides at: http://qt.nokia.com/developer/learning/online/training/materials/qt-essentials-qt-quick-edition
30 [17:17] <jryannel> Called; Composing User Interfaces
31 [17:17] <jryannel> We are on slide 25
32 [17:17] <jryannel> A margin provides some space between the anchoring
33 [17:17] <jryannel> Slide: 26
34 [17:18] <jryannel> Here we see a rectangle containing 2 elements (image + text)
35 [17:18] <jryannel> image and text shall be vertical centered and have some spacing between
36 [17:19] <jryannel> The image is anchored on the left side of the parent's left side
37 [17:19] <jryannel> and has on the left side 1/16th of space of the width of the parent
38 [17:19] <jryannel> and sure the image is vertical centered
39 [17:20] <jryannel> similar applies to the text. But instead of anchored to the parent it's anchored to the image
40 [17:20] <jryannel> The anchors.baseline is important for text to anchors according to the textbaseline
41 [17:21] <jryannel> Anchors are also described in more detail at: http://doc.qt.nokia.com/4.7-snapshot/qml-anchor-layout.html#anchor-layout
42 [17:21] <jryannel> So besides of positioning elements by x,y we can also anchors them with margins.
43 [17:22] <jryannel> Often you want to anchor element in a row or column or a grid. For this we have spezialised elements
44 [17:23] <jryannel> They are called Column, Row, Grid
45 [17:23] <jryannel> They are helper elements to avoid writing common code
46 [17:24] <jryannel> See http://doc.qt.nokia.com/4.7-snapshot/qml-positioners.html for more information
47 [17:25] <jryannel> anchors can be used to produce very powerful ui and also felxible from the screen dimensions
48 [17:26] <jryannel> Okay. Let's go to the next module. We jump over module user interaction and go direct to states
49 [17:26] <jryannel> Please download: http://get.qt.nokia.com/training/QtQuickforCppDevelopers/slides/qml-states-transitions.pdf
50 [17:27] <jryannel> A state describes your ui in different "phases"
51 [17:27] <jryannel> E.g. in simple terms it defines how properties values shall be in these different phases
52 [17:28] <jryannel> If you problem downloading: http://qt.nokia.com/developer/learning/online/training/materials/qt-essentials-qt-quick-edition
53 [17:28] <jryannel> Then choose: States and Transitions
54 [17:29] <jryannel> So think about a stop and a go light. Both are represented by a rectangle
55 [17:29] <jryannel> See 6
56 [17:29] <jryannel> Slide Nr. 6
57 [17:30] <jryannel> in a "go" state we want one rectangle green in the "stop" state we want the other rectangle red.
58 [17:30] <jryannel> Slide: 7
59 [17:31] <jryannel> We describe the states with the states property.
60 [17:31] <jryannel> Which is an array of State elements
61 [17:31] <jryannel> a property array is marked with [ ]
62 [17:32] <jryannel> state go has the name "go" and state "stop" is names stop.
63 [17:32] <jryannel> Both describe changes to properties to elements declared earlier
64 [17:32] <jryannel> "stop" state changes the color of stop_light to red
65 [17:32] <jryannel> and go_light's color to "black"
66 [17:33] <jryannel> How to switch between the states?
67 [17:33] <jryannel> use the state property and assign the state name
68 [17:33] <jryannel> Slide: 8
69 [17:33] <jryannel> Setting the State
70 [17:34] <jryannel> each element has a state property and a states property
71 [17:34] <jryannel> states is the array of states and state contains the name of the current state.
72 [17:35] <jryannel> onClicked: parent.state == "stop" ? parent.state = "go" : parent.state = "stop"
73 [17:35] <jryannel> onClicked is a clicked handler from the mousearea.
74 [17:35] <jryannel> A mousearea is an area which received mouse clicks, presses, releases...
75 [17:36] <jryannel> we first ask for the current state and if it's "stop" we change it to "go".
76 [17:36] <jryannel> Qt Quick recognizes the change and updates the ui based on the state
77 [17:37] <jryannel> very simple
78 [17:37] <jryannel> We jump to slide: 12
79 [17:37] <jryannel> Another example, little bit more complicated.
80 [17:38] <jryannel> Qe have a text in a rectangle
81 [17:38] <jryannel> Additional we have a image (clear_button) which is clickable through the mousearea.
82 [17:38] <jryannel> When the image is clicked the text of the text_field is set to ""
83 [17:39] <jryannel> Slide: 13
84 [17:39] <jryannel> we define 2 states "with text" and "without text"
85 [17:40] <jryannel> "with text" shall be active when the text_field is NOT empty
86 [17:40] <jryannel> the "without text" shall be active when text_field is empty
87 [17:42] <jryannel> Based on the property change notification which allows the property binding "when" is evaluated everytime the text changes
88 [17:42] <jryannel> Side note: A text element will only accept input when it's focused.
89 [17:43] <jryannel> This can be done by clicking in the TextInput or requesting focus with "focus : true"
90 [17:43] <jryannel> When going from one state to another we have a state transition
91 [17:44] <jryannel> State A -> (Transition) -> State B
92 [17:44] <jryannel> Slide: 16 (Transition)
93 [17:45] <jryannel> The red button changes it's color to black via a transition.
94 [17:45] <jryannel> This transition in this case shall be a color animation.
95 [17:45] <jryannel> (Same applies to the black/green button our go button)
96 [17:46] <jryannel> Slide: 17
97 [17:46] <jryannel> Remember we have the states "go" and "stop" in an earlier example
98 [17:47] <jryannel> We add transitions with the transitions [ ] array property
99 [17:47] <jryannel> Each Transition element describes a transition from one state to another state
100 [17:47] <jryannel> from, to describe when transition is called
101 [17:48] <jryannel> Inside we use an animation (more about animations later)
102 [17:48] <jryannel> so States -> Transitions -> Animations
103 [17:48] <jryannel> We will see animations can also be used standalone and in other situations.
104 [17:49] <jryannel> Let's leave this module and go to: QML Animations
105 [17:49] <jryannel> Please download: http://get.qt.nokia.com/training/QtQuickforCppDevelopers/slides/qml-animations.pdf
106 [17:49] <jryannel> I hope you all have flatrates :_)
107 [17:50] <jryannel> An animation generally describes a property change according to a easing curve and duration.
108 [17:51] <jryannel> So instead for example an elements position shall be changes from x:0 to x:100 it shall not go immediately
109 [17:51] <jryannel> It should go in a defined way from 0 to 100 in maybe 1second and first a little bit faster and then slower.
110 [17:52] <ClassBot> There are 10 minutes remaining in the current session.
111 [17:52] <jryannel> Slide: 6 in the qml-animations.pdf titled "Number Animations"
112 [17:53] <jryannel> We have in general NumberAnimation, ColorAnimations, RotationAnimations and PropertyAnimations
113 [17:54] <jryannel> We use here: NumberAnimation on x { .... }
114 [17:54] <jryannel> Means it will animate x from 0 to 150 in 1 sec (1000msecs)
115 [17:55] <jryannel> This will done automatically when the component (qml file) is loaded
116 [17:55] <jryannel> Slide 8: PropertAnimations
117 [17:56] <jryannel> Here we use an animation as a standalone animation. We need to specify the target and which properties we want to animate. with running: true you specify it shall run when the component is loaded.
118 [17:57] <ClassBot> There are 5 minutes remaining in the current session.
119 [17:57] <jryannel> If you would give the animation an id (e.g. id: anim ) you could also start it with anim.start()
120 [17:57] <jryannel> You can find more about Animations and Transitions at: http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeanimation.html
121 [17:58] <jryannel> I think this it it for now. I will make a 10min break and be back with the next session
122 [17:59] <jryannel> Thanks for listening :)