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>

18 files changed, 973 insertions, 0 deletions

diff --git a/examples/demos/photoviewer/PhotoViewerCore/AlbumDelegate.qml b/examples/demos/photoviewer/PhotoViewerCore/AlbumDelegate.qml
new file mode 100644
index 0000000000..f183c4b2a0
--- /dev/null
+++ b/examples/demos/photoviewer/PhotoViewerCore/AlbumDelegate.qml
@@ -0,0 +1,147 @@
+/****************************************************************************
+**
+** 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
+
+Component {
+    id: albumDelegate
+    Package {
+
+        Item {
+            Package.name: 'browser'
+            GridView {
+                id: photosGridView; model: visualModel.parts.grid; width: mainWindow.width; height: mainWindow.height - 21
+                x: 0; y: 21; cellWidth: 160; cellHeight: 153; interactive: false
+                onCurrentIndexChanged: photosListView.positionViewAtIndex(currentIndex, ListView.Contain)
+            }
+        }
+
+        Item {
+            Package.name: 'fullscreen'
+            ListView {
+                id: photosListView; model: visualModel.parts.list; orientation: Qt.Horizontal
+                width: mainWindow.width; height: mainWindow.height; interactive: false
+                onCurrentIndexChanged: photosGridView.positionViewAtIndex(currentIndex, GridView.Contain)
+                highlightRangeMode: ListView.StrictlyEnforceRange; snapMode: ListView.SnapOneItem
+            }
+        }
+
+        Item {
+            Package.name: 'album'
+            id: albumWrapper; width: 210; height: 220
+
+            VisualDataModel {
+                id: visualModel; delegate: PhotoDelegate { }
+                model: RssModel { id: rssModel; tags: tag }
+            }
+
+            BusyIndicator {
+                id: busyIndicator
+                anchors { centerIn: parent; verticalCenterOffset: -20 }
+                on: rssModel.status != XmlListModel.Ready
+            }
+
+            PathView {
+                id: photosPathView; model: visualModel.parts.stack; pathItemCount: 5
+                visible: !busyIndicator.visible
+                anchors.centerIn: parent; anchors.verticalCenterOffset: -30
+                path: Path {
+                    PathAttribute { name: 'z'; value: 9999.0 }
+                    PathLine { x: 1; y: 1 }
+                    PathAttribute { name: 'z'; value: 0.0 }
+                }
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: mainWindow.editMode ? photosModel.remove(index) : albumWrapper.state = 'inGrid'
+            }
+
+            Tag {
+                anchors { horizontalCenter: parent.horizontalCenter; bottom: parent.bottom; bottomMargin: 10 }
+                frontLabel: tag; backLabel: qsTr("Remove"); flipped: mainWindow.editMode
+                onTagChanged: rssModel.tags = tag
+                onBackClicked: if (mainWindow.editMode) photosModel.remove(index);
+            }
+
+            states: [
+            State {
+                name: 'inGrid'
+                PropertyChanges { target: photosGridView; interactive: true }
+                PropertyChanges { target: albumsShade; opacity: 1 }
+                PropertyChanges { target: backButton; onClicked: albumWrapper.state = ''; y: 6 }
+            },
+            State {
+                name: 'fullscreen'; extend: 'inGrid'
+                PropertyChanges { target: photosGridView; interactive: false }
+                PropertyChanges { target: photosListView; interactive: true }
+                PropertyChanges { target: photosShade; opacity: 1 }
+                PropertyChanges { target: backButton; y: -backButton.height - 8 }
+            }
+            ]
+
+            GridView.onAdd: NumberAnimation {
+                target: albumWrapper; properties: "scale"; from: 0.0; to: 1.0; easing.type: Easing.OutQuad
+            }
+            GridView.onRemove: SequentialAnimation {
+                PropertyAction { target: albumWrapper; property: "GridView.delayRemove"; value: true }
+                NumberAnimation { target: albumWrapper; property: "scale"; from: 1.0; to: 0.0; easing.type: Easing.OutQuad }
+                PropertyAction { target: albumWrapper; property: "GridView.delayRemove"; value: false }
+            }
+
+            transitions: [
+            Transition {
+                from: '*'; to: 'inGrid'
+                SequentialAnimation {
+                    NumberAnimation { properties: 'opacity'; duration: 250 }
+                    PauseAnimation { duration: 350 }
+                    NumberAnimation { target: backButton; properties: "y"; duration: 200; easing.type: Easing.OutQuad }
+                }
+            },
+            Transition {
+                from: 'inGrid'; to: '*'
+                NumberAnimation { properties: "y,opacity"; easing.type: Easing.OutQuad; duration: 300 }
+            }
+            ]
+        }
+    }
+}
diff --git a/examples/demos/photoviewer/PhotoViewerCore/BusyIndicator.qml b/examples/demos/photoviewer/PhotoViewerCore/BusyIndicator.qml
new file mode 100644
index 0000000000..2b1a75f369
--- /dev/null
+++ b/examples/demos/photoviewer/PhotoViewerCore/BusyIndicator.qml
@@ -0,0 +1,50 @@
+/****************************************************************************
+**
+** 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
+
+Image {
+    id: container
+    property bool on: false
+
+    source: "images/busy.png"; visible: container.on
+    NumberAnimation on rotation { running: container.on; from: 0; to: 360; loops: Animation.Infinite; duration: 1200 }
+}
diff --git a/examples/demos/photoviewer/PhotoViewerCore/Button.qml b/examples/demos/photoviewer/PhotoViewerCore/Button.qml
new file mode 100644
index 0000000000..fcce969fbd
--- /dev/null
+++ b/examples/demos/photoviewer/PhotoViewerCore/Button.qml
@@ -0,0 +1,72 @@
+/****************************************************************************
+**
+** 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 alias label: labelText.text
+    property color tint: "transparent"
+    signal clicked
+
+    width: labelText.width + 70 ; height: labelText.height + 18
+
+    BorderImage {
+        anchors { fill: container; leftMargin: -6; topMargin: -6; rightMargin: -8; bottomMargin: -8 }
+        source: 'images/box-shadow.png'; smooth: true
+        border.left: 10; border.top: 10; border.right: 10; border.bottom: 10
+    }
+
+    Image { anchors.fill: parent; source: "images/cardboard.png"; smooth: true }
+
+    Rectangle {
+        anchors.fill: container; color: container.tint; visible: container.tint != ""
+        opacity: 0.25; smooth: true
+    }
+
+    Text { id: labelText; font.pixelSize: 15; anchors.centerIn: parent; smooth: true }
+
+    MouseArea {
+        anchors { fill: parent; leftMargin: -20; topMargin: -20; rightMargin: -20; bottomMargin: -20 }
+        onClicked: container.clicked()
+    }
+}
diff --git a/examples/demos/photoviewer/PhotoViewerCore/EditableButton.qml b/examples/demos/photoviewer/PhotoViewerCore/EditableButton.qml
new file mode 100644
index 0000000000..5d845938c7
--- /dev/null
+++ b/examples/demos/photoviewer/PhotoViewerCore/EditableButton.qml
@@ -0,0 +1,86 @@
+/****************************************************************************
+**
+** 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 string label
+    signal clicked
+    signal labelChanged(string label)
+
+    width: textInput.width + 70 ; height: textInput.height + 18
+
+    BorderImage {
+        anchors { fill: container; leftMargin: -6; topMargin: -6; rightMargin: -8; bottomMargin: -8 }
+        source: 'images/box-shadow.png'; smooth: true
+        border.left: 10; border.top: 10; border.right: 10; border.bottom: 10
+    }
+
+    Image { anchors.fill: parent; source: "images/cardboard.png"; smooth: true }
+
+    TextInput {
+        id: textInput; text: label; font.pixelSize: 15; anchors.centerIn: parent; smooth: true
+        Keys.onReturnPressed: {
+            container.labelChanged(textInput.text)
+            container.focus = true
+        }
+        Keys.onEnterPressed: {
+            container.labelChanged(textInput.text)
+            container.focus = true
+        }
+        Keys.onEscapePressed: {
+            textInput.text = container.label
+            container.focus = true
+        }
+    }
+
+    Rectangle {
+        anchors.fill: container; border.color: "steelblue"; border.width: 4
+        color: "transparent"; visible: textInput.focus; smooth: true
+    }
+
+    MouseArea {
+        anchors { fill: parent; leftMargin: -20; topMargin: -20; rightMargin: -20; bottomMargin: -20 }
+        onClicked: { textInput.forceActiveFocus(); textInput.openSoftwareInputPanel(); }
+    }
+}
diff --git a/examples/demos/photoviewer/PhotoViewerCore/PhotoDelegate.qml b/examples/demos/photoviewer/PhotoViewerCore/PhotoDelegate.qml
new file mode 100644
index 0000000000..b972c938eb
--- /dev/null
+++ b/examples/demos/photoviewer/PhotoViewerCore/PhotoDelegate.qml
@@ -0,0 +1,188 @@
+/****************************************************************************
+**
+** 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 "script/script.js" as Script
+
+Package {
+    Item { id: stackItem; Package.name: 'stack'; width: 160; height: 153; z: stackItem.PathView.z }
+    Item { id: listItem; Package.name: 'list'; width: mainWindow.width + 40; height: 153 }
+    Item { id: gridItem; Package.name: 'grid'; width: 160; height: 153 }
+
+    Item {
+        width: 160; height: 153
+
+        Item {
+            id: photoWrapper
+
+            property double randomAngle: Math.random() * (2 * 6 + 1) - 6
+            property double randomAngle2: Math.random() * (2 * 6 + 1) - 6
+
+            x: 0; y: 0; width: 140; height: 133
+            z: stackItem.PathView.z; rotation: photoWrapper.randomAngle
+
+            BorderImage {
+                anchors {
+                    fill: originalImage.status == Image.Ready ? border : placeHolder
+                    leftMargin: -6; topMargin: -6; rightMargin: -8; bottomMargin: -8
+                }
+                source: 'images/box-shadow.png'; smooth: true
+                border.left: 10; border.top: 10; border.right: 10; border.bottom: 10
+            }
+            Rectangle {
+                id: placeHolder
+
+                property int w: Script.getWidth(content)
+                property int h: Script.getHeight(content)
+                property double s: Script.calculateScale(w, h, photoWrapper.width)
+
+                color: 'white'; anchors.centerIn: parent; smooth: true
+                width:  w * s; height: h * s; visible: originalImage.status != Image.Ready
+                Rectangle {
+                    color: "#878787"; smooth: true
+                    anchors { fill: parent; topMargin: 3; bottomMargin: 3; leftMargin: 3; rightMargin: 3 }
+                }
+            }
+            Rectangle {
+                id: border; color: 'white'; anchors.centerIn: parent; smooth: true
+                width: originalImage.paintedWidth + 6; height: originalImage.paintedHeight + 6
+                visible: !placeHolder.visible
+            }
+            BusyIndicator { anchors.centerIn: parent; on: originalImage.status != Image.Ready }
+            Image {
+                id: originalImage; smooth: true; source: "http://" + Script.getImagePath(content); cache: false
+                fillMode: Image.PreserveAspectFit; width: photoWrapper.width; height: photoWrapper.height
+            }
+            Image {
+                id: hqImage; smooth: true; source: ""; visible: false; cache: false
+                fillMode: Image.PreserveAspectFit; width: photoWrapper.width; height: photoWrapper.height
+            }
+            Binding {
+                target: mainWindow; property: "downloadProgress"; value: hqImage.progress
+                when: listItem.ListView.isCurrentItem
+            }
+            Binding {
+                target: mainWindow; property: "imageLoading"
+                value: (hqImage.status == Image.Loading) ? 1 : 0; when: listItem.ListView.isCurrentItem
+            }
+            MouseArea {
+                width: originalImage.paintedWidth; height: originalImage.paintedHeight; anchors.centerIn: originalImage
+                onClicked: {
+                    if (albumWrapper.state == 'inGrid') {
+                        gridItem.GridView.view.currentIndex = index;
+                        albumWrapper.state = 'fullscreen'
+                    } else {
+                        gridItem.GridView.view.currentIndex = index;
+                        albumWrapper.state = 'inGrid'
+                    }
+                }
+            }
+
+            states: [
+            State {
+                name: 'stacked'; when: albumWrapper.state == ''
+                ParentChange { target: photoWrapper; parent: stackItem; x: 10; y: 10 }
+                PropertyChanges { target: photoWrapper; opacity: stackItem.PathView.onPath ? 1.0 : 0.0 }
+            },
+            State {
+                name: 'inGrid'; when: albumWrapper.state == 'inGrid'
+                ParentChange { target: photoWrapper; parent: gridItem; x: 10; y: 10; rotation: photoWrapper.randomAngle2 }
+            },
+            State {
+                name: 'fullscreen'; when: albumWrapper.state == 'fullscreen'
+                ParentChange {
+                    target: photoWrapper; parent: listItem; x: 0; y: 0; rotation: 0
+                    width: mainWindow.width; height: mainWindow.height
+                }
+                PropertyChanges { target: border; opacity: 0 }
+                PropertyChanges { target: hqImage; source: listItem.ListView.isCurrentItem ? hq : ""; visible: true }
+            }
+            ]
+
+            transitions: [
+            Transition {
+                from: 'stacked'; to: 'inGrid'
+                SequentialAnimation {
+                    PauseAnimation { duration: 10 * index }
+                    ParentAnimation {
+                        target: photoWrapper; via: foreground
+                        NumberAnimation {
+                            target: photoWrapper; properties: 'x,y,rotation,opacity'; duration: 600; easing.type: 'OutQuart'
+                        }
+                    }
+                }
+            },
+            Transition {
+                from: 'inGrid'; to: 'stacked'
+                ParentAnimation {
+                    target: photoWrapper; via: foreground
+                    NumberAnimation { properties: 'x,y,rotation,opacity'; duration: 600; easing.type: 'OutQuart' }
+                }
+            },
+            Transition {
+                from: 'inGrid'; to: 'fullscreen'
+                SequentialAnimation {
+                    PauseAnimation { duration: gridItem.GridView.isCurrentItem ? 0 : 600 }
+                    ParentAnimation {
+                        target: photoWrapper; via: foreground
+                        NumberAnimation {
+                            targets: [ photoWrapper, border ]
+                            properties: 'x,y,width,height,opacity,rotation'
+                            duration: gridItem.GridView.isCurrentItem ? 600 : 1; easing.type: 'OutQuart'
+                        }
+                    }
+                }
+            },
+            Transition {
+                from: 'fullscreen'; to: 'inGrid'
+                ParentAnimation {
+                    target: photoWrapper; via: foreground
+                    NumberAnimation {
+                        targets: [ photoWrapper, border ]
+                        properties: 'x,y,width,height,rotation,opacity'
+                        duration: gridItem.GridView.isCurrentItem ? 600 : 1; easing.type: 'OutQuart'
+                    }
+                }
+            }
+            ]
+        }
+    }
+}
diff --git a/examples/demos/photoviewer/PhotoViewerCore/ProgressBar.qml b/examples/demos/photoviewer/PhotoViewerCore/ProgressBar.qml
new file mode 100644
index 0000000000..43c936e342
--- /dev/null
+++ b/examples/demos/photoviewer/PhotoViewerCore/ProgressBar.qml
@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** 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 real progress: 0
+
+    Behavior on opacity { NumberAnimation { duration: 600 } }
+
+    Rectangle { anchors.fill: parent; color: "black"; opacity: 0.5 }
+
+    Rectangle {
+        id: fill; color: "white"; height: container.height
+        width: container.width * container.progress
+    }
+}
diff --git a/examples/demos/photoviewer/PhotoViewerCore/RssModel.qml b/examples/demos/photoviewer/PhotoViewerCore/RssModel.qml
new file mode 100644
index 0000000000..ab818924ac
--- /dev/null
+++ b/examples/demos/photoviewer/PhotoViewerCore/RssModel.qml
@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** 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)+"&" : "")
+    query: "/feed/entry"
+    namespaceDeclarations: "declare default element namespace 'http://www.w3.org/2005/Atom';"
+
+    XmlRole { name: "title"; query: "title/string()" }
+    XmlRole { name: "content"; query: "content/string()" }
+    XmlRole { name: "hq"; query: "link[@rel='enclosure']/@href/string()" }
+}
diff --git a/examples/demos/photoviewer/PhotoViewerCore/Tag.qml b/examples/demos/photoviewer/PhotoViewerCore/Tag.qml
new file mode 100644
index 0000000000..2b546a3ac6
--- /dev/null
+++ b/examples/demos/photoviewer/PhotoViewerCore/Tag.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
+
+Flipable {
+    id: flipable
+
+    property alias frontLabel: frontButton.label
+    property alias backLabel: backButton.label
+
+    property int angle: 0
+    property int randomAngle: Math.random() * (2 * 6 + 1) - 6
+    property bool flipped: false
+
+    signal frontClicked
+    signal backClicked
+    signal tagChanged(string tag)
+
+    front: EditableButton {
+        id: frontButton; rotation: flipable.randomAngle
+        anchors { centerIn: parent; verticalCenterOffset: -20 }
+        onClicked: flipable.frontClicked()
+        onLabelChanged: flipable.tagChanged(label)
+    }
+
+    back: Button {
+        id: backButton; tint: "red"; rotation: flipable.randomAngle
+        anchors { centerIn: parent; verticalCenterOffset: -20 }
+        onClicked: flipable.backClicked()
+    }
+
+    transform: Rotation {
+        origin.x: flipable.width / 2; origin.y: flipable.height / 2
+        axis.x: 0; axis.y: 1; axis.z: 0
+        angle: flipable.angle
+    }
+
+    states: State {
+        name: "back"; when: flipable.flipped
+        PropertyChanges { target: flipable; angle: 180 }
+    }
+
+    transitions: Transition {
+        ParallelAnimation {
+            NumberAnimation { properties: "angle"; duration: 400 }
+            SequentialAnimation {
+                NumberAnimation { target: flipable; property: "scale"; to: 0.8; duration: 200 }
+                NumberAnimation { target: flipable; property: "scale"; to: 1.0; duration: 200 }
+            }
+        }
+    }
+}
diff --git a/examples/demos/photoviewer/PhotoViewerCore/images/box-shadow.png b/examples/demos/photoviewer/PhotoViewerCore/images/box-shadow.png
new file mode 100644
index 0000000000..431af8545d
--- /dev/null
+++ b/examples/demos/photoviewer/PhotoViewerCore/images/box-shadow.png
diff --git a/examples/demos/photoviewer/PhotoViewerCore/images/busy.png b/examples/demos/photoviewer/PhotoViewerCore/images/busy.png
new file mode 100644
index 0000000000..664c2b1491
--- /dev/null
+++ b/examples/demos/photoviewer/PhotoViewerCore/images/busy.png
diff --git a/examples/demos/photoviewer/PhotoViewerCore/images/cardboard.png b/examples/demos/photoviewer/PhotoViewerCore/images/cardboard.png
new file mode 100644
index 0000000000..1847ab528d
--- /dev/null
+++ b/examples/demos/photoviewer/PhotoViewerCore/images/cardboard.png
diff --git a/examples/demos/photoviewer/PhotoViewerCore/qmldir b/examples/demos/photoviewer/PhotoViewerCore/qmldir
new file mode 100644
index 0000000000..d3c247f21a
--- /dev/null
+++ b/examples/demos/photoviewer/PhotoViewerCore/qmldir
@@ -0,0 +1,8 @@
+AlbumDelegate AlbumDelegate.qml
+PhotoDelegate PhotoDelegate.qml
+ProgressBar ProgressBar.qml
+RssModel RssModel.qml
+BusyIndicator BusyIndicator.qml
+EditableButton EditableButton.qml
+Button Button.qml
+Tag Tag.qml
diff --git a/examples/demos/photoviewer/PhotoViewerCore/script/script.js b/examples/demos/photoviewer/PhotoViewerCore/script/script.js
new file mode 100644
index 0000000000..e8ef93a847
--- /dev/null
+++ b/examples/demos/photoviewer/PhotoViewerCore/script/script.js
@@ -0,0 +1,27 @@
+.pragma library
+
+function getWidth(string) {
+    return (string.match(/width=\"([0-9]+)\"/))[1]
+}
+
+function getHeight(string) {
+    return (string.match(/height=\"([0-9]+)\"/))[1]
+}
+
+function getImagePath(string) {
+    var pattern = /src=\"http:\/\/(\S+)\"/
+    return (string.match(pattern))[1]
+}
+
+function calculateScale(width, height, cellSize) {
+    var widthScale = (cellSize * 1.0) / width
+    var heightScale = (cellSize * 1.0) / height
+    var scale = 0
+
+    if (widthScale <= heightScale) {
+        scale = widthScale;
+    } else if (heightScale < widthScale) {
+        scale = heightScale;
+    }
+    return scale;
+}
diff --git a/examples/demos/photoviewer/i18n/base.ts b/examples/demos/photoviewer/i18n/base.ts
new file mode 100644
index 0000000000..1accfd2f90
--- /dev/null
+++ b/examples/demos/photoviewer/i18n/base.ts
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE TS>
+<TS version="2.0">
+<context>
+    <name>AlbumDelegate</name>
+    <message>
+        <location filename="../PhotoViewerCore/AlbumDelegate.qml" line="59"/>
+        <source>Remove</source>
+        <translation type="unfinished"></translation>
+    </message>
+</context>
+<context>
+    <name>photoviewer</name>
+    <message>
+        <location filename="../photoviewer.qml" line="30"/>
+        <source>Add</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="../photoviewer.qml" line="39"/>
+        <source>Edit</source>
+        <translation type="unfinished"></translation>
+    </message>
+    <message>
+        <location filename="../photoviewer.qml" line="52"/>
+        <source>Back</source>
+        <translation type="unfinished"></translation>
+    </message>
+</context>
+</TS>
diff --git a/examples/demos/photoviewer/i18n/qml_fr.qm b/examples/demos/photoviewer/i18n/qml_fr.qm
new file mode 100644
index 0000000000..c24fcbc46c
--- /dev/null
+++ b/examples/demos/photoviewer/i18n/qml_fr.qm
diff --git a/examples/demos/photoviewer/i18n/qml_fr.ts b/examples/demos/photoviewer/i18n/qml_fr.ts
new file mode 100644
index 0000000000..9f892db616
--- /dev/null
+++ b/examples/demos/photoviewer/i18n/qml_fr.ts
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE TS>
+<TS version="2.0" language="fr_FR">
+<context>
+    <name>AlbumDelegate</name>
+    <message>
+        <location filename="../PhotoViewerCore/AlbumDelegate.qml" line="59"/>
+        <source>Remove</source>
+        <translation>Supprimer</translation>
+    </message>
+</context>
+<context>
+    <name>photoviewer</name>
+    <message>
+        <location filename="../photoviewer.qml" line="30"/>
+        <source>Add</source>
+        <translation>Ajouter</translation>
+    </message>
+    <message>
+        <location filename="../photoviewer.qml" line="39"/>
+        <source>Edit</source>
+        <translation>Éditer</translation>
+    </message>
+    <message>
+        <location filename="../photoviewer.qml" line="52"/>
+        <source>Back</source>
+        <translation>Retour</translation>
+    </message>
+</context>
+</TS>
diff --git a/examples/demos/photoviewer/photoviewer.qml b/examples/demos/photoviewer/photoviewer.qml
new file mode 100644
index 0000000000..918438832b
--- /dev/null
+++ b/examples/demos/photoviewer/photoviewer.qml
@@ -0,0 +1,110 @@
+/****************************************************************************
+**
+** 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 "PhotoViewerCore"
+
+Rectangle {
+    id: mainWindow
+
+    property real downloadProgress: 0
+    property bool imageLoading: false
+    property bool editMode: false
+
+    width: 800; height: 480; color: "#d5d6d8"
+
+    ListModel {
+        id: photosModel
+        ListElement { tag: "Flowers" }
+        ListElement { tag: "Wildlife" }
+        ListElement { tag: "Prague" }
+    }
+
+    VisualDataModel { id: albumVisualModel; model: photosModel; delegate: AlbumDelegate {} }
+
+    GridView {
+        id: albumView; width: parent.width; height: parent.height; cellWidth: 210; cellHeight: 220
+        model: albumVisualModel.parts.album; visible: albumsShade.opacity != 1.0
+    }
+
+    Column {
+        spacing: 20; anchors { bottom: parent.bottom; right: parent.right; rightMargin: 20; bottomMargin: 20 }
+        Button {
+            id: newButton; label: qsTr("Add"); rotation: 3
+            anchors.horizontalCenter: parent.horizontalCenter
+            onClicked: {
+                mainWindow.editMode = false
+                photosModel.append( { tag: "" } )
+                albumView.positionViewAtIndex(albumView.count - 1, GridView.Contain)
+            }
+        }
+        Button {
+            id: deleteButton; label: qsTr("Edit"); rotation: -2;
+            onClicked: mainWindow.editMode = !mainWindow.editMode
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+        Button {
+            id: quitButton; label: qsTr("Quit"); rotation: -2;
+            onClicked: Qt.quit()
+            anchors.horizontalCenter: parent.horizontalCenter
+        }
+    }
+
+    Rectangle {
+        id: albumsShade; color: mainWindow.color
+        width: parent.width; height: parent.height; opacity: 0.0
+    }
+
+    ListView { anchors.fill: parent; model: albumVisualModel.parts.browser; interactive: false }
+
+    Button { id: backButton; label: qsTr("Back"); rotation: 3; x: parent.width - backButton.width - 6; y: -backButton.height - 8 }
+
+    Rectangle { id: photosShade; color: 'black'; width: parent.width; height: parent.height; opacity: 0; visible: opacity != 0.0 }
+
+    ListView { anchors.fill: parent; model: albumVisualModel.parts.fullscreen; interactive: false }
+
+    Item { id: foreground; anchors.fill: parent }
+
+    ProgressBar {
+        progress: mainWindow.downloadProgress; width: parent.width; height: 4
+        anchors.bottom: parent.bottom; opacity: mainWindow.imageLoading; visible: opacity != 0.0
+    }
+}
diff --git a/examples/demos/photoviewer/photoviewer.qmlproject b/examples/demos/photoviewer/photoviewer.qmlproject
new file mode 100644
index 0000000000..600bdb10f4
--- /dev/null
+++ b/examples/demos/photoviewer/photoviewer.qmlproject
@@ -0,0 +1,20 @@
+import QmlProject 1.1
+
+Project {
+    mainFile: "photoviewer.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+    Files {
+        filter: "*.ts"
+        directory: "i18n"
+    }
+}