diff options
| -rw-r--r-- | demos/declarative/calculator/CalcButton.qml | 64 | ||||
| -rw-r--r-- | demos/declarative/calculator/calculator.qml | 208 |
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 } + } + ] +} |