From e793ab29e651a7b07354224a82343d66c265f361 Mon Sep 17 00:00:00 2001 From: Roberto Raggi Date: Mon, 27 Apr 2009 12:32:25 +0200 Subject: Converted the examples. --- examples/declarative/animation/animation.qml | 79 ++++--- examples/declarative/behaviours/MyRect.qml | 15 +- examples/declarative/behaviours/test.qml | 140 +++++++++--- examples/declarative/contacts/contacts.qml | 165 ++++++++++---- examples/declarative/dial/DialLibrary/Dial.qml | 54 ++++- examples/declarative/dial/dial.qml | 52 +++-- examples/declarative/follow/follow.qml | 113 ++++++--- examples/declarative/listview/highlight.qml | 133 ++++++----- examples/declarative/listview/recipes.qml | 289 +++++++++++++++++------- examples/declarative/minehunt/Description.qml | 48 +++- examples/declarative/minehunt/Explosion.qml | 27 ++- examples/declarative/minehunt/minehunt.qml | 257 +++++++++++++++------ examples/declarative/scrollbar/ScrollBar.qml | 62 ++--- examples/declarative/scrollbar/display.qml | 91 +++++--- examples/declarative/slideswitch/Switch.qml | 104 ++++++--- examples/declarative/slideswitch/display.qml | 11 +- examples/declarative/states/states.qml | 119 ++++++---- examples/declarative/states/transitions.qml | 179 +++++++++------ examples/declarative/tutorials/t1/tutorial1.qml | 17 +- examples/declarative/tutorials/t2/Cell.qml | 23 +- examples/declarative/tutorials/t2/tutorial2.qml | 52 ++++- examples/declarative/tutorials/t3/Cell.qml | 23 +- examples/declarative/tutorials/t3/tutorial3.qml | 105 ++++++--- 23 files changed, 1503 insertions(+), 655 deletions(-) diff --git a/examples/declarative/animation/animation.qml b/examples/declarative/animation/animation.qml index 1d60ac0..5cb471e 100644 --- a/examples/declarative/animation/animation.qml +++ b/examples/declarative/animation/animation.qml @@ -1,28 +1,51 @@ - - - - - - - - - - - - - - - - - - - - - - - - - +Rect { + width: 400 + height: 200 + color: "white" + Rect { + width: 40 + height: 40 + y: 80 + color: "#FF0000" + radius: 10 + // Animate the x property. Setting repeat to true makes the + // animation repeat indefinitely, otherwise it would only run once. + x: SequentialAnimation { + running: true + repeat: true + // Move from 0 to 360 in 500ms, using the easeInOutQuad easing function + NumericAnimation { + from: 0 + to: 360 + easing: "easeInOutQuad" + duration: 500 + } + // Then pause for 200ms + PauseAnimation { + duration: 200 + } + // Then move back to 0 in 2 seconds, using the easeInOutElastic easing function + NumericAnimation { + from: 360 + to: 0 + easing: "easeInOutElastic" + duration: 2000 + } + } + // Alternate color between red and green + color: SequentialAnimation { + running: true + repeat: true + ColorAnimation { + from: "#FF0000" + to: "#00FF00" + duration: 5000 + } + ColorAnimation { + from: "#00FF00" + to: "#FF0000" + duration: 5000 + } + } + } +} diff --git a/examples/declarative/behaviours/MyRect.qml b/examples/declarative/behaviours/MyRect.qml index e40bd1b..dc9a094 100644 --- a/examples/declarative/behaviours/MyRect.qml +++ b/examples/declarative/behaviours/MyRect.qml @@ -1,4 +1,11 @@ - - - - +Rect { + radius: 15 + pen.color: "black" + width: 100 + height: 100 + id: Page + MouseRegion { + anchors.fill: parent + onClicked: { bluerect.parent = Page; bluerect.x=0 } + } +} diff --git a/examples/declarative/behaviours/test.qml b/examples/declarative/behaviours/test.qml index a544028..bb7109e 100644 --- a/examples/declarative/behaviours/test.qml +++ b/examples/declarative/behaviours/test.qml @@ -1,37 +1,103 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Rect { + color: "lightsteelblue" + width: 800 + height: 600 + id: Page + MouseRegion { + anchors.fill: parent + onClicked: { bluerect.parent = Page; bluerect.x = mouseX; } + } + MyRect { + color: "green" + x: 200 + y: 200 + } + MyRect { + color: "red" + x: 400 + y: 200 + } + MyRect { + color: "yellow" + x: 400 + y: 400 + } + MyRect { + color: "orange" + x: 400 + y: 500 + } + MyRect { + color: "pink" + x: 400 + y: 0 + } + MyRect { + color: "lightsteelblue" + x: 100 + y: 500 + } + MyRect { + color: "black" + x: 0 + y: 200 + } + MyRect { + color: "white" + x: 400 + y: 0 + } + Rect { + color: "blue" + x: 0 + y: 0 + width: 100 + height: 100 + id: bluerect + x: Behaviour { + SequentialAnimation { + NumericAnimation { + target: bluerect + properties: "y" + from: 0 + to: 10 + easing: "easeOutBounce(amplitude:30)" + duration: 250 + } + NumericAnimation { + target: bluerect + properties: "y" + from: 10 + to: 0 + easing: "easeOutBounce(amplitude:30)" + duration: 250 + } + } + NumericAnimation { + target: bluerect + property: "x" + duration: 500 + } + } + parent: Behaviour { + SequentialAnimation { + NumericAnimation { + target: bluerect + properties: "opacity" + to: 0 + duration: 150 + } + SetPropertyAction { + target: bluerect + property: "parent" + } + NumericAnimation { + target: bluerect + properties: "opacity" + to: 1 + duration: 150 + } + } + } + } +} diff --git a/examples/declarative/contacts/contacts.qml b/examples/declarative/contacts/contacts.qml index d4647f9..fa50010 100644 --- a/examples/declarative/contacts/contacts.qml +++ b/examples/declarative/contacts/contacts.qml @@ -1,44 +1,121 @@ - - - - - - - - - - - - - - - - {Math.max(email_layout.height + name.height + 25, portraitPic.height+20)} - - - - - - - - - - - - - - - - - - - - - - - - - - +Rect { + id: page + width: 320 + height: 480 + color: "white" + resources: [ + Component { + id: contactDelegate + Rect { + id: wrapper + x: 20 + width: List.width-40 + color: "#FEFFEE" + pen.color: "#FFBE4F" + radius: 5 + filter: Shadow { + xOffset: 5 + yOffset: 5 + } + MouseRegion { + id: pageMouse + anchors.fill: parent + onClicked: { if (wrapper.state == 'Details') { wrapper.state = '';} else {wrapper.state = 'Details';} } + } + Image { + id: portraitPic + src: portrait + x: 10 + y: 10 + } + Text { + id: name + text: firstName + ' ' + lastName + anchors.left: portraitPic.right + anchors.leftMargin: 10 + anchors.top: portraitPic.top + anchors.right: wrapper.right + anchors.rightMargin: 10 + font.family: "Comic Sans MS" + font.bold: true + font.size: 11 + } + VerticalLayout { + id: email_layout + anchors.left: name.left + anchors.top: name.bottom + anchors.topMargin: 10 + Repeater { + id: email_list + dataSource: emails + Component { + Text { + text: modelData + height: 18 + font.italic: true + color: "midnightblue" + } + } + } + } + height: Math.max(email_layout.height + name.height + 25, portraitPic.height+20) + states: [ + State { + name: "Details" + SetProperty { + target: wrapper + property: "color" + value: "white" + } + SetProperty { + target: wrapper + property: "x" + value: 0 + } + SetProperty { + target: wrapper + property: "height" + value: List.height + } + SetProperty { + target: wrapper + property: "width" + value: List.width + } + SetProperty { + target: wrapper.ListView.view + property: "yPosition" + value: wrapper.y + } + SetProperty { + target: wrapper.ListView.view + property: "locked" + value: 1 + } + } + ] + transitions: [ + Transition { + ParallelAnimation { + ColorAnimation { + duration: 500 + } + NumericAnimation { + duration: 150 + properties: "x,yPosition,height,width" + } + } + } + ] + } + } + ] + ListView { + id: List + model: contactModel + width: 320 + height: 480 + clip: true + delegate: contactDelegate + } +} diff --git a/examples/declarative/dial/DialLibrary/Dial.qml b/examples/declarative/dial/DialLibrary/Dial.qml index e2a11b1..8336a70 100644 --- a/examples/declarative/dial/DialLibrary/Dial.qml +++ b/examples/declarative/dial/DialLibrary/Dial.qml @@ -1,12 +1,42 @@ - - - - - - - - - - - - +Item { + width: 210 + height: 210 + properties: Property { + name: "value" + type: "real" + value: 0 + } + Image { + id: Background + src: "background.svg" + } + Item { + x: 104 + y: 102 + rotation: Needle.rotation + Image { + src: "needle_shadow.svg" + x: -104 + y: -102 + } + } + Item { + id: Needle + x: 102 + y: 98 + rotation: -130 + rotation: Follow { + spring: 1.4 + damping: .15 + source: Math.min(Math.max(-130, value*2.2 - 130), 133) + } + Image { + src: "needle.svg" + x: -102 + y: -98 + } + } + Image { + src: "overlay.svg" + } +} diff --git a/examples/declarative/dial/dial.qml b/examples/declarative/dial/dial.qml index bda9b41..fa11d79 100644 --- a/examples/declarative/dial/dial.qml +++ b/examples/declarative/dial/dial.qml @@ -1,14 +1,38 @@ - - - - - - - - - - +import "DialLibrary" +Rect { + color: "white" + width: 210 + height: 240 + // Dial with a slider to adjust it + Dial { + id: Dial + value: Slider.x-2 + } + Rect { + anchors.top: Dial.bottom + x: 20 + width: 160 + height: 16 + color: "steelblue" + gradientColor: "lightsteelblue" + radius: 8 + opacity: 0.7 + Rect { + id: Slider + x: 2 + y: 2 + width: 30 + height: 12 + color: "lightgray" + gradientColor: "gray" + radius: 6 + MouseRegion { + anchors.fill: parent + drag.target: parent + drag.axis: "x" + drag.xmin: 2 + drag.xmax: 128 + } + } + } +} diff --git a/examples/declarative/follow/follow.qml b/examples/declarative/follow/follow.qml index 0f3e772..598d953 100644 --- a/examples/declarative/follow/follow.qml +++ b/examples/declarative/follow/follow.qml @@ -1,35 +1,78 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Rect { + width: 320 + height: 240 + color: "#ffffff" + Rect { + id: Rect + y: 200 + color: "#00ff00" + width: 60 + height: 20 + y: SequentialAnimation { + running: true + repeat: true + NumericAnimation { + to: 200 + easing: "easeOutBounce(amplitude:180)" + duration: 2000 + } + PauseAnimation { + duration: 1000 + } + } + } + // Velocity + Rect { + x: Rect.width + color: "#ff0000" + width: Rect.width + height: 20 + y: Follow { + source: Rect.y + velocity: 200 + } + } + Text { + x: Rect.width + y: 220 + text: "Velocity" + } + // Spring + Rect { + x: Rect.width * 2 + color: "#ff0000" + width: Rect.width + height: 20 + y: Follow { + source: Rect.y + spring: 1.2 + damping: 0.1 + } + } + Text { + x: Rect.width * 2 + y: 220 + text: "Spring" + } + // Follow mouse + MouseRegion { + id: Mouse + anchors.fill: parent + Rect { + width: 20 + height: 20 + radius: 10 + color: "#0000ff" + x: Follow { + source: Mouse.mouseX-10 + spring: 1.0 + damping: 0.05 + } + y: Follow { + source: Mouse.mouseY-10 + spring: 1.0 + damping: 0.05 + } + } + } +} diff --git a/examples/declarative/listview/highlight.qml b/examples/declarative/listview/highlight.qml index 5ce7acb..cbadb72 100644 --- a/examples/declarative/listview/highlight.qml +++ b/examples/declarative/listview/highlight.qml @@ -1,56 +1,77 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Rect { + width: 400 + height: 300 + color: "white" + // MyPets model is defined in dummydata/MyPetsModel.qml + // The viewer automatically loads files in dummydata/* to assist + // development without a real data source. + // This one contains my pets. + // Define a delegate component. A component will be + // instantiated for each visible item in the list. + Component { + id: PetDelegate + Item { + id: Wrapper + width: 200 + height: 50 + VerticalLayout { + Text { + text: 'Name: ' + name + } + Text { + text: 'Type: ' + type + } + Text { + text: 'Age: ' + age + } + } + // Use the ListView.isCurrentItem attached property to + // indent the item if it is the current item. + states: [ + State { + name: "Current" + when: Wrapper.ListView.isCurrentItem + SetProperty { + target: Wrapper + property: "x" + value: 10 + } + } + ] + transitions: [ + Transition { + NumericAnimation { + properties: "x" + duration: 200 + } + } + ] + } + } + // Specify a highlight with custom movement. Note that autoHighlight + // is set to false in the ListView so that we can control how the + // highlight moves to the current item. + Component { + id: PetHighlight + Rect { + width: 200 + height: 50 + color: "#FFFF88" + y: Follow { + source: List1.current.y + spring: 3 + damping: 0.1 + } + } + } + ListView { + id: List1 + width: 200 + height: parent.height + model: MyPetsModel + delegate: PetDelegate + highlight: PetHighlight + autoHighlight: false + focus: true + } +} diff --git a/examples/declarative/listview/recipes.qml b/examples/declarative/listview/recipes.qml index 6826b78..0f6324f 100644 --- a/examples/declarative/listview/recipes.qml +++ b/examples/declarative/listview/recipes.qml @@ -1,85 +1,204 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 68 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +import "content" +// This example illustrates expanding a list item to show a more detailed view +Rect { + id: page + width: 400 + height: 240 + color: "black" + resources: [ + // Delegate for the recipes. This delegate has two modes: + // 1. the list mode (default), which just shows the picture and title of the recipe. + // 2. the details mode, which also shows the ingredients and method. + Component { + id: recipeDelegate + Item { + id: wrapper + 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 "SetProperty" line for each element we + // want to fade. + properties: Property { + name: "detailsOpacity" + value: 0 + type: "real" + } + // A simple rounded rectangle for the background + Rect { + id: background + x: 1 + y: 2 + width: parent.width-2 + height: parent.height-4 + color: "#FEFFEE" + pen.color: "#FFBE4F" + radius: 5 + } + // This mouse region covers the entire delegate. + // When clicked it changes mode to 'Details'. If we are already + // in Details mode, then no change will happen. + MouseRegion { + id: pageMouse + anchors.fill: parent + onClicked: { wrapper.state = 'Details' } + } + // Layout the page. Picture, title and ingredients at the top, method at the + // bottom. Note that elements that should not be visible in the list + // mode have their opacity set to wrapper.detailsOpacity. + HorizontalLayout { + id: topLayout + x: 10 + y: 10 + spacing: 10 + height: recipePic.height + width: parent.width + Image { + id: recipePic + src: picture + width: 48 + height: 48 + } + VerticalLayout { + height: recipePic.height + spacing: 5 + width: background.width-recipePic.width-20 + Text { + id: name + text: title + font.bold: true + font.size: 16 + } + Text { + opacity: wrapper.detailsOpacity + text: "Ingredients" + font.size: 12 + font.bold: true + } + Text { + opacity: wrapper.detailsOpacity + text: ingredients + wrap: true + width: parent.width + } + } + } + Item { + id: details + x: 10 + width: parent.width-20 + anchors.top: topLayout.bottom + anchors.topMargin: 10 + anchors.bottom: parent.bottom + anchors.bottomMargin: 10 + opacity: wrapper.detailsOpacity + Text { + id: methodTitle + text: "Method" + font.size: 12 + font.bold: true + anchors.top: parent.top + } + Flickable { + id: flick + anchors.top: methodTitle.bottom + anchors.bottom: parent.bottom + width: parent.width + viewportHeight: methodText.height + clip: true + Text { + id: methodText + text: method + wrap: true + width: details.width + } + } + Image { + anchors.right: flick.right + anchors.top: flick.top + src: "content/pics/moreUp.png" + opacity: flick.atYBeginning ? 0 : 1 + } + Image { + anchors.right: flick.right + anchors.bottom: flick.bottom + src: "content/pics/moreDown.png" + opacity: flick.atYEnd ? 0 : 1 + } + } + // A button to close the detailed view, i.e. set the state back to default (''). + MediaButton { + anchors.right: background.right + anchors.rightMargin: 5 + y: 10 + opacity: wrapper.detailsOpacity + text: "Close" + onClicked: { wrapper.state = '' } + } + // Make the default height equal the hight of the picture, plus margin. + height: 68 + states: [ + State { + name: "Details" + SetProperty { + target: background + property: "color" + value: "white" + } + // Make the picture bigger + SetProperties { + target: recipePic + width: 128 + height: 128 + } + // Make details visible + SetProperties { + target: wrapper + detailsOpacity: 1 + x: 0 + } + // Make the detailed view fill the entire list area + SetProperty { + target: wrapper + property: "height" + value: List.height + } + // Move the list so that this item is at the top. + SetProperty { + target: wrapper.ListView.view + property: "yPosition" + value: wrapper.y + } + // Disallow flicking while we're in detailed view + SetProperty { + target: wrapper.ListView.view + property: "locked" + value: 1 + } + } + ] + transitions: [ + Transition { + // Make the state changes smooth + ParallelAnimation { + ColorAnimation { + duration: 500 + } + NumericAnimation { + duration: 300 + properties: "detailsOpacity,x,yPosition,height,width" + } + } + } + ] + } + } + ] + // The actual list + ListView { + id: List + model: Recipies + anchors.fill: parent + clip: true + delegate: recipeDelegate + } +} diff --git a/examples/declarative/minehunt/Description.qml b/examples/declarative/minehunt/Description.qml index 5bda5f8..f59c8f9 100644 --- a/examples/declarative/minehunt/Description.qml +++ b/examples/declarative/minehunt/Description.qml @@ -1,10 +1,38 @@ - - - - - - - - - - +Item { + id: Page + height: MyText.height + 20 + properties: Property { + name: "text" + } + MouseRegion { + anchors.fill: parent + drag.target: Page + drag.axis: "xy" + drag.xmin: 0 + drag.xmax: 1000 + drag.ymin: 0 + drag.ymax: 1000 + } + Rect { + radius: 10 + anchors.fill: parent + color: "lightsteelblue" + } + Item { + x: 10 + y: 10 + width: parent.width - 20 + height: parent.height - 20 + Text { + id: MyText + text: Page.text + width: parent.width + clip: true + wrap: true + } + } + filter: Shadow { + xOffset: 5 + yOffset: 5 + } +} diff --git a/examples/declarative/minehunt/Explosion.qml b/examples/declarative/minehunt/Explosion.qml index aec685b..1e4f03d 100644 --- a/examples/declarative/minehunt/Explosion.qml +++ b/examples/declarative/minehunt/Explosion.qml @@ -1,6 +1,21 @@ - - - - - - +Item { + properties: Property { + name: "explode" + type: "Bool" + value: false + } + Particles { + width: 38 + height: 21 + lifeSpan: 3600000 + lifeSpanDeviation: 0 + src: "pics/star.png" + count: 200 + angle: 270 + angleDeviation: 360 + velocity: 100 + velocityDeviation: 20 + z: 100 + emitting: explode + } +} diff --git a/examples/declarative/minehunt/minehunt.qml b/examples/declarative/minehunt/minehunt.qml index 9db0e84..9454f2f 100644 --- a/examples/declarative/minehunt/minehunt.qml +++ b/examples/declarative/minehunt/minehunt.qml @@ -1,73 +1,186 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - In play: - - - - +Item { + id: field + width: 370 + height: 480 + properties: Property { + name: "clickx" + type: "Int" + value: 0 + } + properties: Property { + name: "clicky" + type: "Int" + value: 0 + } + resources: [ + Component { + id: tile + Flipable { + id: flipable + width: 40 + height: 40 + transform: [ + Axis { + id: axis + xStart: 20 + xEnd: 20 + yStart: 20 + yEnd: 0 + } + ] + front: Image { + src: "pics/front.png" + width: 40 + height: 40 + Image { + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + src: "pics/flag.png" + opacity: modelData.hasFlag + opacity: Behaviour { + NumericAnimation { + property: "opacity" + duration: 250 + } + } + } + } + back: Image { + src: "pics/back.png" + width: 40 + height: 40 + Text { + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + text: modelData.hint + color: "white" + font.bold: true + opacity: modelData.hasMine == false && modelData.hint > 0 + } + Image { + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + src: "pics/bomb.png" + opacity: modelData.hasMine + } + Explosion { + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + explode: modelData.hasMine==true && modelData.flipped==true + } + } + states: [ + State { + name: "back" + when: modelData.flipped == true + SetProperty { + target: axis + property: "rotation" + value: 180 + } + } + ] + transitions: [ + Transition { + SequentialAnimation { + PauseAnimation { + duration: { + var ret = Math.abs(flipable.parent.x-field.clickx) + + Math.abs(flipable.parent.y-field.clicky); - - - - - + ret > 0 + ? (modelData.hasMine==true && modelData.flipped==true) ? ret * 3 : ret + : 0 + } + } + NumericAnimation { + easing: "easeInOutQuad" + properties: "rotation" + } + } + } + ] + MouseRegion { + anchors.fill: parent + onClicked: { + field.clickx = flipable.parent.x; + field.clicky = flipable.parent.y; + row = Math.floor(index/9); + col = index - (Math.floor(index/9) * 9); + if (mouseButton==undefined || mouseButton=='Right') { + flag(row, col); + } else{ + flip(row, col); + } + } + } + } + } + ] + Image { + src: "pics/No-Ones-Laughing-3.jpg" + tile: true + } + Description { + text: "Use the 'minehunt' executable to run this demo!" + width: 300 + opacity: tiles?0:1 + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + } + Repeater { + dataSource: tiles + x: 1 + y: 1 + Component { + ComponentInstance { + component: tile + x: (index - (Math.floor(index/9) * 9)) * 41 + y: Math.floor(index/9) * 41 + } + } + } + Item { + id: gamedata + width: 370 + height: 100 + y: 380 + Text { + color: "white" + font.size: 18 + x: 20 + y: 20 + } + Image { + x: 100 + y: 20 + src: "pics/bomb-color.png" + } + Text { + x: 100 + y: 60 + color: "white" + text: numMines + } + Image { + x: 140 + y: 20 + src: "pics/flag-color.png" + } + Text { + x: 140 + y: 60 + color: "white" + text: numFlags + } + Image { + x: 240 + y: 0 + src: if(isPlaying==true){'pics/smile.png'}else{if(hasWon==true){'pics/glee.png'}else{'pics/frown.png'}} + MouseRegion { + anchors.fill: parent + onClicked: { reset() } + } + } + } +} diff --git a/examples/declarative/scrollbar/ScrollBar.qml b/examples/declarative/scrollbar/ScrollBar.qml index 470a170..e3ca0c2 100644 --- a/examples/declarative/scrollbar/ScrollBar.qml +++ b/examples/declarative/scrollbar/ScrollBar.qml @@ -1,26 +1,36 @@ - - - - - - - - - - - - - - +Item { + 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% + // of the height of the view. + // orientation can be either 'Vertical' or 'Horizontal' + properties: Property { + name: "position" + } + properties: Property { + name: "pageSize" + } + properties: Property { + name: "orientation" + value: "Vertical" + } + // A light, semi-transparent background + Rect { + id: Background + radius: orientation == 'Vertical' ? (width/2) : (height/2) + color: "white" + opacity: 0.3 + anchors.fill: parent + } + // Size the bar to the required size, depending upon the orientation. + Rect { + opacity: 0.6 + color: "black" + radius: orientation == 'Vertical' ? (width/2) : (height/2) + x: orientation == 'Vertical' ? 2 : (ScrollBar.position * (ScrollBar.width-4) + 2) + y: orientation == 'Vertical' ? (ScrollBar.position * (ScrollBar.height-4) + 2) : 2 + width: orientation == 'Vertical' ? (parent.width-4) : (ScrollBar.pageSize * (ScrollBar.width-4)) + height: orientation == 'Vertical' ? (ScrollBar.pageSize * (ScrollBar.height-4)) : (parent.height-4) + } +} diff --git a/examples/declarative/scrollbar/display.qml b/examples/declarative/scrollbar/display.qml index 697b68a..4412d7f 100644 --- a/examples/declarative/scrollbar/display.qml +++ b/examples/declarative/scrollbar/display.qml @@ -1,28 +1,63 @@ - - - - - - {Picture.width} - {Picture.height} - - - - - - - - - - - - - - - - - - - - - +Rect { + width: 640 + height: 480 + // Create a flickable to view a large image. + Flickable { + id: View + anchors.fill: parent + Image { + id: Picture + src: "pics/niagara_falls.jpg" + } + viewportWidth: Picture.width + viewportHeight: Picture.height + // Only show the scrollbars when the view is moving. + states: [ + State { + name: "ShowBars" + when: View.moving + SetProperty { + target: SBV + property: "opacity" + value: 1 + } + SetProperty { + target: SBH + property: "opacity" + value: 1 + } + } + ] + transitions: [ + Transition { + fromState: "*" + toState: "*" + NumericAnimation { + properties: "opacity" + duration: 400 + } + } + ] + } + // Attach scrollbars to the right and bottom edges of the view. + ScrollBar { + id: SBV + opacity: 0 + orientation: "Vertical" + position: View.pageYPosition + pageSize: View.pageHeight + width: 12 + height: View.height-12 + anchors.right: View.right + } + ScrollBar { + id: SBH + opacity: 0 + orientation: "Horizontal" + position: View.pageXPosition + pageSize: View.pageWidth + height: 12 + width: View.width-12 + anchors.bottom: View.bottom + } +} diff --git a/examples/declarative/slideswitch/Switch.qml b/examples/declarative/slideswitch/Switch.qml index 90e6e64..f62e4b6 100644 --- a/examples/declarative/slideswitch/Switch.qml +++ b/examples/declarative/slideswitch/Switch.qml @@ -1,6 +1,12 @@ - - - - - - - - - - - - - - - - - - - - - - - - - + + } + Image { + id: Groove + src: "background.svg" + } + MouseRegion { + anchors.fill: Groove + onClicked: { toggle() } + } + Image { + id: Knob + src: "knob.svg" + x: 1 + y: 2 + } + MouseRegion { + anchors.fill: Knob + onClicked: { toggle() } + onReleased: { if (!isClick) dorelease() } + drag.target: Knob + drag.axis: "x" + drag.xmin: 1 + drag.xmax: 78 + } + states: [ + State { + name: "On" + SetProperty { + target: Knob + property: "x" + value: 78 + } + SetProperty { + target: Switch + property: "on" + value: true + } + }, + State { + name: "Off" + SetProperty { + target: Knob + property: "x" + value: 1 + } + SetProperty { + target: Switch + property: "on" + value: false + } + } + ] + transitions: [ + Transition { + NumericAnimation { + properties: "x" + easing: "easeInOutQuad" + duration: 200 + } + } + ] +} diff --git a/examples/declarative/slideswitch/display.qml b/examples/declarative/slideswitch/display.qml index b62422c..cea89b6 100644 --- a/examples/declarative/slideswitch/display.qml +++ b/examples/declarative/slideswitch/display.qml @@ -1,3 +1,8 @@ - - - +Rect { + color: "white" + width: 150 + height: 150 + Switch { + anchors.centeredIn: parent + } +} diff --git a/examples/declarative/states/states.qml b/examples/declarative/states/states.qml index e540d25..0c27637 100644 --- a/examples/declarative/states/states.qml +++ b/examples/declarative/states/states.qml @@ -1,40 +1,79 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Rect { + id: Page + width: 300 + height: 300 + color: "white" + // A target region. Clicking in here sets the state to '' - the default state + Rect { + width: 50 + height: 50 + x: 0 + y: 0 + color: "transparent" + pen.color: "black" + MouseRegion { + anchors.fill: parent + onClicked: { Page.state='' } + } + } + // Another target region. Clicking in here sets the state to 'Position1' + Rect { + width: 50 + height: 50 + x: 150 + y: 50 + color: "transparent" + pen.color: "black" + MouseRegion { + anchors.fill: parent + onClicked: { Page.state='Position1' } + } + } + // Another target region. Clicking in here sets the state to 'Position2' + Rect { + width: 50 + height: 50 + x: 0 + y: 200 + color: "transparent" + pen.color: "black" + MouseRegion { + anchors.fill: parent + onClicked: { Page.state='Position2' } + } + } + // Rect which will be moved when my state changes + Rect { + id: myrect + width: 50 + height: 50 + color: "red" + } + states: [ + // In state 'Position1', change the 'myrect' item x, y to 150, 50. + State { + name: "Position1" + SetProperty { + target: myrect + property: "x" + value: 150 + } + SetProperty { + target: myrect + property: "y" + value: 50 + } + } // In state 'Position2', change y to 100. We do not specify 'x' here - + // it will therefore be restored to its default value of 0, if it + // had been changed. +, + State { + name: "Position2" + SetProperty { + target: myrect + property: "y" + value: 200 + } + } + ] +} diff --git a/examples/declarative/states/transitions.qml b/examples/declarative/states/transitions.qml index c3f3515..c7fc656 100644 --- a/examples/declarative/states/transitions.qml +++ b/examples/declarative/states/transitions.qml @@ -1,68 +1,111 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +Rect { + id: Page + width: 300 + height: 300 + color: "white" + // A target region. Clicking in here sets the state to '' - the default state + Rect { + width: 50 + height: 50 + x: 0 + y: 0 + color: "transparent" + pen.color: "black" + MouseRegion { + anchors.fill: parent + onClicked: { Page.state='' } + } + } + // Another target region. Clicking in here sets the state to 'Position1' + Rect { + width: 50 + height: 50 + x: 150 + y: 50 + color: "transparent" + pen.color: "black" + MouseRegion { + anchors.fill: parent + onClicked: { Page.state='Position1' } + } + } + // Another target region. Clicking in here sets the state to 'Position2' + Rect { + width: 50 + height: 50 + x: 0 + y: 200 + color: "transparent" + pen.color: "black" + MouseRegion { + anchors.fill: parent + onClicked: { Page.state='Position2' } + } + } + // Rect which will be moved when my state changes + Rect { + id: myrect + width: 50 + height: 50 + color: "red" + } + states: [ + // In state 'Position1', change the 'myrect' item x, y to 150, 50. + State { + name: "Position1" + SetProperty { + target: myrect + property: "x" + value: 150 + } + SetProperty { + target: myrect + property: "y" + value: 50 + } + } // In state 'Position2', change y to 100. We do not specify 'x' here - + // it will therefore be restored to its default value of 0, if it + // had been changed. +, + State { + name: "Position2" + SetProperty { + target: myrect + property: "y" + value: 200 + } + } + ] + // transitions define how the properties change. + transitions: [ + // When transitioning to 'Position1' move x,y over a duration of 1 second, + // with easeOutBounce easing function. + Transition { + fromState: "*" + toState: "Position1" + NumericAnimation { + properties: "x,y" + easing: "easeOutBounce" + duration: 1000 + } + } // When transitioning to 'Position2' move x,y over a duration of 2 seconds, + // with easeInOutQuad easing function. +, + Transition { + fromState: "*" + toState: "Position2" + NumericAnimation { + properties: "x,y" + easing: "easeInOutQuad" + duration: 2000 + } + } // For any other state changes move x,y linearly over duration of 200ms. +, + Transition { + NumericAnimation { + properties: "x,y" + duration: 200 + } + } + ] +} diff --git a/examples/declarative/tutorials/t1/tutorial1.qml b/examples/declarative/tutorials/t1/tutorial1.qml index e4de571..ec29f4f 100644 --- a/examples/declarative/tutorials/t1/tutorial1.qml +++ b/examples/declarative/tutorials/t1/tutorial1.qml @@ -1,3 +1,14 @@ - - - +Rect { + id: Page + width: 480 + height: 200 + color: "white" + Text { + id: HelloText + text: "Hello world!" + font.size: 24 + font.bold: true + y: 30 + anchors.horizontalCenter: Page.horizontalCenter + } +} diff --git a/examples/declarative/tutorials/t2/Cell.qml b/examples/declarative/tutorials/t2/Cell.qml index 5d6ff52..bd5bbe7 100644 --- a/examples/declarative/tutorials/t2/Cell.qml +++ b/examples/declarative/tutorials/t2/Cell.qml @@ -1,7 +1,16 @@ - - - - - - - +Item { + id: CellContainer + width: 40 + height: 25 + properties: Property { + name: "color" + } + Rect { + anchors.fill: parent + color: CellContainer.color + } + MouseRegion { + anchors.fill: parent + onClicked: { HelloText.color = CellContainer.color } + } +} diff --git a/examples/declarative/tutorials/t2/tutorial2.qml b/examples/declarative/tutorials/t2/tutorial2.qml index 1e3af16..08ea9eb 100644 --- a/examples/declarative/tutorials/t2/tutorial2.qml +++ b/examples/declarative/tutorials/t2/tutorial2.qml @@ -1,11 +1,41 @@ - - - - - - - - - - - +Rect { + id: Page + width: 480 + height: 200 + color: "white" + Text { + id: HelloText + text: "Hello world!" + font.size: 24 + font.bold: true + y: 30 + anchors.horizontalCenter: Page.horizontalCenter + } + GridLayout { + id: ColorPicker + x: 0 + anchors.bottom: Page.bottom + width: 120 + height: 50 + columns: 3 + rows: 2 + Cell { + color: "#ff0000" + } + Cell { + color: "#00ff00" + } + Cell { + color: "#0000ff" + } + Cell { + color: "#ffff00" + } + Cell { + color: "#00ffff" + } + Cell { + color: "#ff00ff" + } + } +} diff --git a/examples/declarative/tutorials/t3/Cell.qml b/examples/declarative/tutorials/t3/Cell.qml index 5d6ff52..bd5bbe7 100644 --- a/examples/declarative/tutorials/t3/Cell.qml +++ b/examples/declarative/tutorials/t3/Cell.qml @@ -1,7 +1,16 @@ - - - - - - - +Item { + id: CellContainer + width: 40 + height: 25 + properties: Property { + name: "color" + } + Rect { + anchors.fill: parent + color: CellContainer.color + } + MouseRegion { + anchors.fill: parent + onClicked: { HelloText.color = CellContainer.color } + } +} diff --git a/examples/declarative/tutorials/t3/tutorial3.qml b/examples/declarative/tutorials/t3/tutorial3.qml index f9f1415..8e2b697 100644 --- a/examples/declarative/tutorials/t3/tutorial3.qml +++ b/examples/declarative/tutorials/t3/tutorial3.qml @@ -1,27 +1,78 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - +Rect { + id: Page + width: 480 + height: 200 + color: "white" + Text { + id: HelloText + text: "Hello world!" + font.size: 24 + font.bold: true + y: 30 + anchors.horizontalCenter: Page.horizontalCenter + states: [ + State { + name: "down" + when: MouseRegion.pressed == true + SetProperty { + target: HelloText + property: "y" + value: 160 + } + SetProperty { + target: HelloText + property: "color" + value: "red" + } + } + ] + transitions: [ + Transition { + fromState: "*" + toState: "down" + reversible: true + ParallelAnimation { + NumericAnimation { + properties: "y" + duration: 500 + easing: "easeOutBounce" + } + ColorAnimation { + duration: 500 + } + } + } + ] + } + MouseRegion { + id: MouseRegion + anchors.fill: HelloText + } + GridLayout { + id: ColorPicker + x: 0 + anchors.bottom: Page.bottom + width: 120 + height: 50 + columns: 3 + rows: 2 + Cell { + color: "#ff0000" + } + Cell { + color: "#00ff00" + } + Cell { + color: "#0000ff" + } + Cell { + color: "#ffff00" + } + Cell { + color: "#00ffff" + } + Cell { + color: "#ff00ff" + } + } +} -- cgit v0.12