Convert the calculator demo.

2 files changed, 169 insertions, 103 deletions

diff --git a/demos/declarative/calculator/CalcButton.qml b/demos/declarative/calculator/CalcButton.qml
index c925314..f240000 100644
--- a/demos/declarative/calculator/CalcButton.qml
+++ b/demos/declarative/calculator/CalcButton.qml
@@ -1,12 +1,13 @@
-<Item id="Button" width="50" height="30">
+Item {
+    id: Button; width: 50; height: 30
 
-    <properties>
-        <Property name="operation" type="string"/>
-        <Property name="toggable" value="false"/>
-        <Property name="toggled" value="false"/>
-    </properties>
+    properties: [
+        Property { name: "operation"; type: "string" },
+        Property { name: "toggable"; value: false },
+        Property { name: "toggled"; value: false }
+    ]
 
-    <Script>
+    Script {
         function buttonClicked(operation) {
             if (Button.toggable == true) {
                 if (Button.toggled == true) {
@@ -20,21 +21,42 @@
             else
                 doOp(operation);
         }
-    </Script>
+    }
 
-    <Image id="Image" src="pics/button.sci" width="{Button.width}" height="{Button.height}"/>
-    <Image id="ImagePressed" src="pics/button-pressed.sci" width="{Button.width}" height="{Button.height}" opacity="0"/>
-    <Text anchors.centeredIn="{Image}" text="{Button.operation}" color="white" font.bold="true"/>
-    <MouseRegion id="MouseRegion" anchors.fill="{Button}" onClicked="buttonClicked(Button.operation)"/>
+    Image {
+        id: Image
+        src: "pics/button.sci"
+        width: Button.width; height: Button.height
+    }
 
-    <states>
-        <State name="Pressed" when="{MouseRegion.pressed == true}">
-            <SetProperties target="{ImagePressed}" opacity="1"/>
-        </State>
-        <State name="Toggled" when="{Button.toggled == true}">
-            <SetProperties target="{ImagePressed}" opacity="1"/>
-        </State>
-    </states>
+    Image {
+        id: ImagePressed
+        src: "pics/button-pressed.sci"
+        width: Button.width; height: Button.height
+        opacity: 0
+    }
 
-</Item>
+    Text {
+        anchors.centeredIn: Image
+        text: Button.operation
+        color: "white"
+        font.bold: true
+    }
 
+    MouseRegion {
+        id: MouseRegion
+        anchors.fill: Button
+        onClicked: { buttonClicked(Button.operation) }
+    }
+
+    states: [
+        State {
+            name: "Pressed"; when: MouseRegion.pressed == true
+            SetProperties { target: ImagePressed; opacity: 1 }
+        },
+        State {
+            name: "Toggled"; when: Button.toggled == true
+            SetProperties { target: ImagePressed; opacity: 1 }
+        }
+    ]
+}
diff --git a/demos/declarative/calculator/calculator.qml b/demos/declarative/calculator/calculator.qml
index 4ada896..1e7c30a 100644
--- a/demos/declarative/calculator/calculator.qml
+++ b/demos/declarative/calculator/calculator.qml
@@ -1,83 +1,127 @@
-<Rect id="MainWindow" width="320" height="270" color="black">
-    <Script src="calculator.js"/>
-
-    <VerticalLayout spacing="2" margin="2">
-        <Rect id="Container" height="60" z="2" width="316" pen.color="white" color="#343434">
-            <Text id="CurNum" font.bold="true" color="white" font.size="16" anchors.right="{Container.right}" anchors.rightMargin="5"
-                anchors.verticalCenter="{Container.verticalCenter}"/>
-            <Text id="CurrentOperation" color="white" font.bold="true" font.size="16" anchors.left="{Container.left}" anchors.leftMargin="5"
-                anchors.verticalCenter="{Container.verticalCenter}"/>
-        </Rect>
-
-        <Item width="320" height="30">
-            <CalcButton id="AdvancedCheckBox" x="55" width="206" operation="Advanced Mode" toggable="true"/>
-        </Item>
-
-        <Item width="320">
-            <Item id="BasicButtons" x="55" width="160" height="160">
-                <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"/>
-
-                <GridLayout 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"/>
-                </GridLayout>
-
-                <HorizontalLayout y="128" spacing="2">
-                    <CalcButton operation="0" width="50"/>
-                    <CalcButton operation="." x="77" width="50"/>
-                    <CalcButton operation="=" id="Equals" x="77" width="102"/>
-                </HorizontalLayout>
-
-                <VerticalLayout id="SimpleOperations" x="156" y="0" spacing="2">
-                    <CalcButton operation="x"/>
-                    <CalcButton operation="/"/>
-                    <CalcButton operation="-"/>
-                    <CalcButton operation="+"/>
-                </VerticalLayout>
-            </Item>
-
-            <GridLayout 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="+/-"/>
-            </GridLayout>
-        </Item>
-    </VerticalLayout>
-
-    <states>
-        <State name="Advanced" when="{AdvancedCheckBox.toggled == true}">
-            <SetProperties target="{BasicButtons}" x="0"/>
-            <SetProperties target="{SimpleOperations}" y="32"/>
-            <SetProperties target="{Bksp}" opacity="1"/>
-            <SetProperties target="{C}" x="69" width="67"/>
-            <SetProperties target="{AC}" x="138" width="67"/>
-            <SetProperties target="{Equals}" width="50"/>
-            <SetProperties target="{AdvancedButtons}" x="210" opacity="1"/>
-        </State>
-    </states>
-
-    <transitions>
-        <Transition>
-            <NumericAnimation properties="x,y,width" easing="easeOutBounce" duration="500"/>
-            <NumericAnimation properties="opacity" easing="easeInOutQuad" duration="500"/>
-        </Transition>
-    </transitions>
-
-</Rect>
+Rect {
+    id: MainWindow;
+    width: 320; height: 270; color: "black"
 
+    Script { src: "calculator.js" }
+
+    VerticalLayout {
+        spacing: 2; margin: 2
+
+        Rect {
+            id: Container
+            width: 316; height: 60; z: 2
+            pen.color: "white"; color: "#343434"
+
+            Text {
+                id: CurNum
+                font.bold: true; font.size: 16
+                color: "white"
+                anchors.right: Container.right
+                anchors.rightMargin: 5
+                anchors.verticalCenter: Container.verticalCenter
+            }
+
+            Text {
+                id: CurrentOperation
+                color: "white"
+                font.bold: true; font.size: 16
+                anchors.left: Container.left
+                anchors.leftMargin: 5
+                anchors.verticalCenter: Container.verticalCenter
+            }
+        }
+
+        Item {
+            width: 320; height: 30
+
+            CalcButton {
+                id: AdvancedCheckBox
+                x: 55; width: 206
+                operation: "Advanced Mode"
+                toggable: true
+            }
+        }
+
+        Item {
+            width: 320
+
+            Item {
+                id: BasicButtons
+                x: 55; width: 160; height: 160
+
+                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 }
+
+                GridLayout {
+                    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 }
+                }
+
+                HorizontalLayout {
+                    y: 128; spacing: 2
+
+                    CalcButton { operation: 0; width: 50 }
+                    CalcButton { operation: "."; x: 77; width: 50 }
+                    CalcButton { operation: "="; id: Equals; x: 77;  width: 102 }
+                }
+
+                VerticalLayout {
+                    id: SimpleOperations
+                    x: 156; y: 0; spacing: 2
+
+                    CalcButton { operation: "x" }
+                    CalcButton { operation: "/" }
+                    CalcButton { operation: "-" }
+                    CalcButton { operation: "+" }
+                }
+            }
+
+            GridLayout {
+                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
+            SetProperties { target: BasicButtons; x: 0 }
+            SetProperties { target: SimpleOperations; y: 32 }
+            SetProperties { target: Bksp; opacity: 1 }
+            SetProperties { target: C; x: 69; width: 67 }
+            SetProperties { target: AC; x: 138; width: 67 }
+            SetProperties { target: Equals; width: 50 }
+            SetProperties { target: AdvancedButtons; x: 210; opacity: 1 }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            NumericAnimation { properties: "x,y,width"; easing: "easeOutBounce"; duration: 500 }
+            NumericAnimation { properties: "opacity"; easing: "easeInOutQuad"; duration: 500 }
+        }
+    ]
+}