Update ImageElement examples
authorAlan Alpert <alan.alpert@nokia.com>
Tue, 28 Feb 2012 03:20:56 +0000 (13:20 +1000)
committerQt by Nokia <qt-info@nokia.com>
Thu, 1 Mar 2012 04:43:07 +0000 (05:43 +0100)
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>
doc/src/examples/examples-groups.qdoc
examples/qtquick/imageelements/animatedsprite.qml
examples/qtquick/imageelements/borderimage.qml
examples/qtquick/imageelements/content/BorderImageSelector.qml [new file with mode: 0644]
examples/qtquick/imageelements/content/MyBorderImage.qml
examples/qtquick/imageelements/image.qml
examples/qtquick/imageelements/imageelements.pro [new file with mode: 0644]
examples/qtquick/imageelements/imageelements.qml
examples/qtquick/imageelements/main.cpp [new file with mode: 0644]
examples/qtquick/imageelements/spritesequence.qml [moved from examples/qtquick/imageelements/spriteimage.qml with 97% similarity]

index a346794..0ecd117 100644 (file)
     This example demonstrates the positioners and some of their animations.
 */
 /*!
     This example demonstrates the positioners and some of their animations.
 */
 /*!
-    \title QML Examples - Image Elements
-    \example declarative/imageelements
-    \brief This is a collection of QML examples
-    \image qml-imageelements-example.png
-
-    This is a collection of small QML examples relating to image elements. Each example is
-    a small QML file, usually containing or emphasizing a particular element or
-    feature. You can run and observe the behavior of each example.
-*/
-/*!
     \title QML Examples - Models and Views
     \example declarative/modelviews
     \brief This is a collection of QML examples
     \title QML Examples - Models and Views
     \example declarative/modelviews
     \brief This is a collection of QML examples
index 3a597bb..337456f 100644 (file)
 import QtQuick 2.0
 
 Item {
 import QtQuick 2.0
 
 Item {
-    width: 400
-    height: 400
+    width: 320
+    height: 480
     Rectangle {
         anchors.fill: parent
         color: "white"
     }
     AnimatedSprite {
         id: sprite
     Rectangle {
         anchors.fill: parent
         color: "white"
     }
     AnimatedSprite {
         id: sprite
-        anchors.fill: parent
+        width: 170
+        height: 170
+        anchors.centerIn: parent
         source: "content/speaker.png"
         frameCount: 60
         frameSync: true
         source: "content/speaker.png"
         frameCount: 60
         frameSync: true
index 7e13249..30120fe 100644 (file)
@@ -46,32 +46,48 @@ Rectangle {
     width: 320
     height: 480
 
     width: 320
     height: 480
 
+    BorderImageSelector {
+        id: selector
+        curIdx: 0
+        maxIdx: 3
+        gridWidth: 240
+        flickable: mainFlickable
+        width: parent.width
+        height: 64
+    }
+
     Flickable {
     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
         contentWidth: 1030
-        contentHeight: 540
+        contentHeight: 420
         Grid {
             anchors.centerIn: parent; spacing: 20
 
             MyBorderImage {
         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 {
                 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 {
                 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 {
                 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
             }
                 source: "content/colors.png"; margin: 30
                 horizontalMode: BorderImage.Round; verticalMode: BorderImage.Round
             }
diff --git a/examples/qtquick/imageelements/content/BorderImageSelector.qml b/examples/qtquick/imageelements/content/BorderImageSelector.qml
new file mode 100644 (file)
index 0000000..f3a534b
--- /dev/null
@@ -0,0 +1,96 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: selector
+    property int curIdx: 0
+    property int maxIdx: 3
+    property int gridWidth: 240
+    property Flickable flickable
+    width: parent.width
+    height: 64
+    function advance(steps) {
+         var nextIdx = curIdx + steps
+         if (nextIdx < 0 || nextIdx > maxIdx)
+            return;
+         flickable.contentX += gridWidth * steps;
+         curIdx += steps;
+    }
+    Image {
+        source: "../../../shared/images/back.png"
+        MouseArea{
+            anchors.fill: parent
+            onClicked: selector.advance(-1)
+        }
+        anchors.left: parent.left
+        anchors.leftMargin: 8
+        anchors.verticalCenter: parent.verticalCenter
+        opacity: selector.curIdx == 0 ? 0.2 : 1.0
+        Behavior on opacity {NumberAnimation{}}
+    }
+    Image {
+        source: "../../../shared/images/back.png"
+        mirror: true
+        MouseArea{
+            anchors.fill: parent
+            onClicked: selector.advance(1)
+        }
+        opacity: selector.curIdx == selector.maxIdx ? 0.2 : 1.0
+        Behavior on opacity {NumberAnimation{}}
+        anchors.right: parent.right
+        anchors.rightMargin: 8
+        anchors.verticalCenter: parent.verticalCenter
+    }
+    Repeater {
+        model: [ "Scale", "Repeat", "Scale/Repeat", "Round" ]
+        delegate: Text {
+            text: model.modelData
+            anchors.verticalCenter: parent.verticalCenter
+
+            x: (index - selector.curIdx) * 80 + 140
+            Behavior on x { NumberAnimation{} }
+
+            opacity: selector.curIdx == index ? 1.0 : 0.0
+            Behavior on opacity { NumberAnimation{} }
+        }
+    }
+}
index 178e370..93880f1 100644 (file)
@@ -53,7 +53,7 @@ Item {
     property int maxHeight
     property int margin
 
     property int maxHeight
     property int margin
 
-    width: 240; height: 240
+    width: 240; height: 200
 
     BorderImage {
         id: image; anchors.centerIn: parent
 
     BorderImage {
         id: image; anchors.centerIn: parent
index 1595589..ccefaf6 100644 (file)
@@ -44,29 +44,23 @@ import "content"
 Rectangle {
     width: 320
     height: 480
 Rectangle {
     width: 320
     height: 480
-    Flickable {
-        anchors.fill: parent
-        contentWidth: 490
-        contentHeight: 285
-
-        Grid {
-            property int cellWidth: (width - (spacing * (columns - 1))) / columns
-            property int cellHeight: (height - (spacing * (rows - 1))) / rows
+    Grid {
+        property int cellWidth: (width - (spacing * (columns - 1))) / columns
+        property int cellHeight: (height - (spacing * (rows - 1))) / rows
 
 
-            anchors.fill: parent
-            anchors.margins: 30
+        anchors.fill: parent
+        anchors.margins: 30
 
 
-            columns: 3
-            rows: 2
-            spacing: 30
+        columns: 2
+        rows: 3
+        spacing: 30
 
 
-            ImageCell { mode: Image.Stretch; caption: "Stretch" }
-            ImageCell { mode: Image.PreserveAspectFit; caption: "PreserveAspectFit" }
-            ImageCell { mode: Image.PreserveAspectCrop; caption: "PreserveAspectCrop" }
+        ImageCell { mode: Image.Stretch; caption: "Stretch" }
+        ImageCell { mode: Image.PreserveAspectFit; caption: "PreserveAspectFit" }
+        ImageCell { mode: Image.PreserveAspectCrop; caption: "PreserveAspectCrop" }
 
 
-            ImageCell { mode: Image.Tile; caption: "Tile" }
-            ImageCell { mode: Image.TileHorizontally; caption: "TileHorizontally" }
-            ImageCell { mode: Image.TileVertically; caption: "TileVertically" }
-        }
+        ImageCell { mode: Image.Tile; caption: "Tile" }
+        ImageCell { mode: Image.TileHorizontally; caption: "TileHorizontally" }
+        ImageCell { mode: Image.TileVertically; caption: "TileVertically" }
     }
 }
     }
 }
diff --git a/examples/qtquick/imageelements/imageelements.pro b/examples/qtquick/imageelements/imageelements.pro
new file mode 100644 (file)
index 0000000..5300cbd
--- /dev/null
@@ -0,0 +1,10 @@
+TEMPLATE = app
+
+QT += quick declarative
+SOURCES += main.cpp
+
+target.path = $$[QT_INSTALL_EXAMPLES]/qtdeclarative/qtquick/imageelements
+qml.files = borderimage.qml content imageelements.qml image.qml shadows.qml simplesprite.qml spriteimage.qml
+qml.path = $$[QT_INSTALL_EXAMPLES]/qtdeclarative/qtquick/imageelements
+INSTALLS += target qml
+
index f4075ec..bb23ef6 100644 (file)
 import QtQuick 2.0
 import "../../shared"
 
 import QtQuick 2.0
 import "../../shared"
 
+/*!
+    \title QML Examples - Image Elements
+    \example declarative/imageelements
+    \brief This is a collection of QML examples
+    \image qml-imageelements-example.png
+
+    This is a collection of small QML examples relating to image elements.
+
+    BorderImage shows off the various scaling modes of the BorderImage item.
+
+    Image shows off the various tiling modes of the Image item.
+
+    Shadows shows how to create a drop shadow for a rectangle using a BorderImage.
+
+    AnimatedSprite shows a simple use for the AnimatedSprite element.
+
+    SpriteSequence demonstrates using the SpriteSequence element to draw an animated and slightly interactive bear.
+*/
+
 Item {
     height: 480
 Item {
     height: 480
-    width: 640
+    width: 320
     LauncherList {
         id: ll
         anchors.fill: parent
     LauncherList {
         id: ll
         anchors.fill: parent
@@ -51,8 +70,8 @@ Item {
             addExample("BorderImage", "An image with scaled borders",  Qt.resolvedUrl("borderimage.qml"));
             addExample("Image", "A showcase of the options available to Image", Qt.resolvedUrl("image.qml"));
             addExample("Shadows", "Rectangles with a drop-shadow effect", Qt.resolvedUrl("shadows.qml"));
             addExample("BorderImage", "An image with scaled borders",  Qt.resolvedUrl("borderimage.qml"));
             addExample("Image", "A showcase of the options available to Image", Qt.resolvedUrl("image.qml"));
             addExample("Shadows", "Rectangles with a drop-shadow effect", Qt.resolvedUrl("shadows.qml"));
-            addExample("Simple Sprite", "A simple sprite-based animation", Qt.resolvedUrl("simplesprite.qml"));
-            addExample("Sprite Image", "A sprite-based animation with complex transitions", Qt.resolvedUrl("spriteimage.qml"));
+            addExample("AnimatedSprite", "A simple sprite-based animation", Qt.resolvedUrl("animatedsprite.qml"));
+            addExample("SpriteSequence", "A sprite-based animation with complex transitions", Qt.resolvedUrl("spritesequence.qml"));
         }
     }
 }
         }
     }
 }
