Merge branch 'kinetic-declarativeui' of git@scm.dev.nokia.troll.no:qt/kinetic into kinetic-declarativeui

6 files changed, 127 insertions, 0 deletions

diff --git a/examples/declarative/border-image/example.qml b/examples/declarative/border-image/example.qml
new file mode 100644
index 0000000..10daf47
--- /dev/null
+++ b/examples/declarative/border-image/example.qml
@@ -0,0 +1,31 @@
+import Qt 4.6
+
+Rect {
+    id: Page
+    color: "white"
+    width: 520; height: 280
+
+    HorizontalPositioner {
+        anchors.centerIn: parent
+        spacing: 50
+//! [0]
+        BorderImage {
+            width: 180; height: 180
+            border.left: 30; border.top: 30
+            border.right: 30; border.bottom: 30
+            horizontalTileMode: "Stretch"
+            verticalTileMode: "Stretch"
+            source: "colors.png"
+        }
+
+        BorderImage {
+            width: 180; height: 180
+            border.left: 30; border.top: 30
+            border.right: 30; border.bottom: 30
+            horizontalTileMode: "Round"
+            verticalTileMode: "Round"
+            source: "colors.png"
+        }
+//! [0]
+    }
+}
diff --git a/examples/declarative/layouts/Button.qml b/examples/declarative/layouts/Button.qml
new file mode 100644
index 0000000..de11dc9
--- /dev/null
+++ b/examples/declarative/layouts/Button.qml
@@ -0,0 +1,20 @@
+import Qt 4.6
+Rect { border.color: "black"; color: "steelblue"; radius: 5; width: pix.width + text.width + 13; height: pix.height + 10; id: page
+    property string text
+    property string icon
+    signal clicked
+    Image { id: pix; x: 5; y:5; source: parent.icon}
+    Text { id: text; text: page.text; color: "white"; x:pix.width+pix.x+3; anchors.verticalCenter: pix.verticalCenter;}
+    MouseRegion{ id:mr; anchors.fill: parent; onClicked: {parent.focus = true; page.clicked()}}
+
+    states:
+        State{ name:"pressed"; when:mr.pressed
+            SetProperties {target:text; x: 5}
+            SetProperties {target:pix; x:text.x+text.width + 3}
+        }
+
+    transitions:
+        Transition{
+            NumberAnimation{ properties:"x,left"; easing:"easeInOutQuad"; duration:200 }
+        }
+}
diff --git a/examples/declarative/layouts/add.png b/examples/declarative/layouts/add.png
new file mode 100644
index 0000000..f29d84b
--- /dev/null
+++ b/examples/declarative/layouts/add.png
diff --git a/examples/declarative/layouts/del.png b/examples/declarative/layouts/del.png
new file mode 100644
index 0000000..1d753a3
--- /dev/null
+++ b/examples/declarative/layouts/del.png
diff --git a/examples/declarative/layouts/layouts.qml b/examples/declarative/layouts/layouts.qml
new file mode 100644
index 0000000..1f6b956
--- /dev/null
+++ b/examples/declarative/layouts/layouts.qml
@@ -0,0 +1,25 @@
+import Qt 4.6
+
+Item { id: resizable
+    width:400; height:400;
+    GraphicsObjectContainer{
+        anchors.fill:parent
+        QGraphicsWidget{
+            geometry:{ "0,0," + parent.width.toString() + "x" + parent.height.toString(); }
+            layout: QGraphicsLinearLayout{   
+                LayoutItem{
+                    minimumSize: "100x100"
+                    maximumSize: "300x300"
+                    preferredSize: "100x100"
+                    Rect { color: "yellow"; anchors.fill: parent }
+                }
+                LayoutItem{
+                    minimumSize: "100x100"
+                    maximumSize: "400x400"
+                    preferredSize: "200x200"
+                    Rect { color: "green"; anchors.fill: parent }
+                }
+            }
+        }
+    }
+}
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 }
+    }
+}