QMLBarchart example improved a bit

+ works on Android now

Change-Id: If5cd81548c40ddd6d57fcd1709d9e7c9d88539fc
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@digia.com>

4 files changed, 92 insertions, 59 deletions

diff --git a/examples/qmlbarchart/qml/qmlbarchart/button.qml b/examples/qmlbarchart/qml/qmlbarchart/button.qml
new file mode 100644
index 00000000..7fdc3ff1
--- /dev/null
+++ b/examples/qmlbarchart/qml/qmlbarchart/button.qml
@@ -0,0 +1,59 @@
+/****************************************************************************
+**
+** Copyright (C) 2013 Digia Plc
+** All rights reserved.
+** For any questions to Digia, please use contact form at http://qt.digia.com
+**
+** This file is part of the QtDataVis3D module.
+**
+** Licensees holding valid Qt Enterprise licenses may use this file in
+** accordance with the Qt Enterprise License Agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.
+**
+** If you have questions regarding the use of this file, please use
+** contact form at http://qt.digia.com
+**
+****************************************************************************/
+
+import QtQuick 2.1
+
+Item {
+    id: button
+
+    property alias text: buttonText.text
+    property alias color: buttonRectangle.color
+    property alias radius: buttonRectangle.radius
+
+    property color defaultColor: "wheat"
+    property color pressedColor: "tan"
+    property color borderColor: "sienna"
+
+    signal clicked
+
+    height: 90
+
+    Rectangle {
+        id: buttonRectangle
+        width: parent.width
+        height: parent.height
+        color: defaultColor
+        radius: 5
+        border.color: borderColor
+
+        Text {
+            id: buttonText
+            wrapMode: Text.WordWrap
+            verticalAlignment: Text.AlignVCenter
+            horizontalAlignment: Text.AlignHCenter
+            anchors.fill: parent
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            onPressed: buttonRectangle.color = pressedColor
+            onReleased: buttonRectangle.color = defaultColor
+            onClicked: button.clicked()
+        }
+    }
+}
diff --git a/examples/qmlbarchart/qml/qmlbarchart/main.qml b/examples/qmlbarchart/qml/qmlbarchart/main.qml
index 01eafcad..44ad36ca 100644
--- a/examples/qmlbarchart/qml/qmlbarchart/main.qml
+++ b/examples/qmlbarchart/qml/qmlbarchart/main.qml
@@ -17,9 +17,9 @@
 ****************************************************************************/
 
 import QtQuick 2.1
-import QtQuick.Window 2.1
 import QtQuick.Controls 1.0
 import com.digia.QtDataVis3D 1.0