diff --git a/examples/qtquick/imageelements/main.cpp b/examples/qtquick/imageelements/main.cpp
new file mode 100644 (file)
index 0000000..72850f9
--- /dev/null
@@ -0,0 +1,41 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+#include "../../shared/shared.h"
+DECLARATIVE_EXAMPLE_MAIN(imageelements)
@@ -40,8 +40,8 @@
 import QtQuick 2.0
 
 Item {
 import QtQuick 2.0
 
 Item {
-    width: 480
-    height: 1280
+    width: 320
+    height: 480
     MouseArea {
         onClicked: anim.start();
         anchors.fill: parent
     MouseArea {
         onClicked: anim.start();
         anchors.fill: parent
@@ -49,7 +49,7 @@ Item {
     SequentialAnimation {
         id: anim
         ScriptAction { script: image.goalSprite = "falling"; }
     SequentialAnimation {
         id: anim
         ScriptAction { script: image.goalSprite = "falling"; }
-        NumberAnimation { target: image; property: "y"; to: 1480; duration: 12000; }
+        NumberAnimation { target: image; property: "y"; to: 480; duration: 12000; }
         ScriptAction { script: {image.goalSprite = ""; image.jumpTo("still");} }
         PropertyAction { target: image; property: "y"; value: 0 }
     }
         ScriptAction { script: {image.goalSprite = ""; image.jumpTo("still");} }
         PropertyAction { target: image; property: "y"; value: 0 }
     }