populate transition for positioners

Fix positioners to apply a "populate" transition for initially added
items. This is consistent with ListView and GridView and also fixes the
behaviour from QtQuick 1.x where the positioners were instead running
the "move" transition for initially added items.

Change-Id: Ib43f1141ce3e7379df085c178b684f89b8567403
Reviewed-by: Alan Alpert <alan.alpert@nokia.com>

2 files changed, 34 insertions, 14 deletions

diff --git a/examples/quick/positioners/positioners-transitions.qml b/examples/quick/positioners/positioners-transitions.qml
index e573c94343..64d5c52748 100644
--- a/examples/quick/positioners/positioners-transitions.qml
+++ b/examples/quick/positioners/positioners-transitions.qml
@@ -44,6 +44,7 @@ Rectangle {
     id: page
     width: 320; height: 480
     property real effectiveOpacity: 1.0
+
     Timer {
         interval: 2000
         running: true
@@ -52,14 +53,17 @@ Rectangle {
     }
 
     Column {
-        id: layout1
         y: 0
-        move: Transition {
-            NumberAnimation { properties: "y"; easing.type: Easing.OutBounce }
+
+        populate: Transition {
+            NumberAnimation { properties: "x,y"; from: 200; duration: 1500; easing.type: Easing.OutBounce }
         }
         add: Transition {
             NumberAnimation { properties: "y"; easing.type: Easing.OutQuad }
         }
+        move: Transition {
+            NumberAnimation { properties: "y"; easing.type: Easing.OutBounce }
+        }
 
         Rectangle { color: "red"; width: 100; height: 50; border.color: "black"; radius: 15 }
 
@@ -92,14 +96,17 @@ Rectangle {
     }
 
     Row {
-        id: layout2
         y: 320
-        move: Transition {
-            NumberAnimation { properties: "x"; easing.type: Easing.OutBounce }
+
+        populate: Transition {
+            NumberAnimation { properties: "x,y"; from: 200; duration: 1500; easing.type: Easing.OutBounce }
         }
         add: Transition {
             NumberAnimation { properties: "x"; easing.type: Easing.OutQuad }
         }
+        move: Transition {
+            NumberAnimation { properties: "x"; easing.type: Easing.OutBounce }
+        }
 
         Rectangle { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 }
 
@@ -135,13 +142,16 @@ Rectangle {
         x: 120; y: 0
         columns: 3
 
-        move: Transition {
-            NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce }
+        populate: Transition {
+            NumberAnimation { properties: "x,y"; from: 200; duration: 1500; easing.type: Easing.OutBounce }
         }
-
         add: Transition {
             NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce }
         }
+        move: Transition {
+            NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce }
+        }
+
 
         Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 }
 
@@ -188,7 +198,6 @@ Rectangle {
     }
 
     Flow {
-        id: layout4
         x: 120; y: 160; width: 150
 
         //! [move]
@@ -203,6 +212,12 @@ Rectangle {
         }
         //! [add]
 
+        //! [populate]
+        populate: Transition {
+            NumberAnimation { properties: "x,y"; from: 200; duration: 1500; easing.type: Easing.OutBounce }
+        }
+        //! [populate]
+
         Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 }
 
         Rectangle {
diff --git a/examples/quick/positioners/positioners.qml b/examples/quick/positioners/positioners.qml
index 34caea327c..859d6bd6c5 100644
--- a/examples/quick/positioners/positioners.qml
+++ b/examples/quick/positioners/positioners.qml
@@ -50,15 +50,20 @@ import "../../shared" as Examples
     This is a collection of small QML examples relating to positioners. Each example is
     a small QML file emphasizing a particular element or feature.
 
-    Transitions shows animated transistions when showing or hiding items in a positioner.
+    Transitions shows animated transitions when showing or hiding items in a positioner.
     It consists of a scene populated with items in a variety of positioners: Column, Row, Grid and Flow.
     Each positioner has animations described as Transitions.
+
     \snippet examples/quick/positioners/positioners-transitions.qml move
-    The move transition specifies how items inside the positioner will animate when they are displaced by items appearing or disappearing.
+    The move transition specifies how items inside a positioner will animate when they are displaced by the appearance or disappearance of other items.
+
     \snippet examples/quick/positioners/positioners-transitions.qml add
-    The add transition specifies how items will appear when they are added to the positioner.
+    The add transition specifies how items will appear when they are added to a positioner.
+
+    \snippet examples/quick/positioners/positioners-transitions.qml populate
+    The populate transition specifies how items will appear when their parent positioner is first created.
 
-    Attached Properties show using the attached property to determine where in a positioner an item is.
+    Attached Properties shows how the Positioner attached property can be used to determine where an item is within a positioner.
     \snippet examples/quick/positioners/positioners-attachedproperties.qml 0
 */