Improve declarative calculator example.

13 files changed, 238 insertions, 227 deletions

diff --git a/demos/declarative/calculator/CalcButton.qml b/demos/declarative/calculator/CalcButton.qml
deleted file mode 100644
index a125346..0000000
--- a/demos/declarative/calculator/CalcButton.qml
+++ /dev/null
@@ -1,41 +0,0 @@
-import Qt 4.7
-
-Rectangle {
-    property alias operation: label.text
-    property bool toggable: false
-    property bool toggled: false
-    signal clicked
-
-    id: button; width: 50; height: 30
-    border.color: palette.mid; radius: 6
-    gradient: Gradient {
-        GradientStop { id: gradientStop1; position: 0.0; color: Qt.lighter(palette.button) }
-        GradientStop { id: gradientStop2; position: 1.0; color: palette.button }
-    }
-
-    Text { id: label; anchors.centerIn: parent; color: palette.buttonText }
-
-    MouseArea {
-        id: clickRegion
-        anchors.fill: parent
-        onClicked: {
-            doOp(operation);
-            button.clicked();
-            if (!button.toggable) return;
-            button.toggled ? button.toggled = false : button.toggled = true
-        }
-    }
-
-    states: [
-        State {
-            name: "Pressed"; when: clickRegion.pressed == true
-            PropertyChanges { target: gradientStop1; color: palette.dark }
-            PropertyChanges { target: gradientStop2; color: palette.button }
-        },
-        State {
-            name: "Toggled"; when: button.toggled == true
-            PropertyChanges { target: gradientStop1; color: palette.dark }
-            PropertyChanges { target: gradientStop2; color: palette.button }
-        }
-    ]
-}
diff --git a/demos/declarative/calculator/Core/Button.qml b/demos/declarative/calculator/Core/Button.qml
new file mode 100644
index 0000000..8948adc
--- /dev/null
+++ b/demos/declarative/calculator/Core/Button.qml
@@ -0,0 +1,39 @@
+import Qt 4.7
+
+BorderImage {
+    id: button
+
+    property alias operation: buttonText.text
+    property string color: ""
+
+    signal clicked
+
+    source: "images/button-" + color + ".png"; clip: true
+    border { left: 10; top: 10; right: 10; bottom: 10 }
+
+    Rectangle {
+        id: shade
+        anchors.fill: button; radius: 10; color: "black"; opacity: 0
+    }
+
+    Text {
+        id: buttonText
+        anchors.centerIn: parent; anchors.verticalCenterOffset: -1
+        font.pixelSize: parent.width > parent.height ? parent.height * .5 : parent.width * .5
+        style: Text.Sunken; color: "white"; styleColor: "black"; smooth: true
+    }
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        onClicked: {
+            doOp(operation)
+            button.clicked()
+        }
+    }
+
+    states: State {
+        name: "pressed"; when: mouseArea.pressed == true
+        PropertyChanges { target: shade; opacity: .4 }
+    }
+}
diff --git a/demos/declarative/calculator/Core/Display.qml b/demos/declarative/calculator/Core/Display.qml
new file mode 100644
index 0000000..b98c44b
--- /dev/null
+++ b/demos/declarative/calculator/Core/Display.qml
@@ -0,0 +1,27 @@
+import Qt 4.7
+
+BorderImage {
+    id: image
+
+    property alias text : displayText.text
+    property alias currentOperation : operationText
+
+    source: "images/display.png"
+    border { left: 10; top: 10; right: 10; bottom: 10 }
+
+    Text {
+        id: displayText
+        anchors {
+            right: parent.right; verticalCenter: parent.verticalCenter; verticalCenterOffset: -1
+            rightMargin: 6; left: operationText.right
+        }
+        font.pixelSize: parent.height * .6; text: "0"; horizontalAlignment: Text.AlignRight; elide: Text.ElideRight
+        color: "#343434"; smooth: true; font.bold: true
+    }
+    Text {
+        id: operationText
+        font.bold: true; font.pixelSize: parent.height * .7
+        color: "#343434"; smooth: true
+        anchors { left: parent.left; leftMargin: 6; verticalCenterOffset: -3; verticalCenter: parent.verticalCenter }
+    }
+}
diff --git a/demos/declarative/calculator/Core/calculator.js b/demos/declarative/calculator/Core/calculator.js
new file mode 100644
index 0000000..2b19de8
--- /dev/null
+++ b/demos/declarative/calculator/Core/calculator.js
@@ -0,0 +1,91 @@
+
+var curVal = 0
+var memory = 0
+var lastOp = ""
+var timer = 0
+
+function disabled(op) {
+    if (op == "." && display.text.toString().search(/\./) != -1) {
+        return true
+    } else if (op == squareRoot &&  display.text.toString().search(/-/) != -1) {
+        return true
+    } else {
+        return false
+    }
+}
+
+function doOperation(op) {
+    if (disabled(op)) {
+        return
+    }
+
+    if (op.toString().length==1 && ((op >= "0" && op <= "9") || op==".") ) {
+        if (display.text.toString().length >= 14)
+            return; // No arbitrary length numbers
+        if (lastOp.toString().length == 1 && ((lastOp >= "0" && lastOp <= "9") || lastOp == ".") ) {
+            display.text = display.text + op.toString()
+        } else {
+            display.text = op
+        }
+        lastOp = op
+        return
+    }
+    lastOp = op
+
+    if (display.currentOperation.text == "+") {
+        display.text = Number(display.text.valueOf()) + Number(curVal.valueOf())
+    } else if (display.currentOperation.text == "-") {
+        display.text = Number(curVal) - Number(display.text.valueOf())
+    } else if (display.currentOperation.text == multiplication) {
+        display.text = Number(curVal) * Number(display.text.valueOf())
+    } else if (display.currentOperation.text == division) {
+        display.text = Number(Number(curVal) / Number(display.text.valueOf())).toString()
+    } else if (display.currentOperation.text == "=") {
+    }
+
+    if (op == "+" || op == "-" || op == multiplication || op == division) {
+        display.currentOperation.text = op
+        curVal = display.text.valueOf()
+        return
+    }
+
+    curVal = 0
+    display.currentOperation.text = ""
+
+    if (op == "1/x") {
+        display.text = (1 / display.text.valueOf()).toString()
+    } else if (op == "^2") {
+        display.text = (display.text.valueOf() * display.text.valueOf()).toString()
+    } else if (op == "Abs") {
+        display.text = (Math.abs(display.text.valueOf())).toString()
+    } else if (op == "Int") {
+        display.text = (Math.floor(display.text.valueOf())).toString()
+    } else if (op == plusminus) {
+        display.text = (display.text.valueOf() * -1).toString()
+    } else if (op == squareRoot) {
+        display.text = (Math.sqrt(display.text.valueOf())).toString()
+    } else if (op == "mc") {
+        memory = 0;
+    } else if (op == "m+") {
+        memory += display.text.valueOf()
+    } else if (op == "mr") {
+        display.text = memory.toString()
+    } else if (op == "m-") {
+        memory = display.text.valueOf()
+    } else if (op == leftArrow) {
+        display.text = display.text.toString().slice(0, -1)
+    } else if (op == "C") {
+        display.text = "0"
+    } else if (op == "AC") {
+        curVal = 0
+        memory = 0
+        lastOp = ""
+        display.text ="0"
+    }
+
+    if (op == rotateLeft)
+        main.state = 'rotated'
+    if (op == rotateRight)
+        main.state = ''
+}
+
diff --git a/demos/declarative/calculator/Core/images/button-.png b/demos/declarative/calculator/Core/images/button-.png
new file mode 100644
index 0000000..544e514
--- /dev/null
+++ b/demos/declarative/calculator/Core/images/button-.png
diff --git a/demos/declarative/calculator/Core/images/button-blue.png b/demos/declarative/calculator/Core/images/button-blue.png
new file mode 100644
index 0000000..5f92de3
--- /dev/null
+++ b/demos/declarative/calculator/Core/images/button-blue.png
diff --git a/demos/declarative/calculator/Core/images/button-green.png b/demos/declarative/calculator/Core/images/button-green.png
new file mode 100644
index 0000000..36c9391
--- /dev/null
+++ b/demos/declarative/calculator/Core/images/button-green.png
diff --git a/demos/declarative/calculator/Core/images/button-purple.png b/demos/declarative/calculator/Core/images/button-purple.png
new file mode 100644
index 0000000..347cbbe
--- /dev/null
+++ b/demos/declarative/calculator/Core/images/button-purple.png
diff --git a/demos/declarative/calculator/Core/images/button-red.png b/demos/declarative/calculator/Core/images/button-red.png
new file mode 100644
index 0000000..3b33589
--- /dev/null
+++ b/demos/declarative/calculator/Core/images/button-red.png
diff --git a/demos/declarative/calculator/Core/images/display.png b/demos/declarative/calculator/Core/images/display.png
new file mode 100644
index 0000000..9507f43
--- /dev/null
+++ b/demos/declarative/calculator/Core/images/display.png
diff --git a/demos/declarative/calculator/Core/qmldir b/demos/declarative/calculator/Core/qmldir
new file mode 100644
index 0000000..a926b93
--- /dev/null
+++ b/demos/declarative/calculator/Core/qmldir
@@ -0,0 +1,2 @@
+Button Button.qml
+Display Display.qml
diff --git a/demos/declarative/calculator/calculator.js b/demos/declarative/calculator/calculator.js
deleted file mode 100644
index f172daf..0000000
--- a/demos/declarative/calculator/calculator.js
+++ /dev/null
@@ -1,87 +0,0 @@
-
-var curVal = 0;
-var memory = 0;
-var lastOp = "";
-var timer = 0;
-
-function disabled(op) {
-    if (op == "." && curNum.text.toString().search(/\./) != -1) {
-        return true;
-    } else if (op == "Sqrt" &&  curNum.text.toString().search(/-/) != -1) {
-        return true;
-    } else {
-        return false;
-    }
-}
-
-function doOperation(op) {
-    if (disabled(op)) {
-        return;
-    }
-
-    if (op.toString().length==1 && ((op >= "0" && op <= "9") || op==".") ) {
-        if (curNum.text.toString().length >= 14)
-            return; // No arbitrary length numbers
-        if (lastOp.toString().length == 1 && ((lastOp >= "0" && lastOp <= "9") || lastOp==".") ) {
-            curNum.text = curNum.text + op.toString();
-        } else {
-            curNum.text = op;
-        }
-        lastOp = op;
-        return;
-    }
-    lastOp = op;
-
-    // Pending operations
-    if (currentOperation.text == "+") {
-        curNum.text = Number(curNum.text.valueOf()) + Number(curVal.valueOf());
-    } else if (currentOperation.text == "-") {
-        curNum.text = Number(curVal) - Number(curNum.text.valueOf());
-    } else if (currentOperation.text == "x") {
-        curNum.text = Number(curVal) * Number(curNum.text.valueOf());
-    } else if (currentOperation.text == "/") {
-        curNum.text = Number(Number(curVal) / Number(curNum.text.valueOf())).toString();
-    } else if (currentOperation.text == "=") {
-    }
-
-    if (op == "+" || op == "-" || op == "x" || op == "/") {
-        currentOperation.text = op;
-        curVal = curNum.text.valueOf();
-        return;
-    }
-    curVal = 0;
-    currentOperation.text = "";
-
-    // Immediate operations
-    if (op == "1/x") { // reciprocal
-        curNum.text = (1 / curNum.text.valueOf()).toString();
-    } else if (op == "^2") { // squared
-        curNum.text = (curNum.text.valueOf() * curNum.text.valueOf()).toString();
-    } else if (op == "Abs") {
-        curNum.text = (Math.abs(curNum.text.valueOf())).toString();
-    } else if (op == "Int") {
-        curNum.text = (Math.floor(curNum.text.valueOf())).toString();
-    } else if (op == "+/-") { // plus/minus
-        curNum.text = (curNum.text.valueOf() * -1).toString();
-    } else if (op == "Sqrt") { // square root
-        curNum.text = (Math.sqrt(curNum.text.valueOf())).toString();
-    } else if (op == "MC") { // memory clear
-        memory = 0;
-    } else if (op == "M+") { // memory increment
-        memory += curNum.text.valueOf();
-    } else if (op == "MR") { // memory recall
-        curNum.text = memory.toString();
-    } else if (op == "MS") { // memory set
-        memory = curNum.text.valueOf();
-    } else if (op == "Bksp") {
-        curNum.text = curNum.text.toString().slice(0, -1);
-    } else if (op == "C") {
-        curNum.text = "0";
-    } else if (op == "AC") {
-        curVal = 0;
-        memory = 0;
-        lastOp = "";
-        curNum.text ="0";
-    }
-}
-
diff --git a/demos/declarative/calculator/calculator.qml b/demos/declarative/calculator/calculator.qml
index b8e506e..fc2b95a 100644
--- a/demos/declarative/calculator/calculator.qml
+++ b/demos/declarative/calculator/calculator.qml
@@ -1,126 +1,106 @@
 import Qt 4.7
