Start of examples refactor

This is the general reorg of the examples directory structure, plus additional
guidelines.

calculator, animations and accessibility have been updated to the new standards
and tested, as an example.

Task-number: QTBUG-24133
Change-Id: I76c3b86751d3195ba2a5474ff23afb875765e9a4
Reviewed-by: Alan Alpert <alan.alpert@nokia.com>

27 files changed, 1504 insertions, 0 deletions

diff --git a/examples/demos/flickr/content/Button.qml b/examples/demos/flickr/content/Button.qml
new file mode 100644
index 0000000000..d6a8d3e001
--- /dev/null
+++ b/examples/demos/flickr/content/Button.qml
@@ -0,0 +1,79 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** GNU Lesser General Public License Usage
+** This file may be used under the terms of the GNU Lesser General Public
+** License version 2.1 as published by the Free Software Foundation and
+** appearing in the file LICENSE.LGPL included in the packaging of this
+** file. Please review the following information to ensure the GNU Lesser
+** General Public License version 2.1 requirements will be met:
+** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights. These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU General
+** Public License version 3.0 as published by the Free Software Foundation
+** and appearing in the file LICENSE.GPL included in the packaging of this
+** file. Please review the following information to ensure the GNU General
+** Public License version 3.0 requirements will be met:
+** http://www.gnu.org/copyleft/gpl.html.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms and
+** conditions contained in a signed written agreement between you and Nokia.
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: container
+
+    signal clicked
+
+    property string text
+
+    BorderImage {
+        id: buttonImage
+        source: "images/toolbutton.sci"
+        width: container.width; height: container.height
+    }
+    BorderImage {
+        id: pressed
+        opacity: 0
+        source: "images/toolbutton.sci"
+        width: container.width; height: container.height
+    }
+    MouseArea {
+        id: mouseRegion
+        anchors.fill: buttonImage
+        onClicked: { container.clicked(); }
+    }
+    Text {
+        color: "white"
+        anchors.centerIn: buttonImage; font.bold: true; font.pixelSize: 15
+        text: container.text; style: Text.Raised; styleColor: "black"
+    }
+    states: [
+        State {
+            name: "Pressed"
+            when: mouseRegion.pressed == true
+            PropertyChanges { target: pressed; opacity: 1 }
+        }
+    ]
+}
diff --git a/examples/demos/flickr/content/GridDelegate.qml b/examples/demos/flickr/content/GridDelegate.qml
new file mode 100644
index 0000000000..794d768c74
--- /dev/null
+++ b/examples/demos/flickr/content/GridDelegate.qml
@@ -0,0 +1,111 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** GNU Lesser General Public License Usage
+** This file may be used under the terms of the GNU Lesser General Public
+** License version 2.1 as published by the Free Software Foundation and
+** appearing in the file LICENSE.LGPL included in the packaging of this
+** file. Please review the following information to ensure the GNU Lesser
+** General Public License version 2.1 requirements will be met:
+** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights. These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU General
+** Public License version 3.0 as published by the Free Software Foundation
+** and appearing in the file LICENSE.GPL included in the packaging of this
+** file. Please review the following information to ensure the GNU General
+** Public License version 3.0 requirements will be met:
+** http://www.gnu.org/copyleft/gpl.html.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms and
+** conditions contained in a signed written agreement between you and Nokia.
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: wrapper; width: GridView.view.cellWidth; height: GridView.view.cellHeight
+
+    function photoClicked() {
+        imageDetails.photoTitle = title;
+        imageDetails.photoTags = tags;
+        imageDetails.photoWidth = photoWidth;
+        imageDetails.photoHeight = photoHeight;
+        imageDetails.photoType = photoType;
+        imageDetails.photoAuthor = photoAuthor;
+        imageDetails.photoDate = photoDate;
+        imageDetails.photoUrl = url;
+        imageDetails.rating = 0;
+        scaleMe.state = "Details";
+    }
+
+    Item {
+        anchors.centerIn: parent
+        scale: 0.0
+        Behavior on scale { NumberAnimation { easing.type: Easing.InOutQuad} }
+        id: scaleMe
+
+        Item {
+            width: 77; height: 77; anchors.centerIn: parent
+            Rectangle {
+                id: whiteRect; width: 77; height: 77; color: "#dddddd"; smooth: true
+                Image { id: thumb; source: imagePath; x: 1; y: 1; smooth: true }
+                Image { source: "images/gloss.png" }
+            }
+        }
+
+        Connections {
+            target: toolBar
+            onButton2Clicked: if (scaleMe.state == 'Details' ) scaleMe.state = 'Show'
+        }
+
+        states: [
+            State {
+                name: "Show"; when: thumb.status == Image.Ready
+                PropertyChanges { target: scaleMe; scale: 1 }
+            },
+            State {
+                name: "Details"
+                PropertyChanges { target: scaleMe; scale: 1 }
+                ParentChange { target: whiteRect; x: 10; y: 20; parent: imageDetails.frontContainer }
+                PropertyChanges { target: background; state: "DetailedView" }
+            }
+        ]
+        transitions: [
+            Transition {
+                from: "Show"; to: "Details"
+                ParentAnimation {
+                    via: foreground
+                    NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.InOutQuad }
+                }
+            },
+            Transition {
+                from: "Details"; to: "Show"
+                ParentAnimation {
+                    via: foreground
+                    NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.InOutQuad }
+                }
+            }
+        ]
+    }
+    MouseArea { anchors.fill: wrapper; onClicked: photoClicked() }
+}
+
diff --git a/examples/demos/flickr/content/ImageDetails.qml b/examples/demos/flickr/content/ImageDetails.qml
new file mode 100644
index 0000000000..83f2537d65
--- /dev/null
+++ b/examples/demos/flickr/content/ImageDetails.qml
@@ -0,0 +1,323 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** GNU Lesser General Public License Usage
+** This file may be used under the terms of the GNU Lesser General Public
+** License version 2.1 as published by the Free Software Foundation and
+** appearing in the file LICENSE.LGPL included in the packaging of this
+** file. Please review the following information to ensure the GNU Lesser
+** General Public License version 2.1 requirements will be met:
+** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights. These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU General
+** Public License version 3.0 as published by the Free Software Foundation
+** and appearing in the file LICENSE.GPL included in the packaging of this
+** file. Please review the following information to ensure the GNU General
+** Public License version 3.0 requirements will be met:
+** http://www.gnu.org/copyleft/gpl.html.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms and
+** conditions contained in a signed written agreement between you and Nokia.
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick.Particles 2.0
+
+Flipable {
+    id: container
+
+    property alias frontContainer: containerFront
+    property string photoTitle: ""
+    property string photoTags: ""
+    property int photoWidth
+    property int photoHeight
+    property string photoType
+    property string photoAuthor
+    property string photoDate
+    property string photoUrl
+    property int rating: 2
+    property variant prevScale: 1.0
+
+    property int flipDuration: 1600
+
+    signal closed
+
+    transform: Rotation {
+        id: itemRotation
+        origin.x: container.width / 2;
+        axis.y: 1; axis.z: 0
+    }
+
+    front: Item {
+        id: containerFront; anchors.fill: container
+
+        Rectangle {
+            anchors.fill: parent
+            color: "black"; opacity: 0.4
+        }
+
+        Column {
+            spacing: 10
+            anchors {
+                left: parent.left; leftMargin: 10
+                right: parent.right; rightMargin: 10
+                top: parent.top; topMargin: 120
+            }
+            Text { font.bold: true; color: "white"; elide: Text.ElideRight; text: container.photoTitle; width: parent.width }
+            Text { color: "white"; elide: Text.ElideRight; text: "Size: " + container.photoWidth + 'x' + container.photoHeight; width: parent.width }
+            Text { color: "white"; elide: Text.ElideRight; text: "Type: " + container.photoType; width: parent.width }
+            Text { color: "white"; elide: Text.ElideRight; text: "Author: " + container.photoAuthor; width: parent.width }
+            Text { color: "white"; elide: Text.ElideRight; text: "Published: " + container.photoDate; width: parent.width }
+            Text { color: "white"; elide: Text.ElideRight; text: container.photoTags == "" ? "" : "Tags: "; width: parent.width }
+            Text { color: "white"; elide: Text.ElideRight; text: container.photoTags; width: parent.width }
+        }
+    }
+
+    back: Item {
+        anchors.fill: container
+
+        Rectangle { anchors.fill: parent; color: "black"; opacity: 0.4 }
+
+        Progress {
+            anchors.centerIn: parent; width: 200; height: 22
+            progress: bigImage.progress; visible: bigImage.status != Image.Ready
+        }
+
+        Flickable {
+            id: flickable; anchors.fill: parent; clip: true
+            contentWidth: imageContainer.width; contentHeight: imageContainer.height
+
+            function updateMinimumScale() {
+                if (bigImage.status == Image.Ready && bigImage.width != 0) {
+                    slider.minimum = Math.min(flickable.width / bigImage.width, flickable.height / bigImage.height);
+                    if (bigImage.width * slider.value > flickable.width) {
+                        var xoff = (flickable.width/2 + flickable.contentX) * slider.value / prevScale;
+                        flickable.contentX = xoff - flickable.width/2;
+                    }
+                    if (bigImage.height * slider.value > flickable.height) {
+                        var yoff = (flickable.height/2 + flickable.contentY) * slider.value / prevScale;
+                        flickable.contentY = yoff - flickable.height/2;
+                    }
+                    prevScale = slider.value;
+                }
+            }
+
+            onWidthChanged: updateMinimumScale()
+            onHeightChanged: updateMinimumScale()
+
+            Item {
+                id: imageContainer
+                width: Math.max(bigImage.width * bigImage.scale, flickable.width);
+                height: Math.max(bigImage.height * bigImage.scale, flickable.height);
+                Image {
+                    id: bigImage; source: container.photoUrl; scale: slider.value
+                    anchors.centerIn: parent; smooth: !flickable.movingVertically
+                    onStatusChanged : {
+                        // Default scale shows the entire image.
+                        if (bigImage.status == Image.Ready && bigImage.width != 0) {
+                            slider.minimum = Math.min(flickable.width / bigImage.width, flickable.height / bigImage.height);
+                            prevScale = Math.min(slider.minimum, 1);
+                            slider.value = prevScale;
+                        }
+                        if (inBackState && bigImage.status == Image.Ready)
+                            effectBox.imageInAnim();
+                    }
+                    property bool inBackState: false
+                    onInBackStateChanged:{
+                        if(inBackState && bigImage.status == Image.Ready)
+                            effectBox.imageInAnim();
+                        else if (!inBackState && bigImage.status == Image.Ready)
+                            effectBox.imageOutAnim();
+                    }
+                }
+                ShaderEffectSource{
+                    id: pictureSource
+                    sourceItem: bigImage 
+                    smooth: true
+                    //Workaround: Doesn't work below lines
+                    width: bigImage.width
+                    height: bigImage.width
+                    visible: false
+                }
+                Turbulence{//only fill visible rect
+                    id: turbulence
+                    system: imageSystem
+                    anchors.fill: parent 
+                    strength: 240
+                    enabled: false
+                }
+
+                Item{
+                    id: effectBox
+                    width: bigImage.width * bigImage.scale
+                    height: bigImage.height * bigImage.scale
+                    anchors.centerIn: parent
+                    function imageInAnim(){
+                        bigImage.visible = false;
+                        noiseIn.visible = true;
+                        endEffectTimer.start();
+                    }
+                    function imageOutAnim(){
+                        bigImage.visible = false;
+                        noiseIn.visible = false;
+                        turbulence.enabled = true;
+                        endEffectTimer.start();
+                        pixelEmitter.burst(2048);
+                    }
+                    Timer{
+                        id: endEffectTimer
+                        interval: flipDuration
+                        repeat: false
+                        running: false
+                        onTriggered:{
+                            turbulence.enabled = false;
+                            noiseIn.visible = false;
+                            bigImage.visible = true;
+                        }
+                    }
+                    ShaderEffect{
+                        id: noiseIn
+                        anchors.fill: parent
+                        property real t: 0
+                        visible: false
+                        onVisibleChanged: tAnim.start()
+                        NumberAnimation{
+                            id: tAnim
+                            target: noiseIn
+                            property: "t"
+                            from: 0.0 
+                            to: 1.0
+                            duration: flipDuration
+                        }
+                        property variant source: pictureSource
+                        property variant noise: ShaderEffectSource{
+                            sourceItem:Image{
+                                source: "images/noise.png"
+                            }
+                            hideSource: true
+                            smooth: false
+                        }
+                        fragmentShader:"
+                            uniform sampler2D noise;
+                            uniform sampler2D source;
+                            uniform highp float t;
+                            uniform lowp float qt_Opacity;
+                            varying highp vec2 qt_TexCoord0;
+                            void main(){
+                                //Want to use noise2, but it always returns (0,0)?
+                                if(texture2D(noise, qt_TexCoord0).w <= t)
+                                    gl_FragColor = texture2D(source, qt_TexCoord0) * qt_Opacity;
+                                else
+                                    gl_FragColor = vec4(0.,0.,0.,0.);
+                            }
+                        "
+                    }
+                    ParticleSystem{
+                        id: imageSystem
+                    }
+                    Emitter{
+                        id: pixelEmitter
+                        system: imageSystem
+                        //anchors.fill: parent
+                        width: Math.min(bigImage.width * bigImage.scale, flickable.width);
+                        height: Math.min(bigImage.height * bigImage.scale, flickable.height);
+                        anchors.centerIn: parent
+                        size: 4
+                        lifeSpan: flipDuration
+                        emitRate: 2048
+                        enabled: false
+                    }
+                    CustomParticle{
+                        id: blowOut
+                        system: imageSystem
+                        property real maxWidth: effectBox.width
+                        property real maxHeight: effectBox.height
+                        vertexShader:"
+                            uniform highp float maxWidth;
+                            uniform highp float maxHeight;
+
+                            varying highp vec2 fTex2;
+
+                            void main() {
+                                defaultMain();
+                                fTex2 = vec2(qt_ParticlePos.x / maxWidth, qt_ParticlePos.y / maxHeight);
+                            }
+                        "
+                        property variant pictureTexture: pictureSource
+                        fragmentShader: "
+                            uniform lowp float qt_Opacity;
+                            uniform sampler2D pictureTexture;
+                            varying highp vec2 fTex2;
+                            void main() {
+                                gl_FragColor = texture2D(pictureTexture, fTex2) * qt_Opacity;
+                        }"
+                    }
+
+
+
+                }
+            }
+        }
+
+        Text {
+            text: "Image Unavailable"
+            visible: bigImage.status == Image.Error
+            anchors.centerIn: parent; color: "white"; font.bold: true
+        }
+
+        Slider {
+            id: slider; visible: { bigImage.status == Image.Ready && maximum > minimum }
+            anchors {
+                bottom: parent.bottom; bottomMargin: 65
+                left: parent.left; leftMargin: 25
+                right: parent.right; rightMargin: 25
+            }
+            onValueChanged: {
+                if (bigImage.width * value > flickable.width) {
+                    var xoff = (flickable.width/2 + flickable.contentX) * value / prevScale;
+                    flickable.contentX = xoff - flickable.width/2;
+                }
+                if (bigImage.height * value > flickable.height) {
+                    var yoff = (flickable.height/2 + flickable.contentY) * value / prevScale;
+                    flickable.contentY = yoff - flickable.height/2;
+                }
+                prevScale = value;
+            }
+        }
+    }
+
+    states: State {
+        name: "Back"
+        PropertyChanges { target: itemRotation; angle: 180 }
+        PropertyChanges { target: toolBar; button2Visible: false }
+        PropertyChanges { target: toolBar; button1Label: "Back" }
+        PropertyChanges { target: bigImage; inBackState: true }
+    }
+
+    transitions: Transition {
+        SequentialAnimation {
+            PropertyAction { target: bigImage; property: "smooth"; value: false }
+            NumberAnimation { easing.type: Easing.InOutQuad; properties: "angle"; duration: flipDuration }
+            PropertyAction { target: bigImage; property: "smooth"; value: !flickable.movingVertically }
+        }
+    }
+}
diff --git a/examples/demos/flickr/content/ListDelegate.qml b/examples/demos/flickr/content/ListDelegate.qml
new file mode 100644
index 0000000000..9c239151f1
--- /dev/null
+++ b/examples/demos/flickr/content/ListDelegate.qml
@@ -0,0 +1,64 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** GNU Lesser General Public License Usage
+** This file may be used under the terms of the GNU Lesser General Public
+** License version 2.1 as published by the Free Software Foundation and
+** appearing in the file LICENSE.LGPL included in the packaging of this
+** file. Please review the following information to ensure the GNU Lesser
+** General Public License version 2.1 requirements will be met:
+** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights. These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU General
+** Public License version 3.0 as published by the Free Software Foundation
+** and appearing in the file LICENSE.GPL included in the packaging of this
+** file. Please review the following information to ensure the GNU General
+** Public License version 3.0 requirements will be met:
+** http://www.gnu.org/copyleft/gpl.html.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms and
+** conditions contained in a signed written agreement between you and Nokia.
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Component {
+    Item {
+        id: wrapper; width: wrapper.ListView.view.width; height: 86
+        Item {
+            id: moveMe
+            Rectangle { color: "black"; opacity: index % 2 ? 0.2 : 0.4; height: 84; width: wrapper.width; y: 1 }
+            Rectangle {
+                x: 6; y: 4; width: 77; height: 77; color: "white"; smooth: true
+
+                Image { source: imagePath; x: 1; y: 1 }
+                Image { source: "images/gloss.png" }
+            }
+            Column {
+                x: 92; width: wrapper.ListView.view.width - 95; y: 15; spacing: 2
+                Text { text: title; color: "white"; width: parent.width; font.pixelSize: 14; font.bold: true; elide: Text.ElideRight; style: Text.Raised; styleColor: "black" }
+                Text { text: photoAuthor; width: parent.width; font.pixelSize: 14; elide: Text.ElideLeft; color: "#cccccc"; style: Text.Raised; styleColor: "black" }
+                Text { text: photoDate; width: parent.width; font.pixelSize: 14; elide: Text.ElideRight; color: "#cccccc"; style: Text.Raised; styleColor: "black" }
+            }
+        }
+    }
+}
diff --git a/examples/demos/flickr/content/Progress.qml b/examples/demos/flickr/content/Progress.qml
new file mode 100644
index 0000000000..81f1e79ed6
--- /dev/null
+++ b/examples/demos/flickr/content/Progress.qml
@@ -0,0 +1,88 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** GNU Lesser General Public License Usage
+** This file may be used under the terms of the GNU Lesser General Public
+** License version 2.1 as published by the Free Software Foundation and
+** appearing in the file LICENSE.LGPL included in the packaging of this
+** file. Please review the following information to ensure the GNU Lesser
+** General Public License version 2.1 requirements will be met:
+** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights. These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU General
+** Public License version 3.0 as published by the Free Software Foundation
+** and appearing in the file LICENSE.GPL included in the packaging of this
+** file. Please review the following information to ensure the GNU General
+** Public License version 3.0 requirements will be met:
+** http://www.gnu.org/copyleft/gpl.html.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms and
+** conditions contained in a signed written agreement between you and Nokia.
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick.Particles 2.0
+
+Item{
+    id: container
+    property variant progress: 0
+
+    Rectangle {
+        anchors.fill: parent; smooth: true
+        border.color: "white"; border.width: 0; radius: height/2 - 2
+        gradient: Gradient {
+            GradientStop { position: 0; color: "#66343434" }
+            GradientStop { position: 1.0; color: "#66000000" }
+        }
+    }
+
+    ParticleSystem{
+        running: container.visible
+        id: barSys
+    }
+    ImageParticle{
+        color: "lightsteelblue"
+        alpha: 0.1
+        colorVariation: 0.05
+        source: "images/particle.png"
+        system: barSys
+    }
+    Emitter{
+        y: 2; height: parent.height-4;
+        x: 2; width: Math.max(parent.width * progress - 4, 0);
+        speed: AngleDirection{ angleVariation: 180; magnitudeVariation: 12 }
+        system: barSys
+        emitRate: width;
+        lifeSpan: 1000
+        size: 20
+        sizeVariation: 4
+        endSize: 12
+        maximumEmitted: parent.width;
+    }
+
+    Text {
+        text: Math.round(progress * 100) + "%"
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+        color: Qt.rgba(1.0, 1.0 - progress, 1.0 - progress,0.9); font.bold: true; font.pixelSize: 15
+    }
+}
diff --git a/examples/demos/flickr/content/RssModel.qml b/examples/demos/flickr/content/RssModel.qml
new file mode 100644
index 0000000000..f28a23d502
--- /dev/null
+++ b/examples/demos/flickr/content/RssModel.qml
@@ -0,0 +1,64 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** GNU Lesser General Public License Usage
+** This file may be used under the terms of the GNU Lesser General Public
+** License version 2.1 as published by the Free Software Foundation and
+** appearing in the file LICENSE.LGPL included in the packaging of this
+** file. Please review the following information to ensure the GNU Lesser
+** General Public License version 2.1 requirements will be met:
+** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights. These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU General
+** Public License version 3.0 as published by the Free Software Foundation
+** and appearing in the file LICENSE.GPL included in the packaging of this
+** file. Please review the following information to ensure the GNU General
+** Public License version 3.0 requirements will be met:
+** http://www.gnu.org/copyleft/gpl.html.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms and
+** conditions contained in a signed written agreement between you and Nokia.
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick.XmlListModel 2.0
+
+XmlListModel {
+    property string tags : ""
+
+    function encodeTags(x) { return encodeURIComponent(x.replace(' ',',')); }
+
+    source: "http://api.flickr.com/services/feeds/photos_public.gne?"+(tags ? "tags="+encodeTags(tags)+"&" : "")+"format=rss2"
+    query: "/rss/channel/item"
+    namespaceDeclarations: "declare namespace media=\"http://search.yahoo.com/mrss/\";"
+
+    XmlRole { name: "title"; query: "title/string()" }
+    XmlRole { name: "imagePath"; query: "media:thumbnail/@url/string()" }
+    XmlRole { name: "url"; query: "media:content/@url/string()" }
+    XmlRole { name: "description"; query: "description/string()" }
+    XmlRole { name: "tags"; query: "media:category/string()" }
+    XmlRole { name: "photoWidth"; query: "media:content/@width/string()" }
+    XmlRole { name: "photoHeight"; query: "media:content/@height/string()" }
+    XmlRole { name: "photoType"; query: "media:content/@type/string()" }
+    XmlRole { name: "photoAuthor"; query: "author/string()" }
+    XmlRole { name: "photoDate"; query: "pubDate/string()" }
+}
diff --git a/examples/demos/flickr/content/ScrollBar.qml b/examples/demos/flickr/content/ScrollBar.qml
new file mode 100644
index 0000000000..388e43dc2d
--- /dev/null
+++ b/examples/demos/flickr/content/ScrollBar.qml
@@ -0,0 +1,81 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** GNU Lesser General Public License Usage
+** This file may be used under the terms of the GNU Lesser General Public
+** License version 2.1 as published by the Free Software Foundation and
+** appearing in the file LICENSE.LGPL included in the packaging of this
+** file. Please review the following information to ensure the GNU Lesser
+** General Public License version 2.1 requirements will be met:
+** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights. These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU General
+** Public License version 3.0 as published by the Free Software Foundation
+** and appearing in the file LICENSE.GPL included in the packaging of this
+** file. Please review the following information to ensure the GNU General
+** Public License version 3.0 requirements will be met:
+** http://www.gnu.org/copyleft/gpl.html.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms and
+** conditions contained in a signed written agreement between you and Nokia.
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: container
+
+    property variant flickableArea
+
+    Rectangle {
+        radius: 5
+        color: "black"
+        opacity: 0.3
+        border.color: "white"
+        border.width: 2
+        x: 0
+        y: flickableArea.visibleArea.yPosition * container.height
+        width: parent.width
+        height: flickableArea.visibleArea.heightRatio * container.height
+    }
+    states: [
+        State {
+            name: "show"
+            when: flickableArea.movingVertically
+            PropertyChanges {
+                target: container
+                opacity: 1
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            from: "*"
+            to: "*"
+            NumberAnimation {
+                target: container
+                properties: "opacity"
+                duration: 400
+            }
+        }
+    ]
+}
diff --git a/examples/demos/flickr/content/Slider.qml b/examples/demos/flickr/content/Slider.qml
new file mode 100644
index 0000000000..0f9e8b20f2
--- /dev/null
+++ b/examples/demos/flickr/content/Slider.qml
@@ -0,0 +1,91 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** GNU Lesser General Public License Usage
+** This file may be used under the terms of the GNU Lesser General Public
+** License version 2.1 as published by the Free Software Foundation and
+** appearing in the file LICENSE.LGPL included in the packaging of this
+** file. Please review the following information to ensure the GNU Lesser
+** General Public License version 2.1 requirements will be met:
+** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights. These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU General
+** Public License version 3.0 as published by the Free Software Foundation
+** and appearing in the file LICENSE.GPL included in the packaging of this
+** file. Please review the following information to ensure the GNU General
+** Public License version 3.0 requirements will be met:
+** http://www.gnu.org/copyleft/gpl.html.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms and
+** conditions contained in a signed written agreement between you and Nokia.
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: slider; width: 400; height: 16
+
+    // value is read/write.
+    property real value: 1
+    onValueChanged: updatePos();
+    property real maximum: 1
+    property real minimum: 1
+    property int xMax: width - handle.width - 4
+    onXMaxChanged: updatePos();
+    onMinimumChanged: updatePos();
+
+    function updatePos() {
+        if (maximum > minimum) {
+            var pos = 2 + (value - minimum) * slider.xMax / (maximum - minimum);
+            pos = Math.min(pos, width - handle.width - 2);
+            pos = Math.max(pos, 2);
+            handle.x = pos;
+        } else {
+            handle.x = 2;
+        }
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        border.color: "white"; border.width: 0; radius: 8
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: "#66343434" }
+            GradientStop { position: 1.0; color: "#66000000" }
+        }
+    }
+
+    Rectangle {
+        id: handle; smooth: true
+        y: 2; width: 30; height: slider.height-4; radius: 6
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: "lightgray" }
+            GradientStop { position: 1.0; color: "gray" }
+        }
+
+        MouseArea {
+            id: mouse
+            anchors.fill: parent; drag.target: parent
+            drag.axis: Drag.XAxis; drag.minimumX: 2; drag.maximumX: slider.xMax+2
+            onPositionChanged: { value = (maximum - minimum) * (handle.x-2) / slider.xMax + minimum; }
+        }
+    }
+}
diff --git a/examples/demos/flickr/content/TitleBar.qml b/examples/demos/flickr/content/TitleBar.qml
new file mode 100644
index 0000000000..3dab005a11
--- /dev/null
+++ b/examples/demos/flickr/content/TitleBar.qml
@@ -0,0 +1,128 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** GNU Lesser General Public License Usage
+** This file may be used under the terms of the GNU Lesser General Public
+** License version 2.1 as published by the Free Software Foundation and
+** appearing in the file LICENSE.LGPL included in the packaging of this
+** file. Please review the following information to ensure the GNU Lesser
+** General Public License version 2.1 requirements will be met:
+** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights. These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU General
+** Public License version 3.0 as published by the Free Software Foundation
+** and appearing in the file LICENSE.GPL included in the packaging of this
+** file. Please review the following information to ensure the GNU General
+** Public License version 3.0 requirements will be met:
+** http://www.gnu.org/copyleft/gpl.html.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms and
+** conditions contained in a signed written agreement between you and Nokia.
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: titleBar
+    property string untaggedString: "Uploads from everyone"
+    property string taggedString: "Recent uploads tagged "
+
+    BorderImage { source: "images/titlebar.sci"; width: parent.width; height: parent.height + 14; y: -7 }
+
+    Item {
+        id: container
+        width: (parent.width * 2) - 55 ; height: parent.height
+
+        function accept() {
+            imageDetails.closed()
+            titleBar.state = ""
+            background.state = ""
+            rssModel.tags = editor.text
+        }
+
+        Image {
+            id: quitButton
+            anchors.left: parent.left//; anchors.leftMargin: 0
+            anchors.verticalCenter: parent.verticalCenter
+            source: "images/quit.png"
+            MouseArea {
+                anchors.fill: parent
+                onClicked: Qt.quit()
+            }
+        }
+
+        Text {
+            id: categoryText
+            anchors {
+                left: quitButton.right; right: tagButton.left; leftMargin: 10; rightMargin: 10
+                verticalCenter: parent.verticalCenter
+            }
+            elide: Text.ElideLeft
+            text: (rssModel.tags=="" ? untaggedString : taggedString + rssModel.tags)
+            font.bold: true; font.pixelSize: 15; color: "White"; style: Text.Raised; styleColor: "Black"
+        }
+
+        Button {
+            id: tagButton; x: titleBar.width - 50; width: 45; height: 32; text: "..."
+            onClicked: if (titleBar.state == "Tags") container.accept(); else titleBar.state = "Tags"
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        Item {
+            id: lineEdit
+            y: 4; height: parent.height - 9
+            anchors { left: tagButton.right; leftMargin: 5; right: parent.right; rightMargin: 5 }
+
+            BorderImage { source: "images/lineedit.sci"; anchors.fill: parent }
+
+            TextInput {
+                id: editor
+                anchors {
+                    left: parent.left; right: parent.right; leftMargin: 10; rightMargin: 10
+                    verticalCenter: parent.verticalCenter
+                }
+                cursorVisible: true; font.bold: true
+                color: "#151515"; selectionColor: "Green"
+            }
+
+            Keys.forwardTo: [ (returnKey), (editor)]
+
+            Item {
+                id: returnKey
+                Keys.onReturnPressed: container.accept()
+                Keys.onEnterPressed: container.accept()
+                Keys.onEscapePressed: titleBar.state = ""
+            }
+        }
+    }
+
+    states: State {
+        name: "Tags"
+        PropertyChanges { target: container; x: -tagButton.x + 5 }
+        PropertyChanges { target: tagButton; text: "OK" }
+        PropertyChanges { target: editor; focus: true }
+    }
+
+    transitions: Transition {
+        NumberAnimation { properties: "x"; easing.type: Easing.InOutQuad }
+    }
+}
diff --git a/examples/demos/flickr/content/ToolBar.qml b/examples/demos/flickr/content/ToolBar.qml
new file mode 100644
index 0000000000..e82be63e7e
--- /dev/null
+++ b/examples/demos/flickr/content/ToolBar.qml
@@ -0,0 +1,69 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** GNU Lesser General Public License Usage
+** This file may be used under the terms of the GNU Lesser General Public
+** License version 2.1 as published by the Free Software Foundation and
+** appearing in the file LICENSE.LGPL included in the packaging of this
+** file. Please review the following information to ensure the GNU Lesser
+** General Public License version 2.1 requirements will be met:
+** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights. These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU General
+** Public License version 3.0 as published by the Free Software Foundation
+** and appearing in the file LICENSE.GPL included in the packaging of this
+** file. Please review the following information to ensure the GNU General
+** Public License version 3.0 requirements will be met:
+** http://www.gnu.org/copyleft/gpl.html.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms and
+** conditions contained in a signed written agreement between you and Nokia.
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: toolbar
+
+    property alias button1Label: button1.text
+    property alias button2Label: button2.text
+    property alias button2Visible: button2.visible
+
+    signal button1Clicked
+    signal button2Clicked
+
+    BorderImage { source: "images/titlebar.sci"; width: parent.width; height: parent.height + 14; y: -7 }
+
+    Row {
+        anchors.right: parent.right; anchors.rightMargin: 5; y: 3; height: 32; spacing: 30
+        Button {
+            id: button1
+            width: 140; height: 32
+            onClicked: toolbar.button1Clicked()
+        }
+
+        Button {
+            id: button2; width: 140; height: 32
+            onClicked: toolbar.button2Clicked()
+        }
+    }
+}
diff --git a/examples/demos/flickr/content/UnifiedDelegate.qml b/examples/demos/flickr/content/UnifiedDelegate.qml
new file mode 100644
index 0000000000..00a777b0a1
--- /dev/null
+++ b/examples/demos/flickr/content/UnifiedDelegate.qml
@@ -0,0 +1,154 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** GNU Lesser General Public License Usage
+** This file may be used under the terms of the GNU Lesser General Public
+** License version 2.1 as published by the Free Software Foundation and
+** appearing in the file LICENSE.LGPL included in the packaging of this
+** file. Please review the following information to ensure the GNU Lesser
+** General Public License version 2.1 requirements will be met:
+** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights. These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU General
+** Public License version 3.0 as published by the Free Software Foundation
+** and appearing in the file LICENSE.GPL included in the packaging of this
+** file. Please review the following information to ensure the GNU General
+** Public License version 3.0 requirements will be met:
+** http://www.gnu.org/copyleft/gpl.html.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms and
+** conditions contained in a signed written agreement between you and Nokia.
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick.Particles 2.0
+
+Package {
+    function photoClicked() {
+        imageDetails.photoTitle = title;
+        imageDetails.photoTags = tags;
+        imageDetails.photoWidth = photoWidth;
+        imageDetails.photoHeight = photoHeight;
+        imageDetails.photoType = photoType;
+        imageDetails.photoAuthor = photoAuthor;
+        imageDetails.photoDate = photoDate;
+        imageDetails.photoUrl = url;
+        imageDetails.rating = 0;
+        scaleMe.state = "Details";
+    }
+
+    Item {
+        id: gridwrapper;
+        width: GridView.view.cellWidth; height: GridView.view.cellHeight
+        Package.name: "grid"
+    }
+    Item {
+        id: streamwrapper;
+        width: 80; height: 80
+        Package.name: "stream"
+    }
+    Item {
+        //anchors.centerIn: parent//Doesn't animate :(
+        width: 80; height: 80
+        scale: 0.0
+        Behavior on scale { NumberAnimation { easing.type: Easing.InOutQuad} }
+        id: scaleMe
+
+        Item {
+            id: whiteRectContainer
+            width: 77; height: 77; anchors.centerIn: parent
+            Rectangle {
+                id: whiteRect; width: 77; height: 77; color: "#dddddd"; smooth: true
+                x:0; y:0
+                Image { id: thumb; source: imagePath; x: 1; y: 1; smooth: true }
+                Image { source: "images/gloss.png" }
+                MouseArea { anchors.fill: parent; onClicked: photoClicked() }
+            }
+        }
+
+        Connections {
+            target: toolBar
+            onButton2Clicked: if (scaleMe.state == 'Details' ) scaleMe.state = 'Show'
+        }
+
+            state: 'inStream'
+        states: [
+            State {
+                name: "Show"; when: thumb.status == Image.Ready
+                PropertyChanges { target: scaleMe; scale: 1; }
+            },
+            State {
+                name: "Details"
+                PropertyChanges { target: scaleMe; scale: 1 }
+                ParentChange { target: whiteRect; x: 10; y: 20; parent: imageDetails.frontContainer }
+                PropertyChanges { target: background; state: "DetailedView" }
+            }
+        ]
+        transitions: [
+            Transition {
+                from: "Show"; to: "Details"
+                ParentAnimation {
+                    via: foreground
+                    NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.InOutQuad }
+                }
+            },
+            Transition {
+                from: "Details"; to: "Show"
+                SequentialAnimation{
+                    ParentAnimation {
+                        via: foreground
+                        NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.InOutQuad }
+                    }
+                }
+            }
+        ]
+        Item{
+            id: stateContainer
+            states: [
+                State {
+                    name: 'inStream'
+                    when: screen.inGridView == false
+                    ParentChange { 
+                        target: scaleMe; parent: streamwrapper 
+                        x: 0; y: 0; 
+                    }
+                },
+                State {
+                    name: 'inGrid'
+                    when: screen.inGridView == true
+                    ParentChange {
+                        target: scaleMe; parent: gridwrapper
+                        x: 0; y: 0;
+                    }
+                }
+            ]
+
+            transitions: [
+                Transition {
+                    ParentAnimation {
+                        NumberAnimation { target: scaleMe; properties: 'x,y,width,height'; duration: 300 }
+                    }
+                }
+            ]
+        }
+    }
+}
diff --git a/examples/demos/flickr/content/images/gloss.png b/examples/demos/flickr/content/images/gloss.png
new file mode 100644
index 0000000000..5d370cd93d
--- /dev/null
+++ b/examples/demos/flickr/content/images/gloss.png
diff --git a/examples/demos/flickr/content/images/lineedit.png b/examples/demos/flickr/content/images/lineedit.png
new file mode 100644
index 0000000000..2cc38dc35b
--- /dev/null
+++ b/examples/demos/flickr/content/images/lineedit.png
diff --git a/examples/demos/flickr/content/images/lineedit.sci b/examples/demos/flickr/content/images/lineedit.sci
new file mode 100644
index 0000000000..054bff78be
--- /dev/null
+++ b/examples/demos/flickr/content/images/lineedit.sci
@@ -0,0 +1,5 @@
+border.left: 10
+border.top: 10
+border.bottom: 10
+border.right: 10
+source: lineedit.png
diff --git a/examples/demos/flickr/content/images/noise.png b/examples/demos/flickr/content/images/noise.png
new file mode 100644
index 0000000000..c5a5ba0053
--- /dev/null
+++ b/examples/demos/flickr/content/images/noise.png
diff --git a/examples/demos/flickr/content/images/particle.png b/examples/demos/flickr/content/images/particle.png
new file mode 100644
index 0000000000..dbc39cb16e
--- /dev/null
+++ b/examples/demos/flickr/content/images/particle.png
diff --git a/examples/demos/flickr/content/images/quit.png b/examples/demos/flickr/content/images/quit.png
new file mode 100644
index 0000000000..5bda1b6e0d
--- /dev/null
+++ b/examples/demos/flickr/content/images/quit.png
diff --git a/examples/demos/flickr/content/images/squareParticle.png b/examples/demos/flickr/content/images/squareParticle.png
new file mode 100644
index 0000000000..faf85c24e0
--- /dev/null
+++ b/examples/demos/flickr/content/images/squareParticle.png
diff --git a/examples/demos/flickr/content/images/stripes.png b/examples/demos/flickr/content/images/stripes.png
new file mode 100644
index 0000000000..9f36727ea4
--- /dev/null
+++ b/examples/demos/flickr/content/images/stripes.png
diff --git a/examples/demos/flickr/content/images/titlebar.png b/examples/demos/flickr/content/images/titlebar.png
new file mode 100644
index 0000000000..51c90082d0
--- /dev/null
+++ b/examples/demos/flickr/content/images/titlebar.png
diff --git a/examples/demos/flickr/content/images/titlebar.sci b/examples/demos/flickr/content/images/titlebar.sci
new file mode 100644
index 0000000000..0418d94cd6
--- /dev/null
+++ b/examples/demos/flickr/content/images/titlebar.sci
@@ -0,0 +1,5 @@
+border.left: 10
+border.top: 12
+border.bottom: 12
+border.right: 10
+source: titlebar.png
diff --git a/examples/demos/flickr/content/images/toolbutton.png b/examples/demos/flickr/content/images/toolbutton.png
new file mode 100644
index 0000000000..11310013ee
--- /dev/null
+++ b/examples/demos/flickr/content/images/toolbutton.png
diff --git a/examples/demos/flickr/content/images/toolbutton.sci b/examples/demos/flickr/content/images/toolbutton.sci
new file mode 100644
index 0000000000..9e4f965307
--- /dev/null
+++ b/examples/demos/flickr/content/images/toolbutton.sci
@@ -0,0 +1,5 @@
+border.left: 15
+border.top: 4
+border.bottom: 4
+border.right: 15
+source: toolbutton.png
diff --git a/examples/demos/flickr/content/qmldir b/examples/demos/flickr/content/qmldir
new file mode 100644
index 0000000000..adc2479b9f
--- /dev/null
+++ b/examples/demos/flickr/content/qmldir
@@ -0,0 +1,10 @@
+ImageDetails ImageDetails.qml
+LikeOMeter LikeOMeter.qml
+Loading Loading.qml
+MediaButton MediaButton.qml
+MediaLineEdit MediaLineEdit.qml
+Progress Progress.qml
+RssModel RssModel.qml
+ScrollBar ScrollBar.qml
+Slider Slider.qml
+Star Star.qml
diff --git a/examples/demos/flickr/flickr-90.qml b/examples/demos/flickr/flickr-90.qml
new file mode 100644
index 0000000000..ae06957649
--- /dev/null
+++ b/examples/demos/flickr/flickr-90.qml
@@ -0,0 +1,52 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** GNU Lesser General Public License Usage
+** This file may be used under the terms of the GNU Lesser General Public
+** License version 2.1 as published by the Free Software Foundation and
+** appearing in the file LICENSE.LGPL included in the packaging of this
+** file. Please review the following information to ensure the GNU Lesser
+** General Public License version 2.1 requirements will be met:
+** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights. These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU General
+** Public License version 3.0 as published by the Free Software Foundation
+** and appearing in the file LICENSE.GPL included in the packaging of this
+** file. Please review the following information to ensure the GNU General
+** Public License version 3.0 requirements will be met:
+** http://www.gnu.org/copyleft/gpl.html.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms and
+** conditions contained in a signed written agreement between you and Nokia.
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    width: 480; height: 320
+
+    Loader {
+        y: 320; rotation: -90
+        transformOrigin: Item.TopLeft
+        source: "flickr.qml"
+    }
+}
diff --git a/examples/demos/flickr/flickr.qml b/examples/demos/flickr/flickr.qml
new file mode 100644
index 0000000000..74c41f185b
--- /dev/null
+++ b/examples/demos/flickr/flickr.qml
@@ -0,0 +1,158 @@
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** GNU Lesser General Public License Usage
+** This file may be used under the terms of the GNU Lesser General Public
+** License version 2.1 as published by the Free Software Foundation and
+** appearing in the file LICENSE.LGPL included in the packaging of this
+** file. Please review the following information to ensure the GNU Lesser
+** General Public License version 2.1 requirements will be met:
+** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Nokia gives you certain additional
+** rights. These rights are described in the Nokia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU General
+** Public License version 3.0 as published by the Free Software Foundation
+** and appearing in the file LICENSE.GPL included in the packaging of this
+** file. Please review the following information to ensure the GNU General
+** Public License version 3.0 requirements will be met:
+** http://www.gnu.org/copyleft/gpl.html.
+**
+** Other Usage
+** Alternatively, this file may be used in accordance with the terms and
+** conditions contained in a signed written agreement between you and Nokia.
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import QtQuick.Particles 2.0
+import "content"
+
+Item {
+    id: screen; width: 320; height: 480
+    property bool inGridView : true
+
+    Rectangle {
+        id: background
+        anchors.fill: parent; color: "#343434";
+
+        Image { source: "content/images/stripes.png"; fillMode: Image.Tile; anchors.fill: parent; opacity: 0.3 }
+        ParticleSystem {
+            id: bgParticles
+            anchors.fill: parent
+            ImageParticle {
+                groups: ["trail"]
+                source: "content/images/particle.png"
+                color: "#1A1A6F"
+                alpha: 0.1
+                colorVariation: 0.01
+                blueVariation: 0.8
+            }
+            Emitter {
+                group: "drops"
+                width: parent.width
+                emitRate: 0.5
+                lifeSpan: 20000
+                startTime: 16000
+                speed: PointDirection{
+                    y: {screen.height/18}
+                }
+            }
+            TrailEmitter {
+                follow: "drops"
+                group: "trail"
+                emitRatePerParticle: 18
+                size: 32
+                endSize: 0
+                sizeVariation: 4
+                lifeSpan: 1200
+                anchors.fill: parent
+                emitWidth: 16
+                emitHeight: 16
+                emitShape: EllipseShape{}
+            }
+        }
+
+        VisualDataModel{
+            id: vdm
+            delegate: UnifiedDelegate{}
+            model: RssModel { id: rssModel }
+        }
+
+        Item {
+            id: views
+            width: parent.width
+            anchors.top: titleBar.bottom; anchors.bottom: toolBar.top
+
+            GridView {
+                id: photoGridView; model: vdm.parts.grid
+                cacheBuffer: 1000
+                cellWidth: (parent.width-2)/4; cellHeight: cellWidth; width: parent.width; height: parent.height
+            }
+
+            states: State {
+                name: "GridView"; when: state.inGridView == true
+            }
+
+            transitions: Transition {
+                NumberAnimation { properties: "x"; duration: 500; easing.type: Easing.InOutQuad }
+            }
+
+            ImageDetails { id: imageDetails; width: parent.width; anchors.left: views.right; height: parent.height }
+
+            Item { id: foreground; anchors.fill: parent }
+        }
+
+        TitleBar { id: titleBar; width: parent.width; height: 40; opacity: 0.9 }
+
+        ToolBar {
+            id: toolBar
+            height: 40; anchors.bottom: parent.bottom; width: parent.width; opacity: 0.9
+            button1Label: "Update"; button2Label: "View mode"
+            onButton1Clicked: rssModel.reload()
+            onButton2Clicked: if (screen.inGridView == true) screen.inGridView = false; else screen.inGridView = true
+        }
+
+        Connections {
+            target: imageDetails
+            onClosed: {
+                if (background.state == "DetailedView") {
+                    background.state = '';
+                    imageDetails.photoUrl = "";
+                }
+            }
+        }
+
+        states: State {
+            name: "DetailedView"
+            PropertyChanges { target: views; x: -parent.width }
+            PropertyChanges { target: toolBar; button1Label: "View..." }
+            PropertyChanges {
+                target: toolBar
+                onButton1Clicked: if (imageDetails.state=='') imageDetails.state='Back'; else imageDetails.state=''
+            }
+            PropertyChanges { target: toolBar; button2Label: "Back" }
+            PropertyChanges { target: toolBar; onButton2Clicked: imageDetails.closed() }
+        }
+
+        transitions: Transition {
+            NumberAnimation { properties: "x"; duration: 500; easing.type: Easing.InOutQuad }
+        }
+
+    }
+}
diff --git a/examples/demos/flickr/flickr.qmlproject b/examples/demos/flickr/flickr.qmlproject
new file mode 100644
index 0000000000..af5179d84b
--- /dev/null
+++ b/examples/demos/flickr/flickr.qmlproject
@@ -0,0 +1,17 @@
+import QmlProject 1.1
+
+Project {
+    mainFile: "flickr.qml"
+    //mainFile: "flickr-90.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+}