Restructure the examples. They are now organized into various

subdirectories to make it easier to locate examples for certain
features (e.g. animation) and to distinguish between different types
of examples (e.g. very basic examples vs complex demo-like examples).

20 files changed, 364 insertions, 0 deletions

diff --git a/examples/declarative/imageelements/borderimage/borderimage.qml b/examples/declarative/imageelements/borderimage/borderimage.qml
new file mode 100644
index 0000000..c334cea
--- /dev/null
+++ b/examples/declarative/imageelements/borderimage/borderimage.qml
@@ -0,0 +1,57 @@
+import Qt 4.7
+import "content"
+
+Rectangle {
+    id: page
+    width: 1030; height: 540
+
+    Grid {
+        anchors.centerIn: parent; spacing: 20
+
+        MyBorderImage {
+            minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 240
+            source: "content/colors.png"; margin: 30
+        }
+
+        MyBorderImage {
+            minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 240
+            source: "content/colors.png"; margin: 30
+            horizontalMode: BorderImage.Repeat; verticalMode: BorderImage.Repeat
+        }
+
+        MyBorderImage {
+            minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 240
+            source: "content/colors.png"; margin: 30
+            horizontalMode: BorderImage.Stretch; verticalMode: BorderImage.Repeat
+        }
+
+        MyBorderImage {
+            minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 240
+            source: "content/colors.png"; margin: 30
+            horizontalMode: BorderImage.Round; verticalMode: BorderImage.Round
+        }
+
+        MyBorderImage {
+            minWidth: 60; maxWidth: 200; minHeight: 40; maxHeight: 200
+            source: "content/bw.png"; margin: 10
+        }
+
+        MyBorderImage {
+            minWidth: 60; maxWidth: 200; minHeight: 40; maxHeight: 200
+            source: "content/bw.png"; margin: 10
+            horizontalMode: BorderImage.Repeat; verticalMode: BorderImage.Repeat
+        }
+
+        MyBorderImage {
+            minWidth: 60; maxWidth: 200; minHeight: 40; maxHeight: 200
+            source: "content/bw.png"; margin: 10
+            horizontalMode: BorderImage.Stretch; verticalMode: BorderImage.Repeat
+        }
+
+        MyBorderImage {
+            minWidth: 60; maxWidth: 200; minHeight: 40; maxHeight: 200
+            source: "content/bw.png"; margin: 10
+            horizontalMode: BorderImage.Round; verticalMode: BorderImage.Round
+        }
+    }
+}
diff --git a/examples/declarative/imageelements/borderimage/borderimage.qmlproject b/examples/declarative/imageelements/borderimage/borderimage.qmlproject
new file mode 100644
index 0000000..d4909f8
--- /dev/null
+++ b/examples/declarative/imageelements/borderimage/borderimage.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.0
+
+Project {
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+    /* List of plugin directories passed to QML runtime */
+    // importPaths: [ " ../exampleplugin " ]
+}
diff --git a/examples/declarative/imageelements/borderimage/content/MyBorderImage.qml b/examples/declarative/imageelements/borderimage/content/MyBorderImage.qml
new file mode 100644
index 0000000..b47df7b
--- /dev/null
+++ b/examples/declarative/imageelements/borderimage/content/MyBorderImage.qml
@@ -0,0 +1,50 @@
+import Qt 4.7
+
+Item {
+    id: container
+
+    property alias horizontalMode: image.horizontalTileMode
+    property alias verticalMode: image.verticalTileMode
+    property alias source: image.source
+
+    property int minWidth
+    property int minHeight
+    property int maxWidth
+    property int maxHeight
+    property int margin
+
+    width: 240; height: 240
+
+    BorderImage {
+        id: image; anchors.centerIn: parent
+
+        SequentialAnimation on width {
+            loops: Animation.Infinite
+            NumberAnimation {
+                from: container.minWidth; to: container.maxWidth
+                duration: 2000; easing.type: Easing.InOutQuad
+            }
+            NumberAnimation {
+                from: container.maxWidth; to: container.minWidth
+                duration: 2000; easing.type: Easing.InOutQuad
+            }
+        }
+
+        SequentialAnimation on height {
+            loops: Animation.Infinite
+            NumberAnimation {
+                from: container.minHeight; to: container.maxHeight
+                duration: 2000; easing.type: Easing.InOutQuad
+            }
+            NumberAnimation {
+                from: container.maxHeight; to: container.minHeight
+                duration: 2000; easing.type: Easing.InOutQuad
+            }
+        }
+
+        border.top: container.margin
+        border.left: container.margin
+        border.bottom: container.margin
+        border.right: container.margin
+    }
+}
diff --git a/examples/declarative/imageelements/borderimage/content/ShadowRectangle.qml b/examples/declarative/imageelements/borderimage/content/ShadowRectangle.qml
new file mode 100644
index 0000000..629478b
--- /dev/null
+++ b/examples/declarative/imageelements/borderimage/content/ShadowRectangle.qml
@@ -0,0 +1,14 @@
+import Qt 4.7
+
+Item {
+    property alias color : rectangle.color
+
+    BorderImage {
+        anchors.fill: rectangle
+        anchors { leftMargin: -6; topMargin: -6; rightMargin: -8; bottomMargin: -8 }
+        border { left: 10; top: 10; right: 10; bottom: 10 }
+        source: "shadow.png"; smooth: true
+    }
+
+    Rectangle { id: rectangle; anchors.fill: parent }
+}
diff --git a/examples/declarative/imageelements/borderimage/content/bw.png b/examples/declarative/imageelements/borderimage/content/bw.png
new file mode 100644
index 0000000..486eaae
--- /dev/null
+++ b/examples/declarative/imageelements/borderimage/content/bw.png
diff --git a/examples/declarative/imageelements/borderimage/content/colors-round.sci b/examples/declarative/imageelements/borderimage/content/colors-round.sci
new file mode 100644
index 0000000..506f6f5
--- /dev/null
+++ b/examples/declarative/imageelements/borderimage/content/colors-round.sci
@@ -0,0 +1,7 @@
+border.left:30
+border.top:30
+border.right:30
+border.bottom:30
+horizontalTileRule:Round
+verticalTileRule:Round
+source:colors.png
diff --git a/examples/declarative/imageelements/borderimage/content/colors-stretch.sci b/examples/declarative/imageelements/borderimage/content/colors-stretch.sci
new file mode 100644
index 0000000..e4989a7
--- /dev/null
+++ b/examples/declarative/imageelements/borderimage/content/colors-stretch.sci
@@ -0,0 +1,5 @@
+border.left:30
+border.top:30
+border.right:30
+border.bottom:30
+source:colors.png
diff --git a/examples/declarative/imageelements/borderimage/content/colors.png b/examples/declarative/imageelements/borderimage/content/colors.png
new file mode 100644
index 0000000..dfb62f3
--- /dev/null
+++ b/examples/declarative/imageelements/borderimage/content/colors.png
diff --git a/examples/declarative/imageelements/borderimage/content/shadow.png b/examples/declarative/imageelements/borderimage/content/shadow.png
new file mode 100644
index 0000000..431af85
--- /dev/null
+++ b/examples/declarative/imageelements/borderimage/content/shadow.png
diff --git a/examples/declarative/imageelements/borderimage/shadows.qml b/examples/declarative/imageelements/borderimage/shadows.qml
new file mode 100644
index 0000000..a08d133
--- /dev/null
+++ b/examples/declarative/imageelements/borderimage/shadows.qml
@@ -0,0 +1,24 @@
+import Qt 4.7
+import "content"
+
+Rectangle {
+    id: window
+
+    width: 480; height: 320
+    color: "gray"
+
+    ShadowRectangle {
+        anchors.centerIn: parent; width: 250; height: 250
+        color: "lightsteelblue"
+    }
+
+    ShadowRectangle {
+        anchors.centerIn: parent; width: 200; height: 200
+        color: "steelblue"
+    }
+
+    ShadowRectangle {
+        anchors.centerIn: parent; width: 150; height: 150
+        color: "thistle"
+    }
+}
diff --git a/examples/declarative/imageelements/image/face_fit.qml b/examples/declarative/imageelements/image/face_fit.qml
new file mode 100644
index 0000000..52cd4c2
--- /dev/null
+++ b/examples/declarative/imageelements/image/face_fit.qml
@@ -0,0 +1,26 @@
+import Qt 4.7
+
+// 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
+// when the edges of the image contain less vital information than the
+// center - such as a face.
+//
+Rectangle {
+    // default size: whole image, unscaled
+    width: face.width
+    height: face.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: face
+        smooth: true
+        anchors.centerIn: parent
+        source: "pics/face.png"
+        x: (parent.width-width*scale)/2
+        y: (parent.height-height*scale)/2
+        scale: Math.max(Math.min(parent.width/width*1.333,parent.height/height),
+                        Math.min(parent.width/width,parent.height/height*1.333))
+    }
+}
diff --git a/examples/declarative/imageelements/image/face_fit_animated.qml b/examples/declarative/imageelements/image/face_fit_animated.qml
new file mode 100644
index 0000000..63fc9c6
--- /dev/null
+++ b/examples/declarative/imageelements/image/face_fit_animated.qml
@@ -0,0 +1,28 @@
+import Qt 4.7
+
+// 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.
+//
+Rectangle {
+    // default size: whole image, unscaled
+    width: face.width
+    height: face.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: face
+        smooth: true
+        anchors.centerIn: parent
+        source: "pics/face.png"
+        x: (parent.width-width*scale)/2
+        y: (parent.height-height*scale)/2
+        SpringFollow on scale {
+            to: Math.max(Math.min(face.parent.width/face.width*1.333,face.parent.height/face.height),
+                         Math.min(face.parent.width/face.width,face.parent.height/face.height*1.333))
+            spring: 1
+            damping: 0.05
+        }
+    }
+}
diff --git a/examples/declarative/imageelements/image/image.qmlproject b/examples/declarative/imageelements/image/image.qmlproject
new file mode 100644
index 0000000..d4909f8
--- /dev/null
+++ b/examples/declarative/imageelements/image/image.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.0
+
+Project {
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+    /* List of plugin directories passed to QML runtime */
+    // importPaths: [ " ../exampleplugin " ]
+}
diff --git a/examples/declarative/imageelements/image/pics/face.png b/examples/declarative/imageelements/image/pics/face.png
new file mode 100644
index 0000000..3d66d72
--- /dev/null
+++ b/examples/declarative/imageelements/image/pics/face.png
diff --git a/examples/declarative/imageelements/image/scale_and_crop.qml b/examples/declarative/imageelements/image/scale_and_crop.qml
new file mode 100644
index 0000000..a438104
--- /dev/null
+++ b/examples/declarative/imageelements/image/scale_and_crop.qml
@@ -0,0 +1,21 @@
+import Qt 4.7
+
+// Here, we implement "Scale and Crop" behaviour.
+//
+Rectangle {
+    // default size: whole image, unscaled
+    width: face.width
+    height: face.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: face
+        smooth: true
+        anchors.centerIn: parent
+        source: "pics/face.png"
+        x: (parent.width-width*scale)/2
+        y: (parent.height-height*scale)/2
+        scale: Math.max(parent.width/width,parent.height/height)
+    }
+}
diff --git a/examples/declarative/imageelements/image/scale_and_crop_simple.qml b/examples/declarative/imageelements/image/scale_and_crop_simple.qml
new file mode 100644
index 0000000..1160ec5
--- /dev/null
+++ b/examples/declarative/imageelements/image/scale_and_crop_simple.qml
@@ -0,0 +1,20 @@
+import Qt 4.7
+
+// Here, we implement "Scale to Fit" behaviour, using the
+// fillMode property.
+//
+Rectangle {
+    // default size: whole image, unscaled
+    width: face.width
+    height: face.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: face
+        smooth: true
+        source: "pics/face.png"
+        fillMode: Image.PreserveAspectCrop
+        anchors.fill: parent
+    }
+}
diff --git a/examples/declarative/imageelements/image/scale_and_sidecrop.qml b/examples/declarative/imageelements/image/scale_and_sidecrop.qml
new file mode 100644
index 0000000..5593ab8
--- /dev/null
+++ b/examples/declarative/imageelements/image/scale_and_sidecrop.qml
@@ -0,0 +1,22 @@
+import Qt 4.7
+
+// 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.
+//
+Rectangle {
+    // default size: whole image, unscaled
+    width: face.width
+    height: face.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: face
+        smooth: true
+        anchors.centerIn: parent
+        source: "pics/face.png"
+        x: (parent.width-width*scale)/2
+        y: (parent.height-height*scale)/2
+        scale: parent.height/height
+    }
+}
diff --git a/examples/declarative/imageelements/image/scale_to_fit.qml b/examples/declarative/imageelements/image/scale_to_fit.qml
new file mode 100644
index 0000000..724a36e
--- /dev/null
+++ b/examples/declarative/imageelements/image/scale_to_fit.qml
@@ -0,0 +1,22 @@
+import Qt 4.7
+
+// Here, we implement "Scale to Fit" behaviour "manually", rather
+// than using the preserveAspect property.
+//
+Rectangle {
+    // default size: whole image, unscaled
+    width: face.width
+    height: face.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: face
+        smooth: true
+        anchors.centerIn: parent
+        source: "pics/face.png"
+        x: (parent.width-width*scale)/2
+        y: (parent.height-height*scale)/2
+        scale: Math.min(parent.width/width,parent.height/height)
+    }
+}
diff --git a/examples/declarative/imageelements/image/scale_to_fit_simple.qml b/examples/declarative/imageelements/image/scale_to_fit_simple.qml
new file mode 100644
index 0000000..0e960b4
--- /dev/null
+++ b/examples/declarative/imageelements/image/scale_to_fit_simple.qml
@@ -0,0 +1,20 @@
+import Qt 4.7
+
+// Here, we implement "Scale to Fit" behaviour, using the
+// fillMode property.
+//
+Rectangle {
+    // default size: whole image, unscaled
+    width: face.width
+    height: face.height
+    color: "gray"
+    clip: true
+
+    Image {
+        id: face
+        smooth: true
+        source: "pics/face.png"
+        fillMode: Image.PreserveAspectFit
+        anchors.fill: parent
+    }
+}
diff --git a/examples/declarative/imageelements/imageelements.qmlproject b/examples/declarative/imageelements/imageelements.qmlproject
new file mode 100644
index 0000000..d4909f8
--- /dev/null
+++ b/examples/declarative/imageelements/imageelements.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.0
+
+Project {
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+    /* List of plugin directories passed to QML runtime */
+    // importPaths: [ " ../exampleplugin " ]
+}