diff options
author | Martin Jones <martin.jones@nokia.com> | 2009-05-11 07:49:26 (GMT) |
---|---|---|
committer | Martin Jones <martin.jones@nokia.com> | 2009-05-11 07:49:26 (GMT) |
commit | 415da7f2969bad2765fe535daf9322c7a538da81 (patch) | |
tree | 9f5c69acd4cfa532d8f5136fb60e6b9f0b55e8b3 /examples/declarative | |
parent | b3526f5edf6425289ef2aa5c8adfc89892817ac0 (diff) | |
download | Qt-415da7f2969bad2765fe535daf9322c7a538da81.zip Qt-415da7f2969bad2765fe535daf9322c7a538da81.tar.gz Qt-415da7f2969bad2765fe535daf9322c7a538da81.tar.bz2 |
Join some lines in examples.
Diffstat (limited to 'examples/declarative')
-rw-r--r-- | examples/declarative/dial/DialLibrary/Dial.qml | 24 | ||||
-rw-r--r-- | examples/declarative/dial/dial.qml | 34 | ||||
-rw-r--r-- | examples/declarative/mouseregion/mouse.qml | 20 | ||||
-rw-r--r-- | examples/declarative/scrollbar/ScrollBar.qml | 3 | ||||
-rw-r--r-- | examples/declarative/slideswitch/Switch.qml | 55 | ||||
-rw-r--r-- | examples/declarative/states/states.qml | 73 | ||||
-rw-r--r-- | examples/declarative/states/transitions.qml | 105 |
7 files changed, 77 insertions, 237 deletions
diff --git a/examples/declarative/dial/DialLibrary/Dial.qml b/examples/declarative/dial/DialLibrary/Dial.qml index 485188a..2e214a8 100644 --- a/examples/declarative/dial/DialLibrary/Dial.qml +++ b/examples/declarative/dial/DialLibrary/Dial.qml @@ -1,27 +1,20 @@ Item { property real value : 0 - width: 210 - height: 210 + width: 210; height: 210 - Image { - id: Background - source: "background.svg" - } + Image { id: Background; source: "background.svg" } Item { - x: 104 - y: 102 + x: 104; y: 102 rotation: Needle.rotation Image { source: "needle_shadow.svg" - x: -104 - y: -102 + x: -104; y: -102 } } Item { id: Needle - x: 102 - y: 98 + x: 102; y: 98 rotation: -130 rotation: Follow { spring: 1.4 @@ -30,11 +23,8 @@ Item { } Image { source: "needle.svg" - x: -102 - y: -98 + x: -102; y: -98 } } - Image { - source: "overlay.svg" - } + Image { source: "overlay.svg" } } diff --git a/examples/declarative/dial/dial.qml b/examples/declarative/dial/dial.qml index fa11d79..5e09171 100644 --- a/examples/declarative/dial/dial.qml +++ b/examples/declarative/dial/dial.qml @@ -1,37 +1,23 @@ import "DialLibrary" Rect { color: "white" - width: 210 - height: 240 + width: 210; height: 240 + // Dial with a slider to adjust it - Dial { - id: Dial - value: Slider.x-2 - } + Dial { id: Dial; value: Slider.x-2 } + Rect { anchors.top: Dial.bottom - x: 20 - width: 160 - height: 16 - color: "steelblue" - gradientColor: "lightsteelblue" - radius: 8 - opacity: 0.7 + x: 20; width: 160; height: 16 + color: "steelblue"; gradientColor: "lightsteelblue" + radius: 8; opacity: 0.7 Rect { id: Slider - x: 2 - y: 2 - width: 30 - height: 12 - color: "lightgray" - gradientColor: "gray" - radius: 6 + x: 2; y: 2; width: 30; height: 12 + color: "lightgray"; gradientColor: "gray"; radius: 6 MouseRegion { anchors.fill: parent - drag.target: parent - drag.axis: "x" - drag.xmin: 2 - drag.xmax: 128 + drag.target: parent; drag.axis: "x"; drag.xmin: 2; drag.xmax: 128 } } } diff --git a/examples/declarative/mouseregion/mouse.qml b/examples/declarative/mouseregion/mouse.qml index 6d10425..471874d 100644 --- a/examples/declarative/mouseregion/mouse.qml +++ b/examples/declarative/mouseregion/mouse.qml @@ -1,15 +1,10 @@ Rect { color: "white" - width: 200 - height: 200 + width: 200; height: 200 Rect { - width: 50 - height: 50 + width: 50; height: 50 color: "red" - Text { - text: "Click" - anchors.centeredIn: parent - } + Text { text: "Click"; anchors.centeredIn: parent } MouseRegion { onPressed: { print('press (x: ' + mouse.x + ' y: ' + mouse.y + ' button: ' + (mouse.button == Qt.RightButton ? 'right' : 'left') + ' Shift: ' + (mouse.modifiers & Qt.ShiftModifier ? 'true' : 'false') + ')') } onReleased: { print('release (x: ' + mouse.x + ' y: ' + mouse.y + ' isClick: ' + mouse.isClick + ' wasHeld: ' + mouse.wasHeld + ')') } @@ -22,14 +17,9 @@ Rect { } } Rect { - y: 100 - width: 50 - height: 50 + y: 100; width: 50; height: 50 color: "blue" - Text { - text: "Drag" - anchors.centeredIn: parent - } + Text { text: "Drag"; anchors.centeredIn: parent } MouseRegion { drag.target: parent drag.axis: "x" diff --git a/examples/declarative/scrollbar/ScrollBar.qml b/examples/declarative/scrollbar/ScrollBar.qml index 929c72a..8020d62 100644 --- a/examples/declarative/scrollbar/ScrollBar.qml +++ b/examples/declarative/scrollbar/ScrollBar.qml @@ -13,8 +13,7 @@ Item { Rect { id: Background radius: orientation == 'Vertical' ? (width/2) : (height/2) - color: "white" - opacity: 0.3 + color: "white"; opacity: 0.3 anchors.fill: parent } // Size the bar to the required size, depending upon the orientation. diff --git a/examples/declarative/slideswitch/Switch.qml b/examples/declarative/slideswitch/Switch.qml index 6777277..8bc88e4 100644 --- a/examples/declarative/slideswitch/Switch.qml +++ b/examples/declarative/slideswitch/Switch.qml @@ -1,7 +1,6 @@ Item { id: Switch - width: Groove.width - height: Groove.height + width: Groove.width; height: Groove.height property var on @@ -28,64 +27,30 @@ Item { } } - Image { - id: Groove - source: "background.svg" - } - MouseRegion { - anchors.fill: Groove - onClicked: { toggle() } - } - Image { - id: Knob - source: "knob.svg" - x: 1 - y: 2 - } + Image { id: Groove; source: "background.svg" } + MouseRegion { anchors.fill: Groove; onClicked: { toggle() } } + Image { id: Knob; source: "knob.svg"; x: 1; y: 2 } MouseRegion { anchors.fill: Knob onClicked: { toggle() } onReleased: { dorelease() } - drag.target: Knob - drag.axis: "x" - drag.xmin: 1 - drag.xmax: 78 + drag.target: Knob; drag.axis: "x"; drag.xmin: 1; drag.xmax: 78 } states: [ State { name: "On" - SetProperty { - target: Knob - property: "x" - value: 78 - } - SetProperty { - target: Switch - property: "on" - value: true - } + SetProperty { target: Knob; property: "x"; value: 78 } + SetProperty { target: Switch; property: "on"; value: true } }, State { name: "Off" - SetProperty { - target: Knob - property: "x" - value: 1 - } - SetProperty { - target: Switch - property: "on" - value: false - } + SetProperty { target: Knob; property: "x"; value: 1 } + SetProperty { target: Switch; property: "on"; value: false } } ] transitions: [ Transition { - NumericAnimation { - properties: "x" - easing: "easeInOutQuad" - duration: 200 - } + NumericAnimation { properties: "x"; easing: "easeInOutQuad"; duration: 200 } } ] } diff --git a/examples/declarative/states/states.qml b/examples/declarative/states/states.qml index 0c27637..bcde20c 100644 --- a/examples/declarative/states/states.qml +++ b/examples/declarative/states/states.qml @@ -1,79 +1,40 @@ Rect { id: Page - width: 300 - height: 300 - color: "white" + width: 300; height: 300; color: "white" // A target region. Clicking in here sets the state to '' - the default state Rect { - width: 50 - height: 50 - x: 0 - y: 0 - color: "transparent" - pen.color: "black" - MouseRegion { - anchors.fill: parent - onClicked: { Page.state='' } - } + x: 0; y: 0; width: 50; height: 50 + color: "transparent"; pen.color: "black" + MouseRegion { anchors.fill: parent; onClicked: { Page.state='' } } } // Another target region. Clicking in here sets the state to 'Position1' Rect { - width: 50 - height: 50 - x: 150 - y: 50 - color: "transparent" - pen.color: "black" - MouseRegion { - anchors.fill: parent - onClicked: { Page.state='Position1' } - } + x: 150; y: 50; width: 50; height: 50 + color: "transparent"; pen.color: "black" + MouseRegion { anchors.fill: parent; onClicked: { Page.state='Position1' } } } // Another target region. Clicking in here sets the state to 'Position2' Rect { - width: 50 - height: 50 - x: 0 - y: 200 - color: "transparent" - pen.color: "black" - MouseRegion { - anchors.fill: parent - onClicked: { Page.state='Position2' } - } + x: 0; y: 200; width: 50; height: 50 + color: "transparent"; pen.color: "black" + MouseRegion { anchors.fill: parent; onClicked: { Page.state='Position2' } } } // Rect which will be moved when my state changes - Rect { - id: myrect - width: 50 - height: 50 - color: "red" - } + Rect { id: myrect; width: 50; height: 50; color: "red" } + states: [ // In state 'Position1', change the 'myrect' item x, y to 150, 50. State { name: "Position1" - SetProperty { - target: myrect - property: "x" - value: 150 - } - SetProperty { - target: myrect - property: "y" - value: 50 - } - } // In state 'Position2', change y to 100. We do not specify 'x' here - + SetProperty { target: myrect; property: "x"; value: 150 } + SetProperty { target: myrect; property: "y"; value: 50 } + }, + // In state 'Position2', change y to 100. We do not specify 'x' here - // it will therefore be restored to its default value of 0, if it // had been changed. -, State { name: "Position2" - SetProperty { - target: myrect - property: "y" - value: 200 - } + SetProperty { target: myrect; property: "y"; value: 200 } } ] } diff --git a/examples/declarative/states/transitions.qml b/examples/declarative/states/transitions.qml index c7fc656..4c1dceb 100644 --- a/examples/declarative/states/transitions.qml +++ b/examples/declarative/states/transitions.qml @@ -1,111 +1,60 @@ Rect { id: Page - width: 300 - height: 300 - color: "white" + width: 300; height: 300; color: "white" // A target region. Clicking in here sets the state to '' - the default state Rect { - width: 50 - height: 50 - x: 0 - y: 0 - color: "transparent" - pen.color: "black" - MouseRegion { - anchors.fill: parent - onClicked: { Page.state='' } - } + x: 0; y: 0; width: 50; height: 50 + color: "transparent"; pen.color: "black" + MouseRegion { anchors.fill: parent; onClicked: { Page.state='' } } } // Another target region. Clicking in here sets the state to 'Position1' Rect { - width: 50 - height: 50 - x: 150 - y: 50 - color: "transparent" - pen.color: "black" - MouseRegion { - anchors.fill: parent - onClicked: { Page.state='Position1' } - } + x: 150; y: 50; width: 50; height: 50 + color: "transparent"; pen.color: "black" + MouseRegion { anchors.fill: parent; onClicked: { Page.state='Position1' } } } // Another target region. Clicking in here sets the state to 'Position2' Rect { - width: 50 - height: 50 - x: 0 - y: 200 - color: "transparent" - pen.color: "black" - MouseRegion { - anchors.fill: parent - onClicked: { Page.state='Position2' } - } + x: 0; y: 200; width: 50; height: 50 + color: "transparent"; pen.color: "black" + MouseRegion { anchors.fill: parent; onClicked: { Page.state='Position2' } } } // Rect which will be moved when my state changes - Rect { - id: myrect - width: 50 - height: 50 - color: "red" - } + Rect { id: myrect; width: 50; height: 50; color: "red" } + states: [ // In state 'Position1', change the 'myrect' item x, y to 150, 50. State { name: "Position1" - SetProperty { - target: myrect - property: "x" - value: 150 - } - SetProperty { - target: myrect - property: "y" - value: 50 - } - } // In state 'Position2', change y to 100. We do not specify 'x' here - + SetProperty { target: myrect; property: "x"; value: 150 } + SetProperty { target: myrect; property: "y"; value: 50 } + }, + // In state 'Position2', change y to 100. We do not specify 'x' here - // it will therefore be restored to its default value of 0, if it // had been changed. -, State { name: "Position2" - SetProperty { - target: myrect - property: "y" - value: 200 - } + SetProperty { target: myrect; property: "y"; value: 200 } } ] + // transitions define how the properties change. transitions: [ // When transitioning to 'Position1' move x,y over a duration of 1 second, // with easeOutBounce easing function. Transition { - fromState: "*" - toState: "Position1" - NumericAnimation { - properties: "x,y" - easing: "easeOutBounce" - duration: 1000 - } - } // When transitioning to 'Position2' move x,y over a duration of 2 seconds, + fromState: "*"; toState: "Position1" + NumericAnimation { properties: "x,y"; easing: "easeOutBounce"; duration: 1000 } + }, + // When transitioning to 'Position2' move x,y over a duration of 2 seconds, // with easeInOutQuad easing function. -, Transition { - fromState: "*" - toState: "Position2" - NumericAnimation { - properties: "x,y" - easing: "easeInOutQuad" - duration: 2000 - } - } // For any other state changes move x,y linearly over duration of 200ms. -, + fromState: "*"; toState: "Position2" + NumericAnimation { properties: "x,y"; easing: "easeInOutQuad"; duration: 2000 } + }, + // For any other state changes move x,y linearly over duration of 200ms. Transition { - NumericAnimation { - properties: "x,y" - duration: 200 - } + NumericAnimation { properties: "x,y"; duration: 200 } } ] } |