diff options
Diffstat (limited to 'examples/declarative')
123 files changed, 1591 insertions, 735 deletions
diff --git a/examples/declarative/anchors/anchor-changes.qml b/examples/declarative/anchors/anchor-changes.qml index 8996439..f6fd35d 100644 --- a/examples/declarative/anchors/anchor-changes.qml +++ b/examples/declarative/anchors/anchor-changes.qml @@ -1,24 +1,24 @@ import Qt 4.6 Item { - id: Window + id: window width: 200; height: 450 Rectangle { - id: TitleBar; color: "Gray" + id: titleBar; color: "Gray" anchors.top: parent.top; height: 50 width: parent.width } Rectangle { - id: StatusBar; color: "Gray" + id: statusBar; color: "Gray" height: 50; anchors.bottom: parent.bottom width: parent.width } Rectangle { - id: Content - anchors.top: TitleBar.bottom; anchors.bottom: StatusBar.top + id: content + anchors.top: titleBar.bottom; anchors.bottom: statusBar.top width: parent.width Text { text: "Top"; anchors.top: parent.top } @@ -26,16 +26,16 @@ Item { } MouseRegion { - anchors.fill: Content - onPressed: Window.state = "FullScreen" - onReleased: Window.state = "" + anchors.fill: content + onPressed: window.state = "FullScreen" + onReleased: window.state = "" } states : State { name: "FullScreen" //! [0] AnchorChanges { - target: Content; top: Window.top; bottom: Window.bottom + target: content; top: window.top; bottom: window.bottom } //! [0] } diff --git a/examples/declarative/aspectratio/face_fit.qml b/examples/declarative/aspectratio/face_fit.qml index 8d38cca..3d1451c 100644 --- a/examples/declarative/aspectratio/face_fit.qml +++ b/examples/declarative/aspectratio/face_fit.qml @@ -8,13 +8,13 @@ import Qt 4.6 // Rectangle { // default size: whole image, unscaled - width: Face.width - height: Face.height + width: face.width + height: face.height color: "gray" clip: true Image { - id: Face + id: face source: "pics/face.png" x: (parent.width-width*scale)/2 y: (parent.height-height*scale)/2 diff --git a/examples/declarative/aspectratio/face_fit_animated.qml b/examples/declarative/aspectratio/face_fit_animated.qml index 9d63e69..f004a6c 100644 --- a/examples/declarative/aspectratio/face_fit_animated.qml +++ b/examples/declarative/aspectratio/face_fit_animated.qml @@ -6,19 +6,19 @@ import Qt 4.6 // Rectangle { // default size: whole image, unscaled - width: Face.width - height: Face.height + width: face.width + height: face.height color: "gray" clip: true Image { - id: Face + id: face source: "pics/face.png" x: (parent.width-width*scale)/2 y: (parent.height-height*scale)/2 scale: SpringFollow { - source: Math.max(Math.min(Face.parent.width/Face.width*1.333,Face.parent.height/Face.height), - Math.min(Face.parent.width/Face.width,Face.parent.height/Face.height*1.333)) + source: Math.max(Math.min(face.parent.width/face.width*1.333,face.parent.height/face.height), + Math.min(face.parent.width/face.width,face.parent.height/face.height*1.333)) spring: 1 damping: 0.05 } diff --git a/examples/declarative/aspectratio/scale_and_crop.qml b/examples/declarative/aspectratio/scale_and_crop.qml index 3cace8d..2c9477e 100644 --- a/examples/declarative/aspectratio/scale_and_crop.qml +++ b/examples/declarative/aspectratio/scale_and_crop.qml @@ -4,13 +4,13 @@ import Qt 4.6 // Rectangle { // default size: whole image, unscaled - width: Face.width - height: Face.height + width: face.width + height: face.height color: "gray" clip: true Image { - id: Face + id: face source: "pics/face.png" x: (parent.width-width*scale)/2 y: (parent.height-height*scale)/2 diff --git a/examples/declarative/aspectratio/scale_and_crop_simple.qml b/examples/declarative/aspectratio/scale_and_crop_simple.qml index 26758e6..9cc9c19 100644 --- a/examples/declarative/aspectratio/scale_and_crop_simple.qml +++ b/examples/declarative/aspectratio/scale_and_crop_simple.qml @@ -5,13 +5,13 @@ import Qt 4.6 // Rectangle { // default size: whole image, unscaled - width: Face.width - height: Face.height + width: face.width + height: face.height color: "gray" clip: true Image { - id: Face + id: face source: "pics/face.png" fillMode: "PreserveAspectCrop" anchors.fill: parent diff --git a/examples/declarative/aspectratio/scale_and_sidecrop.qml b/examples/declarative/aspectratio/scale_and_sidecrop.qml index 18cc110..67c7e29 100644 --- a/examples/declarative/aspectratio/scale_and_sidecrop.qml +++ b/examples/declarative/aspectratio/scale_and_sidecrop.qml @@ -5,13 +5,13 @@ import Qt 4.6 // Rectangle { // default size: whole image, unscaled - width: Face.width - height: Face.height + width: face.width + height: face.height color: "gray" clip: true Image { - id: Face + id: face source: "pics/face.png" x: (parent.width-width*scale)/2 y: (parent.height-height*scale)/2 diff --git a/examples/declarative/aspectratio/scale_to_fit.qml b/examples/declarative/aspectratio/scale_to_fit.qml index 7450ea4..c4efc29 100644 --- a/examples/declarative/aspectratio/scale_to_fit.qml +++ b/examples/declarative/aspectratio/scale_to_fit.qml @@ -5,13 +5,13 @@ import Qt 4.6 // Rectangle { // default size: whole image, unscaled - width: Face.width - height: Face.height + width: face.width + height: face.height color: "gray" clip: true Image { - id: Face + id: face source: "pics/face.png" x: (parent.width-width*scale)/2 y: (parent.height-height*scale)/2 diff --git a/examples/declarative/aspectratio/scale_to_fit_simple.qml b/examples/declarative/aspectratio/scale_to_fit_simple.qml index dcccd69..f7fcd8b 100644 --- a/examples/declarative/aspectratio/scale_to_fit_simple.qml +++ b/examples/declarative/aspectratio/scale_to_fit_simple.qml @@ -5,13 +5,13 @@ import Qt 4.6 // Rectangle { // default size: whole image, unscaled - width: Face.width - height: Face.height + width: face.width + height: face.height color: "gray" clip: true Image { - id: Face + id: face source: "pics/face.png" fillMode: "PreserveAspectFit" anchors.fill: parent diff --git a/examples/declarative/behaviours/MyRect.qml b/examples/declarative/behaviours/MyRect.qml index fca1f70..a272e1f 100644 --- a/examples/declarative/behaviours/MyRect.qml +++ b/examples/declarative/behaviours/MyRect.qml @@ -5,9 +5,9 @@ Rectangle { border.color: "black" width: 100 height: 100 - id: Page + id: page MouseRegion { anchors.fill: parent - onClicked: { bluerect.parent = Page; bluerect.x=0 } + onClicked: { bluerect.parent = page; bluerect.x=0 } } } diff --git a/examples/declarative/behaviours/test.qml b/examples/declarative/behaviours/test.qml index 1dd0658..a15d05d 100644 --- a/examples/declarative/behaviours/test.qml +++ b/examples/declarative/behaviours/test.qml @@ -4,10 +4,10 @@ Rectangle { color: "lightsteelblue" width: 800 height: 600 - id: Page + id: page MouseRegion { anchors.fill: parent - onClicked: { bluerect.parent = Page; bluerect.x = mouseX; } + onClicked: { bluerect.parent = page; bluerect.x = mouseX; } } MyRect { color: "green" diff --git a/examples/declarative/border-image/MyBorderImage.qml b/examples/declarative/border-image/MyBorderImage.qml index 395b648..d64bfb2 100644 --- a/examples/declarative/border-image/MyBorderImage.qml +++ b/examples/declarative/border-image/MyBorderImage.qml @@ -3,35 +3,35 @@ import Qt 4.6 Item { property var horizontalMode : BorderImage.Stretch property var verticalMode : BorderImage.Stretch - property alias source: MyImage.source + property alias source: image.source property int minWidth property int minHeight property int maxWidth property int maxHeight property int margin - id: Container + id: container width: 240; height: 240 BorderImage { - id: MyImage; x: Container.width / 2 - width / 2; y: Container.height / 2 - height / 2 + id: image; x: container.width / 2 - width / 2; y: container.height / 2 - height / 2 width: SequentialAnimation { running: true; repeat: true - NumberAnimation { from: Container.minWidth; to: Container.maxWidth; duration: 2000; easing: "easeInOutQuad"} - NumberAnimation { from: Container.maxWidth; to: Container.minWidth; duration: 2000; easing: "easeInOutQuad" } + NumberAnimation { from: container.minWidth; to: container.maxWidth; duration: 2000; easing: "easeInOutQuad"} + NumberAnimation { from: container.maxWidth; to: container.minWidth; duration: 2000; easing: "easeInOutQuad" } } height: SequentialAnimation { running: true; repeat: true - NumberAnimation { from: Container.minHeight; to: Container.maxHeight; duration: 2000; easing: "easeInOutQuad"} - NumberAnimation { from: Container.maxHeight; to: Container.minHeight; duration: 2000; easing: "easeInOutQuad" } + NumberAnimation { from: container.minHeight; to: container.maxHeight; duration: 2000; easing: "easeInOutQuad"} + NumberAnimation { from: container.maxHeight; to: container.minHeight; duration: 2000; easing: "easeInOutQuad" } } - horizontalTileMode: Container.horizontalMode - verticalTileMode: Container.verticalMode - border.top: Container.margin - border.left: Container.margin - border.bottom: Container.margin - border.right: Container.margin + horizontalTileMode: container.horizontalMode + verticalTileMode: container.verticalMode + border.top: container.margin + border.left: container.margin + border.bottom: container.margin + border.right: container.margin } } diff --git a/examples/declarative/border-image/animated.qml b/examples/declarative/border-image/animated.qml index b34753f..aaaf495 100644 --- a/examples/declarative/border-image/animated.qml +++ b/examples/declarative/border-image/animated.qml @@ -1,7 +1,7 @@ import Qt 4.6 Rectangle { - id: Page + id: page color: "white" width: 1030; height: 540 diff --git a/examples/declarative/border-image/borders.qml b/examples/declarative/border-image/borders.qml index 73758f2..e90abe6 100644 --- a/examples/declarative/border-image/borders.qml +++ b/examples/declarative/border-image/borders.qml @@ -1,7 +1,7 @@ import Qt 4.6 Rectangle { - id: Page + id: page color: "white" width: 520; height: 280 diff --git a/examples/declarative/border-image/colors-round.sci b/examples/declarative/border-image/colors-round.sci index 3784e10..506f6f5 100644 --- a/examples/declarative/border-image/colors-round.sci +++ b/examples/declarative/border-image/colors-round.sci @@ -1,7 +1,7 @@ -gridLeft:30 -gridTop:30 -gridRight:30 -gridBottom:30 +border.left:30 +border.top:30 +border.right:30 +border.bottom:30 horizontalTileRule:Round verticalTileRule:Round -imageFile:colors.png +source:colors.png diff --git a/examples/declarative/border-image/colors-stretch.sci b/examples/declarative/border-image/colors-stretch.sci index c693599..e4989a7 100644 --- a/examples/declarative/border-image/colors-stretch.sci +++ b/examples/declarative/border-image/colors-stretch.sci @@ -1,5 +1,5 @@ -gridLeft:30 -gridTop:30 -gridRight:30 -gridBottom:30 -imageFile:colors.png +border.left:30 +border.top:30 +border.right:30 +border.bottom:30 +source:colors.png diff --git a/examples/declarative/border-image/example.qml b/examples/declarative/border-image/example.qml index a0b02b7..25c19d9 100644 --- a/examples/declarative/border-image/example.qml +++ b/examples/declarative/border-image/example.qml @@ -1,7 +1,7 @@ import Qt 4.6 Rectangle { - id: Page + id: page color: "white" width: 520; height: 280 diff --git a/examples/declarative/clock/Clock.qml b/examples/declarative/clock/Clock.qml index 6064dd4..a061488 100644 --- a/examples/declarative/clock/Clock.qml +++ b/examples/declarative/clock/Clock.qml @@ -1,7 +1,7 @@ import Qt 4.6 Item { - id: Clock + id: clock width: 200; height: 200 property var time property var hours @@ -15,7 +15,7 @@ Item { } Timer { interval: 100; running: true; repeat: true; triggeredOnStart: true - onTriggered: Clock.time = new Date() + onTriggered: clock.time = new Date() } Image { source: "background.png" } @@ -25,13 +25,13 @@ Item { source: "hour.png" smooth: true transform: Rotation { - id: HourRotation + id: hourRotation origin.x: 4; origin.y: 45 angle: 0 angle: SpringFollow { spring: 2 damping: .2 - source: Clock.hours * 50 * 3 + Clock.minutes / 2 + source: clock.hours * 50 * 3 + clock.minutes / 2 } } } @@ -41,13 +41,13 @@ Item { source: "minute.png" smooth: true transform: Rotation { - id: MinuteRotation + id: minuteRotation origin.x: 4; origin.y: 70 angle: 0 angle: SpringFollow { spring: 2 damping: .2 - source: Clock.minutes * 6 + source: clock.minutes * 6 } } } @@ -57,14 +57,14 @@ Item { source: "second.png" smooth: true transform: Rotation { - id: SecondRotation + id: secondRotation origin.x: 2; origin.y: 60 angle: 0 angle: SpringFollow { spring: 5 damping: .25 modulus: 360 - source: Clock.seconds * 6 + source: clock.seconds * 6 } } } diff --git a/examples/declarative/clock/display.qml b/examples/declarative/clock/display.qml index 59f4763..20e254d 100644 --- a/examples/declarative/clock/display.qml +++ b/examples/declarative/clock/display.qml @@ -3,5 +3,5 @@ import Qt 4.6 Rectangle { width: childrenRect.width height: childrenRect.height - Clock { id: Clock } + Clock { id: clock } } diff --git a/examples/declarative/dial/DialLibrary/Dial.qml b/examples/declarative/dial/DialLibrary/Dial.qml index 1a163a8..c1e9770 100644 --- a/examples/declarative/dial/DialLibrary/Dial.qml +++ b/examples/declarative/dial/DialLibrary/Dial.qml @@ -1,12 +1,12 @@ import Qt 4.6 Item { - id: Root + id: root property real value : 0 width: 210; height: 210 - Image { id: Background; source: "background.png" } + Image { source: "background.png" } Image { x: 93 @@ -14,23 +14,22 @@ Item { source: "needle_shadow.png" transform: Rotation { origin.x: 11; origin.y: 67 - angle: NeedleRotation.angle + angle: needleRotation.angle } } Image { - id: Needle + id: needle x: 95; y: 33 smooth: true source: "needle.png" transform: Rotation { - id: NeedleRotation + id: needleRotation origin.x: 7; origin.y: 65 angle: -130 angle: SpringFollow { - id: MyFollow spring: 1.4 damping: .15 - source: Math.min(Math.max(-130, Root.value*2.2 - 130), 133) + source: Math.min(Math.max(-130, root.value*2.2 - 130), 133) } } } diff --git a/examples/declarative/dial/dial.qml b/examples/declarative/dial/dial.qml index 472ac66..c7baf25 100644 --- a/examples/declarative/dial/dial.qml +++ b/examples/declarative/dial/dial.qml @@ -6,10 +6,10 @@ Rectangle { 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 } Rectangle { - anchors.top: Dial.bottom + anchors.top: dial.bottom x: 20; width: 160; height: 16 gradient: Gradient { GradientStop { position: 0.0; color: "steelblue" } @@ -17,7 +17,7 @@ Rectangle { } radius: 8; opacity: 0.7; smooth: true Rectangle { - id: Slider + id: slider x: 2; y: 2; width: 30; height: 12 radius: 6; smooth: true gradient: Gradient { diff --git a/examples/declarative/easing/easing.qml b/examples/declarative/easing/easing.qml index 1909e00..23d7b29 100644 --- a/examples/declarative/easing/easing.qml +++ b/examples/declarative/easing/easing.qml @@ -1,13 +1,13 @@ import Qt 4.6 Rectangle { - id: Window + id: window width: 640 - height: Layout.height + height: layout.height color: "white" ListModel { - id: EasingTypes + id: easingTypes ListElement { type: "easeLinear" } ListElement { type: "easeInQuad" } ListElement { type: "easeOutQuad" } @@ -50,23 +50,23 @@ Rectangle { ListElement { type: "easeInOutBounce" } ListElement { type: "easeOutInBounce" } } - + Column { - id: Layout - anchors.left: Window.left - anchors.right: Window.right + id: layout + anchors.left: window.left + anchors.right: window.right Repeater { - model: EasingTypes + model: easingTypes Component { Text { text: type height: 18 font.italic: true x: SequentialAnimation { - id: Anim + id: anim NumberAnimation { from: 0 - to: Window.width / 2 + to: window.width / 2 easing: type duration: 1000 } @@ -75,14 +75,14 @@ Rectangle { } NumberAnimation { to: 0 - from: Window.width / 2 + from: window.width / 2 easing: type duration: 1000 } } children: [ MouseRegion { - onClicked: { Anim.running=true } + onClicked: { anim.running=true } anchors.fill: parent } ] diff --git a/examples/declarative/effects/test.qml b/examples/declarative/effects/test.qml index ad03ef9..83bfde2 100644 --- a/examples/declarative/effects/test.qml +++ b/examples/declarative/effects/test.qml @@ -9,10 +9,10 @@ Rectangle { source: "pic.jpg" effect: Blur { - blurRadius: NumberAnimation { id: BS; from: 0; to: 10; duration: 200; repeat: true } + blurRadius: NumberAnimation { id: blur; from: 0; to: 10; duration: 200; repeat: true } } - MouseRegion { anchors.fill: parent; onClicked: BS.running = !BS.running } + MouseRegion { anchors.fill: parent; onClicked: blur.running = !blur.running } Text { color: "white"; text: "Blur" } } @@ -39,11 +39,11 @@ Rectangle { source: "pic.jpg" y: 300 - effect: Pixelize { - pixelSize: NumberAnimation { id: PS; from: 0; to: 10; duration: 200; repeat: true } + effect: Pixelize { + pixelSize: NumberAnimation { id: pixelize; from: 0; to: 10; duration: 200; repeat: true } } - MouseRegion { anchors.fill: parent; onClicked: PS.running = !PS.running } + MouseRegion { anchors.fill: parent; onClicked: pixelize.running = !pixelize.running } Text { color: "white"; text: "Pixelize" } } @@ -54,13 +54,13 @@ Rectangle { x: 200 y: 300 - effect: DropShadow { + effect: DropShadow { blurRadius: 3 offset.x: 3 - offset.y: NumberAnimation { id: DS; from: 0; to: 10; duration: 200; repeat: true; } + offset.y: NumberAnimation { id: dropShadow; from: 0; to: 10; duration: 200; repeat: true; } } - MouseRegion { anchors.fill: parent; onClicked: DS.running = !DS.running } + MouseRegion { anchors.fill: parent; onClicked: dropShadow.running = !dropShadow.running } Text { color: "white"; text: "DropShadow" } } @@ -74,10 +74,10 @@ Rectangle { effect: Bloom { blurRadius: 3 brightness: 128 - strength: NumberAnimation { id: BLS; from: 0; to: 1; duration: 200; repeat: true; } + strength: NumberAnimation { id: bloom; from: 0; to: 1; duration: 200; repeat: true; } } - MouseRegion { anchors.fill: parent; onClicked: BLS.running = !BLS.running } + MouseRegion { anchors.fill: parent; onClicked: bloom.running = !bloom.running } Text { color: "white"; text: "Bloom" } } diff --git a/examples/declarative/extending/binding/example.qml b/examples/declarative/extending/binding/example.qml index 1651b7a..352bb70 100644 --- a/examples/declarative/extending/binding/example.qml +++ b/examples/declarative/extending/binding/example.qml @@ -2,9 +2,9 @@ import People 1.0 // ![0] BirthdayParty { - id: TheParty + id: theParty - speaker: HappyBirthday { name: TheParty.celebrant.name } + speaker: HappyBirthday { name: theParty.celebrant.name } celebrant: Boy { name: "Bob Jones" @@ -14,22 +14,22 @@ BirthdayParty { onPartyStarted: print("This party started rockin' at " + time); - Boy { - name: "Joan Hodges" + Boy { + name: "Joan Hodges" BirthdayParty.rsvp: "2009-07-06" shoe { size: 10; color: "black"; brand: "Reebok"; price: 59.95 } } - Boy { - name: "Jack Smith" + Boy { + name: "Jack Smith" shoe { size: 8; color: "blue"; brand: "Puma"; price: 19.95 } } - Girl { - name: "Anne Brown" + Girl { + name: "Anne Brown" BirthdayParty.rsvp: "2009-07-01" shoe.size: 7 shoe.color: "red" shoe.brand: "Marc Jacobs" - shoe.price: 699.99 + shoe.price: 699.99 } // ![1] diff --git a/examples/declarative/fillmode/fillmode.qml b/examples/declarative/fillmode/fillmode.qml index 94b0782..0fdacbf 100644 --- a/examples/declarative/fillmode/fillmode.qml +++ b/examples/declarative/fillmode/fillmode.qml @@ -8,26 +8,26 @@ Image { running: true repeat: true PropertyAction { value: "Stretch" } - PropertyAction { target: Label; property: "text"; value: "Stretch" } + PropertyAction { target: label; property: "text"; value: "Stretch" } PauseAnimation { duration: 1000 } PropertyAction { value: "PreserveAspectFit" } - PropertyAction { target: Label; property: "text"; value: "PreserveAspectFit" } + PropertyAction { target: label; property: "text"; value: "PreserveAspectFit" } PauseAnimation { duration: 1000 } PropertyAction { value: "PreserveAspectCrop" } - PropertyAction { target: Label; property: "text"; value: "PreserveAspectCrop" } + PropertyAction { target: label; property: "text"; value: "PreserveAspectCrop" } PauseAnimation { duration: 1000 } PropertyAction { value: "Tile" } - PropertyAction { target: Label; property: "text"; value: "Tile" } + PropertyAction { target: label; property: "text"; value: "Tile" } PauseAnimation { duration: 1000 } PropertyAction { value: "TileHorizontally" } - PropertyAction { target: Label; property: "text"; value: "TileHorizontally" } + PropertyAction { target: label; property: "text"; value: "TileHorizontally" } PauseAnimation { duration: 1000 } PropertyAction { value: "TileVertically" } - PropertyAction { target: Label; property: "text"; value: "TileVertically" } + PropertyAction { target: label; property: "text"; value: "TileVertically" } PauseAnimation { duration: 1000 } } Text { - id: Label + id: label font.pointSize: 24 color: "blue" style: "Outline" diff --git a/examples/declarative/flowview/FlickrView.qml b/examples/declarative/flowview/FlickrView.qml deleted file mode 100644 index 1cdb132..0000000 --- a/examples/declarative/flowview/FlickrView.qml +++ /dev/null @@ -1,46 +0,0 @@ -import Qt 4.6 - -Rectangle { - radius: 5; - border.width: 1; - width:400; - height: 120; - color: background; - - XmlListModel { - id: FeedModel - source: "http://api.flickr.com/services/feeds/photos_public.gne?format=rss2" - query: "/rss/channel/item" - namespaceDeclarations: "declare namespace media=\"http://search.yahoo.com/mrss/\";" - - XmlRole { name: "title"; query: "title/string()" } - XmlRole { name: "imagePath"; query: "media:thumbnail/@url/string()" } - XmlRole { name: "url"; query: "media:content/@url/string()" } - XmlRole { name: "description"; query: "description/string()" } - XmlRole { name: "tags"; query: "media:category/string()" } - XmlRole { name: "photoWidth"; query: "media:content/@width/string()" } - XmlRole { name: "photoHeight"; query: "media:content/@height/string()" } - XmlRole { name: "photoType"; query: "media:content/@type/string()" } - XmlRole { name: "photoAuthor"; query: "author/string()" } - XmlRole { name: "photoDate"; query: "pubDate/string()" } - } - - ListView { - clip: true - orientation: "Horizontal" - width: parent.width - height: 86 - y: 17 - model: FeedModel - delegate: - Item { width: 90; height: 86 - Rectangle { - anchors.centerIn: parent - width: 86; height: 86; - color: "white"; radius: 5 - Image { source: imagePath; x: 5; y: 5 } - } - } - } -} - diff --git a/examples/declarative/flowview/RoundedRect.qml b/examples/declarative/flowview/RoundedRect.qml deleted file mode 100644 index 7d2b58b..0000000 --- a/examples/declarative/flowview/RoundedRect.qml +++ /dev/null @@ -1,4 +0,0 @@ -import Qt 4.6 - -Rectangle { radius: 5; border.width: 1; width:400; height: 120; color: background; } - diff --git a/examples/declarative/flowview/flowview.qml b/examples/declarative/flowview/flowview.qml deleted file mode 100644 index 85c20d9..0000000 --- a/examples/declarative/flowview/flowview.qml +++ /dev/null @@ -1,147 +0,0 @@ -import Qt 4.6 - -Rectangle { - width: 800 - height: 800 - color: "black" - - Rectangle { - id: MyPhone - transformOrigin: "Center" - anchors.centerIn: parent - width: 800 - height: 480 - clip: true - - states: State { - name: "rotated" - PropertyChanges { target: MyListView; z: 2 } - PropertyChanges { target: TopBar; y: -30 } - PropertyChanges { target: BottomBar; y: 480 } - PropertyChanges { target: LeftBar; x: 0 } - PropertyChanges { target: RightBar; x: 770 } - } - transitions: Transition { - from: "" ; to: "rotated" - reversible: true - SequentialAnimation { - NumberAnimation { targets: [TopBar, BottomBar]; properties: "x,y"; easing: "easeInOutQuad" } - NumberAnimation { targets: [LeftBar, RightBar]; properties: "x,y"; easing: "easeInOutQuad"} - } - } - - color: "lightsteelblue" - - VisualDataModel { - id: Model - model: ListModel { - ListElement { background: "red"; weblet: "RoundedRect.qml" } - ListElement { background: "yellow"; weblet: "RoundedRect.qml" } - ListElement { background: "blue"; weblet: "RoundedRect.qml" } - ListElement { background: "green"; weblet: "FlickrView.qml" } - ListElement { background: "orange"; weblet: "RoundedRect.qml" } - ListElement { background: "lightblue"; weblet: "RoundedRect.qml" } - } - delegate: Package { - Item { id: List; Package.name: "list"; width:120; height: 400; } - Item { id: GridItem; Package.name: "grid"; width:400; height: 120; } - Loader { id: MyContent; width:400; height: 120; source: weblet } - - StateGroup { - states: [ - State { - name: "InList" - when: MyPhone.state == "rotated" - ParentChange { target: MyContent; parent: List } - PropertyChanges { target: MyContent; x: 120; y: 0; rotation: 90} - }, - State { - name: "InGrid" - when: MyPhone.state != "rotated" - ParentChange { target: MyContent; parent: GridItem } - PropertyChanges { target: MyContent; x: 0; y: 0; } - } - ] - transitions: [ - Transition { - from: "*"; to: "InGrid" - SequentialAnimation { - ParentAction{} - PauseAnimation { duration: 50 * List.FlowView.column } - NumberAnimation { properties: "x,y,rotation"; easing: "easeInOutQuad" } - } - }, - Transition { - from: "*"; to: "InList" - SequentialAnimation { - ParentAction{} - PauseAnimation { duration: 50 * (GridItem.FlowView.row * 2 + GridItem.FlowView.column) } - NumberAnimation { properties: "x,y,rotation"; easing: "easeInOutQuad" } - } - } - ] - } - - } - } - - Item { - FlowView { - id: MyListView - vertical: true - y: 40 - x: 40 - width: 800 - height: 400 - column: 1 - model: Model.parts.list - } - - FlowView { - z: 1 - y: 60 - width: 800 - height: 400 - column: 2 - model: Model.parts.grid - } - } - - Rectangle { - id: TopBar - width: 800 - height: 30 - } - Rectangle { - id: BottomBar - width: 800 - height: 30 - y: 450 - } - Rectangle { - id: LeftBar - x: -30 - width: 30 - height: 480 - } - Rectangle { - id: RightBar - x: 800 - width: 30 - height: 480 - } - } - - Rectangle { - width: 80 - height: 80 - anchors.right: parent.right - anchors.bottom: parent.bottom - Text { text: "Switch" } - MouseRegion { - anchors.fill: parent - onClicked: if(MyPhone.state == "rotated") MyPhone.state=""; else MyPhone.state = "rotated"; - } - } - -} diff --git a/examples/declarative/focusscope/test.qml b/examples/declarative/focusscope/test.qml index 77ffb84..ab5a143 100644 --- a/examples/declarative/focusscope/test.qml +++ b/examples/declarative/focusscope/test.qml @@ -8,28 +8,28 @@ Rectangle { Keys.onDigit9Pressed: print("Error - Root") FocusScope { - id: MyScope + id: myScope focus: true Keys.onDigit9Pressed: print("Error - FocusScope") - + Rectangle { height: 120 width: 420 color: "transparent" border.width: 5 - border.color: MyScope.wantsFocus?"blue":"black" + border.color: myScope.wantsFocus?"blue":"black" Rectangle { - id: Item1 - x: 10; y: 10 + id: item1 + x: 10; y: 10 width: 100; height: 100; color: "green" border.width: 5 border.color: wantsFocus?"blue":"black" Keys.onDigit9Pressed: print("Top Left"); - KeyNavigation.right: Item2 - focus: true + KeyNavigation.right: item2 + focus: true Rectangle { width: 50; height: 50; anchors.centerIn: parent @@ -38,12 +38,12 @@ Rectangle { } Rectangle { - id: Item2 + id: item2 x: 310; y: 10 width: 100; height: 100; color: "green" border.width: 5 border.color: wantsFocus?"blue":"black" - KeyNavigation.left: Item1 + KeyNavigation.left: item1 Keys.onDigit9Pressed: print("Top Right"); Rectangle { @@ -52,20 +52,20 @@ Rectangle { } } } - KeyNavigation.down: Item3 + KeyNavigation.down: item3 } Text { x:100; y:170; text: "Blue border indicates scoped focus\nBlack border indicates NOT scoped focus\nRed box indicates active focus\nUse arrow keys to navigate\nPress \"9\" to print currently focused item" } Rectangle { - id: Item3 + id: item3 x: 10; y: 300 width: 100; height: 100; color: "green" border.width: 5 border.color: wantsFocus?"blue":"black" Keys.onDigit9Pressed: print("Bottom Left"); - KeyNavigation.up: MyScope + KeyNavigation.up: myScope Rectangle { width: 50; height: 50; anchors.centerIn: parent diff --git a/examples/declarative/focusscope/test3.qml b/examples/declarative/focusscope/test3.qml index 8a53c3a..e5aa7b6 100644 --- a/examples/declarative/focusscope/test3.qml +++ b/examples/declarative/focusscope/test3.qml @@ -6,7 +6,7 @@ Rectangle { height: 600 ListModel { - id: Model + id: model ListElement { name: "1" } ListElement { name: "2" } ListElement { name: "3" } @@ -19,16 +19,16 @@ Rectangle { } Component { - id: VerticalDelegate + id: verticalDelegate FocusScope { - id: Root - width: 50; height: 50; + id: root + width: 50; height: 50; Keys.onDigit9Pressed: print("Error - " + name) - Rectangle { + Rectangle { focus: true Keys.onDigit9Pressed: print(name) - width: 50; height: 50; - color: Root.ListView.isCurrentItem?"red":"green" + width: 50; height: 50; + color: root.ListView.isCurrentItem?"red":"green" Text { text: name; anchors.centerIn: parent } } } @@ -37,8 +37,8 @@ Rectangle { ListView { width: 800; height: 50; orientation: "Horizontal" focus: true - model: Model - delegate: VerticalDelegate + model: model + delegate: verticalDelegate preferredHighlightBegin: 100 preferredHighlightEnd: 101 strictlyEnforceHighlightRange: true diff --git a/examples/declarative/focusscope/test4.qml b/examples/declarative/focusscope/test4.qml index f366543..5d4fe35 100644 --- a/examples/declarative/focusscope/test4.qml +++ b/examples/declarative/focusscope/test4.qml @@ -8,27 +8,27 @@ Rectangle { Keys.onDigit9Pressed: print("Error - Root") FocusScope { - id: MyScope + id: myScope Keys.onDigit9Pressed: print("Error - FocusScope") - + Rectangle { height: 120 width: 420 color: "transparent" border.width: 5 - border.color: MyScope.wantsFocus?"blue":"black" + border.color: myScope.wantsFocus?"blue":"black" Rectangle { - id: Item1 - x: 10; y: 10 + id: item1 + x: 10; y: 10 width: 100; height: 100; color: "green" border.width: 5 border.color: wantsFocus?"blue":"black" Keys.onDigit9Pressed: print("Error - Top Left"); - KeyNavigation.right: Item2 - focus: true + KeyNavigation.right: item2 + focus: true Rectangle { width: 50; height: 50; anchors.centerIn: parent @@ -37,12 +37,12 @@ Rectangle { } Rectangle { - id: Item2 + id: item2 x: 310; y: 10 width: 100; height: 100; color: "green" border.width: 5 border.color: wantsFocus?"blue":"black" - KeyNavigation.left: Item1 + KeyNavigation.left: item1 Keys.onDigit9Pressed: print("Error - Top Right"); Rectangle { @@ -51,20 +51,20 @@ Rectangle { } } } - KeyNavigation.down: Item3 + KeyNavigation.down: item3 } Text { x:100; y:170; text: "There should be no blue borders, or red squares.\nPressing \"9\" should do nothing.\nArrow keys should have no effect." } Rectangle { - id: Item3 + id: item3 x: 10; y: 300 width: 100; height: 100; color: "green" border.width: 5 border.color: wantsFocus?"blue":"black" Keys.onDigit9Pressed: print("Error - Bottom Left"); - KeyNavigation.up: MyScope + KeyNavigation.up: myScope Rectangle { width: 50; height: 50; anchors.centerIn: parent diff --git a/examples/declarative/follow/follow.qml b/examples/declarative/follow/follow.qml index 1f585e2..3e164f9 100644 --- a/examples/declarative/follow/follow.qml +++ b/examples/declarative/follow/follow.qml @@ -4,7 +4,7 @@ Rectangle { color: "#ffffff" width: 320; height: 240 Rectangle { - id: Rect + id: rect color: "#00ff00" y: 200; width: 60; height: 20 y: SequentialAnimation { @@ -24,43 +24,43 @@ Rectangle { // Velocity Rectangle { color: "#ff0000" - x: Rect.width; width: Rect.width; height: 20 + x: rect.width; width: rect.width; height: 20 y: 200 - y: SpringFollow { source: Rect.y; velocity: 200 } + y: SpringFollow { source: rect.y; velocity: 200 } } - Text { x: Rect.width; y: 220; text: "Velocity" } + Text { x: rect.width; y: 220; text: "Velocity" } // Spring Rectangle { color: "#ff0000" - x: Rect.width * 2; width: Rect.width/2; height: 20 + x: rect.width * 2; width: rect.width/2; height: 20 y: 200 - y: SpringFollow { source: Rect.y; spring: 1.0; damping: 0.2 } + y: SpringFollow { source: rect.y; spring: 1.0; damping: 0.2 } } Rectangle { color: "#880000" - x: Rect.width * 2.5; width: Rect.width/2; height: 20 + x: rect.width * 2.5; width: rect.width/2; height: 20 y: 200 - y: SpringFollow { source: Rect.y; spring: 1.0; damping: 0.2; mass: 3.0 } // "heavier" object + y: SpringFollow { source: rect.y; spring: 1.0; damping: 0.2; mass: 3.0 } // "heavier" object } - Text { x: Rect.width * 2; y: 220; text: "Spring" } + Text { x: rect.width * 2; y: 220; text: "Spring" } // Follow mouse MouseRegion { - id: Mouse + id: mouseRegion anchors.fill: parent Rectangle { - id: "Ball" + id: ball width: 20; height: 20 radius: 10 color: "#0000ff" - x: SpringFollow { id: "F1"; source: Mouse.mouseX-10; spring: 1.0; damping: 0.05; epsilon: 0.25 } - y: SpringFollow { id: "F2"; source: Mouse.mouseY-10; spring: 1.0; damping: 0.05; epsilon: 0.25 } + x: SpringFollow { id: f1; source: mouseRegion.mouseX-10; spring: 1.0; damping: 0.05; epsilon: 0.25 } + y: SpringFollow { id: f2; source: mouseRegion.mouseY-10; spring: 1.0; damping: 0.05; epsilon: 0.25 } states: [ State { name: "following" - when: !F1.inSync || !F2.inSync - PropertyChanges { target: Ball; color: "#ff0000" } + when: !f1.inSync || !f2.inSync + PropertyChanges { target: ball; color: "#ff0000" } } ] transitions: [ diff --git a/examples/declarative/follow/pong.qml b/examples/declarative/follow/pong.qml index b51c0d0..10ded36 100644 --- a/examples/declarative/follow/pong.qml +++ b/examples/declarative/follow/pong.qml @@ -1,37 +1,37 @@ import Qt 4.6 Rectangle { - id: Page + id: page width: 640; height: 480 color: "#000000" // Make a ball to bounce Rectangle { // Add a property for the target y coordinate - property var targetY : Page.height-10 + property var targetY : page.height-10 property var direction : "right" - id: Ball + id: ball color: "#00ee00" x: 20; width: 20; height: 20; z: 1 // Move the ball to the right and back to the left repeatedly x: SequentialAnimation { running: true; repeat: true - NumberAnimation { to: Page.width-40; duration: 2000 } - PropertyAction { target: Ball; property: "direction"; value: "left" } + NumberAnimation { to: page.width-40; duration: 2000 } + PropertyAction { target: ball; property: "direction"; value: "left" } NumberAnimation { to: 20; duration: 2000 } - PropertyAction { target: Ball; property: "direction"; value: "right" } + PropertyAction { target: ball; property: "direction"; value: "right" } } // Make y follow the target y coordinate, with a velocity of 200 - y: SpringFollow { source: Ball.targetY; velocity: 200 } + y: SpringFollow { source: ball.targetY; velocity: 200 } // Detect the ball hitting the top or bottom of the view and bounce it onYChanged: { if (y <= 0) - targetY = Page.height-20; - else if (y >= Page.height-20) + targetY = page.height-20; + else if (y >= page.height-20) targetY = 0; } } @@ -39,31 +39,31 @@ Rectangle { // Place bats to the left and right of the view, following the y // coordinates of the ball. Rectangle { - id: LeftBat + id: leftBat color: "#00ee00" x: 2; width: 20; height: 90 y: SpringFollow { - source: Ball.y-45; velocity: 300 - enabled: Ball.direction == 'left' + source: ball.y-45; velocity: 300 + enabled: ball.direction == 'left' } } Rectangle { - id: RightBat + id: rightBat color: "#00ee00" - x: Page.width-22; width: 20; height: 90 + x: page.width-22; width: 20; height: 90 y: SpringFollow { - source: Ball.y-45; velocity: 300 - enabled: Ball.direction == 'right' + source: ball.y-45; velocity: 300 + enabled: ball.direction == 'right' } } // The rest, to make it look realistic, if neither ever scores... - Rectangle { color: "#00ee00"; x: Page.width/2-80; y: 0; width: 40; height: 60 } - Rectangle { color: "#000000"; x: Page.width/2-70; y: 10; width: 20; height: 40 } - Rectangle { color: "#00ee00"; x: Page.width/2+40; y: 0; width: 40; height: 60 } - Rectangle { color: "#000000"; x: Page.width/2+50; y: 10; width: 20; height: 40 } + Rectangle { color: "#00ee00"; x: page.width/2-80; y: 0; width: 40; height: 60 } + Rectangle { color: "#000000"; x: page.width/2-70; y: 10; width: 20; height: 40 } + Rectangle { color: "#00ee00"; x: page.width/2+40; y: 0; width: 40; height: 60 } + Rectangle { color: "#000000"; x: page.width/2+50; y: 10; width: 20; height: 40 } Repeater { - model: Page.height/20 - Rectangle { color: "#00ee00"; x: Page.width/2-5; y: index*20; width: 10; height: 10 } + model: page.height/20 + Rectangle { color: "#00ee00"; x: page.width/2-5; y: index*20; width: 10; height: 10 } } } diff --git a/examples/declarative/fonts/fonts.qml b/examples/declarative/fonts/fonts.qml index f7ed494..4029f8b 100644 --- a/examples/declarative/fonts/fonts.qml +++ b/examples/declarative/fonts/fonts.qml @@ -4,62 +4,62 @@ Rectangle { property string myText: "Lorem ipsum dolor sit amet, consectetur adipisicing elit" width: 800; height: 600 - color: Palette.base + color: palette.base - SystemPalette { id: Palette; colorGroup: Qt.Active } + SystemPalette { id: palette; colorGroup: Qt.Active } - FontLoader { id: FixedFont; name: "Courier" } + FontLoader { id: fixedFont; name: "Courier" } - FontLoader { id: LocalFont; source: "fonts/Fontin-Bold.ttf" } + FontLoader { id: localFont; source: "fonts/Fontin-Bold.ttf" } /* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */ - FontLoader { id: WebFont; source: "http://www.princexml.com/fonts/steffmann/Starburst.ttf" } - FontLoader { id: WebFont2; source: "http://wrong.address.org" } + FontLoader { id: webFont; source: "http://www.princexml.com/fonts/steffmann/Starburst.ttf" } + FontLoader { id: webFont2; source: "http://wrong.address.org" } Column { anchors.fill: parent anchors.leftMargin: 10; anchors.rightMargin: 10 Text { text: myText - color: Palette.windowText + color: palette.windowText width: parent.width; elide: "ElideRight" font.family: "Times" font.pointSize: 32 } Text { text: myText - color: Palette.windowText + color: palette.windowText width: parent.width; elide: "ElideRight" - font.family: FixedFont.name + font.family: fixedFont.name font.pointSize: 32 } Text { text: myText - color: Palette.windowText + color: palette.windowText width: parent.width; elide: "ElideRight" - font.family: LocalFont.name + font.family: localFont.name font.pointSize: 32 } Text { text: { - if (WebFont.status == 1) myText - else if (WebFont.status == 2) "Loading..." - else if (WebFont.status == 3) "Error loading font" + if (webFont.status == 1) myText + else if (webFont.status == 2) "Loading..." + else if (webFont.status == 3) "Error loading font" } - color: Palette.windowText + color: palette.windowText width: parent.width; elide: "ElideRight" - font.family: WebFont.name + font.family: webFont.name font.pointSize: 32 } Text { text: { - if (WebFont2.status == 1) myText - else if (WebFont2.status == 2) "Loading..." - else if (WebFont2.status == 3) "Error loading font" + if (webFont2.status == 1) myText + else if (webFont2.status == 2) "Loading..." + else if (webFont2.status == 3) "Error loading font" } - color: Palette.windowText + color: palette.windowText width: parent.width; elide: "ElideRight" - font.family: WebFont2.name + font.family: webFont2.name font.pointSize: 32 } } diff --git a/examples/declarative/gridview/gridview.qml b/examples/declarative/gridview/gridview.qml new file mode 100644 index 0000000..2e5110a --- /dev/null +++ b/examples/declarative/gridview/gridview.qml @@ -0,0 +1,60 @@ +import Qt 4.6 + +Rectangle { + width: 300; height: 400; color: "white" + + ListModel { + id: AppModel + ListElement { + name: "Music" + icon: "AudioPlayer_48.png" + } + ListElement { + name: "Movies" + icon: "VideoPlayer_48.png" + } + ListElement { + name: "Camera" + icon: "Camera_48.png" + } + ListElement { + name: "Calendar" + icon: "DateBook_48.png" + } + ListElement { + name: "Messaging" + icon: "EMail_48.png" + } + ListElement { + name: "Todo List" + icon: "TodoList_48.png" + } + ListElement { + name: "Contacts" + icon: "AddressBook_48.png" + } + } + + Component { + id: AppDelegate + Item { + width: 100; height: 100 + Image { id: Icon; y: 20; anchors.horizontalCenter: parent.horizontalCenter; source: icon } + Text { anchors.top: Icon.bottom; anchors.horizontalCenter: parent.horizontalCenter; text: name } + } + } + + Component { + id: AppHighlight + Rectangle { width: 80; height: 80; color: "#FFFF88" } + } + + GridView { + id: List1 + anchors.fill: parent + cellWidth: 100; cellHeight: 100 + model: AppModel; delegate: AppDelegate + highlight: AppHighlight + focus: true + } +} diff --git a/examples/declarative/gridview/pics/AddressBook_48.png b/examples/declarative/gridview/pics/AddressBook_48.png Binary files differnew file mode 100644 index 0000000..1ab7c8e --- /dev/null +++ b/examples/declarative/gridview/pics/AddressBook_48.png diff --git a/examples/declarative/gridview/pics/AudioPlayer_48.png b/examples/declarative/gridview/pics/AudioPlayer_48.png Binary files differnew file mode 100644 index 0000000..f4b8689 --- /dev/null +++ b/examples/declarative/gridview/pics/AudioPlayer_48.png diff --git a/examples/declarative/gridview/pics/Camera_48.png b/examples/declarative/gridview/pics/Camera_48.png Binary files differnew file mode 100644 index 0000000..c76b524 --- /dev/null +++ b/examples/declarative/gridview/pics/Camera_48.png diff --git a/examples/declarative/gridview/pics/DateBook_48.png b/examples/declarative/gridview/pics/DateBook_48.png Binary files differnew file mode 100644 index 0000000..58f5787 --- /dev/null +++ b/examples/declarative/gridview/pics/DateBook_48.png diff --git a/examples/declarative/gridview/pics/EMail_48.png b/examples/declarative/gridview/pics/EMail_48.png Binary files differnew file mode 100644 index 0000000..d6d84a6 --- /dev/null +++ b/examples/declarative/gridview/pics/EMail_48.png diff --git a/examples/declarative/gridview/pics/TodoList_48.png b/examples/declarative/gridview/pics/TodoList_48.png Binary files differnew file mode 100644 index 0000000..0988448 --- /dev/null +++ b/examples/declarative/gridview/pics/TodoList_48.png diff --git a/examples/declarative/gridview/pics/VideoPlayer_48.png b/examples/declarative/gridview/pics/VideoPlayer_48.png Binary files differnew file mode 100644 index 0000000..52638c5 --- /dev/null +++ b/examples/declarative/gridview/pics/VideoPlayer_48.png diff --git a/examples/declarative/listview/content/ClickAutoRepeating.qml b/examples/declarative/listview/content/ClickAutoRepeating.qml index 19dd6f6..f0e7df1 100644 --- a/examples/declarative/listview/content/ClickAutoRepeating.qml +++ b/examples/declarative/listview/content/ClickAutoRepeating.qml @@ -1,7 +1,7 @@ import Qt 4.6 Item { - id: Page + id: page property int repeatdelay: 300 property int repeatperiod: 75 property bool pressed: false @@ -9,21 +9,20 @@ Item { signal released signal clicked pressed: SequentialAnimation { - id: AutoRepeat - PropertyAction { target: Page; property: "pressed"; value: true } - ScriptAction { script: Page.onPressed } - ScriptAction { script: Page.onClicked } + id: autoRepeat + PropertyAction { target: page; property: "pressed"; value: true } + ScriptAction { script: page.onPressed } + ScriptAction { script: page.onClicked } PauseAnimation { duration: repeatdelay } SequentialAnimation { repeat: true - ScriptAction { script: Page.onClicked } + ScriptAction { script: page.onClicked } PauseAnimation { duration: repeatperiod } } } MouseRegion { - id: MR anchors.fill: parent - onPressed: AutoRepeat.start() - onReleased: { AutoRepeat.stop(); parent.pressed = false; Page.released } + onPressed: autoRepeat.start() + onReleased: { autoRepeat.stop(); parent.pressed = false; page.released } } } diff --git a/examples/declarative/listview/content/MediaButton.qml b/examples/declarative/listview/content/MediaButton.qml index 3b0ef1e..1c88844 100644 --- a/examples/declarative/listview/content/MediaButton.qml +++ b/examples/declarative/listview/content/MediaButton.qml @@ -4,36 +4,32 @@ Item { property var text signal clicked - id: Container + id: container Image { - id: Normal + id: normal source: "pics/button.png" } Image { - id: Pressed + id: pressed source: "pics/button-pressed.png" opacity: 0 } MouseRegion { - id: ClickRegion - anchors.fill: Normal - onClicked: { Container.clicked(); } + id: clickRegion + anchors.fill: normal + onClicked: { container.clicked(); } } Text { font.bold: true color: "white" - anchors.centerIn: Normal - text: Container.text + anchors.centerIn: normal + text: container.text + } + width: normal.width + + states: State { + name: "Pressed" + when: clickRegion.pressed == true + PropertyChanges { target: pressed; opacity: 1 } } - width: Normal.width - states: [ - State { - name: "Pressed" - when: ClickRegion.pressed == true - PropertyChanges { - target: Pressed - opacity: 1 - } - } - ] } diff --git a/examples/declarative/listview/dynamic.qml b/examples/declarative/listview/dynamic.qml index 52c3c0b..4f8e483 100644 --- a/examples/declarative/listview/dynamic.qml +++ b/examples/declarative/listview/dynamic.qml @@ -6,7 +6,7 @@ Item { height: 500 ListModel { - id: FruitModel + id: fruitModel ListElement { name: "Apple" cost: 2.45 @@ -56,13 +56,13 @@ Item { } Component { - id: FruitDelegate + id: fruitDelegate Item { width: parent.width; height: 55 - Text { id: Label; font.pixelSize: 24; text: name; elide: "ElideRight"; anchors.right: Cost.left; anchors.left:parent.left } - Text { id: Cost; font.pixelSize: 24; text: '$'+Number(cost).toFixed(2); anchors.right: ItemButtons.left } - Row { - anchors.top: Label.bottom + Text { id: label; font.pixelSize: 24; text: name; elide: "ElideRight"; anchors.right: cost.left; anchors.left:parent.left } + Text { id: cost; font.pixelSize: 24; text: '$'+Number(cost).toFixed(2); anchors.right: itemButtons.left } + Row { + anchors.top: label.bottom spacing: 5 Repeater { model: attributes @@ -72,27 +72,27 @@ Item { } } Row { - id: ItemButtons + id: itemButtons anchors.right: parent.right width: childrenRect.width Image { source: "content/pics/add.png" - ClickAutoRepeating { id: ClickUp; anchors.fill: parent; onClicked: FruitModel.set(index,"cost",Number(cost)+0.25) } - scale: ClickUp.pressed ? 0.9 : 1 + ClickAutoRepeating { id: clickUp; anchors.fill: parent; onClicked: fruitModel.set(index,"cost",Number(cost)+0.25) } + scale: clickUp.pressed ? 0.9 : 1 } Image { source: "content/pics/del.png" - ClickAutoRepeating { id: ClickDown; anchors.fill: parent; onClicked: FruitModel.set(index,"cost",Math.max(0,Number(cost)-0.25)) } - scale: ClickDown.pressed ? 0.9 : 1 + ClickAutoRepeating { id: clickDown; anchors.fill: parent; onClicked: fruitModel.set(index,"cost",Math.max(0,Number(cost)-0.25)) } + scale: clickDown.pressed ? 0.9 : 1 } Image { source: "content/pics/trash.png" - MouseRegion { anchors.fill: parent; onClicked: FruitModel.remove(index) } + MouseRegion { anchors.fill: parent; onClicked: fruitModel.remove(index) } } Column { width: childrenRect.width Image { source: "content/pics/moreUp.png" - MouseRegion { anchors.fill: parent; onClicked: FruitModel.move(index,index-1,1) } + MouseRegion { anchors.fill: parent; onClicked: fruitModel.move(index,index-1,1) } } Image { source: "content/pics/moreDown.png" - MouseRegion { anchors.fill: parent; onClicked: FruitModel.move(index,index+1,1) } + MouseRegion { anchors.fill: parent; onClicked: fruitModel.move(index,index+1,1) } } } } @@ -100,23 +100,23 @@ Item { } ListView { - model: FruitModel - delegate: FruitDelegate + model: fruitModel + delegate: fruitDelegate anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right - anchors.bottom: Buttons.top + anchors.bottom: buttons.top } Row { width: childrenRect.width height: childrenRect.height anchors.bottom: parent.bottom - id: Buttons + id: buttons Image { source: "content/pics/add.png" MouseRegion { anchors.fill: parent; onClicked: { - FruitModel.append({ + fruitModel.append({ "name":"Pizza Margarita", "cost":5.95, "attributes":[{"description": "Cheese"},{"description": "Tomato"}] @@ -127,7 +127,7 @@ Item { Image { source: "content/pics/add.png" MouseRegion { anchors.fill: parent; onClicked: { - FruitModel.insert(0,{ + fruitModel.insert(0,{ "name":"Pizza Supreme", "cost":9.95, "attributes":[{"description": "Cheese"},{"description": "Tomato"},{"description": "The Works"}] @@ -136,7 +136,7 @@ Item { } } Image { source: "content/pics/trash.png" - MouseRegion { anchors.fill: parent; onClicked: FruitModel.clear() } + MouseRegion { anchors.fill: parent; onClicked: fruitModel.clear() } } } } diff --git a/examples/declarative/listview/highlight.qml b/examples/declarative/listview/highlight.qml index b6db453..be1f62d 100644 --- a/examples/declarative/listview/highlight.qml +++ b/examples/declarative/listview/highlight.qml @@ -10,9 +10,9 @@ Rectangle { // Define a delegate component. A component will be // instantiated for each visible item in the list. Component { - id: PetDelegate + id: petDelegate Item { - id: Wrapper + id: wrapper width: 200; height: 50 Column { Text { text: 'Name: ' + name } @@ -24,8 +24,8 @@ Rectangle { states: [ State { name: "Current" - when: Wrapper.ListView.isCurrentItem - PropertyChanges { target: Wrapper; x: 10 } + when: wrapper.ListView.isCurrentItem + PropertyChanges { target: wrapper; x: 10 } } ] transitions: [ @@ -41,17 +41,17 @@ Rectangle { // is set to false in the ListView so that we can control how the // highlight moves to the current item. Component { - id: PetHighlight + id: petHighlight Rectangle { width: 200; height: 50; color: "#FFFF88" - y: SpringFollow { source: List1.currentItem.y; spring: 3; damping: 0.1 } + y: SpringFollow { source: list1.currentItem.y; spring: 3; damping: 0.1 } } } ListView { - id: List1 + id: list1 width: 200; height: parent.height - model: MyPetsModel; delegate: PetDelegate - highlight: PetHighlight; highlightFollowsCurrentItem: false + model: MyPetsModel; delegate: petDelegate + highlight: petHighlight; highlightFollowsCurrentItem: false focus: true } } diff --git a/examples/declarative/listview/itemlist.qml b/examples/declarative/listview/itemlist.qml index 01781ec..6dfc90b 100644 --- a/examples/declarative/listview/itemlist.qml +++ b/examples/declarative/listview/itemlist.qml @@ -9,26 +9,26 @@ Rectangle { height: 320 VisualItemModel { - id: ItemModel + id: itemModel Rectangle { - height: View.height; width: View.width; color: "#FFFEF0" + height: view.height; width: view.width; color: "#FFFEF0" Text { text: "Page 1"; font.bold: true; anchors.centerIn: parent } } Rectangle { - height: View.height; width: View.width; color: "#F0FFF7" + height: view.height; width: view.width; color: "#F0FFF7" Text { text: "Page 2"; font.bold: true; anchors.centerIn: parent } } Rectangle { - height: View.height; width: View.width; color: "#F4F0FF" + height: view.height; width: view.width; color: "#F4F0FF" Text { text: "Page 3"; font.bold: true; anchors.centerIn: parent } } } ListView { - id: View + id: view anchors.fill: parent anchors.bottomMargin: 30 - model: ItemModel + model: itemModel preferredHighlightBegin: 0 preferredHighlightEnd: 1 strictlyEnforceHighlightRange: true @@ -37,7 +37,7 @@ Rectangle { Rectangle { color: "gray" - anchors.top: View.bottom + anchors.top: view.bottom anchors.bottom: parent.bottom height: 30 width: 240 @@ -46,12 +46,12 @@ Rectangle { anchors.centerIn: parent spacing: 20 Repeater { - model: ItemModel.count + model: itemModel.count Rectangle { width: 5; height: 5 radius: 3 - MouseRegion { width: 20; height: 20; anchors.centerIn: parent; onClicked: View.currentIndex = index } - color: View.currentIndex == index ? "blue" : "white" + MouseRegion { width: 20; height: 20; anchors.centerIn: parent; onClicked: view.currentIndex = index } + color: view.currentIndex == index ? "blue" : "white" } } } diff --git a/examples/declarative/listview/listview.qml b/examples/declarative/listview/listview.qml index ac1cef1..98974fd 100644 --- a/examples/declarative/listview/listview.qml +++ b/examples/declarative/listview/listview.qml @@ -10,9 +10,8 @@ Rectangle { // Define a delegate component. A component will be // instantiated for each visible item in the list. Component { - id: PetDelegate + id: petDelegate Item { - id: Wrapper width: 200; height: 50 Column { Text { text: 'Name: ' + name } @@ -25,7 +24,7 @@ Rectangle { // Define a highlight component. Just one of these will be instantiated // by each ListView and placed behind the current item. Component { - id: PetHighlight + id: petHighlight Rectangle { color: "#FFFF88" } } @@ -50,25 +49,25 @@ Rectangle { // the third ListView's currentIndex. By flicking List3 with // the mouse, the current index of List1 will be changed. ListView { - id: List1 + id: list1 width: 200; height: parent.height - model: MyPetsModel; delegate: PetDelegate - highlight: PetHighlight; currentIndex: List3.currentIndex + model: MyPetsModel; delegate: petDelegate + highlight: petHighlight; currentIndex: list3.currentIndex focus: true } ListView { - id: List2 + id: list2 x: 200; width: 200; height: parent.height - model: MyPetsModel; delegate: PetDelegate; highlight: PetHighlight + model: MyPetsModel; delegate: petDelegate; highlight: petHighlight preferredHighlightBegin: 80 preferredHighlightEnd: 220 - currentIndex: List1.currentIndex + currentIndex: list1.currentIndex } ListView { - id: List3 + id: list3 x: 400; width: 200; height: parent.height - model: MyPetsModel; delegate: PetDelegate; highlight: PetHighlight - currentIndex: List1.currentIndex + model: MyPetsModel; delegate: petDelegate; highlight: petHighlight + currentIndex: list1.currentIndex preferredHighlightBegin: 125 preferredHighlightEnd: 126 strictlyEnforceHighlightRange: true diff --git a/examples/declarative/listview/recipes.qml b/examples/declarative/listview/recipes.qml index 2148ef4..4ccb344 100644 --- a/examples/declarative/listview/recipes.qml +++ b/examples/declarative/listview/recipes.qml @@ -13,7 +13,7 @@ Rectangle { id: recipeDelegate Item { id: wrapper - width: List.width + width: list.width // Create a property to contain the visibility of the details. // We can bind multiple element's opacity to this one property, // rather than having a "PropertyChanges" line for each element we @@ -102,7 +102,7 @@ Rectangle { // Make details visible PropertyChanges { target: wrapper; detailsOpacity: 1; x: 0 } // Make the detailed view fill the entire list area - PropertyChanges { target: wrapper; height: List.height } + PropertyChanges { target: wrapper; height: list.height } // Move the list so that this item is at the top. PropertyChanges { target: wrapper.ListView.view; explicit: true; viewportY: wrapper.y } // Disallow flicking while we're in detailed view @@ -125,7 +125,7 @@ Rectangle { ] // The actual list ListView { - id: List + id: list model: Recipes; delegate: recipeDelegate anchors.fill: parent; clip: true } diff --git a/examples/declarative/listview/sections.qml b/examples/declarative/listview/sections.qml index ddb4931..6b1a589 100644 --- a/examples/declarative/listview/sections.qml +++ b/examples/declarative/listview/sections.qml @@ -12,32 +12,32 @@ Rectangle { // Define a delegate component that includes a separator for sections. Component { - id: PetDelegate + id: petDelegate Item { - id: Wrapper + id: wrapper width: 200 // My height is the combined height of the description and the section separator - height: Separator.height + Desc.height + height: separator.height + desc.height Rectangle { - id: Separator + id: separator color: "lightsteelblue" width: parent.width // Only show the section separator when we are the beginning of a new section // Note that for this to work nicely, the list must be ordered by section. - height: Wrapper.ListView.prevSection != Wrapper.ListView.section ? 20 : 0 - opacity: Wrapper.ListView.prevSection != Wrapper.ListView.section ? 1 : 0 + height: wrapper.ListView.prevSection != wrapper.ListView.section ? 20 : 0 + opacity: wrapper.ListView.prevSection != wrapper.ListView.section ? 1 : 0 Text { - text: Wrapper.ListView.section; font.bold: true + text: wrapper.ListView.section; font.bold: true x: 2; height: parent.height; verticalAlignment: 'AlignVCenter' } } Item { - id: Desc + id: desc x: 5 - height: Layout.height + 4 - anchors.top: Separator.bottom + height: layout.height + 4 + anchors.top: separator.bottom Column { - id: Layout + id: layout y: 2 Text { text: 'Name: ' + name } Text { text: 'Type: ' + type } @@ -49,7 +49,7 @@ Rectangle { // Define a highlight component. Just one of these will be instantiated // by each ListView and placed behind the current item. Component { - id: PetHighlight + id: petHighlight Rectangle { color: "#FFFF88" } @@ -60,8 +60,8 @@ Rectangle { width: 200 height: parent.height model: MyPetsModel - delegate: PetDelegate - highlight: PetHighlight + delegate: petDelegate + highlight: petHighlight // The sectionExpression is simply the size of the pet. // We use this to determine which section we are in above. sectionExpression: "size" diff --git a/examples/declarative/loader/Browser.qml b/examples/declarative/loader/Browser.qml index 6711de4..5f972f1 100644 --- a/examples/declarative/loader/Browser.qml +++ b/examples/declarative/loader/Browser.qml @@ -1,22 +1,22 @@ import Qt 4.6 Rectangle { - id: Root + id: root width: parent.width height: parent.height - color: Palette.base + color: palette.base FolderListModel { id: folders nameFilters: [ "*.qml" ] // folder: "E:" } - SystemPalette { id: Palette; colorGroup: Qt.Active } + SystemPalette { id: palette; colorGroup: Qt.Active } Component { - id: FolderDelegate + id: folderDelegate Rectangle { - id: Wrapper + id: wrapper function launch() { if (folders.isFolder(index)) { folders.folder = filePath; @@ -24,15 +24,15 @@ Rectangle { qmlLauncher.launch(filePath); } } - width: Root.width + width: root.width height: 32 color: "transparent" Rectangle { - id: Highlight; visible: false + id: highlight; visible: false anchors.fill: parent gradient: Gradient { - GradientStop { id: t1; position: 0.0; color: Palette.highlight } - GradientStop { id: t2; position: 1.0; color: Palette.lighter(Palette.highlight) } + GradientStop { id: t1; position: 0.0; color: palette.highlight } + GradientStop { id: t2; position: 1.0; color: palette.lighter(palette.highlight) } } } Item { @@ -40,23 +40,23 @@ Rectangle { Image { source: "images/fileopen.png"; anchors.centerIn: parent; visible: folders.isFolder(index)} } Text { - id: NameText + id: nameText anchors.fill: parent; verticalAlignment: "AlignVCenter" text: fileName; anchors.leftMargin: 32 font.pointSize: 10 - color: Palette.windowText + color: palette.windowText } MouseRegion { - id: Mouse + id: mouseRegion anchors.fill: parent onClicked: { launch() } } states: [ State { name: "pressed" - when: Mouse.pressed - PropertyChanges { target: Highlight; visible: true } - PropertyChanges { target: NameText; color: Palette.highlightedText } + when: mouseRegion.pressed + PropertyChanges { target: highlight; visible: true } + PropertyChanges { target: nameText; color: palette.highlightedText } } ] } @@ -70,43 +70,43 @@ Rectangle { } ListView { - id: View - anchors.top: TitleBar.bottom + id: view + anchors.top: titleBar.bottom anchors.left: parent.left anchors.right: parent.right anchors.bottom: parent.bottom model: folders - delegate: FolderDelegate + delegate: folderDelegate highlight: Rectangle { color: "#FFFBAF" } clip: true focus: true Keys.onPressed: { if (event.key == Qt.Key_Return || event.key == Qt.Key_Select) { - View.currentItem.launch(); + view.currentItem.launch(); event.accepted = true; } } } Rectangle { - id: TitleBar + id: titleBar width: parent.width height: 32 - color: Palette.button; border.color: Palette.mid + color: palette.button; border.color: palette.mid Rectangle { - id: UpButton + id: upButton width: 30 - height: TitleBar.height - border.color: Palette.mid; color: "transparent" + height: titleBar.height + border.color: palette.mid; color: "transparent" MouseRegion { anchors.fill: parent; onClicked: folders.folder = up(folders.folder) } Image { anchors.centerIn: parent; source: "images/up.png" } } Text { - anchors.left: UpButton.right; anchors.right: parent.right; height: parent.height + anchors.left: upButton.right; anchors.right: parent.right; height: parent.height anchors.leftMargin: 4; anchors.rightMargin: 4 - text: folders.folder; color: Palette.buttonText + text: folders.folder; color: palette.buttonText elide: "ElideLeft"; horizontalAlignment: "AlignRight"; verticalAlignment: "AlignVCenter" } } diff --git a/examples/declarative/loader/Button.qml b/examples/declarative/loader/Button.qml index d01a658..928ff06 100644 --- a/examples/declarative/loader/Button.qml +++ b/examples/declarative/loader/Button.qml @@ -1,16 +1,16 @@ import Qt 4.6 Rectangle { - id: Container + id: container property var text signal clicked - height: Text.height + 10 - width: Text.width + 20 + height: text.height + 10 + width: text.width + 20 border.width: 1 radius: 4 color: "grey" - MouseRegion { anchors.fill: parent; onClicked: Container.clicked() } - Text { id: Text; anchors.centerIn:parent; font.pointSize: 10; text: parent.text } + MouseRegion { anchors.fill: parent; onClicked: container.clicked() } + Text { id: text; anchors.centerIn:parent; font.pointSize: 10; text: parent.text } } diff --git a/examples/declarative/scrollbar/ScrollBar.qml b/examples/declarative/scrollbar/ScrollBar.qml index b42563d..802b537 100644 --- a/examples/declarative/scrollbar/ScrollBar.qml +++ b/examples/declarative/scrollbar/ScrollBar.qml @@ -1,7 +1,7 @@ import Qt 4.6 Item { - id: ScrollBar + id: scrollBar // The properties that define the scrollbar's state. // position and pageSize are in the range 0.0 - 1.0. They are relative to the // height of the page, i.e. a pageSize of 0.5 means that you can see 50% @@ -13,7 +13,7 @@ Item { // A light, semi-transparent background Rectangle { - id: Background + id: background radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1) color: "white"; opacity: 0.3 anchors.fill: parent @@ -23,9 +23,9 @@ Item { opacity: 0.7 color: "black" radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1) - x: orientation == 'Vertical' ? 1 : (ScrollBar.position * (ScrollBar.width-2) + 1) - y: orientation == 'Vertical' ? (ScrollBar.position * (ScrollBar.height-2) + 1) : 1 - width: orientation == 'Vertical' ? (parent.width-2) : (ScrollBar.pageSize * (ScrollBar.width-2)) - height: orientation == 'Vertical' ? (ScrollBar.pageSize * (ScrollBar.height-2)) : (parent.height-2) + x: orientation == 'Vertical' ? 1 : (scrollBar.position * (scrollBar.width-2) + 1) + y: orientation == 'Vertical' ? (scrollBar.position * (scrollBar.height-2) + 1) : 1 + width: orientation == 'Vertical' ? (parent.width-2) : (scrollBar.pageSize * (scrollBar.width-2)) + height: orientation == 'Vertical' ? (scrollBar.pageSize * (scrollBar.height-2)) : (parent.height-2) } } diff --git a/examples/declarative/scrollbar/display.qml b/examples/declarative/scrollbar/display.qml index 0180bda..536a8b7 100644 --- a/examples/declarative/scrollbar/display.qml +++ b/examples/declarative/scrollbar/display.qml @@ -5,21 +5,21 @@ Rectangle { height: 480 // Create a flickable to view a large image. Flickable { - id: View + id: view anchors.fill: parent Image { - id: Picture + id: picture source: "pics/niagara_falls.jpg" } - viewportWidth: Picture.width - viewportHeight: Picture.height + viewportWidth: picture.width + viewportHeight: picture.height // Only show the scrollbars when the view is moving. states: [ State { name: "ShowBars" - when: View.moving - PropertyChanges { target: SBV; opacity: 1 } - PropertyChanges { target: SBH; opacity: 1 } + when: view.moving + PropertyChanges { target: verticalScrollBar; opacity: 1 } + PropertyChanges { target: horizontalScrollBar; opacity: 1 } } ] transitions: [ @@ -35,23 +35,23 @@ Rectangle { } // Attach scrollbars to the right and bottom edges of the view. ScrollBar { - id: SBV + id: verticalScrollBar opacity: 0 orientation: "Vertical" - position: View.visibleArea.yPosition - pageSize: View.visibleArea.heightRatio + position: view.visibleArea.yPosition + pageSize: view.visibleArea.heightRatio width: 12 - height: View.height-12 - anchors.right: View.right + height: view.height-12 + anchors.right: view.right } ScrollBar { - id: SBH + id: horizontalScrollBar opacity: 0 orientation: "Horizontal" - position: View.visibleArea.xPosition - pageSize: View.visibleArea.widthRatio + position: view.visibleArea.xPosition + pageSize: view.visibleArea.widthRatio height: 12 - width: View.width-12 - anchors.bottom: View.bottom + width: view.width-12 + anchors.bottom: view.bottom } } diff --git a/examples/declarative/slideswitch/Switch.qml b/examples/declarative/slideswitch/Switch.qml index a778c1a..1620805 100644 --- a/examples/declarative/slideswitch/Switch.qml +++ b/examples/declarative/slideswitch/Switch.qml @@ -1,53 +1,53 @@ import Qt 4.6 Item { - id: Switch - width: Groove.width; height: Groove.height + id: mySwitch + width: groove.width; height: groove.height property var on Script { function toggle() { - if(Switch.state == "On") - Switch.state = "Off"; + if(mySwitch.state == "On") + mySwitch.state = "Off"; else - Switch.state = "On"; + mySwitch.state = "On"; } function dorelease() { - if(Knob.x == 1) { - if(Switch.state == "Off") + if(knob.x == 1) { + if(mySwitch.state == "Off") return; } - if(Knob.x == 78) { - if(Switch.state == "On") + if(knob.x == 78) { + if(mySwitch.state == "On") return; } toggle(); } - + } - 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 + anchors.fill: knob onClicked: { toggle() } onReleased: { dorelease() } - drag.target: Knob; drag.axis: "XAxis"; drag.minimumX: 1; drag.maximumX: 78 + drag.target: knob; drag.axis: "XAxis"; drag.minimumX: 1; drag.maximumX: 78 } states: [ State { name: "On" - PropertyChanges { target: Knob; x: 78 } - PropertyChanges { target: Switch; on: true } + PropertyChanges { target: knob; x: 78 } + PropertyChanges { target: mySwitch; on: true } }, State { name: "Off" - PropertyChanges { target: Knob; x: 1 } - PropertyChanges { target: Switch; on: false } + PropertyChanges { target: knob; x: 1 } + PropertyChanges { target: mySwitch; on: false } } ] transitions: [ diff --git a/examples/declarative/smooth/GradientRect.qml b/examples/declarative/smooth/GradientRect.qml index c4a287c..ed56418 100644 --- a/examples/declarative/smooth/GradientRect.qml +++ b/examples/declarative/smooth/GradientRect.qml @@ -1,7 +1,7 @@ import Qt 4.6 Item { - id: MyRect + id: rect property string color property string border : "" property int rotation @@ -11,13 +11,13 @@ Item { width: 80; height: 80 Item { - anchors.centerIn: parent; rotation: MyRect.rotation; + anchors.centerIn: parent; rotation: rect.rotation; Rectangle { anchors.centerIn: parent; width: 80; height: 80 - border.color: MyRect.border; border.width: MyRect.border != "" ? 2 : 0 - radius: MyRect.radius; smooth: MyRect.smooth + border.color: rect.border; border.width: rect.border != "" ? 2 : 0 + radius: rect.radius; smooth: rect.smooth gradient: Gradient { - GradientStop { position: 0.0; color: MyRect.color } + GradientStop { position: 0.0; color: rect.color } GradientStop { position: 1.0; color: "white" } } } diff --git a/examples/declarative/smooth/MyRect.qml b/examples/declarative/smooth/MyRect.qml index 3b68307..9b6c3ae 100644 --- a/examples/declarative/smooth/MyRect.qml +++ b/examples/declarative/smooth/MyRect.qml @@ -1,7 +1,7 @@ import Qt 4.6 Item { - id: MyRect + id: rect property string color property string border : "" property int rotation @@ -11,11 +11,11 @@ Item { width: 80; height: 80 Item { - anchors.centerIn: parent; rotation: MyRect.rotation; + anchors.centerIn: parent; rotation: rect.rotation; Rectangle { anchors.centerIn: parent; width: 80; height: 80 - color: MyRect.color; border.color: MyRect.border; border.width: MyRect.border != "" ? 2 : 0 - radius: MyRect.radius; smooth: MyRect.smooth + color: rect.color; border.color: rect.border; border.width: rect.border != "" ? 2 : 0 + radius: rect.radius; smooth: rect.smooth } } } diff --git a/examples/declarative/snow/ImageBatch.qml b/examples/declarative/snow/ImageBatch.qml index 8980034..62f986c 100644 --- a/examples/declarative/snow/ImageBatch.qml +++ b/examples/declarative/snow/ImageBatch.qml @@ -1,7 +1,7 @@ import Qt 4.6 GridView { - id: MyGrid + id: grid property int offset: 0 property var ref property bool isSelected: ref.selectedItemColumn >= offset && ref.selectedItemColumn < offset + 5 @@ -17,10 +17,10 @@ GridView { cellHeight: imageHeight states: State { - name: "selected"; when: MyGrid.isSelected - PropertyChanges { target: MyGrid; z: 150 } + name: "selected"; when: grid.isSelected + PropertyChanges { target: grid; z: 150 } } - transitions: Transition { + transitions: Transition { SequentialAnimation { PauseAnimation { duration: 150 } PropertyAction { properties: "z" } @@ -35,20 +35,20 @@ GridView { XmlRole { name: "url"; query: "media:content/@url/string()" } } - Item { - id: Root - property bool isSelected: GridView.isCurrentItem && MyGrid.isSelected + Item { + id: root + property bool isSelected: GridView.isCurrentItem && grid.isSelected transformOrigin: "Center" - width: MyGrid.imageWidth; height: MyGrid.imageHeight; + width: grid.imageWidth; height: grid.imageHeight; - Image { id: FlickrImage; source: url; fillMode: "PreserveAspectFit"; smooth: true; anchors.fill: parent; - opacity: (status == 1)?1:0; opacity: Behavior { NumberAnimation { properties: "opacity" } } } - Loading { anchors.centerIn: parent; visible: FlickrImage.status!=1 } + Image { id: flickrImage; source: url; fillMode: "PreserveAspectFit"; smooth: true; anchors.fill: parent; + opacity: (status == 1)?1:0; opacity: Behavior { NumberAnimation { properties: "opacity" } } } + Loading { anchors.centerIn: parent; visible: flickrImage.status!=1 } states: State { name: "selected" - when: Root.isSelected - PropertyChanges { target: Root; scale: 3; z: 100 } + when: root.isSelected + PropertyChanges { target: root; scale: 3; z: 100 } } transitions: [ Transition { diff --git a/examples/declarative/snow/Loading.qml b/examples/declarative/snow/Loading.qml index ff2c829..054656a 100644 --- a/examples/declarative/snow/Loading.qml +++ b/examples/declarative/snow/Loading.qml @@ -1,8 +1,8 @@ import Qt 4.6 Image { - id: Loading; source: "pics/loading.png"; transformOrigin: "Center" + id: loading; source: "pics/loading.png"; transformOrigin: "Center" rotation: NumberAnimation { - id: "RotationAnimation"; from: 0; to: 360; running: Loading.visible == true; repeat: true; duration: 900 + id: rotationAnimation; from: 0; to: 360; running: loading.visible == true; repeat: true; duration: 900 } } diff --git a/examples/declarative/snow/create.js b/examples/declarative/snow/create.js index 9def7a7..2bdae4a 100644 --- a/examples/declarative/snow/create.js +++ b/examples/declarative/snow/create.js @@ -1,12 +1,12 @@ var myComponent = null; function createNewBlock() { - if (myComponent == null) + if (myComponent == null) myComponent = createComponent("ImageBatch.qml"); var obj = myComponent.createObject(); - obj.parent = MyLayout; + obj.parent = layout; obj.offset = maximumColumn + 1; - obj.ref = ImagePanel; + obj.ref = imagePanel; maximumColumn += 5; } diff --git a/examples/declarative/snow/snow.qml b/examples/declarative/snow/snow.qml index 2241c3f..39c9c43 100644 --- a/examples/declarative/snow/snow.qml +++ b/examples/declarative/snow/snow.qml @@ -1,7 +1,7 @@ import Qt 4.6 Rectangle { - id: ImagePanel + id: imagePanel width: 1024 height: 768 color: "black" @@ -23,7 +23,7 @@ Rectangle { Item { anchors.centerIn: parent Row { - id: MyLayout + id: layout property real targetX: -(selectedX + imageWidth / 2) property real targetDeform: 0 @@ -31,19 +31,19 @@ Rectangle { property real deform: 0 deform: SpringFollow { - id: "DeformFollow"; source: MyLayout.targetDeform; velocity: MyLayout.slowDeform?0.1:2 - onSyncChanged: if(inSync) { MyLayout.slowDeform = true; MyLayout.targetDeform = 0; } + id: deformFollow; source: layout.targetDeform; velocity: layout.slowDeform?0.1:2 + onSyncChanged: if(inSync) { layout.slowDeform = true; layout.targetDeform = 0; } } - - ImageBatch { offset: 0; ref: ImagePanel } - x: SpringFollow { source: MyLayout.targetX; velocity: 1000 } + ImageBatch { offset: 0; ref: imagePanel } + + x: SpringFollow { source: layout.targetX; velocity: 1000 } y: SpringFollow { source: -(selectedY + imageHeight / 2); velocity: 500 } } transform: Rotation { axis.y: 1; axis.z: 0 - angle: MyLayout.deform * -100 + angle: layout.deform * -100 } } @@ -51,13 +51,13 @@ Rectangle { function left() { if (selectedItemColumn <= 0) return; selectedItemColumn -= 1; - MyLayout.slowDeform = false; - MyLayout.targetDeform = Math.max(Math.min(MyLayout.deform - 0.1, -0.1), -0.4); + layout.slowDeform = false; + layout.targetDeform = Math.max(Math.min(layout.deform - 0.1, -0.1), -0.4); } function right() { selectedItemColumn += 1; - MyLayout.slowDeform = false; - MyLayout.targetDeform = Math.min(Math.max(MyLayout.deform + 0.1, 0.1), 0.4); + layout.slowDeform = false; + layout.targetDeform = Math.min(Math.max(layout.deform + 0.1, 0.1), 0.4); } } diff --git a/examples/declarative/states/states.qml b/examples/declarative/states/states.qml index d91b558..acab2f0 100644 --- a/examples/declarative/states/states.qml +++ b/examples/declarative/states/states.qml @@ -1,25 +1,25 @@ import Qt 4.6 Rectangle { - id: Page + id: page width: 300; height: 300; color: "white" // A target region. Clicking in here sets the state to '' - the default state Rectangle { x: 0; y: 0; width: 50; height: 50 color: "transparent"; border.color: "black" - MouseRegion { anchors.fill: parent; onClicked: { Page.state='' } } + MouseRegion { anchors.fill: parent; onClicked: { page.state='' } } } // Another target region. Clicking in here sets the state to 'Position1' Rectangle { x: 150; y: 50; width: 50; height: 50 color: "transparent"; border.color: "black" - MouseRegion { anchors.fill: parent; onClicked: { Page.state='Position1' } } + MouseRegion { anchors.fill: parent; onClicked: { page.state='Position1' } } } // Another target region. Clicking in here sets the state to 'Position2' Rectangle { x: 0; y: 200; width: 50; height: 50 color: "transparent"; border.color: "black" - MouseRegion { anchors.fill: parent; onClicked: { Page.state='Position2' } } + MouseRegion { anchors.fill: parent; onClicked: { page.state='Position2' } } } // Rect which will be moved when my state changes Rectangle { id: myrect; width: 50; height: 50; color: "red" } @@ -34,7 +34,7 @@ Rectangle { y: 50 } }, - // In state 'Position2', change y to 100. We do not specify 'x' here - + // 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 { diff --git a/examples/declarative/states/transitions.qml b/examples/declarative/states/transitions.qml index be1419d..cc6894d 100644 --- a/examples/declarative/states/transitions.qml +++ b/examples/declarative/states/transitions.qml @@ -1,25 +1,25 @@ import Qt 4.6 Rectangle { - id: Page + id: page width: 300; height: 300; color: "white" // A target region. Clicking in here sets the state to '' - the default state Rectangle { x: 0; y: 0; width: 50; height: 50 color: "transparent"; border.color: "black" - MouseRegion { anchors.fill: parent; onClicked: { Page.state='' } } + MouseRegion { anchors.fill: parent; onClicked: { page.state='' } } } // Another target region. Clicking in here sets the state to 'Position1' Rectangle { x: 150; y: 50; width: 50; height: 50 color: "transparent"; border.color: "black" - MouseRegion { anchors.fill: parent; onClicked: { Page.state='Position1' } } + MouseRegion { anchors.fill: parent; onClicked: { page.state='Position1' } } } // Another target region. Clicking in here sets the state to 'Position2' Rectangle { x: 0; y: 200; width: 50; height: 50 color: "transparent"; border.color: "black" - MouseRegion { anchors.fill: parent; onClicked: { Page.state='Position2' } } + MouseRegion { anchors.fill: parent; onClicked: { page.state='Position2' } } } // Rect which will be moved when my state changes Rectangle { id: myrect; width: 50; height: 50; color: "red" } @@ -34,7 +34,7 @@ Rectangle { y: 50 } }, - // In state 'Position2', change y to 100. We do not specify 'x' here - + // 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 { diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml deleted file mode 100644 index a8ac7fe..0000000 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml +++ /dev/null @@ -1,11 +0,0 @@ -import Qt 4.6 - -//! [0] -Rectangle { - id: removeButton - width: 30 - height: 30 - color: "red" - radius: 5 -} -//! [0] diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml index 162452f..9508018 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml @@ -21,7 +21,7 @@ Item { anchors.verticalCenter: parent.verticalCenter font.bold: true color: "black" - text: 123123 + text: "123123" } Image { source: "../../shared/pics/phone.png" diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml index cf50fb0..e50dcc5 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml @@ -24,7 +24,7 @@ Item { anchors.verticalCenter: parent.verticalCenter font.bold: true color: "black" - text: 123123 + text: "123123" } Image { source: "../../shared/pics/phone.png" diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml index 2e1a488..ce6a289 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml @@ -23,7 +23,7 @@ Item { anchors.verticalCenter: parent.verticalCenter font.bold: true color: "black" - text: 123123 + text: "123123" } Image { source: "../../shared/pics/phone.png" diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml index 3516cee..f253763 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml @@ -16,9 +16,10 @@ Item { Column { id: layout - anchors.fill: parent + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right spacing: 5 - margin: 5 ContactField { id: labelField anchors.left: layout.left diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml index 83988ab..db85d2a 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml @@ -19,9 +19,10 @@ Item { Column { id: layout - anchors.fill: parent + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right spacing: 5 - margin: 5 ContactField { id: labelField anchors.left: layout.left diff --git a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml index a7764ed..cd14a08 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml @@ -5,7 +5,7 @@ Rectangle { width: layout.width height: layout.height color: "white" - Bind { + Binding { id: currentItem value: true } diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml index d00bf05..58a542b 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml @@ -17,7 +17,6 @@ Item { id: layout anchors.fill: parent spacing: 5 - margin: 5 ContactField { id: labelField anchors.left: layout.left diff --git a/examples/declarative/tutorials/helloworld/t1/tutorial1.qml b/examples/declarative/tutorials/helloworld/t1/tutorial1.qml index f09dcd1..e2c6650 100644 --- a/examples/declarative/tutorials/helloworld/t1/tutorial1.qml +++ b/examples/declarative/tutorials/helloworld/t1/tutorial1.qml @@ -1,16 +1,16 @@ import Qt 4.6 Rectangle { - id: Page + id: page width: 480 height: 200 color: "LightGrey" Text { - id: HelloText + id: helloText text: "Hello world!" font.pointSize: 24 font.bold: true y: 30 - anchors.horizontalCenter: Page.horizontalCenter + anchors.horizontalCenter: page.horizontalCenter } } diff --git a/examples/declarative/tutorials/helloworld/t2/Cell.qml b/examples/declarative/tutorials/helloworld/t2/Cell.qml index b3c52b7..bfd835d 100644 --- a/examples/declarative/tutorials/helloworld/t2/Cell.qml +++ b/examples/declarative/tutorials/helloworld/t2/Cell.qml @@ -3,16 +3,16 @@ import Qt 4.6 Item { property var color - id: CellContainer + id: cellContainer width: 40 height: 25 Rectangle { anchors.fill: parent - color: CellContainer.color + color: cellContainer.color } MouseRegion { anchors.fill: parent - onClicked: { HelloText.color = CellContainer.color } + onClicked: { helloText.color = cellContainer.color } } } diff --git a/examples/declarative/tutorials/helloworld/t2/tutorial2.qml b/examples/declarative/tutorials/helloworld/t2/tutorial2.qml index 458e302..aee9032 100644 --- a/examples/declarative/tutorials/helloworld/t2/tutorial2.qml +++ b/examples/declarative/tutorials/helloworld/t2/tutorial2.qml @@ -1,22 +1,22 @@ import Qt 4.6 Rectangle { - id: Page + id: page width: 480 height: 200 color: "LightGrey" Text { - id: HelloText + id: helloText text: "Hello world!" font.pointSize: 24 font.bold: true y: 30 - anchors.horizontalCenter: Page.horizontalCenter + anchors.horizontalCenter: page.horizontalCenter } Grid { - id: ColorPicker + id: colorPicker x: 0 - anchors.bottom: Page.bottom + anchors.bottom: page.bottom width: 120; height: 50 rows: 2; columns: 3 Cell { color: "#ff0000" } diff --git a/examples/declarative/tutorials/helloworld/t3/Cell.qml b/examples/declarative/tutorials/helloworld/t3/Cell.qml index 4b1a220..6feb7a9 100644 --- a/examples/declarative/tutorials/helloworld/t3/Cell.qml +++ b/examples/declarative/tutorials/helloworld/t3/Cell.qml @@ -3,15 +3,15 @@ import Qt 4.6 Item { property var color - id: CellContainer + id: cellContainer width: 40 height: 25 Rectangle { anchors.fill: parent - color: CellContainer.color + color: cellContainer.color } MouseRegion { anchors.fill: parent - onClicked: { HelloText.color = CellContainer.color } + onClicked: { helloText.color = cellContainer.color } } } diff --git a/examples/declarative/tutorials/helloworld/t3/tutorial3.qml b/examples/declarative/tutorials/helloworld/t3/tutorial3.qml index 426640d..b80065d 100644 --- a/examples/declarative/tutorials/helloworld/t3/tutorial3.qml +++ b/examples/declarative/tutorials/helloworld/t3/tutorial3.qml @@ -1,23 +1,23 @@ import Qt 4.6 Rectangle { - id: Page + id: page width: 480 height: 200 color: "LightGrey" Text { - id: HelloText + id: helloText text: "Hello world!" font.pointSize: 24 font.bold: true y: 30 - anchors.horizontalCenter: Page.horizontalCenter + anchors.horizontalCenter: page.horizontalCenter states: [ State { name: "down" - when: MouseRegionId.pressed == true + when: mouseRegion.pressed == true PropertyChanges { - target: HelloText + target: helloText y: 160 color: "red" } @@ -39,11 +39,11 @@ Rectangle { } ] } - MouseRegion { id: MouseRegionId; anchors.fill: HelloText } + MouseRegion { id: mouseRegion; anchors.fill: helloText } Grid { - id: ColorPicker + id: colorPicker x: 0 - anchors.bottom: Page.bottom + anchors.bottom: page.bottom width: 120; height: 50 rows: 2; columns: 3 Cell { color: "#ff0000" } diff --git a/examples/declarative/tutorials/samegame/samegame1/Block.qml b/examples/declarative/tutorials/samegame/samegame1/Block.qml new file mode 100644 index 0000000..b76e61a --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame1/Block.qml @@ -0,0 +1,12 @@ +//![0] +import Qt 4.6 + +Item { + id:block + + Image { id: img + source: "pics/redStone.png"; + anchors.fill: parent + } +} +//![0] diff --git a/examples/declarative/tutorials/samegame/samegame1/Button.qml b/examples/declarative/tutorials/samegame/samegame1/Button.qml new file mode 100644 index 0000000..3846cf7 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame1/Button.qml @@ -0,0 +1,27 @@ +//![0] +import Qt 4.6 + +Rectangle { + id: Container + + signal clicked + property string text: "Button" + + color: activePalette.button; smooth: true + width: txtItem.width + 20; height: txtItem.height + 6 + border.width: 1; border.color: activePalette.darker(activePalette.button); radius: 8; + + gradient: Gradient { + GradientStop { + id: topGrad; position: 0.0 + color: if (mr.pressed) { activePalette.dark } else { activePalette.light } } + GradientStop { position: 1.0; color: activePalette.button } + } + + MouseRegion { id: mr; anchors.fill: parent; onClicked: Container.clicked() } + + Text { + id: txtItem; text: Container.text; anchors.centerIn: Container; color: activePalette.buttonText + } +} +//![0] diff --git a/examples/declarative/tutorials/samegame/samegame1/pics/background.png b/examples/declarative/tutorials/samegame/samegame1/pics/background.png Binary files differnew file mode 100644 index 0000000..25e885f --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame1/pics/background.png diff --git a/examples/declarative/tutorials/samegame/samegame1/pics/redStone.png b/examples/declarative/tutorials/samegame/samegame1/pics/redStone.png Binary files differnew file mode 100644 index 0000000..b099f60 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame1/pics/redStone.png diff --git a/examples/declarative/tutorials/samegame/samegame1/samegame.qml b/examples/declarative/tutorials/samegame/samegame1/samegame.qml new file mode 100644 index 0000000..8b32cae --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame1/samegame.qml @@ -0,0 +1,40 @@ +//![0] +import Qt 4.6 + +Rectangle { + id: Screen + width: 490; height: 720 + + SystemPalette { id: activePalette; colorGroup: Qt.Active } + + Item { + width: parent.width; anchors.top: parent.top; anchors.bottom: ToolBar.top + + Image { + id: background + anchors.fill: parent; source: "pics/background.png" + fillMode: "PreserveAspectCrop" + } + } + + Rectangle { + id: ToolBar + color: activePalette.window + height: 32; width: parent.width + anchors.bottom: Screen.bottom + + Button { + id: btnA; text: "New Game"; onClicked: print("Implement me!"); + anchors.left: parent.left; anchors.leftMargin: 3 + anchors.verticalCenter: parent.verticalCenter + } + + Text { + id: Score + text: "Score: Who knows?"; font.bold: true + anchors.right: parent.right; anchors.rightMargin: 3 + anchors.verticalCenter: parent.verticalCenter + } + } +} +//![0] diff --git a/examples/declarative/tutorials/samegame/samegame2/Block.qml b/examples/declarative/tutorials/samegame/samegame2/Block.qml new file mode 100644 index 0000000..228ac4e --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame2/Block.qml @@ -0,0 +1,10 @@ +import Qt 4.6 + +Item { + id:block + + Image { id: img + source: "pics/redStone.png"; + anchors.fill: parent + } +} diff --git a/examples/declarative/tutorials/samegame/samegame2/Button.qml b/examples/declarative/tutorials/samegame/samegame2/Button.qml new file mode 100644 index 0000000..2354218 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame2/Button.qml @@ -0,0 +1,25 @@ +import Qt 4.6 + +Rectangle { + id: Container + + signal clicked + property string text: "Button" + + color: activePalette.button; smooth: true + width: txtItem.width + 20; height: txtItem.height + 6 + border.width: 1; border.color: activePalette.darker(activePalette.button); radius: 8; + + gradient: Gradient { + GradientStop { + id: topGrad; position: 0.0 + color: if (mr.pressed) { activePalette.dark } else { activePalette.light } } + GradientStop { position: 1.0; color: activePalette.button } + } + + MouseRegion { id: mr; anchors.fill: parent; onClicked: Container.clicked() } + + Text { + id: txtItem; text: Container.text; anchors.centerIn: Container; color: activePalette.buttonText + } +} diff --git a/examples/declarative/tutorials/samegame/samegame2/pics/background.png b/examples/declarative/tutorials/samegame/samegame2/pics/background.png Binary files differnew file mode 100644 index 0000000..25e885f --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame2/pics/background.png diff --git a/examples/declarative/tutorials/samegame/samegame2/pics/redStone.png b/examples/declarative/tutorials/samegame/samegame2/pics/redStone.png Binary files differnew file mode 100644 index 0000000..b099f60 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame2/pics/redStone.png diff --git a/examples/declarative/tutorials/samegame/samegame2/samegame.js b/examples/declarative/tutorials/samegame/samegame2/samegame.js new file mode 100644 index 0000000..2bf68b5 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame2/samegame.js @@ -0,0 +1,61 @@ +//![0] +//Note that X/Y referred to here are in game coordinates +var maxX = 10;//Nums are for tileSize 40 +var maxY = 15; +var tileSize = 40; +var maxIndex = maxX*maxY; +var board = new Array(maxIndex); +var tileSrc = "Block.qml"; +var component; + +//Index function used instead of a 2D array +function index(xIdx,yIdx) { + return xIdx + (yIdx * maxX); +} + +function initBoard() +{ + //Calculate board size + maxX = Math.floor(background.width/tileSize); + maxY = Math.floor(background.height/tileSize); + maxIndex = maxY*maxX; + + //Initialize Board + board = new Array(maxIndex); + for(xIdx=0; xIdx<maxX; xIdx++){ + for(yIdx=0; yIdx<maxY; yIdx++){ + board[index(xIdx,yIdx)] = null; + createBlock(xIdx,yIdx); + } + } +} + +function createBlock(xIdx,yIdx){ + if(component==null) + component = createComponent(tileSrc); + + // Note that we don't wait for the component to become ready. This will + // only work if the block QML is a local file. Otherwise the component will + // not be ready immediately. There is a statusChanged signal on the + // component you could use if you want to wait to load remote files. + if(component.isReady){ + dynamicObject = component.createObject(); + if(dynamicObject == null){ + print("error creating block"); + print(component.errorsString()); + return false; + } + dynamicObject.parent = background; + dynamicObject.x = xIdx*tileSize; + dynamicObject.y = yIdx*tileSize; + dynamicObject.width = tileSize; + dynamicObject.height = tileSize; + board[index(xIdx,yIdx)] = dynamicObject; + }else{//isError or isLoading + print("error loading block component"); + print(component.errorsString()); + return false; + } + return true; +} +//![0] diff --git a/examples/declarative/tutorials/samegame/samegame2/samegame.qml b/examples/declarative/tutorials/samegame/samegame2/samegame.qml new file mode 100644 index 0000000..78a3d83 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame2/samegame.qml @@ -0,0 +1,43 @@ +import Qt 4.6 + +Rectangle { + id: Screen + width: 490; height: 720 + + SystemPalette { id: activePalette; colorGroup: Qt.Active } + //![2] + Script { source: "samegame.js" } + //![2] + + Item { + width: parent.width; anchors.top: parent.top; anchors.bottom: ToolBar.top + + Image { + id: background + anchors.fill: parent; source: "pics/background.png" + fillMode: "PreserveAspectCrop" + } + } + + Rectangle { + id: ToolBar + color: activePalette.window + height: 32; width: parent.width + anchors.bottom: Screen.bottom + + //![1] + Button { + id: btnA; text: "New Game"; onClicked: initBoard(); + anchors.left: parent.left; anchors.leftMargin: 3 + anchors.verticalCenter: parent.verticalCenter + } + //![1] + + Text { + id: Score + text: "Score: Who knows?"; font.bold: true + anchors.right: parent.right; anchors.rightMargin: 3 + anchors.verticalCenter: parent.verticalCenter + } + } +} diff --git a/examples/declarative/tutorials/samegame/samegame3/Block.qml b/examples/declarative/tutorials/samegame/samegame3/Block.qml new file mode 100644 index 0000000..30a8d3a --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame3/Block.qml @@ -0,0 +1,21 @@ +//![0] +import Qt 4.6 + +Item { + id:block + property int type: 0 + + Image { id: img + source: { + if(type == 0){ + "pics/redStone.png"; + } else if(type == 1) { + "pics/blueStone.png"; + } else { + "pics/greenStone.png"; + } + } + anchors.fill: parent + } +} +//![0] diff --git a/examples/declarative/tutorials/samegame/samegame3/Button.qml b/examples/declarative/tutorials/samegame/samegame3/Button.qml new file mode 100644 index 0000000..2354218 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame3/Button.qml @@ -0,0 +1,25 @@ +import Qt 4.6 + +Rectangle { + id: Container + + signal clicked + property string text: "Button" + + color: activePalette.button; smooth: true + width: txtItem.width + 20; height: txtItem.height + 6 + border.width: 1; border.color: activePalette.darker(activePalette.button); radius: 8; + + gradient: Gradient { + GradientStop { + id: topGrad; position: 0.0 + color: if (mr.pressed) { activePalette.dark } else { activePalette.light } } + GradientStop { position: 1.0; color: activePalette.button } + } + + MouseRegion { id: mr; anchors.fill: parent; onClicked: Container.clicked() } + + Text { + id: txtItem; text: Container.text; anchors.centerIn: Container; color: activePalette.buttonText + } +} diff --git a/examples/declarative/tutorials/samegame/samegame3/Dialog.qml b/examples/declarative/tutorials/samegame/samegame3/Dialog.qml new file mode 100644 index 0000000..5fe6aa0 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame3/Dialog.qml @@ -0,0 +1,23 @@ +//![0] +import Qt 4.6 + +Rectangle { + id: page + function forceClose() { + page.closed(); + page.opacity = 0; + } + function show(txt) { + MyText.text = txt; + page.opacity = 1; + } + signal closed(); + color: "white"; border.width: 1; width: MyText.width + 20; height: 60; + opacity: 0 + opacity: Behavior { + NumberAnimation { duration: 1000 } + } + Text { id: MyText; anchors.centerIn: parent; text: "Hello World!" } + MouseRegion { id: mr; anchors.fill: parent; onClicked: forceClose(); } +} +//![0] diff --git a/examples/declarative/tutorials/samegame/samegame3/pics/background.png b/examples/declarative/tutorials/samegame/samegame3/pics/background.png Binary files differnew file mode 100644 index 0000000..25e885f --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame3/pics/background.png diff --git a/examples/declarative/tutorials/samegame/samegame3/pics/blueStone.png b/examples/declarative/tutorials/samegame/samegame3/pics/blueStone.png Binary files differnew file mode 100644 index 0000000..bf342e0 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame3/pics/blueStone.png diff --git a/examples/declarative/tutorials/samegame/samegame3/pics/greenStone.png b/examples/declarative/tutorials/samegame/samegame3/pics/greenStone.png Binary files differnew file mode 100644 index 0000000..5ac14a5 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame3/pics/greenStone.png diff --git a/examples/declarative/tutorials/samegame/samegame3/pics/redStone.png b/examples/declarative/tutorials/samegame/samegame3/pics/redStone.png Binary files differnew file mode 100644 index 0000000..b099f60 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame3/pics/redStone.png diff --git a/examples/declarative/tutorials/samegame/samegame3/samegame.js b/examples/declarative/tutorials/samegame/samegame3/samegame.js new file mode 100644 index 0000000..8fecfef --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame3/samegame.js @@ -0,0 +1,189 @@ +/* This script file handles the game logic */ +//Note that X/Y referred to here are in game coordinates +var maxX = 10;//Nums are for tileSize 40 +var maxY = 15; +var maxIndex = maxX*maxY; +var board = new Array(maxIndex); +var tileSrc = "Block.qml"; +var component; + +//Index function used instead of a 2D array +function index(xIdx,yIdx) { + return xIdx + (yIdx * maxX); +} + +function initBoard() +{ + for(i = 0; i<maxIndex; i++){ + //Delete old blocks + if(board[i] != null) + board[i].destroy(); + } + + //Calculate board size + maxX = Math.floor(gameCanvas.width/gameCanvas.tileSize); + maxY = Math.floor(gameCanvas.height/gameCanvas.tileSize); + maxIndex = maxY*maxX; + + //Close dialogs + dialog.forceClose(); + + //Initialize Board + board = new Array(maxIndex); + gameCanvas.score = 0; + for(xIdx=0; xIdx<maxX; xIdx++){ + for(yIdx=0; yIdx<maxY; yIdx++){ + board[index(xIdx,yIdx)] = null; + createBlock(xIdx,yIdx); + } + } +} + +function createBlock(xIdx,yIdx){ + if(component==null) + component = createComponent(tileSrc); + + // Note that we don't wait for the component to become ready. This will + // only work if the block QML is a local file. Otherwise the component will + // not be ready immediately. There is a statusChanged signal on the + // component you could use if you want to wait to load remote files. + if(component.isReady){ + dynamicObject = component.createObject(); + if(dynamicObject == null){ + print("error creating block"); + print(component.errorsString()); + return false; + } + dynamicObject.type = Math.floor(Math.random() * 3); + dynamicObject.parent = gameCanvas; + dynamicObject.x = xIdx*gameCanvas.tileSize; + dynamicObject.y = yIdx*gameCanvas.tileSize; + dynamicObject.width = gameCanvas.tileSize; + dynamicObject.height = gameCanvas.tileSize; + board[index(xIdx,yIdx)] = dynamicObject; + }else{//isError or isLoading + print("error loading block component"); + print(component.errorsString()); + return false; + } + return true; +} + +var fillFound;//Set after a floodFill call to the number of tiles found +var floodBoard;//Set to 1 if the floodFill reaches off that node +//NOTE: Be careful with vars named x,y, as the calling object's x,y are still in scope +//![1] +function handleClick(x,y) +{ + xIdx = Math.floor(x/gameCanvas.tileSize); + yIdx = Math.floor(y/gameCanvas.tileSize); + if(xIdx >= maxX || xIdx < 0 || yIdx >= maxY || yIdx < 0) + return; + if(board[index(xIdx, yIdx)] == null) + return; + //If it's a valid tile, remove it and all connected (does nothing if it's not connected) + floodFill(xIdx,yIdx, -1); + if(fillFound <= 0) + return; + gameCanvas.score += (fillFound - 1) * (fillFound - 1); + shuffleDown(); + victoryCheck(); +} +//![1] + +function floodFill(xIdx,yIdx,type) +{ + if(board[index(xIdx, yIdx)] == null) + return; + var first = false; + if(type == -1){ + first = true; + type = board[index(xIdx,yIdx)].type; + + //Flood fill initialization + fillFound = 0; + floodBoard = new Array(maxIndex); + } + if(xIdx >= maxX || xIdx < 0 || yIdx >= maxY || yIdx < 0) + return; + if(floodBoard[index(xIdx, yIdx)] == 1 || (!first && type != board[index(xIdx,yIdx)].type)) + return; + floodBoard[index(xIdx, yIdx)] = 1; + floodFill(xIdx+1,yIdx,type); + floodFill(xIdx-1,yIdx,type); + floodFill(xIdx,yIdx+1,type); + floodFill(xIdx,yIdx-1,type); + if(first==true && fillFound == 0) + return;//Can't remove single tiles + board[index(xIdx,yIdx)].opacity = 0; + board[index(xIdx,yIdx)] = null; + fillFound += 1; +} + +function shuffleDown() +{ + //Fall down + for(xIdx=0; xIdx<maxX; xIdx++){ + fallDist = 0; + for(yIdx=maxY-1; yIdx>=0; yIdx--){ + if(board[index(xIdx,yIdx)] == null){ + fallDist += 1; + }else{ + if(fallDist > 0){ + obj = board[index(xIdx,yIdx)]; + obj.y += fallDist * gameCanvas.tileSize; + board[index(xIdx,yIdx+fallDist)] = obj; + board[index(xIdx,yIdx)] = null; + } + } + } + } + //Fall to the left + fallDist = 0; + for(xIdx=0; xIdx<maxX; xIdx++){ + if(board[index(xIdx, maxY - 1)] == null){ + fallDist += 1; + }else{ + if(fallDist > 0){ + for(yIdx=0; yIdx<maxY; yIdx++){ + obj = board[index(xIdx,yIdx)]; + if(obj == null) + continue; + obj.x -= fallDist * gameCanvas.tileSize; + board[index(xIdx-fallDist,yIdx)] = obj; + board[index(xIdx,yIdx)] = null; + } + } + } + } +} + +//![2] +function victoryCheck() +{ + //awards bonuses for no tiles left + deservesBonus = true; + for(xIdx=maxX-1; xIdx>=0; xIdx--) + if(board[index(xIdx, maxY - 1)] != null) + deservesBonus = false; + if(deservesBonus) + gameCanvas.score += 500; + //Checks for game over + if(deservesBonus || !(floodMoveCheck(0,maxY-1, -1))) + dialog.show("Game Over. Your score is " + gameCanvas.score); +} +//![2] + +//only floods up and right, to see if it can find adjacent same-typed tiles +function floodMoveCheck(xIdx, yIdx, type) +{ + if(xIdx >= maxX || xIdx < 0 || yIdx >= maxY || yIdx < 0) + return false; + if(board[index(xIdx, yIdx)] == null) + return false; + myType = board[index(xIdx, yIdx)].type; + if(type == myType) + return true; + return floodMoveCheck(xIdx + 1, yIdx, myType) || + floodMoveCheck(xIdx, yIdx - 1, board[index(xIdx,yIdx)].type); +} diff --git a/examples/declarative/tutorials/samegame/samegame3/samegame.qml b/examples/declarative/tutorials/samegame/samegame3/samegame.qml new file mode 100644 index 0000000..a0883da --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame3/samegame.qml @@ -0,0 +1,62 @@ +//![0] +import Qt 4.6 + +Rectangle { + id: Screen + width: 490; height: 720 + + SystemPalette { id: activePalette; colorGroup: Qt.Active } + Script { source: "samegame.js" } + + Item { + width: parent.width; anchors.top: parent.top; anchors.bottom: ToolBar.top + + Image { + id: background + anchors.fill: parent; source: "pics/background.png" + fillMode: "PreserveAspectCrop" + } + + //![1] + Item { + id: gameCanvas + property int score: 0 + property int tileSize: 40 + + z: 20; anchors.centerIn: parent + width: parent.width - (parent.width % tileSize); + height: parent.height - (parent.height % tileSize); + + MouseRegion { + id: gameMR + anchors.fill: parent; onClicked: handleClick(mouse.x,mouse.y); + } + } + //![1] + } + + //![2] + Dialog { id: dialog; anchors.centerIn: parent; z: 21 } + //![2] + + Rectangle { + id: ToolBar + color: activePalette.window + height: 32; width: parent.width + anchors.bottom: Screen.bottom + + Button { + id: btnA; text: "New Game"; onClicked: initBoard(); + anchors.left: parent.left; anchors.leftMargin: 3 + anchors.verticalCenter: parent.verticalCenter + } + + Text { + id: Score + text: "Score: " + gameCanvas.score; font.bold: true + anchors.right: parent.right; anchors.rightMargin: 3 + anchors.verticalCenter: parent.verticalCenter + } + } +} +//![0] diff --git a/examples/declarative/tutorials/samegame/samegame4/README b/examples/declarative/tutorials/samegame/samegame4/README new file mode 100644 index 0000000..244b205 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/README @@ -0,0 +1,10 @@ +This demo uses pictures from the KDE project (www.kde.org), +specifically the images from the KSame game. These images are + +background.png +blueStone.png +redStone.png +greenStone.png +yellowStone.png + +and are presumably under the same GPL2 license as the rest of kdegames diff --git a/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml b/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml new file mode 100644 index 0000000..7ad8b07 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml @@ -0,0 +1,62 @@ +import Qt 4.6 + +Item { id:block + property int type: 0 + property bool dying: false + //![1] + property bool spawned: false + property int targetX: 0 + property int targetY: 0 + + x: SpringFollow { enabled: spawned; source: targetX; spring: 2; damping: 0.2 } + y: SpringFollow { source: targetY; spring: 2; damping: 0.2 } + //![1] + + //![2] + Image { id: img + source: { + if(type == 0){ + "pics/redStone.png"; + } else if(type == 1) { + "pics/blueStone.png"; + } else { + "pics/greenStone.png"; + } + } + opacity: 0 + opacity: Behavior { NumberAnimation { properties:"opacity"; duration: 200 } } + anchors.fill: parent + } + //![2] + + //![3] + Particles { id: particles + width:1; height:1; anchors.centerIn: parent; opacity: 0 + lifeSpan: 700; lifeSpanDeviation: 600; count:0; streamIn: false + angle: 0; angleDeviation: 360; velocity: 100; velocityDeviation:30 + source: { + if(type == 0){ + "pics/redStar.png"; + } else if (type == 1) { + "pics/blueStar.png"; + } else { + "pics/greenStar.png"; + } + } + } + //![3] + + //![4] + states: [ + State{ name: "AliveState"; when: spawned == true && dying == false + PropertyChanges { target: img; opacity: 1 } + }, + State{ name: "DeathState"; when: dying == true + PropertyChanges { target: particles; count: 50 } + PropertyChanges { target: particles; opacity: 1 } + PropertyChanges { target: particles; emitting: false } // i.e. emit only once + PropertyChanges { target: img; opacity: 0 } + } + ] + //![4] +} diff --git a/examples/declarative/tutorials/samegame/samegame4/content/Button.qml b/examples/declarative/tutorials/samegame/samegame4/content/Button.qml new file mode 100644 index 0000000..2354218 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/Button.qml @@ -0,0 +1,25 @@ +import Qt 4.6 + +Rectangle { + id: Container + + signal clicked + property string text: "Button" + + color: activePalette.button; smooth: true + width: txtItem.width + 20; height: txtItem.height + 6 + border.width: 1; border.color: activePalette.darker(activePalette.button); radius: 8; + + gradient: Gradient { + GradientStop { + id: topGrad; position: 0.0 + color: if (mr.pressed) { activePalette.dark } else { activePalette.light } } + GradientStop { position: 1.0; color: activePalette.button } + } + + MouseRegion { id: mr; anchors.fill: parent; onClicked: Container.clicked() } + + Text { + id: txtItem; text: Container.text; anchors.centerIn: Container; color: activePalette.buttonText + } +} diff --git a/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml b/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml new file mode 100644 index 0000000..401d211 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml @@ -0,0 +1,21 @@ +import Qt 4.6 + +Rectangle { + id: page + function forceClose() { + page.closed(); + page.opacity = 0; + } + function show(txt) { + MyText.text = txt; + page.opacity = 1; + } + signal closed(); + color: "white"; border.width: 1; width: MyText.width + 20; height: 60; + opacity: 0 + opacity: Behavior { + NumberAnimation { duration: 1000 } + } + Text { id: MyText; anchors.centerIn: parent; text: "Hello World!" } + MouseRegion { id: mr; anchors.fill: parent; onClicked: forceClose(); } +} diff --git a/examples/declarative/tutorials/samegame/samegame4/content/pics/background.png b/examples/declarative/tutorials/samegame/samegame4/content/pics/background.png Binary files differnew file mode 100644 index 0000000..25e885f --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/pics/background.png diff --git a/examples/declarative/tutorials/samegame/samegame4/content/pics/blueStar.png b/examples/declarative/tutorials/samegame/samegame4/content/pics/blueStar.png Binary files differnew file mode 100644 index 0000000..ff9588f --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/pics/blueStar.png diff --git a/examples/declarative/tutorials/samegame/samegame4/content/pics/blueStone.png b/examples/declarative/tutorials/samegame/samegame4/content/pics/blueStone.png Binary files differnew file mode 100644 index 0000000..bf342e0 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/pics/blueStone.png diff --git a/examples/declarative/tutorials/samegame/samegame4/content/pics/greenStar.png b/examples/declarative/tutorials/samegame/samegame4/content/pics/greenStar.png Binary files differnew file mode 100644 index 0000000..cd06854 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/pics/greenStar.png diff --git a/examples/declarative/tutorials/samegame/samegame4/content/pics/greenStone.png b/examples/declarative/tutorials/samegame/samegame4/content/pics/greenStone.png Binary files differnew file mode 100644 index 0000000..5ac14a5 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/pics/greenStone.png diff --git a/examples/declarative/tutorials/samegame/samegame4/content/pics/redStar.png b/examples/declarative/tutorials/samegame/samegame4/content/pics/redStar.png Binary files differnew file mode 100644 index 0000000..0a4dffe --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/pics/redStar.png diff --git a/examples/declarative/tutorials/samegame/samegame4/content/pics/redStone.png b/examples/declarative/tutorials/samegame/samegame4/content/pics/redStone.png Binary files differnew file mode 100644 index 0000000..b099f60 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/pics/redStone.png diff --git a/examples/declarative/tutorials/samegame/samegame4/content/pics/star.png b/examples/declarative/tutorials/samegame/samegame4/content/pics/star.png Binary files differnew file mode 100644 index 0000000..defbde5 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/pics/star.png diff --git a/examples/declarative/tutorials/samegame/samegame4/content/pics/yellowStone.png b/examples/declarative/tutorials/samegame/samegame4/content/pics/yellowStone.png Binary files differnew file mode 100644 index 0000000..c56124a --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/pics/yellowStone.png diff --git a/examples/declarative/tutorials/samegame/samegame4/content/samegame.js b/examples/declarative/tutorials/samegame/samegame4/content/samegame.js new file mode 100755 index 0000000..ce9c169 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/content/samegame.js @@ -0,0 +1,219 @@ +/* This script file handles the game logic */ +//Note that X/Y referred to here are in game coordinates +var maxX = 10;//Nums are for tileSize 40 +var maxY = 15; +var tileSize = 40; +var maxIndex = maxX*maxY; +var board = new Array(maxIndex); +var tileSrc = "content/BoomBlock.qml"; +var scoresURL = "http://qtfx-nokia.trolltech.com.au/samegame/scores.php"; +var timer; +var component; + +//Index function used instead of a 2D array +function index(xIdx,yIdx) { + return xIdx + (yIdx * maxX); +} + +function timeStr(msecs) { + var secs = Math.floor(msecs/1000); + var m = Math.floor(secs/60); + var ret = "" + m + "m " + (secs%60) + "s"; + return ret; +} + +function initBoard() +{ + for(i = 0; i<maxIndex; i++){ + //Delete old blocks + if(board[i] != null) + board[i].destroy(); + } + + //Calculate board size + maxX = Math.floor(gameCanvas.width/tileSize); + maxY = Math.floor(gameCanvas.height/tileSize); + maxIndex = maxY*maxX; + + //Close dialogs + scoreName.forceClose(); + dialog.forceClose(); + + //Initialize Board + board = new Array(maxIndex); + gameCanvas.score = 0; + for(xIdx=0; xIdx<maxX; xIdx++){ + for(yIdx=0; yIdx<maxY; yIdx++){ + board[index(xIdx,yIdx)] = null; + createBlock(xIdx,yIdx); + } + } + timer = new Date(); +} + +var fillFound;//Set after a floodFill call to the number of tiles found +var floodBoard;//Set to 1 if the floodFill reaches off that node +//NOTE: Be careful with vars named x,y, as the calling object's x,y are still in scope +function handleClick(x,y) +{ + xIdx = Math.floor(x/tileSize); + yIdx = Math.floor(y/tileSize); + if(xIdx >= maxX || xIdx < 0 || yIdx >= maxY || yIdx < 0) + return; + if(board[index(xIdx, yIdx)] == null) + return; + //If it's a valid tile, remove it and all connected (does nothing if it's not connected) + floodFill(xIdx,yIdx, -1); + if(fillFound <= 0) + return; + gameCanvas.score += (fillFound - 1) * (fillFound - 1); + shuffleDown(); + victoryCheck(); +} + +function floodFill(xIdx,yIdx,type) +{ + if(board[index(xIdx, yIdx)] == null) + return; + var first = false; + if(type == -1){ + first = true; + type = board[index(xIdx,yIdx)].type; + + //Flood fill initialization + fillFound = 0; + floodBoard = new Array(maxIndex); + } + if(xIdx >= maxX || xIdx < 0 || yIdx >= maxY || yIdx < 0) + return; + if(floodBoard[index(xIdx, yIdx)] == 1 || (!first && type != board[index(xIdx,yIdx)].type)) + return; + floodBoard[index(xIdx, yIdx)] = 1; + floodFill(xIdx+1,yIdx,type); + floodFill(xIdx-1,yIdx,type); + floodFill(xIdx,yIdx+1,type); + floodFill(xIdx,yIdx-1,type); + if(first==true && fillFound == 0) + return;//Can't remove single tiles + board[index(xIdx,yIdx)].dying = true; + board[index(xIdx,yIdx)] = null; + fillFound += 1; +} + +function shuffleDown() +{ + //Fall down + for(xIdx=0; xIdx<maxX; xIdx++){ + fallDist = 0; + for(yIdx=maxY-1; yIdx>=0; yIdx--){ + if(board[index(xIdx,yIdx)] == null){ + fallDist += 1; + }else{ + if(fallDist > 0){ + obj = board[index(xIdx,yIdx)]; + obj.targetY += fallDist * tileSize; + board[index(xIdx,yIdx+fallDist)] = obj; + board[index(xIdx,yIdx)] = null; + } + } + } + } + //Fall to the left + fallDist = 0; + for(xIdx=0; xIdx<maxX; xIdx++){ + if(board[index(xIdx, maxY - 1)] == null){ + fallDist += 1; + }else{ + if(fallDist > 0){ + for(yIdx=0; yIdx<maxY; yIdx++){ + obj = board[index(xIdx,yIdx)]; + if(obj == null) + continue; + obj.targetX -= fallDist * tileSize; + board[index(xIdx-fallDist,yIdx)] = obj; + board[index(xIdx,yIdx)] = null; + } + } + } + } +} + +function victoryCheck() +{ + //awards bonuses for no tiles left + deservesBonus = true; + for(xIdx=maxX-1; xIdx>=0; xIdx--) + if(board[index(xIdx, maxY - 1)] != null) + deservesBonus = false; + if(deservesBonus) + gameCanvas.score += 500; + //Checks for game over + if(deservesBonus || !(floodMoveCheck(0,maxY-1, -1))){ + timer = new Date() - timer; + if(scoresURL != "") + scoreName.show("You've won! Please enter your name: "); + else + dialog.show("Game Over. Your score is " + gameCanvas.score); + } +} + +//only floods up and right, to see if it can find adjacent same-typed tiles +function floodMoveCheck(xIdx, yIdx, type) +{ + if(xIdx >= maxX || xIdx < 0 || yIdx >= maxY || yIdx < 0) + return false; + if(board[index(xIdx, yIdx)] == null) + return false; + myType = board[index(xIdx, yIdx)].type; + if(type == myType) + return true; + return floodMoveCheck(xIdx + 1, yIdx, myType) || + floodMoveCheck(xIdx, yIdx - 1, board[index(xIdx,yIdx)].type); +} + +function createBlock(xIdx,yIdx){ + if(component==null) + component = createComponent(tileSrc); + + // Note that we don't wait for the component to become ready. This will + // only work if the block QML is a local file. Otherwise the component will + // not be ready immediately. There is a statusChanged signal on the + // component you could use if you want to wait to load remote files. + if(component.isReady){ + dynamicObject = component.createObject(); + if(dynamicObject == null){ + print("error creating block"); + print(component.errorsString()); + return false; + } + dynamicObject.type = Math.floor(Math.random() * 3); + dynamicObject.parent = gameCanvas; + dynamicObject.x = xIdx*tileSize; + dynamicObject.targetX = xIdx*tileSize; + dynamicObject.targetY = yIdx*tileSize; + dynamicObject.width = tileSize; + dynamicObject.height = tileSize; + dynamicObject.spawned = true; + board[index(xIdx,yIdx)] = dynamicObject; + }else{//isError or isLoading + print("error loading block component"); + print(component.errorsString()); + return false; + } + return true; +} + +//![1] +function sendHighScore(name) { + var postman = new XMLHttpRequest() + var postData = "name="+name+"&score="+gameCanvas.score + +"&gridSize="+maxX+"x"+maxY +"&time="+Math.floor(timer/1000); + postman.open("POST", scoresURL, true); + postman.onreadystatechange = function() { + if (postman.readyState == postman.DONE) { + dialog.show("Your score has been uploaded."); + } + } + postman.send(postData); +} +//![1] diff --git a/examples/declarative/tutorials/samegame/samegame4/highscores/README b/examples/declarative/tutorials/samegame/samegame4/highscores/README new file mode 100644 index 0000000..eaa00fa --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/highscores/README @@ -0,0 +1 @@ +The SameGame example can interface with a simple PHP script to store XML high score data on a remote server. We do not have a publically accessible server available for this use, but if you have access to a PHP capable webserver you can copy the files (score_data.xml, score.php, score_style.xsl) to it and alter the highscore_server variable at the top of the samegame.js file to point to it. diff --git a/examples/declarative/tutorials/samegame/samegame4/highscores/score_data.xml b/examples/declarative/tutorials/samegame/samegame4/highscores/score_data.xml new file mode 100755 index 0000000..c3fd90d --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/highscores/score_data.xml @@ -0,0 +1,2 @@ +<record><score>1000000</score><name>Alan the Tester</name><gridSize>0x0</gridSize><seconds>0</seconds></record> +<record><score>6213</score><name>Alan</name><gridSize>12x17</gridSize><seconds>51</seconds></record> diff --git a/examples/declarative/tutorials/samegame/samegame4/highscores/score_style.xsl b/examples/declarative/tutorials/samegame/samegame4/highscores/score_style.xsl new file mode 100755 index 0000000..670354c --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/highscores/score_style.xsl @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="ISO-8859-1"?> +<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> +<xsl:template match="/"> + <html> + <head><title>SameGame High Scores</title></head> + <body> + <h2>SameGame High Scores</h2> + <table border="1"> + <tr bgcolor="lightsteelblue"> + <th>Name</th> + <th>Score</th> + <th>Grid Size</th> + <th>Time, s</th> + </tr> + <xsl:for-each select="records/record"> + <xsl:sort select="score" data-type="number" order="descending"/> + <tr> + <td><xsl:value-of select="name"/></td> + <td><xsl:value-of select="score"/></td> + <td><xsl:value-of select="gridSize"/></td> + <td><xsl:value-of select="seconds"/></td> + </tr> + </xsl:for-each> + </table> + </body> + </html> +</xsl:template> +</xsl:stylesheet> diff --git a/examples/declarative/tutorials/samegame/samegame4/highscores/scores.php b/examples/declarative/tutorials/samegame/samegame4/highscores/scores.php new file mode 100755 index 0000000..3cceb2d --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/highscores/scores.php @@ -0,0 +1,34 @@ +<?php + $score = $_POST["score"]; + echo "<html>"; + echo "<head><title>SameGame High Scores</title></head><body>"; + if($score > 0){#Sending in a new high score + $name = $_POST["name"]; + $grid = $_POST["gridSize"]; + $time = $_POST["time"]; + if($name == "") + $name = "Anonymous"; + //if($grid != "10x10"){ + //Need a standard, so as to reject others? + //} + $file = fopen("score_data.xml", "a"); #It's XML. Happy? + $ret = fwrite($file, "<record><score>". $score . "</score><name>" + . $name . "</name><gridSize>" . $grid . "</gridSize><seconds>" + . $time . "</seconds></record>\n"); + echo "Your score has been recorded. Thanks for playing!"; + if($ret == False) + echo "<br/> There was an error though, so don't expect to see that score again."; + }else{#Read high score list + #Now uses XSLT to display. So just print the file. With XML cruft added. + #Note that firefox at least won't apply the XSLT on a php file. So redirecting + $file = fopen("scores.xml", "w"); + $ret = fwrite($file, '<?xml version="1.0" encoding="ISO-8859-1"?>' . "\n" + . '<?xml-stylesheet type="text/xsl" href="score_style.xsl"?>' . "\n" + . "<records>\n" . file_get_contents("score_data.xml") . "</records>\n"); + if($ret == False) + echo "There was an internal error. Sorry."; + else + echo '<script type="text/javascript">window.location.replace("scores.xml")</script>'; + } + echo "</body></html>"; +?> diff --git a/examples/declarative/tutorials/samegame/samegame4/samegame.qml b/examples/declarative/tutorials/samegame/samegame4/samegame.qml new file mode 100644 index 0000000..ede4362 --- /dev/null +++ b/examples/declarative/tutorials/samegame/samegame4/samegame.qml @@ -0,0 +1,71 @@ +import Qt 4.6 +import "content" + +Rectangle { + id: Screen + width: 490; height: 720 + + Script { source: "content/samegame.js" } + + SystemPalette { id: activePalette; colorGroup: Qt.Active } + + Item { + width: parent.width; anchors.top: parent.top; anchors.bottom: ToolBar.top + + Image { + id: background + anchors.fill: parent; source: "content/pics/background.png" + fillMode: "PreserveAspectCrop" + } + + Item { + id: gameCanvas + property int score: 0 + + z: 20; anchors.centerIn: parent + width: parent.width - (parent.width % tileSize); + height: parent.height - (parent.height % tileSize); + + MouseRegion { + id: gameMR + anchors.fill: parent; onClicked: handleClick(mouse.x,mouse.y); + } + } + } + + Dialog { id: dialog; anchors.centerIn: parent; z: 21 } + Dialog { + id: scoreName; anchors.centerIn: parent; z: 22; + TextInput { + id: Editor + onAccepted: { + if(scoreName.opacity==1&&Editor.text!="") + sendHighScore(Editor.text); + scoreName.forceClose(); + } + anchors.verticalCenter: parent.verticalCenter + width: 72; focus: true + anchors.right: scoreName.right + } + } + + Rectangle { + id: ToolBar + color: activePalette.window + height: 32; width: parent.width + anchors.bottom: Screen.bottom + + Button { + id: btnA; text: "New Game"; onClicked: {initBoard();} + anchors.left: parent.left; anchors.leftMargin: 3 + anchors.verticalCenter: parent.verticalCenter + } + + Text { + id: Score + text: "Score: " + gameCanvas.score; font.bold: true + anchors.right: parent.right; anchors.rightMargin: 3 + anchors.verticalCenter: parent.verticalCenter + } + } +} diff --git a/examples/declarative/velocity/Day.qml b/examples/declarative/velocity/Day.qml index 4001a3e..b0d4dd9 100644 --- a/examples/declarative/velocity/Day.qml +++ b/examples/declarative/velocity/Day.qml @@ -8,7 +8,7 @@ Rectangle { height: 500 radius: 7 border.color: "black" - id: Page + id: page Image { x: 10 y: 10 @@ -22,25 +22,25 @@ Rectangle { font.bold: true width: 370 text: day - style: Outline + style: "Outline" styleColor: "#dedede" } Repeater { - model: Page.stickies + model: page.stickies Item { x: Math.random() * 200 + 100 y: Math.random() * 300 + 50 - id: StickyPage + id: stickyPage rotation: SpringFollow { - source: -Flick.horizontalVelocity / 100 + source: -flickable.horizontalVelocity / 100 spring: 2.0 damping: 0.1 } Item { - id: Sticky + id: sticky scale: 0.5 Image { - id: StickyImage + id: stickyImage source: "sticky.png" smooth: true y: -20 @@ -48,7 +48,7 @@ Rectangle { scale: 0.6 } TextEdit { - id: MyText + id: myText smooth: true font.pointSize: 28 readOnly: false @@ -62,14 +62,14 @@ Rectangle { } Item { y: -20 - x: StickyImage.x - width: StickyImage.width * StickyImage.scale - height: StickyImage.height * StickyImage.scale + x: stickyImage.x + width: stickyImage.width * stickyImage.scale + height: stickyImage.height * stickyImage.scale MouseRegion { - id: Mouse - onClicked: { MyText.focus = true } + id: mouse + onClicked: { myText.focus = true } anchors.fill: parent - drag.target: StickyPage + drag.target: stickyPage drag.axis: "XandYAxis" drag.minimumY: 0 drag.maximumY: 500 @@ -87,14 +87,14 @@ Rectangle { states: [ State { name: "pressed" - when: Mouse.pressed + when: mouse.pressed PropertyChanges { - target: Sticky + target: sticky rotation: 8 scale: 1 } PropertyChanges { - target: Page + target: page z: 8 } } diff --git a/examples/declarative/velocity/velocity.qml b/examples/declarative/velocity/velocity.qml index 8ac42e1..b132965 100644 --- a/examples/declarative/velocity/velocity.qml +++ b/examples/declarative/velocity/velocity.qml @@ -5,7 +5,7 @@ Rectangle { width: 800 height: 600 ListModel { - id: List + id: list ListElement { name: "Sunday" dayColor: "#808080" @@ -95,13 +95,13 @@ Rectangle { } } Flickable { - id: Flick + id: flickable anchors.fill: parent - viewportWidth: Lay.width + viewportWidth: lay.width Row { - id: Lay + id: lay Repeater { - model: List + model: list Component { Day { day: name diff --git a/examples/declarative/webview/autosize.qml b/examples/declarative/webview/autosize.qml index dbd94e1..74c6844 100644 --- a/examples/declarative/webview/autosize.qml +++ b/examples/declarative/webview/autosize.qml @@ -3,22 +3,21 @@ import Qt 4.6 // The WebView size is determined by the width, height, // preferredWidth, and preferredHeight properties. Rectangle { - id: Rect + id: rect color: "white" width: 200 - height: Layout.height + height: layout.height Column { - id: Layout + id: layout spacing: 2 WebView { html: "No width defined." - Rectangle { - color: "#10000000" + Rectangle { color: "#10000000" anchors.fill: parent } } WebView { - width: Rect.width + width: rect.width html: "The width is full." Rectangle { color: "#10000000" @@ -26,7 +25,7 @@ Rectangle { } } WebView { - width: Rect.width/2 + width: rect.width/2 html: "The width is half." Rectangle { color: "#10000000" @@ -34,7 +33,7 @@ Rectangle { } } WebView { - preferredWidth: Rect.width/2 + preferredWidth: rect.width/2 html: "The preferredWidth is half." Rectangle { color: "#10000000" @@ -42,7 +41,7 @@ Rectangle { } } WebView { - preferredWidth: Rect.width/2 + preferredWidth: rect.width/2 html: "The_preferredWidth_is_half." Rectangle { color: "#10000000" @@ -50,7 +49,7 @@ Rectangle { } } WebView { - width: Rect.width/2 + width: rect.width/2 html: "The_width_is_half." Rectangle { color: "#10000000" diff --git a/examples/declarative/webview/content/SpinSquare.qml b/examples/declarative/webview/content/SpinSquare.qml index 95159b6..5ccdeb6 100644 --- a/examples/declarative/webview/content/SpinSquare.qml +++ b/examples/declarative/webview/content/SpinSquare.qml @@ -3,16 +3,16 @@ import Qt 4.6 Item { property var period : 250 property var color : "black" - id: Root + id: root Item { - x: Root.width/2 - y: Root.height/2 + x: root.width/2 + y: root.height/2 Rectangle { - color: Root.color + color: root.color x: -width/2 y: -height/2 - width: Root.width + width: root.width height: width } rotation: NumberAnimation { @@ -20,7 +20,7 @@ Item { to: 360 repeat: true running: true - duration: Root.period + duration: root.period } } } diff --git a/examples/declarative/webview/newwindows.qml b/examples/declarative/webview/newwindows.qml index 57cbf4e..59e3b3e 100644 --- a/examples/declarative/webview/newwindows.qml +++ b/examples/declarative/webview/newwindows.qml @@ -6,23 +6,23 @@ import Qt 4.6 Row { - id: Pages + id: pages height: 200 resources: [ Component { - id: WebViewPage + id: webViewPage Rectangle { - width: WV.width - height: WV.height + width: webView.width + height: webView.height WebView { - id: WV - newWindowComponent: WebViewPage - newWindowParent: Pages + id: webView + newWindowComponent: webViewPage + newWindowParent: pages url: "newwindows.html" } } } ] width: 500 - Loader { sourceComponent: WebViewPage } + Loader { sourceComponent: webViewPage } } diff --git a/examples/declarative/webview/qml-in-html.qml b/examples/declarative/webview/qml-in-html.qml index b9c8d94..43cc61b 100644 --- a/examples/declarative/webview/qml-in-html.qml +++ b/examples/declarative/webview/qml-in-html.qml @@ -6,10 +6,10 @@ Rectangle { Flickable { width: parent.width height: parent.height/2 - viewportWidth: Web.width*Web.scale - viewportHeight: Web.height*Web.scale + viewportWidth: web.width*web.scale + viewportHeight: web.height*web.scale WebView { - id: Web + id: web width: 250 height: 420 scale: 0.75 diff --git a/examples/declarative/webview/transparent.qml b/examples/declarative/webview/transparent.qml index 0807cc5..9332f3e 100644 --- a/examples/declarative/webview/transparent.qml +++ b/examples/declarative/webview/transparent.qml @@ -4,10 +4,10 @@ import Qt 4.6 // if the HTML does not specify a background Rectangle { color: "green" - width: Web.width - height: Web.height + width: web.width + height: web.height WebView { - id: Web + id: web html: "Hello <b>World!</b>" } } diff --git a/examples/declarative/xmldata/daringfireball.qml b/examples/declarative/xmldata/daringfireball.qml index e0e53ef..bea38c8 100644 --- a/examples/declarative/xmldata/daringfireball.qml +++ b/examples/declarative/xmldata/daringfireball.qml @@ -29,20 +29,20 @@ Rectangle { height: childrenRect.height + 20 Text { x: 10 - id: TitleText + id: titleText text: title font.bold: true } Text { text: 'by ' + tagline - anchors.left: TitleText.right + anchors.left: titleText.right anchors.leftMargin: 10 font.italic: true } Text { x: 10 text: content - anchors.top: TitleText.bottom + anchors.top: titleText.bottom width: 580 wrap: true onLinkActivated: { print('link clicked: ' + link) } diff --git a/examples/declarative/xmldata/yahoonews.qml b/examples/declarative/xmldata/yahoonews.qml index 7ebc2b2..bad1d88 100644 --- a/examples/declarative/xmldata/yahoonews.qml +++ b/examples/declarative/xmldata/yahoonews.qml @@ -28,24 +28,24 @@ Rectangle { Component { id: feedDelegate Item { - id: Delegate - height: Wrapper.height + 10 + id: delegate + height: wrapper.height + 10 MouseRegion { - anchors.fill: Wrapper - onPressed: { Delegate.ListView.list.currentIndex = index; } - onClicked: { if (Wrapper.state == 'Details') { Wrapper.state = '';} else {Wrapper.state = 'Details';} } + anchors.fill: wrapper + onPressed: { delegate.ListView.list.currentIndex = index; } + onClicked: { if (wrapper.state == 'Details') { wrapper.state = '';} else {wrapper.state = 'Details';} } } Rectangle { - id: Wrapper + id: wrapper y: 5 - height: TitleText.height + 10 + height: titleText.height + 10 width: 580 color: "#F0F0F0" radius: 5 Text { x: 10 y: 5 - id: TitleText + id: titleText text: '<a href=\'' + link + '\'>' + title + '</a>' font.bold: true font.family: "Helvetica" @@ -54,20 +54,20 @@ Rectangle { } Text { x: 10 - id: Description + id: description text: description width: 560 wrap: true font.family: "Helvetica" - anchors.top: TitleText.bottom + anchors.top: titleText.bottom anchors.topMargin: 5 opacity: 0 } states: [ State { name: "Details" - PropertyChanges { target: Wrapper; height: childrenRect.height + 10 } - PropertyChanges { target: Description; opacity: 1 } + PropertyChanges { target: wrapper; height: childrenRect.height + 10 } + PropertyChanges { target: description; opacity: 1 } } ] transitions: [ |