-import "calculator.js" as CalcEngine
+import "Core"
+import "Core/calculator.js" as CalcEngine
 
 Rectangle {
-    width: 320; height: 270; color: palette.window
+    id: window
 
-    function doOp(operation) { CalcEngine.doOperation(operation); }
+    width: 480; height: 360
+    color: "#282828"
 
-    SystemPalette { id: palette }
+    property string rotateLeft: "\u2939"
+    property string rotateRight: "\u2935"
+    property string leftArrow: "\u2190"
+    property string division : "\u00f7"
+    property string multiplication : "\u00d7"
+    property string squareRoot : "\u221a"
+    property string plusminus : "\u00b1"
 
-    Column {
-        x: 2; spacing: 10;
+    function doOp(operation) { CalcEngine.doOperation(operation) }
 
-        Rectangle {
-            id: container
-            width: 316; height: 50
-            border.color: palette.dark; color: palette.base
+    Item {
+        id: main
+        state: (runtime.orientation == Orientation.Portrait) ? '' : 'rotated'
+        width: parent.width; height: parent.height; anchors.centerIn: parent
 
-            Text {
-                id: curNum
-                font.bold: true; font.pointSize: 16
-                color: palette.text
-                anchors.right: container.right
-                anchors.rightMargin: 5
-                anchors.verticalCenter: container.verticalCenter
-            }
+        Column {
+            id: box; spacing: 8
 
-            Text {
-                id: currentOperation
-                color: palette.text
-                font.bold: true; font.pointSize: 16
-                anchors.left: container.left
-                anchors.leftMargin: 5
-                anchors.verticalCenter: container.verticalCenter
-            }
-        }
+            anchors { fill: parent; topMargin: 6; bottomMargin: 6; leftMargin: 6; rightMargin: 6 }
 
-        Item {
-            width: 320; height: 30
-
-            CalcButton {
-                id: advancedCheckBox
-                x: 55; width: 206
-                operation: "Advanced Mode"
-                toggable: true
+            Row {
+                Display { id: display; width: box.width; height: 64 }
             }
-        }
 
-        Item {
-            width: 320; height: 160
+            Column {
+                id: column; spacing: 6
 
-            Item {
-                id: basicButtons
-                x: 55; width: 160; height: 160
+                property real h: ((box.height - 72) / 6) - ((spacing * (6 - 1)) / 6)
 
-                CalcButton { operation: "Bksp"; id: bksp; width: 67; opacity: 0 }
-                CalcButton { operation: "C"; id: c; width: 76 }
-                CalcButton { operation: "AC"; id: ac; x: 78; width: 76 }
-
-                Grid {
-                    id: numKeypad; y: 32; spacing: 2; columns: 3
-
-                    CalcButton { operation: "7" }
-                    CalcButton { operation: "8" }
-                    CalcButton { operation: "9" }
-                    CalcButton { operation: "4" }
-                    CalcButton { operation: "5" }
-                    CalcButton { operation: "6" }
-                    CalcButton { operation: "1" }
-                    CalcButton { operation: "2" }
-                    CalcButton { operation: "3" }
+                Row {
+                    spacing: 6
+                    property real w: (box.width / 4) - ((spacing * (4 - 1)) / 4)
+
+                    Button {
+                        id: rotateButton
+                        width: parent.w; height: column.h; color: 'purple'; operation: rotateLeft
+                    }
+                    Button { width: parent.w; height: column.h; color: 'purple'; operation: leftArrow }
+                    Button { width: parent.w; height: column.h; color: 'purple'; operation: "C" }
+                    Button { width: parent.w; height: column.h; color: 'purple'; operation: "AC" }
                 }
 
                 Row {
-                    y: 128; spacing: 2
+                    spacing: 6
+                    property real w: (box.width / 4) - ((spacing * (4 - 1)) / 4)
 
-                    CalcButton { operation: "0"; width: 50 }
-                    CalcButton { operation: "."; x: 77; width: 50 }
-                    CalcButton { operation: "="; id: equals; x: 77;  width: 102 }
+                    Button { width: parent.w; height: column.h; color: 'green'; operation: "mc" }
+                    Button { width: parent.w; height: column.h; color: 'green'; operation: "m+" }
+                    Button { width: parent.w; height: column.h; color: 'green'; operation: "m-" }
+                    Button { width: parent.w; height: column.h; color: 'green'; operation: "mr" }
                 }
 
-                Column {
-                    id: simpleOperations
-                    x: 156; y: 0; spacing: 2
-
-                    CalcButton { operation: "x" }
-                    CalcButton { operation: "/" }
-                    CalcButton { operation: "-" }
-                    CalcButton { operation: "+" }
+                Grid {
+                    id: grid; rows: 4; columns: 5; spacing: 6
+
+                    property real w: (box.width / columns) - ((spacing * (columns - 1)) / columns)
+
+                    Button { width: grid.w; height: column.h; operation: "7"; color: 'blue' }
+                    Button { width: grid.w; height: column.h; operation: "8"; color: 'blue' }
+                    Button { width: grid.w; height: column.h; operation: "9"; color: 'blue' }
+                    Button { width: grid.w; height: column.h; operation: division }
+                    Button { width: grid.w; height: column.h; operation: squareRoot }
+                    Button { width: grid.w; height: column.h; operation: "4"; color: 'blue' }
+                    Button { width: grid.w; height: column.h; operation: "5"; color: 'blue' }
+                    Button { width: grid.w; height: column.h; operation: "6"; color: 'blue' }
+                    Button { width: grid.w; height: column.h; operation: multiplication }
+                    Button { width: grid.w; height: column.h; operation: "x^2" }
+                    Button { width: grid.w; height: column.h; operation: "1"; color: 'blue' }
+                    Button { width: grid.w; height: column.h; operation: "2"; color: 'blue' }
+                    Button { width: grid.w; height: column.h; operation: "3"; color: 'blue' }
+                    Button { width: grid.w; height: column.h; operation: "-" }
+                    Button { width: grid.w; height: column.h; operation: "1/x" }
+                    Button { width: grid.w; height: column.h; operation: "0"; color: 'blue' }
+                    Button { width: grid.w; height: column.h; operation: "." }
+                    Button { width: grid.w; height: column.h; operation: plusminus }
+                    Button { width: grid.w; height: column.h; operation: "+" }
+                    Button { width: grid.w; height: column.h; operation: "="; color: 'red' }
                 }
             }
-
-            Grid {
-                id: advancedButtons
-                x: 350; spacing: 2; columns: 2; opacity: 0
-
-                CalcButton { operation: "Abs" }
-                CalcButton { operation: "Int" }
-                CalcButton { operation: "MC" }
-                CalcButton { operation: "Sqrt" }
-                CalcButton { operation: "MR" }
-                CalcButton { operation: "^2" }
-                CalcButton { operation: "MS" }
-                CalcButton { operation: "1/x" }
-                CalcButton { operation: "M+" }
-                CalcButton { operation: "+/-" }
-            }
         }
-    }
 
-    states: State {
-        name: "Advanced"; when: advancedCheckBox.toggled == true
-        PropertyChanges { target: basicButtons; x: 0 }
-        PropertyChanges { target: simpleOperations; y: 32 }
-        PropertyChanges { target: bksp; opacity: 1 }
-        PropertyChanges { target: c; x: 69; width: 67 }
-        PropertyChanges { target: ac; x: 138; width: 67 }
-        PropertyChanges { target: equals; width: 50 }
-        PropertyChanges { target: advancedButtons; x: 210; opacity: 1 }
-    }
+        states: State {
+            name: 'rotated'
+            PropertyChanges { target: main; rotation: -90; width: window.height; height: window.width }
+            PropertyChanges { target: rotateButton; operation: rotateRight }
+        }
 
-    transitions: Transition {
-        NumberAnimation { properties: "x,y,width"; easing.type: "OutBounce"; duration: 500 }
-        NumberAnimation { properties: "opacity"; easing.type: "InOutQuad"; duration: 500 }
+        transitions: Transition {
+            SequentialAnimation {
+                PropertyAction { target: rotateButton; property: "operation" }
+                NumberAnimation { properties: "rotation"; duration: 300; easing.type: "InOutQuint" }
+                NumberAnimation { properties: "x,y,width,height"; duration: 300; easing.type: "InOutQuint" }
+            }
+        }
     }
 }