polish canvas stock chart example

Change-Id: Ie79859af8572c3c79185d98c54c2aae35190d257
Reviewed-on: http://codereview.qt.nokia.com/1908
Reviewed-by: Charles Yin <charles.yin@nokia.com>

22 files changed, 601 insertions, 61 deletions

diff --git a/examples/declarative/canvas/stockchart/contents/Button.qml b/examples/declarative/canvas/stockchart/contents/Button.qml
new file mode 100644
index 0000000000..7a88eb571b
--- /dev/null
+++ b/examples/declarative/canvas/stockchart/contents/Button.qml
@@ -0,0 +1,88 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the Technology Preview License Agreement accompanying
+** this package.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, 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.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at qt-info@nokia.com.
+**
+**
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: container
+
+    signal clicked
+
+    property string text
+    width: buttonText.width + 28
+    height: buttonText.height + 14
+
+    BorderImage {
+        id: buttonImage
+        source: "images/toolbutton.sci"
+        width: container.width - 10
+        height: container.height
+    }
+    BorderImage {
+        id: pressed
+        opacity: 0
+        source: "images/toolbutton.sci"
+        width: container.width - 10
+        height: container.height
+    }
+    MouseArea {
+        id: mouseRegion
+        anchors.fill: buttonImage
+        onClicked: { container.clicked(); }
+    }
+    Text {
+        id: buttonText
+        color: "white"
+        anchors.centerIn: buttonImage
+        font.bold: true
+        font.pointSize: 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/declarative/canvas/stockchart/contents/ScrollBar.qml b/examples/declarative/canvas/stockchart/contents/ScrollBar.qml
new file mode 100644
index 0000000000..ad01b03a91
--- /dev/null
+++ b/examples/declarative/canvas/stockchart/contents/ScrollBar.qml
@@ -0,0 +1,74 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the Qt Mobility Components.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
+**     the names of its contributors may be used to endorse or promote
+**     products derived from this software without specific prior written
+**     permission.
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: scrollBar
+    // The properties that define the scrollbar's state.
+    // position and pageSize are in the range 0.0 - 1.0.  They are relative to the
+    // height of the page, i.e. a pageSize of 0.5 means that you can see 50%
+    // of the height of the view.
+    // orientation can be either 'Vertical' or 'Horizontal'
+    property real position
+    property real pageSize
+    property string orientation : "Vertical"
+    property alias bgColor: background.color
+    property alias fgColor: thumb.color
+
+    // A light, semi-transparent background
+    Rectangle {
+        id: background
+        radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1)
+        color: "white"; opacity: 0.3
+        anchors.fill: parent
+    }
+    // Size the bar to the required size, depending upon the orientation.
+    Rectangle {
+        id: thumb
+        opacity: 0.7
+        color: "black"
+        radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1)
+        x: orientation == 'Vertical' ? 1 : (scrollBar.position * (scrollBar.width-2) + 1)
+        y: orientation == 'Vertical' ? (scrollBar.position * (scrollBar.height-2) + 1) : 1
+        width: orientation == 'Vertical' ? (parent.width-2) : (scrollBar.pageSize * (scrollBar.width-2))
+        height: orientation == 'Vertical' ? (scrollBar.pageSize * (scrollBar.height-2)) : (parent.height-2)
+    }
+}
diff --git a/examples/declarative/canvas/stockchart/contents/TitleBar.qml b/examples/declarative/canvas/stockchart/contents/TitleBar.qml
new file mode 100644
index 0000000000..3a52fcb9a6
--- /dev/null
+++ b/examples/declarative/canvas/stockchart/contents/TitleBar.qml
@@ -0,0 +1,71 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the Technology Preview License Agreement accompanying
+** this package.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, 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.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at qt-info@nokia.com.
+**
+**
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: titleBar
+    property string title: ""
+
+    BorderImage { source: "images/titlebar.sci"; width: parent.width; height: parent.height + 14; y: -7 }
+
+    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: parent.right; //leftMargin: 10; rightMargin: 10
+            verticalCenter: parent.verticalCenter
+        }
+        elide: Text.ElideLeft
+        text: title
+        font.bold: true; font.pointSize: 20; color: "White"; style: Text.Raised; styleColor: "Black"
+    }
+}
diff --git a/examples/declarative/canvas/stockchart/contents/ToolBar.qml b/examples/declarative/canvas/stockchart/contents/ToolBar.qml
new file mode 100644
index 0000000000..5f8ca68634
--- /dev/null
+++ b/examples/declarative/canvas/stockchart/contents/ToolBar.qml
@@ -0,0 +1,70 @@
+/****************************************************************************
+**
+** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
+** All rights reserved.
+** Contact: Nokia Corporation (qt-info@nokia.com)
+**
+** This file is part of the QtDeclarative module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL$
+** No Commercial Usage
+** This file contains pre-release code and may not be distributed.
+** You may use this file in accordance with the terms and conditions
+** contained in the Technology Preview License Agreement accompanying
+** this package.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, 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.
+**
+** If you have questions regarding the use of this file, please contact
+** Nokia at qt-info@nokia.com.
+**
+**
+**
+**
+**
+**
+**
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: toolbar
+
+    property variant labels
+    signal buttonClicked(int index)
+
+    BorderImage {
+        source: "images/titlebar.sci"
+        width: parent.width
+        height: parent.height + 14
+        y: -7
+    }
+
+    Row {
+        y: 3
+        anchors.horizontalCenter: parent.horizontalCenter
+        Repeater {
+            model: toolbar.labels
+            delegate:
+                Button {
+                    text: modelData
+                    onClicked: toolbar.buttonClicked(model.index)
+                }
+        }
+    }
+
+}
diff --git a/examples/declarative/canvas/stockchart/contents/images/button-pressed.png b/examples/declarative/canvas/stockchart/contents/images/button-pressed.png
new file mode 100644
index 0000000000..e434d327f2
--- /dev/null
+++ b/examples/declarative/canvas/stockchart/contents/images/button-pressed.png
diff --git a/examples/declarative/canvas/stockchart/contents/images/button.png b/examples/declarative/canvas/stockchart/contents/images/button.png
new file mode 100644
index 0000000000..56a63ce641
--- /dev/null
+++ b/examples/declarative/canvas/stockchart/contents/images/button.png
diff --git a/examples/declarative/canvas/stockchart/contents/images/default.svg b/examples/declarative/canvas/stockchart/contents/images/default.svg
new file mode 100644
index 0000000000..248199cc4e
--- /dev/null
+++ b/examples/declarative/canvas/stockchart/contents/images/default.svg
@@ -0,0 +1,82 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="48px" id="svg1306">
+  <defs id="defs1308">
+    <linearGradient id="linearGradient4083">
+      <stop id="stop4085" offset="0" stop-color="#ffffff" stop-opacity="0"/>
+      <stop offset="0.75" id="stop4089" stop-color="#ffffff" stop-opacity="0"/>
+      <stop id="stop4087" offset="1" stop-color="#ffffff" stop-opacity="1"/>
+    </linearGradient>
+    <linearGradient id="linearGradient4032">
+      <stop id="stop4034" offset="0" stop-color="#fff7c2" stop-opacity="0.63829786"/>
+      <stop offset="0.59394139" id="stop4036" stop-color="#fcaf3e" stop-opacity="0.18348624"/>
+      <stop id="stop4038" offset="0.83850551" stop-color="#fcaf3e" stop-opacity="0.50458717"/>
+      <stop id="stop4040" offset="1" stop-color="#fcaf3e" stop-opacity="1"/>
+    </linearGradient>
+    <linearGradient id="linearGradient4026">
+      <stop id="stop4028" offset="0" stop-color="#fff9c6" stop-opacity="1"/>
+      <stop offset="0.54166669" id="stop4042" stop-color="#fff28c" stop-opacity="1"/>
+      <stop id="stop4030" offset="1" stop-color="#ffea85" stop-opacity="1"/>
+    </linearGradient>
+    <linearGradient xlink:href="#linearGradient4026" id="linearGradient3168" gradientUnits="userSpaceOnUse" x1="-28.968945" y1="-25.326815" x2="-37.19698" y2="-9.5590506"/>
+    <radialGradient xlink:href="#linearGradient4032" id="radialGradient4020" cx="-33.519073" cy="-22.113297" fx="-33.519073" fy="-22.113297" r="9.5" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0.487739,1.292402,-1.10267,0.497242,-41.77393,32.41492)"/>
+    <radialGradient xlink:href="#linearGradient4083" id="radialGradient4081" cx="23.99999" cy="23.381506" fx="23.99999" fy="23.381506" r="19.141981" gradientTransform="matrix(1.006701,2.235326e-16,-2.23715e-16,1.007522,-0.160816,0.426981)" gradientUnits="userSpaceOnUse"/>
+  </defs>
+  
+  <metadata id="metadata1311">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title>weather-clear</dc:title>
+        <dc:date>January 2006</dc:date>
+        <dc:creator>
+          <cc:Agent>
+            <dc:title>Ryan Collier (pseudo)</dc:title>
+          </cc:Agent>
+        </dc:creator>
+        <dc:publisher>
+          <cc:Agent>
+            <dc:title>http://www.tango-project.org</dc:title>
+          </cc:Agent>
+        </dc:publisher>
+        <dc:source>http://www.pseudocode.org</dc:source>
+        <dc:subject>
+          <rdf:Bag>
+            <rdf:li>weather</rdf:li>
+            <rdf:li>applet</rdf:li>
+            <rdf:li>notification</rdf:li>
+          </rdf:Bag>
+        </dc:subject>
+        <cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/2.0/"/>
+        <dc:contributor>
+          <cc:Agent>
+            <dc:title>Garrett LeSage</dc:title>
+          </cc:Agent>
+        </dc:contributor>
+      </cc:Work>
+      <cc:License rdf:about="http://creativecommons.org/licenses/by-sa/2.0/">
+        <cc:permits rdf:resource="http://web.resource.org/cc/Reproduction"/>
+        <cc:permits rdf:resource="http://web.resource.org/cc/Distribution"/>
+        <cc:requires rdf:resource="http://web.resource.org/cc/Notice"/>
+        <cc:requires rdf:resource="http://web.resource.org/cc/Attribution"/>
+        <cc:permits rdf:resource="http://web.resource.org/cc/DerivativeWorks"/>
+        <cc:requires rdf:resource="http://web.resource.org/cc/ShareAlike"/>
+      </cc:License>
+    </rdf:RDF>
+  </metadata>
+  <g id="layer1">
+    <g>
+      <g opacity="0.7">
+        <path d="M 24 2.5 L 21.625 9.1875 C 22.399034 9.0641318 23.191406 9 24 9 C 24.808594 9 25.600966 9.0641317 26.375 9.1875 L 24 2.5 z M 8.8125 8.78125 L 11.84375 15.21875 C 12.779034 13.928569 13.928569 12.779034 15.21875 11.84375 L 8.8125 8.78125 z M 39.21875 8.78125 L 32.78125 11.84375 C 34.071431 12.779034 35.220966 13.928569 36.15625 15.21875 L 39.21875 8.78125 z M 9.1875 21.59375 L 2.5 23.96875 L 9.1875 26.34375 C 9.0673373 25.57952 9 24.797813 9 24 C 9 23.180625 9.0608858 22.377571 9.1875 21.59375 z M 38.8125 21.625 C 38.935868 22.399034 39 23.191406 39 24 C 39 24.808594 38.935868 25.600966 38.8125 26.375 L 45.5 24 L 38.8125 21.625 z M 11.84375 32.78125 L 8.8125 39.1875 L 15.21875 36.15625 C 13.928569 35.220966 12.779034 34.071431 11.84375 32.78125 z M 36.15625 32.78125 C 35.229789 34.05926 34.087617 35.194799 32.8125 36.125 L 39.21875 39.1875 L 36.15625 32.78125 z M 21.625 38.8125 L 24 45.5 L 26.375 38.8125 C 25.600966 38.935868 24.808594 39 24 39 C 23.191406 39 22.399034 38.935868 21.625 38.8125 z " fill="#fce94f" fill-opacity="1" stroke="#fcaf3e" stroke-width="0.73732895" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/>
+        <path d="M 24 5.25 L 22.65625 9.0625 C 23.098888 9.0231486 23.547187 9 24 9 C 24.452813 9 24.901112 9.0231486 25.34375 9.0625 L 24 5.25 z M 10.78125 10.75 L 12.5 14.375 C 13.071538 13.694089 13.724004 13.038745 14.40625 12.46875 L 10.78125 10.75 z M 37.25 10.75 L 33.625 12.46875 C 34.304675 13.038189 34.961811 13.695325 35.53125 14.375 L 37.25 10.75 z M 9.0625 22.625 L 5.28125 23.96875 L 9.0625 25.3125 C 9.024981 24.880146 9 24.442031 9 24 C 9 23.536406 9.0212735 23.077908 9.0625 22.625 z M 38.9375 22.65625 C 38.976851 23.098888 39 23.547187 39 24 C 39 24.452813 38.976851 24.901112 38.9375 25.34375 L 42.71875 24 L 38.9375 22.65625 z M 35.53125 33.59375 C 34.958293 34.27954 34.309985 34.957363 33.625 35.53125 L 37.25 37.25 L 35.53125 33.59375 z M 12.5 33.625 L 10.78125 37.21875 L 14.375 35.5 C 13.702932 34.935884 13.064116 34.297068 12.5 33.625 z M 22.65625 38.9375 L 24 42.71875 L 25.34375 38.9375 C 24.901112 38.976851 24.452813 39 24 39 C 23.547187 39 23.098888 38.976851 22.65625 38.9375 z " fill="none" fill-opacity="1" stroke="url(#radialGradient4081)" stroke-width="0.84646249" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/>
+      </g>
+      <g>
+        <g>
+          <path transform="matrix(0.778062,-1.061285,1.061287,0.778062,67.47952,3.641324)" d="M -22.5 -17.5 A 9.5 9.5 0 1 1  -41.5,-17.5 A 9.5 9.5 0 1 1  -22.5 -17.5 z" fill="#ffee54" fill-opacity="1" stroke="#fcaf3e" stroke-width="0.75991178" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/>
+          <path transform="matrix(1.244257,-0.167707,0.216642,1.251844,67.61648,40.527)" d="M -22.5 -17.5 A 9.5 9.5 0 1 1  -41.5,-17.5 A 9.5 9.5 0 1 1  -22.5 -17.5 z" fill="url(#radialGradient4020)" fill-opacity="1" stroke="none" stroke-width="1.01737845" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/>
+          <path transform="matrix(0.715791,-0.976349,0.97635,0.715792,64.00044,5.269544)" d="M -22.5 -17.5 A 9.5 9.5 0 1 1  -41.5,-17.5 A 9.5 9.5 0 1 1  -22.5 -17.5 z" fill="none" fill-opacity="1" stroke="url(#linearGradient3168)" stroke-width="0.82601947" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="1"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/examples/declarative/canvas/stockchart/contents/images/gloss.png b/examples/declarative/canvas/stockchart/contents/images/gloss.png
new file mode 100755
index 0000000000..5d370cd93d
--- /dev/null
+++ b/examples/declarative/canvas/stockchart/contents/images/gloss.png
diff --git a/examples/declarative/canvas/stockchart/contents/images/lineedit.png b/examples/declarative/canvas/stockchart/contents/images/lineedit.png
new file mode 100755
index 0000000000..2cc38dc35b
--- /dev/null
+++ b/examples/declarative/canvas/stockchart/contents/images/lineedit.png
diff --git a/examples/declarative/canvas/stockchart/contents/images/lineedit.sci b/examples/declarative/canvas/stockchart/contents/images/lineedit.sci
new file mode 100644
index 0000000000..054bff78be
--- /dev/null
+++ b/examples/declarative/canvas/stockchart/contents/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/declarative/canvas/stockchart/contents/images/quit.png b/examples/declarative/canvas/stockchart/contents/images/quit.png
new file mode 100755
index 0000000000..5bda1b6e0d
--- /dev/null
+++ b/examples/declarative/canvas/stockchart/contents/images/quit.png
diff --git a/examples/declarative/canvas/stockchart/contents/images/stripes.png b/examples/declarative/canvas/stockchart/contents/images/stripes.png
new file mode 100755
index 0000000000..9f36727ea4
--- /dev/null
+++ b/examples/declarative/canvas/stockchart/contents/images/stripes.png
diff --git a/examples/declarative/canvas/stockchart/contents/images/titlebar.png b/examples/declarative/canvas/stockchart/contents/images/titlebar.png
new file mode 100755
index 0000000000..51c90082d0
--- /dev/null
+++ b/examples/declarative/canvas/stockchart/contents/images/titlebar.png
diff --git a/examples/declarative/canvas/stockchart/contents/images/titlebar.sci b/examples/declarative/canvas/stockchart/contents/images/titlebar.sci
new file mode 100644
index 0000000000..0418d94cd6
--- /dev/null
+++ b/examples/declarative/canvas/stockchart/contents/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/declarative/canvas/stockchart/contents/images/toolbutton.png b/examples/declarative/canvas/stockchart/contents/images/toolbutton.png
new file mode 100755
index 0000000000..11310013ee
--- /dev/null
+++ b/examples/declarative/canvas/stockchart/contents/images/toolbutton.png
diff --git a/examples/declarative/canvas/stockchart/contents/images/toolbutton.sci b/examples/declarative/canvas/stockchart/contents/images/toolbutton.sci
new file mode 100644
index 0000000000..9e4f965307
--- /dev/null
+++ b/examples/declarative/canvas/stockchart/contents/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/declarative/canvas/stockchart/main.cpp b/examples/declarative/canvas/stockchart/main.cpp
index e10f287022..b1e7630d15 100644
--- a/examples/declarative/canvas/stockchart/main.cpp
+++ b/examples/declarative/canvas/stockchart/main.cpp
@@ -56,6 +56,8 @@ int main(int argc, char ** argv)
     view.showFullScreen();
     view.raise();
 
+    QObject::connect((QObject*)view.engine(), SIGNAL(quit()), (QObject*)&app, SLOT(quit()));
+
     return app.exec();
 }
 
diff --git a/examples/declarative/canvas/stockchart/model.cpp b/examples/declarative/canvas/stockchart/model.cpp
index 5c1e13807a..018da1c6e2 100644
--- a/examples/declarative/canvas/stockchart/model.cpp
+++ b/examples/declarative/canvas/stockchart/model.cpp
@@ -116,7 +116,8 @@ void StockModel::doRequest()
                      .arg(dataCycleString());
 
         qDebug() << "request stock data:" << query;
-         _manager->get(QNetworkRequest(QUrl(query)));
+        QNetworkReply* reply = _manager->get(QNetworkRequest(QUrl(query)));
+        connect(reply, SIGNAL(downloadProgress(qint64,qint64)), SIGNAL(downloadProgress(qint64,qint64)));
     }
 }
 
diff --git a/examples/declarative/canvas/stockchart/model.h b/examples/declarative/canvas/stockchart/model.h
index c7a0235021..ba5f3a86fc 100644
--- a/examples/declarative/canvas/stockchart/model.h
+++ b/examples/declarative/canvas/stockchart/model.h
@@ -142,6 +142,7 @@ signals:
     void startDateChanged();
     void endDateChanged();
     void dataCycleChanged();
+    void downloadProgress(qint64 bytesReceived, qint64 bytesTotal);
 
 public slots:
     void requestData();
diff --git a/examples/declarative/canvas/stockchart/stock.qml b/examples/declarative/canvas/stockchart/stock.qml
index 4117932c0a..5011237833 100644
--- a/examples/declarative/canvas/stockchart/stock.qml
+++ b/examples/declarative/canvas/stockchart/stock.qml
@@ -43,15 +43,44 @@ import "contents"
 
 Rectangle {
     id:container
-    width: 1920; height: 1440
+    width: 1920; height: 1200
+    color: "#343434";
+    Image { source: "contents/images/stripes.png"; fillMode: Image.Tile; anchors.fill: parent; opacity: 1 }
+
+
+    TitleBar {
+        id: titleBar
+        width: parent.width
+        anchors.top : container.top
+        height: 40
+        opacity: 0.9
+    }
+
     StockModel {
         id:stockModel
         dataCycle: StockModel.Daily
+        function dataCycleName() {
+            if (dataCycle === StockModel.Weekly)
+                return "Weekly";
+            else if (dataCycle === StockModel.Monthly)
+                return "Monthly";
+            return "Daily";
+        }
+
         onDataChanged: {
             if (view.viewType == "chart") {
                 canvas.requestPaint();
             }
         }
+        onDownloadProgress: {
+            if (bytesReceived == bytesTotal && bytesTotal != -1) {
+                progress.opacity = 0;
+            } else {
+                progress.opacity = 0.8;
+                progress.text = "downloading " + stockModel.dataCycleName() + " data ..."+ Math.round(bytesReceived/1000) + " KB";
+            }
+        }
+
         property string description:"";
     }
 
@@ -60,27 +89,22 @@ Rectangle {
     Rectangle {
         id: header
         width: parent.width
-        height: childrenRect.height
+        height: 20
         color: "steelblue"
-
-        Text {
-            id:t
-            font.pointSize:15
-            horizontalAlignment:Text.AlignHCenter
-            font.bold: true
-            font.underline:true
-        }
-
-        function updateCurrent(price)
-        {
-            if (price !== undefined) {
-                t.text =Qt.formatDate(price.date, "yyyy-MM-dd") + " OPEN:"
-                        + Math.round(price.openPrice*100)/100 + " HIGH:"
-                        + Math.round(price.highPrice*100)/100 + " LOW:"
-                        + Math.round(price.lowPrice*100)/100 + " CLOSE:"
-                        + Math.round(price.closePrice*100)/100 + " VOLUME:"
-                        + price.volume + " ADJ:"
-                        + Math.round(price.adjustedPrice*100)/100;
+        opacity: 0
+        Row {
+            spacing: 2
+            Text {
+                id:t
+                font.pointSize:15
+                horizontalAlignment:Text.AlignHCenter
+                font.bold: true
+                font.underline:true
+            }
+            Rectangle {
+              height:20
+              width:50
+              Text {text:"Stock list"; font.pointSize:15; font.bold: true}
             }
         }
     }
@@ -88,14 +112,20 @@ Rectangle {
     ListView {
         id:stockList
         width: parent.width
-        height: container.height
         anchors.bottom: container.bottom
+        anchors.top : titleBar.bottom
         focus: true
         keyNavigationWraps: true
         spacing:1
         opacity: 1
         model: stocks
 
+        Component.onCompleted: opacity = 0.9;
+        onOpacityChanged: {
+            titleBar.title = "Top 100 NASDAQ stocks"
+        }
+
+
         delegate : Rectangle {
                 height: 30
                 width: view.width
@@ -116,6 +146,7 @@ Rectangle {
                         stockModel.description = "NASDAQ:" + stockId + " (" + name + ")";
                         view.opacity = 1;
                         view.viewType = "chart";
+                        canvas.opacity = 0.7;
                     }
                     onClicked: stockList.currentIndex = index
                 }//mousearea
@@ -147,6 +178,13 @@ Rectangle {
         property int topIndex:indexAt(0,contentY);
         property int bottomIndex:indexAt(0, contentY+height);
 
+        onCountChanged:  {
+
+            titleBar.title = stockModel.description + " " + Qt.formatDate(stockModel.startDate, "yyyy-MM-dd") + " - " +
+                    Qt.formatDate(stockModel.endDate, "yyyy-MM-dd") + " " + stockModel.dataCycleName() +
+                             " records:" + view.count;
+
+        }
 
         Component {
             id: listDelegate
@@ -240,21 +278,11 @@ Rectangle {
                 view.orientation = ListView.Horizontal;
                 view.delegate = chartDelegate;
                 //comment.opacity = 0.6;
-                var dataCycle = "Daily";
-
-                if (stockModel.dataCycle === StockModel.Weekly)
-                    dataCycle = "Weekly";
-                else if (stockModel.dataCycle === StockModel.Monthly)
-                    dataCycle = "Monthly";
-
-                comment.text = stockModel.description + "\n" +
-                        Qt.formatDate(stockModel.startDate, "yyyy-MM-dd") + " - " +
-                        Qt.formatDate(stockModel.endDate, "yyyy-MM-dd") + " " + dataCycle;
 
                 view.opacity = 1;
                 view.height = 30
 
-                canvas.opacity = 1;
+                canvas.opacity = 0.7;
                 canvas.requestPaint();
             } else {
                 viewType = "list";
@@ -263,7 +291,7 @@ Rectangle {
 
 
         onCurrentIndexChanged: {
-            header.updateCurrent(stockModel.stockPriceAtIndex(view.currentIndex));
+            //header.updateCurrent(stockModel.stockPriceAtIndex(view.currentIndex));
             if (viewType == "chart") {
                 canvas.first = Math.round(view.currentIndex - view.currentIndex / canvas.scaleX);
                 canvas.last = Math.round(view.currentIndex + (view.count - view.currentIndex) / canvas.scaleX);
@@ -310,11 +338,12 @@ Rectangle {
 
     Canvas {
         id:canvas
-        anchors.top : header.bottom
+        anchors.top : titleBar.bottom
         anchors.bottom : view.top
         width:container.width;
         opacity:0
-
+        property bool running:false
+        property int frames:first
         property int mouseX:0;
         property int mouseY:0;
         property int mousePressedX:0;
@@ -337,26 +366,85 @@ Rectangle {
            color:"white"
            opacity: 0.7
            focus:false
+           text: stockModel.description
+           function updateCurrent(price)
+           {
+               if (price !== undefined) {
+                   text =stockModel.description + "\n"
+                           + Qt.formatDate(price.date, "yyyy-MM-dd") + " OPEN:"
+                           + Math.round(price.openPrice*100)/100 + " HIGH:"
+                           + Math.round(price.highPrice*100)/100 + " LOW:"
+                           + Math.round(price.lowPrice*100)/100 + " CLOSE:"
+                           + Math.round(price.closePrice*100)/100 + " VOLUME:"
+                           + price.volume;
+               }
+           }
         }
 
-//        Text {
-//            id:priceAxis
-//            x:25
-//            y:25
-//            font.pointSize: 15
-//            color:"yellow"
-//            opacity: 0.7
-//            focus: false
-//        }
-//        Text {
-//            id:volumeAxis
-//            x:canvas.width - 25
-//            y:25
-//            font.pointSize: 15
-//            color:"yellow"
-//            opacity: 0.7
-//        }
+        Text {
+            id:priceAxis
+            x:25
+            y:25
+            font.pointSize: 15
+            color:"yellow"
+            opacity: 0.7
+            focus: false
+        }
+        Text {
+            id:volumeAxis
+            x:canvas.width - 200
+            y:25
+            font.pointSize: 15
+            color:"yellow"
+            opacity: 0.7
+        }
 
+        Rectangle {
+            id:progress
+            x:canvas.width/2 - 100
+            y:canvas.height/2
+            width:childrenRect.width
+            height: childrenRect.height
+            opacity: 0
+            color:"white"
+            property string text;
+            Text {
+                text:parent.text
+                font.pointSize: 20
+            }
+        }
+
+        Button {
+            id:runButton
+            text:"Run this chart"
+            y:0
+            x:canvas.width/2 - 50
+            opacity: 0.5
+            onClicked:  {
+                if (canvas.running) {
+                    canvas.running = false;
+                    canvas.frames = canvas.first;
+                    canvas.requestPaint();
+                    text = "Run this chart";
+                    comment.text = stockModel.description;
+                } else {
+                    text = " Stop running ";
+                    canvas.runChart();
+                }
+            }
+        }
+        Button {
+            id:returnButton
+            text:"Stocks"
+            y:0
+            anchors.left : runButton.right
+            anchors.leftMargin : 20
+            opacity: 0.5
+            onClicked:  {
+                stockList.opacity = 1;
+                canvas.opacity = 0;
+            }
+        }
         PinchArea {
             anchors.fill: parent
             onPinchUpdated : {
@@ -441,9 +529,14 @@ Rectangle {
             }
         }
 
+        function runChart() {
+           canvas.running = true;
+            requestPaint();
+        }
+
         function showPriceAt(x) {
             var w = (view.width/view.count)*canvas.scaleX;
-            header.updateCurrent(stockModel.stockPriceAtIndex(canvas.first + Math.round(x/w)));
+            //header.updateCurrent(stockModel.stockPriceAtIndex(canvas.first + Math.round(x/w)));
             //console.log("x:" + x + " w:" + w + " index:" + (canvas.first + Math.round(x/w)));
         }
 
@@ -455,7 +548,7 @@ Rectangle {
             ctx.beginPath();
 
             //price x axis
-//            priceAxis.text = "price:" + Math.round(highest);
+            priceAxis.text = "price:" + Math.round(highest);
             ctx.font = "bold 12px sans-serif";
 
             ctx.strokeText("price", 25, 25);
@@ -479,7 +572,8 @@ Rectangle {
 
 
             var w = canvas.width/points.length;
-            for (var i = 0; i < points.length; i++) {
+            var end = canvas.running? canvas.frames - canvas.first :points.length;
+            for (var i = 0; i < end; i++) {
                 var x = points[i].x;
                 var y = points[i][price];
                 y += canvas.movedY;
@@ -498,7 +592,8 @@ Rectangle {
         {
             ctx.globalAlpha = 0.4;
             ctx.lineWidth = 2;
-            for (var i = 0; i < points.length; i++) {
+            var end = canvas.running? canvas.frames - canvas.first :points.length;
+            for (var i = 0; i < end; i++) {
                 var x = points[i].x;
                 var open = canvas.height * (1 - points[i].open/highest) - canvas.movedY;
                 var close = canvas.height * (1 - points[i].close/highest) - canvas.movedY;
@@ -540,7 +635,7 @@ Rectangle {
             ctx.lineWidth = 1;
 
             //volume x axis
-//            volumeAxis.text = "volume:" + Math.round(highest);
+            volumeAxis.text = "volume:" + Math.round(highest/(1000*100))  + "M";
             for (var j = 1; j < 30; j++) {
                 var val = (highest * j) / 30;
                 val = canvas.height * (1 - val/highest);
@@ -558,7 +653,8 @@ Rectangle {
             ctx.lineTo(canvas.width - 10, canvas.height);
             ctx.stroke();
 
-            for (var i = 0; i < points.length; i++) {
+            var end = canvas.running? canvas.frames - canvas.first :points.length;
+            for (var i = 0; i < end; i++) {
                 var x = points[i].x;
                 var y = points[i][price];
                 y = canvas.height * (1 - y/highest);
@@ -566,6 +662,27 @@ Rectangle {
             }
         }
 
+        onPainted : {
+            if (canvas.running) {
+                if (frames >= last) {
+                    canvas.running = false;
+                    canvas.frames = first;
+                    runButton.text = "Run this chart";
+                    comment.text = stockModel.description;
+                    requestPaint();
+                } else {
+                    frames += Math.round(view.count / 100);
+                    if (frames > last) frames = last;
+                    var price = stockModel.stockPriceAtIndex(frames);
+                    if (price) {
+                        comment.updateCurrent(price);
+                    }
+
+                    requestPaint();
+                }
+            }
+        }
+
         onPaint: {
             if (view.currentIndex <= 0)
                 first = 0;
diff --git a/examples/declarative/canvas/stockchart/stockchart.pro b/examples/declarative/canvas/stockchart/stockchart.pro
index 7101c4c14d..832b2ea728 100644
--- a/examples/declarative/canvas/stockchart/stockchart.pro
+++ b/examples/declarative/canvas/stockchart/stockchart.pro
@@ -12,4 +12,9 @@ CONFIG += console
 
 OTHER_FILES += \
     stock.qml \
-    contents/Stocks.qml
+    contents/Stocks.qml \
+    contents/ScrollBar.qml \
+    contents/TitleBar.qml \
+    contents/Button.qml \
+    contents/ToolBar.qml
+
diff --git a/examples/declarative/canvas/stockchart/stockchart.qrc b/examples/declarative/canvas/stockchart/stockchart.qrc
index 68702ab7a1..1793bda12d 100644
--- a/examples/declarative/canvas/stockchart/stockchart.qrc
+++ b/examples/declarative/canvas/stockchart/stockchart.qrc
@@ -2,6 +2,20 @@
 <qresource>
     <file>stock.qml</file>
     <file>contents/Stocks.qml</file>
+    <file>contents/TitleBar.qml</file>
+    <file>contents/ToolBar.qml</file>
+    <file>contents/Button.qml</file>
+    <file>contents/images/button.png</file>
+    <file>contents/images/button-pressed.png</file>
+    <file>contents/images/gloss.png</file>
+    <file>contents/images/lineedit.png</file>
+    <file>contents/images/lineedit.sci</file>
+    <file>contents/images/quit.png</file>
+    <file>contents/images/stripes.png</file>
+    <file>contents/images/titlebar.png</file>
+    <file>contents/images/titlebar.sci</file>
+    <file>contents/images/toolbutton.png</file>
+    <file>contents/images/toolbutton.sci</file>
 </qresource>
 </RCC>