+import "."
 
 Item {
     id: mainview
@@ -123,6 +123,7 @@ Item {
             shadowQuality: Bars3D.ShadowNone
             selectionMode: Bars3D.ModeItem
             labelTransparency: Bars3D.TransparencyNone
+            theme: Bars3D.ThemeBrownSand
             rows: 5
             columns: 12
             mapping: valueMapping
@@ -152,72 +153,43 @@ Item {
         id: tableView
         x: 0
         y: 0
-        width: 270
-        height: 500
-        TableViewColumn{ role: "year"  ; title: "Year" ; width: 40 }
+        width: 300
+        height: parent.height - mappingToggle.height - shadowToggle.height
+        TableViewColumn{ role: "year"  ; title: "Year" ; width: 80 }
         TableViewColumn{ role: "month" ; title: "Month" ; width: 80 }
         TableViewColumn{ role: "expenses" ; title: "Expenses" ; width: 70 }
-        TableViewColumn{ role: "income" ; title: "Income" ; width: 60 }
+        TableViewColumn{ role: "income" ; title: "Income" ; width: 70 }
         model: dataModel
     }
 
-    Rectangle {
-        id: shadowToggle
-        color: "#FFFFFF"
-        x: 0
-        y: tableView.height
+    Button {
+        id: mappingToggle
+        anchors.bottom: parent.bottom
         width: tableView.width
-        height: 50
-
-        TextArea {
-            id: shadowButtonText
-            text: "Toggle Shadows"
-            anchors.fill: parent
-            textColor: "#000000"
-        }
-
-        MouseArea {
-            anchors.fill: parent
-            onClicked: {
-                if (testchart.shadowQuality == Bars3D.ShadowNone) {
-                    testchart.shadowQuality = Bars3D.ShadowLow;
-                    shadowButtonText.textColor = "#FFFFFF";
-                    shadowToggle.color = "#000000";
-                } else {
-                    testchart.shadowQuality = Bars3D.ShadowNone;
-                    shadowButtonText.textColor = "#000000";
-                    shadowToggle.color = "#FFFFFF";
-                }
+        text: "Show Income"
+        onClicked: {
+            if (valueMapping.valueRole == "expenses") {
+                valueMapping.valueRole = "income"
+                text = "Show Expenses"
+                testchart.valueAxis = incomeAxis
+            } else {
+                valueMapping.valueRole = "expenses"
+                text = "Show Income"
+                testchart.valueAxis = expensesAxis
             }
         }
     }
-    Rectangle {
-        id: mappingToggle
-        color: "#FFFFFF"
-        x: 0
-        y: shadowToggle.height + shadowToggle.y
-        width: shadowToggle.width
-        height: 50
-
-        TextArea {
-            id: mappingButtonText
-            text: "Show Income"
-            anchors.fill: parent
-            textColor: "#000000"
-        }
 
-        MouseArea {
-            anchors.fill: parent
-            onClicked: {
-                if (valueMapping.valueRole == "expenses") {
-                    valueMapping.valueRole = "income"
-                    mappingButtonText.text = "Show Expenses"
-                    testchart.valueAxis = incomeAxis
-                } else {
-                    valueMapping.valueRole = "expenses"
-                    mappingButtonText.text = "Show Income"
-                    testchart.valueAxis = expensesAxis
-                }
+    Button {
+        id: shadowToggle
+        anchors.bottom: mappingToggle.top
+        width: tableView.width
+        text: "Toggle Shadows"
+        onClicked: {
+            if (testchart.shadowQuality == Bars3D.ShadowNone) {
+                testchart.shadowQuality = Bars3D.ShadowLow;
+            } else {
+                testchart.shadowQuality = Bars3D.ShadowNone;
             }
         }
     }
diff --git a/examples/qmlbarchart/qmlbarchart.pro b/examples/qmlbarchart/qmlbarchart.pro
index 3d716438..b74b8558 100644
--- a/examples/qmlbarchart/qmlbarchart.pro
+++ b/examples/qmlbarchart/qmlbarchart.pro
@@ -2,6 +2,8 @@
     error( "Couldn't find the examples.pri file!" )
 }
 
+QT += widgets
+
 # Add more folders to ship with the application, here
 folder_01.source = qml/qmlbarchart
 folder_01.target = qml
@@ -17,5 +19,4 @@ SOURCES += main.cpp
 include(qtquick2applicationviewer/qtquick2applicationviewer.pri)
 qtcAddDeployment()
 
-RESOURCES += \
-    qmlbarchart.qrc
+RESOURCES += qmlbarchart.qrc
diff --git a/examples/qmlbarchart/qmlbarchart.qrc b/examples/qmlbarchart/qmlbarchart.qrc
index b96401d5..8564db14 100644
--- a/examples/qmlbarchart/qmlbarchart.qrc
+++ b/examples/qmlbarchart/qmlbarchart.qrc
@@ -1,5 +1,6 @@
 <RCC>
     <qresource prefix="/qml">
         <file alias="main.qml">qml/qmlbarchart/main.qml</file>
+        <file alias="Button.qml">qml/qmlbarchart/button.qml</file>
     </qresource>
 </RCC>