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

11 files changed, 174 insertions, 21 deletions

diff --git a/examples/declarative/aspectratio/face_fit.qml b/examples/declarative/aspectratio/face_fit.qml
index 35c63ce..3005d1b 100644
--- a/examples/declarative/aspectratio/face_fit.qml
+++ b/examples/declarative/aspectratio/face_fit.qml
@@ -1,7 +1,3 @@
-// The Image primitive does not have any special handling for maintaining
-// aspect ratio. This example shows that you can provide whatever specific
-// behaviour you like.
-//
 // Here, we implement a hybrid of the "scale to fit" and "scale and crop"
 // behaviours which will crop up to 25% from *one* dimension if necessary
 // to fully scale the other. This is a realistic algorithm, for example
diff --git a/examples/declarative/aspectratio/face_fit_animated.qml b/examples/declarative/aspectratio/face_fit_animated.qml
index 366d27b..9036eeb 100644
--- a/examples/declarative/aspectratio/face_fit_animated.qml
+++ b/examples/declarative/aspectratio/face_fit_animated.qml
@@ -1,7 +1,3 @@
-// The Image primitive does not have any special handling for maintaining
-// aspect ratio. This example shows that you can provide whatever specific
-// behaviour you like.
-//
 // Here, we extend the "face_fit" example with animation to show how truly
 // diverse and usage-specific behaviours are made possible by NOT putting a
 // hard-coded aspect ratio feature into the Image primitive.
