Update ImageElement examples

Now more consistently formed. Required a UI redesign for border image,
you now view one at a time, with a selector control.

Change-Id: Idf64119b644c1a79779ea0a46412247d6d013cb1
Reviewed-by: Alan Alpert <alan.alpert@nokia.com>
Reviewed-by: Yann Bodson <yann.bodson@nokia.com>

1 files changed, 22 insertions, 6 deletions

diff --git a/examples/qtquick/imageelements/borderimage.qml b/examples/qtquick/imageelements/borderimage.qml
index 7e132494db..30120fe60d 100644
--- a/examples/qtquick/imageelements/borderimage.qml
+++ b/examples/qtquick/imageelements/borderimage.qml
@@ -46,32 +46,48 @@ Rectangle {
     width: 320
     height: 480
 
+    BorderImageSelector {
+        id: selector
+        curIdx: 0
+        maxIdx: 3
+        gridWidth: 240
+        flickable: mainFlickable
+        width: parent.width
+        height: 64
+    }
+
     Flickable {
-        anchors.fill: parent
+        id: mainFlickable
+        width: parent.width
+        anchors.bottom: parent.bottom
+        anchors.top: selector.bottom
+        interactive: false //Animated through selector control
+        contentX: -120
+        Behavior on contentX { NumberAnimation {}}
         contentWidth: 1030
-        contentHeight: 540
+        contentHeight: 420
         Grid {
             anchors.centerIn: parent; spacing: 20
 
             MyBorderImage {
-                minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 240
+                minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200
                 source: "content/colors.png"; margin: 30
             }
 
             MyBorderImage {
-                minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 240
+                minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200
                 source: "content/colors.png"; margin: 30
                 horizontalMode: BorderImage.Repeat; verticalMode: BorderImage.Repeat
             }
 
             MyBorderImage {
-                minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 240
+                minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200
                 source: "content/colors.png"; margin: 30
                 horizontalMode: BorderImage.Stretch; verticalMode: BorderImage.Repeat
             }
 
             MyBorderImage {
-                minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 240
+                minWidth: 120; maxWidth: 240; minHeight: 120; maxHeight: 200
                 source: "content/colors.png"; margin: 30
                 horizontalMode: BorderImage.Round; verticalMode: BorderImage.Round
             }