Cleanup and example for positioners

Interim progress on fixing up the positioners.
 - Removes margins and setting and implicit size
 - Purges the word 'layout' from the source files
 - Fixes a bug with the grid positioner, it works now
 - Cleaned up the code somewhat.

Also adds some basic examples which demonstrate that it (mostly) works.
Be warned that practically all the comments are woefully out of date.

1 files changed, 51 insertions, 0 deletions

diff --git a/examples/declarative/layouts/positioners.qml b/examples/declarative/layouts/positioners.qml
new file mode 100644
index 0000000..44f9509
--- /dev/null
+++ b/examples/declarative/layouts/positioners.qml
@@ -0,0 +1,51 @@
+import Qt 4.6
+Rect { width: 420; height: 420; id:page; color:"white"
+    VerticalPositioner { id: layout1; y:0; //width: 100; height:250;
+        move: Transition{ NumberAnimation {properties: "y"; easing: "easeOutBounce" }}
+        add: Transition{ NumberAnimation { properties: "y"; from: 500; duration:500; easing: "easeOutQuad"}}
+        remove: Transition { NumberAnimation { properties:"y"; to: 500; duration:500; easing: "easeInQuad"}}
+        Rect { color: "red"; width: 100; height: 50; border.color: "black"; radius: 15 }
+        Rect { id: blueV1; color: "lightsteelblue"; width: 100; height: 50; border.color: "black"; radius: 15 
+            //opacity: Behavior{ NumberAnimation {}}
+        }
+        Rect { color: "green"; width: 100; height: 50; border.color: "black"; radius: 15 }
+        Rect { id: blueV2; color: "lightsteelblue"; width: 100; height: 50; border.color: "black"; radius: 15 
+            //opacity: Behavior{ NumberAnimation {}}
+        }
+        Rect { color: "orange"; width: 100; height: 50; border.color: "black"; radius: 15 }
+    }
+    HorizontalPositioner { id: layout2; y:300; 
+        move: Transition{ NumberAnimation {properties: "x"; easing: "easeOutBounce" }}
+        add: Transition{ NumberAnimation {  properties: "x"; from: 500; duration:500; easing: "easeOutQuad"}
+                    NumberAnimation {  properties: "opacity"; from: 0;  duration: 500;}}
+        remove: Transition { NumberAnimation { properties: "x"; to: 500; duration:500; easing: "easeInQuad"}
+                    NumberAnimation {  properties: "opacity"; from: 1; duration: 500}}
+        Rect { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { id: blueH1; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { id: blueH2; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 }
+    }
+    Button { text: "Remove"; icon: "del.png"; x: 135; y:90;
+        onClicked: {blueH2.opacity=0; blueH1.opacity=0; blueV1.opacity=0; blueV2.opacity=0; blueG1.opacity=0; blueG2.opacity=0; blueG3.opacity=0;}
+        }
+    Button { text: "Add"; icon: "add.png"; x: 145; y:140;
+        onClicked: {blueH2.opacity=1; blueH1.opacity=1; blueV1.opacity=1; blueV2.opacity=1; blueG1.opacity=1; blueG2.opacity=1; blueG3.opacity=1;}
+        }
+    GridPositioner { x:260; y:0; columns:3
+        remove: Transition { NumberAnimation{ properties: "opacity"; from: 1; to: 0; duration: 500}
+           NumberAnimation{properties: "x,y"; easing: "easeOutBounce"} }
+        move: Transition { NumberAnimation{ properties: "x,y"; easing: "easeOutBounce" }}
+        add: Transition { NumberAnimation{ properties: "opacity"; from: 0; to: 1; duration: 500}
+           NumberAnimation{properties: "x,y"; easing: "easeOutBounce"} }
+        Rect { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { id: blueG1; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { id: blueG2; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { id: blueG3; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 }
+        Rect { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 }
+    }
+}