diff options
Diffstat (limited to 'examples')
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"> - - <x> - <!-- - Animate the x property. Setting repeat to true makes the - animation repeat indefinitely, otherwise it would only run once. - --> - <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"/> - </SequentialAnimation> - </x> - - <color> - <!-- Alternate color between red and green --> - <SequentialAnimation running="true" repeat="true"> - <ColorAnimation from="#FF0000" to="#00FF00" duration="5000"/> - <ColorAnimation from="#00FF00" to="#FF0000" duration="5000"/> - </SequentialAnimation> - </color> - - </Rect> -</Rect> +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" /> -</Rect> - +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" /> - </SequentialAnimation> - <NumericAnimation target="{bluerect}" property="x" duration="500" /> - </Behaviour> - </x> - - <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"/> - </SequentialAnimation> - </Behaviour> - </parent> - - </Rect> - - -</Rect> +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 @@ -<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" /></filter> - <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" /> - </Component> - </Repeater> - </VerticalLayout> - <height>{Math.max(email_layout.height + name.height + 25, portraitPic.height+20)}</height> - - <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"/> - </State> - </states> - - <transitions> - <Transition> - <ParallelAnimation> - <ColorAnimation duration="500" /> - <NumericAnimation duration="150" properties="x,yPosition,height,width"/> - </ParallelAnimation> - </Transition> - </transitions> - </Rect> - </Component> - </resources> - - <ListView id="List" model="{contactModel}" width="320" height="480" clip="true" delegate="{contactDelegate}"/> -</Rect> +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"/></properties> - <Image id="Background" src="background.svg"/> - <Item x="104" y="102" rotation="{Needle.rotation}"> - <Image src="needle_shadow.svg" x="-104" y="-102"/> - </Item> - <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)}"/></rotation> - <Image src="needle.svg" x="-102" y="-98"/> - </Item> - <Image src="overlay.svg"/> -</Item> +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 @@ -<?qtfx namespacepath:=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"/> - </Rect> - </Rect> -</Rect> +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" /> - </SequentialAnimation> - </y> - </Rect> - <!-- Velocity --> - <Rect x="{Rect.width}" color="#ff0000" width="{Rect.width}" height="20"> - <y> - <Follow source="{Rect.y}" velocity="200"/> - </y> - </Rect> - <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"/> - </y> - </Rect> - <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"/> - </x> - <y> - <Follow source="{Mouse.mouseY-10}" spring="1.0" damping="0.05"/> - </y> - </Rect> - </MouseRegion> -</Rect> +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}"/> - </VerticalLayout> - - <!-- - 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"/> - </State> - </states> - <transitions> - <Transition> - <NumericAnimation properties="x" duration="200" /> - </Transition> - </transitions> - </Item> - </Component> - - <!-- - 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"/> - </y> - </Rect> - </Component> - - <ListView id="List1" width="200" height="{parent.height}" model="{MyPetsModel}" - delegate="{PetDelegate}" highlight="{PetHighlight}" autoHighlight="false" - focus="true"/> - -</Rect> +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 @@ -<!-- This example illustrates expanding a list item to show a more detailed view --> -<?qtfx namespacepath:=content ?> -<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"/></properties> - <!-- 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}"/> - </VerticalLayout> - </HorizontalLayout> - <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}"/> - </Flickable> - <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}"/> - </Item> - <!-- 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</height> - - <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"/> - </State> - </states> - - <transitions> - <Transition> - <!-- Make the state changes smooth --> - <ParallelAnimation> - <ColorAnimation duration="500" /> - <NumericAnimation duration="300" properties="detailsOpacity,x,yPosition,height,width"/> - </ParallelAnimation> - </Transition> - </transitions> - </Item> - </Component> - </resources> - - <!-- The actual list --> - <ListView id="List" model="{Recipies}" anchors.fill="{parent}" clip="true" delegate="{recipeDelegate}"/> -</Rect> +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" /></properties> - <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"/> - </Item> - - <filter><Shadow xOffset="5" yOffset="5" /></filter> -</Item> +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"/> - </properties> - <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}"/> -</Item> +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 @@ -<Item id="field" width="370" height="480"> - <properties> - <Property name="clickx" type="Int" value="0"/> - <Property name="clicky" type="Int" value="0"/> - </properties> - <resources> - <Component id="tile"> - <Flipable id="flipable" width="40" height="40"> - <transform> - <Axis id="axis" xStart="20" xEnd="20" yStart="20" yEnd="0" /> - </transform> - <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"/> - </Behaviour> - </opacity> - </Image> - </Image> - </front> - <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}"/> - </Image> - </back> - <states> - <State name="back" when="{modelData.flipped == true}"> - <SetProperty target="{axis}" property="rotation" value="180" /> - </State> - </states> - <transitions> - <Transition> - <SequentialAnimation> - <PauseAnimation duration="{var ret = Math.abs(flipable.parent.x-field.clickx) + Math.abs(flipable.parent.y-field.clicky); if (ret > 0) {if(modelData.hasMine==true && modelData.flipped==true){ret*3;}else{ret;}} else {0}}"/> - <NumericAnimation easing="easeInOutQuad" properties="rotation"/> - </SequentialAnimation> - </Transition> - </transitions> - <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);}" /> - </Flipable> - </Component> - </resources> - <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}"/> - </Component> - </Repeater> - <Item id="gamedata" width="370" height="100" y="380"> - <Text color="white" font.size="18" x="20" y="20">In play:</Text> - <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}"/> +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); - <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()"/> - </Image> - </Item> -</Item> + 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"/> - <Property name="pageSize"/> - <Property name="orientation" value="Vertical"/> - </properties> - - <!-- 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)}" - /> -</Item> +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 @@ -<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}</viewportWidth> - <viewportHeight>{Picture.height}</viewportHeight> - - <!-- 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" /> - </State> - </states> - <transitions> - <Transition fromState="*" toState="*"> - <NumericAnimation properties="opacity" duration="400"/> - </Transition> - </transitions> - - </Flickable> - - <!-- 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}"/> - -</Rect> +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 @@ -<Item id="Switch" width="{Groove.width}" height="{Groove.height}"> - <properties><Property name="on"/></properties> - <Script> +Item { + id: Switch + width: Groove.width + height: Groove.height + properties: Property { + name: "on" + } + Script { + function toggle() { if(Switch.state == "On") Switch.state = "Off"; @@ -21,32 +27,66 @@ toggle(); } - </Script> - <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> - <State name="Off"> - <SetProperty target="{Knob}" property="x" value="1" /> - <SetProperty target="{Switch}" property="on" value="false" /> - </State> - </states> - - <transitions> - <Transition> - <NumericAnimation properties="x" easing="easeInOutQuad" duration="200"/> - </Transition> - </transitions> -</Item> + + } + 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}"/> -</Rect> +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=''"/> - </Rect> - - <!-- 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'"/> - </Rect> - - <!-- 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> - - <!-- 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"/> - </State> - - <!-- - 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"/> - </State> - - </states> - -</Rect> +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=''"/> - </Rect> - - <!-- 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'"/> - </Rect> - - <!-- 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> - - <!-- 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"/> - </State> - - <!-- - 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"/> - </State> - - </states> - - <!-- 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" /> - </Transition> - - <!-- - 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" /> - </Transition> - - <!-- - For any other state changes move x,y linearly over duration of 200ms. - --> - <Transition> - <NumericAnimation properties="x,y" duration="200" /> - </Transition> - - </transitions> - -</Rect> +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}"/> -</Rect> +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"/> - </properties> - <Rect anchors.fill="{parent}" color="{CellContainer.color}"/> - <MouseRegion anchors.fill="{parent}" onClicked="HelloText.color = CellContainer.color" /> -</Item> +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"/> - </GridLayout> -</Rect> +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"/> - </properties> - <Rect anchors.fill="{parent}" color="{CellContainer.color}"/> - <MouseRegion anchors.fill="{parent}" onClicked="HelloText.color = CellContainer.color" /> -</Item> +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"/> - </State> - </states> - <transitions> - <Transition fromState="*" toState="down" reversible="true"> - <ParallelAnimation> - <NumericAnimation properties="y" duration="500" easing="easeOutBounce"/> - <ColorAnimation duration="500"/> - </ParallelAnimation> - </Transition> - </transitions> - </Text> - <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"/> - </GridLayout> -</Rect> +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" + } + } +} |