summaryrefslogtreecommitdiffstats
path: root/demos/declarative
diff options
context:
space:
mode:
Diffstat (limited to 'demos/declarative')
-rw-r--r--demos/declarative/calculator/CalcButton.qml64
-rw-r--r--demos/declarative/calculator/calculator.qml208
-rw-r--r--demos/declarative/mediabrowser/content/PhoneInfoContainer.qml6
3 files changed, 172 insertions, 106 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 }
+ }
+ ]
+}
diff --git a/demos/declarative/mediabrowser/content/PhoneInfoContainer.qml b/demos/declarative/mediabrowser/content/PhoneInfoContainer.qml
index dbf25f5..5e387dd 100644
--- a/demos/declarative/mediabrowser/content/PhoneInfoContainer.qml
+++ b/demos/declarative/mediabrowser/content/PhoneInfoContainer.qml
@@ -14,7 +14,7 @@
</signals>
<transform>
- <Axis id="Axis" xStart="{Container.width / 2}" xEnd="{Container.width / 2}" yEnd="1" />
+ <AxisRotation id="Axis" axis.startX="{Container.width / 2}" axis.endX="{Container.width / 2}" axis.endY="1" />
</transform>
<front>
@@ -53,13 +53,13 @@
<states>
<State name="Back">
- <SetProperty target="{Axis}" property="rotation" value="180"/>
+ <SetProperty target="{Axis}" property="angle" value="180"/>
</State>
</states>
<transitions>
<Transition>
- <NumericAnimation easing="easeInOutQuad" properties="rotation" duration="500"/>
+ <NumericAnimation easing="easeInOutQuad" properties="angle" duration="500"/>
</Transition>
</transitions>
generated by cgit v0.12 at 2024-12-26 06:53:18 (GMT)