Ubuntu Wiki

   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 :)