Update border image examples.

7 files changed, 98 insertions, 73 deletions

diff --git a/examples/declarative/border-image/animated.qml b/examples/declarative/border-image/animated.qml
deleted file mode 100644
index c3ff9ef..0000000
--- a/examples/declarative/border-image/animated.qml
+++ /dev/null
@@ -1,54 +0,0 @@
-import Qt 4.7
-import "content"
-
-Rectangle {
-    id: page
-    width: 1030; height: 540
-
-    MyBorderImage {
-        x: 20; y: 20; minWidth: 120; maxWidth: 240
-        minHeight: 120; maxHeight: 240
-        source: "content/colors.png"; margin: 30
-    }
-    MyBorderImage {
-        x: 270; y: 20; minWidth: 120; maxWidth: 240
-        minHeight: 120; maxHeight: 240
-        source: "content/colors.png"; margin: 30
-        horizontalMode: BorderImage.Repeat; verticalMode: BorderImage.Repeat
-    }
-    MyBorderImage {
-        x: 520; y: 20; minWidth: 120; maxWidth: 240
-        minHeight: 120; maxHeight: 240
-        source: "content/colors.png"; margin: 30
-        horizontalMode: BorderImage.Stretch; verticalMode: BorderImage.Repeat
-    }
-    MyBorderImage {
-        x: 770; y: 20; minWidth: 120; maxWidth: 240
-        minHeight: 120; maxHeight: 240
-        source: "content/colors.png"; margin: 30
-        horizontalMode: BorderImage.Round; verticalMode: BorderImage.Round
-    }
-    MyBorderImage {
-        x: 20; y: 280; minWidth: 60; maxWidth: 200
-        minHeight: 40; maxHeight: 200
-        source: "content/bw.png"; margin: 10
-    }
-    MyBorderImage {
-        x: 270; y: 280; minWidth: 60; maxWidth: 200
-        minHeight: 40; maxHeight: 200
-        source: "content/bw.png"; margin: 10
-        horizontalMode: BorderImage.Repeat; verticalMode: BorderImage.Repeat
-    }
-    MyBorderImage {
-        x: 520; y: 280; minWidth: 60; maxWidth: 200
-        minHeight: 40; maxHeight: 200
-        source: "content/bw.png"; margin: 10
-        horizontalMode: BorderImage.Stretch; verticalMode: BorderImage.Repeat
-    }
-    MyBorderImage {
-        x: 770; y: 280; 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/border-image/border-image.qml b/examples/declarative/border-image/border-image.qml
new file mode 100644
index 0000000..c334cea
--- /dev/null
+++ b/examples/declarative/border-image/border-image.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/border-image/borders.qml b/examples/declarative/border-image/borders.qml
deleted file mode 100644
index 3743f7e..0000000
--- a/examples/declarative/border-image/borders.qml
+++ /dev/null
@@ -1,17 +0,0 @@
-import Qt 4.7
-
-Rectangle {
-    id: page
-    width: 520; height: 280
-
-    BorderImage {
-        x: 20; y: 20; width: 230; height: 240
-        smooth: true
-        source: "content/colors-stretch.sci"
-    }
-    BorderImage {
-        x: 270; y: 20; width: 230; height: 240
-        smooth: true
-        source: "content/colors-round.sci"
-    }
-}
diff --git a/examples/declarative/border-image/content/MyBorderImage.qml b/examples/declarative/border-image/content/MyBorderImage.qml
index f65f093..2573a14 100644
--- a/examples/declarative/border-image/content/MyBorderImage.qml
+++ b/examples/declarative/border-image/content/MyBorderImage.qml
@@ -1,6 +1,8 @@
 import Qt 4.7
 
 Item {
+    id: container
+
     property alias horizontalMode: image.horizontalTileMode
     property alias verticalMode: image.verticalTileMode
     property alias source: image.source
@@ -11,11 +13,10 @@ Item {
     property int maxHeight
     property int margin
 
-    id: container
     width: 240; height: 240
 
     BorderImage {
-        id: image; x: container.width / 2 - width / 2; y: container.height / 2 - height / 2
+        id: image; anchors.centerIn: parent
 
         SequentialAnimation on width {
             loops: Animation.Infinite
diff --git a/examples/declarative/border-image/content/ShadowRectangle.qml b/examples/declarative/border-image/content/ShadowRectangle.qml
new file mode 100644
index 0000000..629478b
--- /dev/null
+++ b/examples/declarative/border-image/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/border-image/content/shadow.png b/examples/declarative/border-image/content/shadow.png
new file mode 100644
index 0000000..431af85
--- /dev/null
+++ b/examples/declarative/border-image/content/shadow.png
diff --git a/examples/declarative/border-image/shadows.qml b/examples/declarative/border-image/shadows.qml
new file mode 100644
index 0000000..a08d133
--- /dev/null
+++ b/examples/declarative/border-image/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"
+    }
+}