diff --git a/examples/declarative/aspectratio/scale_and_crop.qml b/examples/declarative/aspectratio/scale_and_crop.qml
index a5409f9..2f35fb5 100644
--- a/examples/declarative/aspectratio/scale_and_crop.qml
+++ b/examples/declarative/aspectratio/scale_and_crop.qml
@@ -1,7 +1,3 @@
-// The Image primitive does not have any special handling for maintaining
-// aspect ratio. This example shows that you can provide whatever specific
-// behaviour you like.
-//
 // Here, we implement "Scale and Crop" behaviour.
 //
 Rect {
diff --git a/examples/declarative/aspectratio/scale_and_sidecrop.qml b/examples/declarative/aspectratio/scale_and_sidecrop.qml
index e076735..4b1eb63 100644
--- a/examples/declarative/aspectratio/scale_and_sidecrop.qml
+++ b/examples/declarative/aspectratio/scale_and_sidecrop.qml
@@ -1,7 +1,3 @@
-// The Image primitive does not have any special handling for maintaining
-// aspect ratio. This example shows that you can provide whatever specific
-// behaviour you like.
-//
 // Here, we implement a variant of "Scale and Crop" behaviour, where we
 // crop the sides if necessary to fully fit vertically, but not the reverse.
 //
diff --git a/examples/declarative/aspectratio/scale_to_fit.qml b/examples/declarative/aspectratio/scale_to_fit.qml
index 61a4082..867eb37 100644
--- a/examples/declarative/aspectratio/scale_to_fit.qml
+++ b/examples/declarative/aspectratio/scale_to_fit.qml
@@ -1,8 +1,5 @@
-// The Image primitive does not have any special handling for maintaining
-// aspect ratio. This example shows that you can provide whatever specific
-// behaviour you like.
-//
-// Here, we implement "Scale to Fit" behaviour.
+// Here, we implement "Scale to Fit" behaviour "manually", rather
+// than using the preserveAspect property.
 //
 Rect {
     // default size: whole image, unscaled
diff --git a/examples/declarative/aspectratio/scale_to_fit_simple.qml b/examples/declarative/aspectratio/scale_to_fit_simple.qml
new file mode 100644
index 0000000..4f89586
--- /dev/null
+++ b/examples/declarative/aspectratio/scale_to_fit_simple.qml
@@ -0,0 +1,17 @@
+// Here, we implement "Scale to Fit" behaviour, using the
+// preserveAspect property.
+//
+Rect {
+    // default size: whole image, unscaled
+    width: Image.width
+    height: Image.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: Image
+        source: "pics/face.png"
+        preserveAspect: true
+        anchors.fill: parent
+    }
+}
diff --git a/examples/declarative/snow/ImageBatch.qml b/examples/declarative/snow/ImageBatch.qml
new file mode 100644
index 0000000..4c65605
--- /dev/null
+++ b/examples/declarative/snow/ImageBatch.qml
@@ -0,0 +1,70 @@
+GridView {
+    id: MyGrid
+    property int offset: 0
+    property var ref
+    property bool isSelected: ref.selectedItemColumn >= offset && ref.selectedItemColumn < offset + 5
+
+    currentIndex: (ref.selectedItemColumn  - offset) + ref.selectedItemRow * 5
+
+    property int imageWidth: ref.imageWidth
+    property int imageHeight: ref.imageHeight
+
+    width: 5 * imageWidth
+    height: 4 * imageHeight
+    cellWidth: imageWidth
+    cellHeight: imageHeight
+
+    states: State {
+        name: "selected"; when: MyGrid.isSelected
+        SetProperties { target: MyGrid; z: 150 }
+    }
+    transitions: Transition { 
+        SequentialAnimation {
+            PauseAnimation { duration: 150 }
+            SetPropertyAction { properties: "z" }
+        }
+    }
+    model: XmlListModel {
+        property string tags : ""
+        source: "http://api.flickr.com/services/feeds/photos_public.gne?"+(tags ? "tags="+tags+"&" : "")+"format=rss2"
+        query: "/rss/channel/item"
+        namespaceDeclarations: "declare namespace media=\"http://search.yahoo.com/mrss/\";"
+
+        XmlRole { name: "url"; query: "media:content/@url/string()" }
+    }
+
+    Item { 
+        id: Root
+        property bool isSelected: GridView.isCurrentItem && MyGrid.isSelected
+        transformOrigin: "Center"
+        width: MyGrid.imageWidth; height: MyGrid.imageHeight;
+
+        Image { id: Image; source: url; preserveAspect: true; smooth: true; anchors.fill: parent;
+                opacity: (status == 0)?1:0; opacity: Behavior { NumberAnimation { properties: "opacity" } } } 
+        Loading { anchors.centeredIn: parent; visible: Image.status }
+
+        states: State {
+            name: "selected"
+            when: Root.isSelected
+            SetProperties { target: Root; scale: 3; z: 100 }
+        }
+        transitions: [
+            Transition {
+                toState: "selected"
+                SequentialAnimation {
+                    PauseAnimation { duration: 150 }
+                    SetPropertyAction { properties: "z" }
+                    NumberAnimation { properties: "scale"; duration: 150; }
+                }
+            },
+            Transition {
+                fromState: "selected"
+                SequentialAnimation {
+                    NumberAnimation { properties: "scale"; duration: 150 }
+                    SetPropertyAction { properties: "z" }
+                }
+            }
+        ]
+    }
+}
+
diff --git a/examples/declarative/snow/Loading.qml b/examples/declarative/snow/Loading.qml
new file mode 100644
index 0000000..0a8a51a
--- /dev/null
+++ b/examples/declarative/snow/Loading.qml
@@ -0,0 +1,6 @@
+Image {
+    id: Loading; source: "pics/loading.png"; transformOrigin: "Center"
+    rotation: NumberAnimation {
+        id: "RotationAnimation"; from: 0; to: 360; running: Loading.visible == true; repeat: true; duration: 900
+    }
+}
diff --git a/examples/declarative/snow/create.js b/examples/declarative/snow/create.js
new file mode 100644
index 0000000..9def7a7
--- /dev/null
+++ b/examples/declarative/snow/create.js
@@ -0,0 +1,12 @@
+var myComponent = null;
+
+function createNewBlock() {
+    if (myComponent == null) 
+        myComponent = createComponent("ImageBatch.qml");
+
+    var obj = myComponent.createObject();
+    obj.parent = MyLayout;
+    obj.offset = maximumColumn + 1;
+    obj.ref = ImagePanel;
+    maximumColumn += 5;
+}
diff --git a/examples/declarative/snow/pics/loading.png b/examples/declarative/snow/pics/loading.png
new file mode 100644
index 0000000..0296cfe
--- /dev/null
+++ b/examples/declarative/snow/pics/loading.png
diff --git a/examples/declarative/snow/snow.qml b/examples/declarative/snow/snow.qml
new file mode 100644
index 0000000..2b413bb
--- /dev/null
+++ b/examples/declarative/snow/snow.qml
@@ -0,0 +1,67 @@
+Rect {
+    id: ImagePanel
+    width: 1024
+    height: 768
+    color: "black"
+
+    property int maximumColumn: 4
+    property int selectedItemRow: 0
+    property int selectedItemColumn: 0
+
+    Script { source: "create.js" }
+
+    onSelectedItemColumnChanged: if (selectedItemColumn == maximumColumn) createNewBlock();
+
+    property int imageWidth: 200
+    property int imageHeight: 200
+
+    property int selectedX: selectedItemColumn * imageWidth
+    property int selectedY: selectedItemRow * imageHeight
+
+    Item {
+        anchors.centeredIn: parent
+        HorizontalLayout {
+            id: MyLayout
+            property real targetX: -(selectedX + imageWidth / 2)
+
+            property real targetDeform: 0
+            property bool slowDeform: true
+
+            property real deform
+            deform: Follow { source: MyLayout.targetDeform; velocity: MyLayout.slowDeform?0.1:2 }
+                
+            onDeformChanged: if(deform == targetDeform) { slowDeform = true; targetDeform = 0; }
+
+            ImageBatch { offset: 0; ref: ImagePanel }
+
+            x: Follow { source: MyLayout.targetX; velocity: 1000 }
+            y: Follow { source: -(selectedY + imageHeight / 2); velocity: 500 }
+        }
+
+        transform: Rotation3D { 
+            axis { startX: 0; startY: 0; endX: 0; endY: 1 }
+            angle: MyLayout.deform * 100
+        }
+    }
+
+    Script {
+        function leftPressed() {
+            if (selectedItemColumn <= 0) return;
+            selectedItemColumn -= 1;
+            MyLayout.slowDeform = false;
+            MyLayout.targetDeform = Math.max(Math.min(MyLayout.deform - 0.1, -0.1), -0.4);
+        }
+        function rightPressed() {
+            selectedItemColumn += 1;
+            MyLayout.slowDeform = false;
+            MyLayout.targetDeform = Math.min(Math.max(MyLayout.deform + 0.1, 0.1), 0.4);
+        }
+    }
+    KeyActions {
+        focus: true
+        leftArrow: "leftPressed()"
+        rightArrow: "rightPressed()"
+        upArrow: "if (selectedItemRow > 0) selectedItemRow = selectedItemRow - 1"
+        downArrow: "if (selectedItemRow < 3) selectedItemRow = selectedItemRow + 1"
+    }
+}