== App Developer Week -- Qt Quick: Elements/Animations/States -- jryannel -- Thu, Apr 14th, 2011 ==
{{{#!irc
[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
[17:05] <c2tarun> jryannel: hello :)
[17:06] <jryannel> Hi all,
[17:06] <jryannel> Before we do, plase download: http://get.qt.nokia.com/training/QtQuickforCppDevelopers/slides/qml-composing-uis.pdf
[17:06] <TheEvilPhoenix> wait a sec, why hasnt Classbot +m'd the place yet?  shouldn't it be doing that?
[17:07] <jryannel> Can I continue?
[17:08] <jryannel> There are also the examples/labs available at: http://get.qt.nokia.com/training/QtQuickforCppDevelopers/addons/addon-qml-composing-uis.zip
[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
=== basso_ is now known as basso
[17:10] <jryannel> We skip the first slides (we covered it roughtly yesterday) and go ahead to slide 21 (Anchors)
[17:10] <jryannel> We learned yesterday we can position elements by x, y and width/height.
[17:11] <jryannel> Often we want to layout elements
[17:11] <jryannel> this is done with anchors
[17:11] <jryannel> A anchors is another contract
[17:12] <jryannel> It says roughly this element shall always be on the left site of the other element
[17:12] <jryannel> anchors.left: other.left
[17:12] <jryannel> So also when you move one element the other will always follow
[17:13] <jryannel> You have top/bottom/left/right anchors
[17:13] <jryannel> and also horizontalCenter/verticalCenter
[17:13] <jryannel> Slide 22:Anchors
[17:13] <jryannel> This is an example how to use anchors
[17:14] <jryannel> remember you can reference other elements by id
[17:14] <jryannel> anchors.centerIn: rectangle1
[17:14] <jryannel> centerIn centers rectangle1 in this element (width and height is not changed)
[17:15] <jryannel> We jump to slide 25: Margins
=== 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
[17:16] <jryannel> An anchors fixes on eelement to another element.
[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.
[17:17] <jryannel> For reference: We use the slides at: http://qt.nokia.com/developer/learning/online/training/materials/qt-essentials-qt-quick-edition
[17:17] <jryannel> Called; Composing User Interfaces
[17:17] <jryannel> We are on slide 25
[17:17] <jryannel> A margin provides some space between the anchoring
[17:17] <jryannel> Slide: 26
[17:18] <jryannel> Here we see a rectangle containing 2 elements (image + text)
[17:18] <jryannel> image and text shall be vertical centered and have some spacing between
[17:19] <jryannel> The image is anchored on the left side of the parent's left side
[17:19] <jryannel> and has on the left side 1/16th of space of the width of the parent
[17:19] <jryannel> and sure the image is vertical centered
[17:20] <jryannel> similar applies to the text. But instead of anchored to the parent it's anchored to the image
[17:20] <jryannel> The anchors.baseline is important for text to anchors according to the textbaseline
[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
[17:21] <jryannel> So besides of positioning elements by x,y we can also anchors them with margins.
[17:22] <jryannel> Often you want to anchor element in a row or column or a grid. For this we have spezialised elements
[17:23] <jryannel> They are called Column, Row, Grid
[17:23] <jryannel> They are helper elements to avoid writing common code
[17:24] <jryannel> See http://doc.qt.nokia.com/4.7-snapshot/qml-positioners.html for more information
[17:25] <jryannel> anchors can be used to produce very powerful ui and also felxible from the screen dimensions
[17:26] <jryannel> Okay. Let's go to the next module. We jump over module user interaction and go direct to states
[17:26] <jryannel> Please download: http://get.qt.nokia.com/training/QtQuickforCppDevelopers/slides/qml-states-transitions.pdf
[17:27] <jryannel> A state describes your ui in different "phases"
[17:27] <jryannel> E.g. in simple terms it defines how properties values shall be in these different phases
[17:28] <jryannel> If you problem downloading: http://qt.nokia.com/developer/learning/online/training/materials/qt-essentials-qt-quick-edition
[17:28] <jryannel> Then choose: States and Transitions
[17:29] <jryannel> So think about a stop and a go light. Both are represented by a rectangle
[17:29] <jryannel> See 6
[17:29] <jryannel> Slide Nr. 6
[17:30] <jryannel> in a "go" state we want one rectangle green in the "stop" state we want the other rectangle red.
[17:30] <jryannel> Slide: 7
[17:31] <jryannel> We describe the states with the states property.
[17:31] <jryannel> Which is an array of State elements
[17:31] <jryannel> a property array is marked with [ ]
[17:32] <jryannel> state go has the name "go" and state "stop" is names stop.
[17:32] <jryannel> Both describe changes to properties to elements declared earlier
[17:32] <jryannel> "stop" state changes the color of stop_light to red
[17:32] <jryannel> and go_light's color to "black"
[17:33] <jryannel> How to switch between the states?
[17:33] <jryannel> use the state property and assign the state name
[17:33] <jryannel> Slide: 8
[17:33] <jryannel> Setting the State
[17:34] <jryannel> each element has a state property and a states property
[17:34] <jryannel> states is the array of states and state contains the name of the current state.
[17:35] <jryannel> onClicked: parent.state == "stop" ? parent.state = "go" : parent.state = "stop"
[17:35] <jryannel> onClicked is a clicked handler from the mousearea.
[17:35] <jryannel> A mousearea is an area which received mouse clicks, presses, releases...
[17:36] <jryannel> we first ask for the current state and if it's "stop" we change it to "go".
[17:36] <jryannel> Qt Quick recognizes the change and updates the ui based on the state
[17:37] <jryannel> very simple
[17:37] <jryannel> We jump to slide: 12
[17:37] <jryannel> Another example, little bit more complicated.
[17:38] <jryannel> Qe have a text in a rectangle
[17:38] <jryannel> Additional we have a image (clear_button) which is clickable through the mousearea.
[17:38] <jryannel> When the image is clicked the text of the text_field is set to ""
[17:39] <jryannel> Slide: 13
[17:39] <jryannel> we define 2 states "with text" and "without text"
[17:40] <jryannel> "with text" shall be active when the text_field is NOT empty
[17:40] <jryannel> the "without text" shall be active when text_field is empty
[17:42] <jryannel> Based on the property change notification which allows the property binding "when" is evaluated everytime the text changes
[17:42] <jryannel> Side note: A text element will only accept input when it's focused.
[17:43] <jryannel> This can be done by clicking in the TextInput or requesting focus with "focus : true"
[17:43] <jryannel> When going from one state to another we have a state transition
[17:44] <jryannel> State A -> (Transition) -> State B
[17:44] <jryannel> Slide: 16 (Transition)
[17:45] <jryannel> The red button changes it's color to black via a transition.
[17:45] <jryannel> This transition in this case shall be a color animation.
[17:45] <jryannel> (Same applies to the black/green button our go button)
[17:46] <jryannel> Slide: 17
[17:46] <jryannel> Remember we have the states "go" and "stop" in an earlier example
[17:47] <jryannel> We add transitions with the transitions [ ] array property
[17:47] <jryannel> Each Transition element describes a transition from one state to another state
[17:47] <jryannel> from, to describe when transition is called
[17:48] <jryannel> Inside we use an animation (more about animations later)
[17:48] <jryannel> so States -> Transitions -> Animations
[17:48] <jryannel> We will see animations can also be used standalone and in other situations.
[17:49] <jryannel> Let's leave this module and go to: QML Animations
[17:49] <jryannel> Please download: http://get.qt.nokia.com/training/QtQuickforCppDevelopers/slides/qml-animations.pdf
[17:49] <jryannel> I hope you all have flatrates :_)
[17:50] <jryannel> An animation generally describes a property change according to a easing curve and duration.
[17:51] <jryannel> So instead for example an elements position shall be changes from x:0 to x:100 it shall not go immediately
[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.
[17:52] <ClassBot> There are 10 minutes remaining in the current session.
[17:52] <jryannel> Slide: 6 in the qml-animations.pdf titled "Number Animations"
[17:53] <jryannel> We have in general NumberAnimation, ColorAnimations, RotationAnimations and PropertyAnimations
[17:54] <jryannel> We use here: NumberAnimation on x { .... }
[17:54] <jryannel> Means it will animate x from 0 to 150 in 1 sec (1000msecs)
[17:55] <jryannel> This will done automatically when the component (qml file) is loaded
[17:55] <jryannel> Slide 8: PropertAnimations
[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.
[17:57] <ClassBot> There are 5 minutes remaining in the current session.
[17:57] <jryannel> If you would give the animation an id (e.g. id: anim ) you could also start it with anim.start()
[17:57] <jryannel> You can find more about Animations and Transitions at: http://doc.qt.nokia.com/4.7-snapshot/qdeclarativeanimation.html
[17:58] <jryannel> I think this it it for now. I will make a 10min break and be back with the next session
[17:59] <jryannel> Thanks for listening :)
}}}