diff options
Diffstat (limited to 'examples')
100 files changed, 3184 insertions, 1685 deletions
diff --git a/examples/declarative/contacts/contacts.qml b/examples/declarative/contacts/contacts.qml index fa50010..f9901ed 100644 --- a/examples/declarative/contacts/contacts.qml +++ b/examples/declarative/contacts/contacts.qml @@ -24,7 +24,7 @@ Rect { } Image { id: portraitPic - src: portrait + source: portrait x: 10 y: 10 } diff --git a/examples/declarative/dial/DialLibrary/Dial.qml b/examples/declarative/dial/DialLibrary/Dial.qml index 8336a70..fe8528d 100644 --- a/examples/declarative/dial/DialLibrary/Dial.qml +++ b/examples/declarative/dial/DialLibrary/Dial.qml @@ -8,14 +8,14 @@ Item { } Image { id: Background - src: "background.svg" + source: "background.svg" } Item { x: 104 y: 102 rotation: Needle.rotation Image { - src: "needle_shadow.svg" + source: "needle_shadow.svg" x: -104 y: -102 } @@ -31,12 +31,12 @@ Item { source: Math.min(Math.max(-130, value*2.2 - 130), 133) } Image { - src: "needle.svg" + source: "needle.svg" x: -102 y: -98 } } Image { - src: "overlay.svg" + source: "overlay.svg" } } diff --git a/examples/declarative/follow/pong.qml b/examples/declarative/follow/pong.qml index 4fbf323..b6695bd 100644 --- a/examples/declarative/follow/pong.qml +++ b/examples/declarative/follow/pong.qml @@ -1,55 +1,131 @@ -<Rect id="Page" width="640" height="480" color="#000000"> - <!-- Make a ball to bounce --> - <Rect id="Ball" x="20" width="20" height="20" color="#00ee00" z="1"> - <properties> - <!-- Add a property for the target y coordinate --> - <Property name="targetY" value="{Page.height-10}"/> - <Property name="direction" value="right"/> - </properties> - <x> - <!-- Move the ball to the right and back to the left repeatedly --> - <SequentialAnimation running="true" repeat="true"> - <NumericAnimation to="{Page.width-40}" duration="2000"/> - <SetPropertyAction target="{Ball}" property="direction" value="left"/> - <NumericAnimation to="20" duration="2000"/> - <SetPropertyAction target="{Ball}" property="direction" value="right"/> - </SequentialAnimation> - </x> - <y> - <!-- Make y follow the target y coordinate, with a velocity of 200 --> - <Follow source="{Ball.targetY}" velocity="200"/> - </y> - <onTopChanged> - <!-- Detect the ball hitting the top or bottom of the view and bounce it --> - if (y <= 0) +Rect { + id: Page + width: 640 + height: 480 + color: "#000000" + + // Make a ball to bounce + Rect { + id: Ball + x: 20 + width: 20 + height: 20 + color: "#00ee00" + z: 1 + + // Add a property for the target y coordinate + properties: Property { + name: "targetY" + value: Page.height-10 + } + properties: Property { + name: "direction" + value: "right" + } + + // Move the ball to the right and back to the left repeatedly + x: SequentialAnimation { + running: true + repeat: true + NumericAnimation { + to: Page.width-40 + duration: 2000 + } + SetPropertyAction { + target: Ball + property: "direction" + value: "left" + } + NumericAnimation { + to: 20 + duration: 2000 + } + SetPropertyAction { + target: Ball + property: "direction" + value: "right" + } + } + + // Make y follow the target y coordinate, with a velocity of 200 + y: Follow { + source: Ball.targetY + velocity: 200 + } + + // Detect the ball hitting the top or bottom of the view and bounce it + onTopChanged: { + if (y <= 0) targetY = Page.height-20; - else if (y >= Page.height-20) + else if (y >= Page.height-20) targetY = 0; - </onTopChanged> - </Rect> - <!-- - Place bats to the left and right of the view, following the y - coordinates of the ball. - --> - <Rect id="LeftBat" color="#00ee00" x="2" width="20" height="90"> - <y> - <Follow source="{Ball.y-45}" velocity="300" enabled="{Ball.direction == 'left'}"/> - </y> - </Rect> - <Rect id="RightBat" x="{Page.width-22}" color="#00ee00" width="20" height="90"> - <y> - <Follow source="{Ball.y-45}" velocity="300" enabled="{Ball.direction == 'right'}"/> - </y> - </Rect> + } + } + + // Place bats to the left and right of the view, following the y + // coordinates of the ball. + Rect { + id: LeftBat + color: "#00ee00" + x: 2 + width: 20 + height: 90 + y: Follow { + source: Ball.y-45 + velocity: 300 + enabled: Ball.direction == 'left' + } + } + Rect { + id: RightBat + x: Page.width-22 + color: "#00ee00" + width: 20 + height: 90 + y: Follow { + source: Ball.y-45 + velocity: 300 + enabled: Ball.direction == 'right' + } + } - <!-- - The rest, to make it look realistic, if neither ever scores... - --> - <Rect color="#00ee00" width="40" height="60" x="{320-80}"/> - <Rect color="#000000" width="20" height="40" x="{320-70}" y="10"/> - <Rect color="#00ee00" width="40" height="60" x="{320+40}"/> - <Rect color="#000000" width="20" height="40" x="{320+50}" y="10"/> - <Repeater dataSource="{24}"> - <Rect color="#00ee00" width="10" height="10" x="{320-5}" y="{index*20}"/> - </Repeater> -</Rect> + // The rest, to make it look realistic, if neither ever scores... + Rect { + color: "#00ee00" + x: 320-80 + y: 0 + width: 40 + height: 60 + } + Rect { + color: "#000000" + x: 320-70 + y: 10 + width: 20 + height: 40 + } + Rect { + color: "#00ee00" + x: 320+40 + y: 0 + width: 40 + height: 60 + } + Rect { + color: "#000000" + x: 320+50 + y: 10 + width: 20 + height: 40 + } + Repeater { + dataSource: 24 + Rect { + color: "#00ee00" + x: 320-5 + y: index*20 + width: 10 + height: 10 + } + } +} diff --git a/examples/declarative/listview/content/MediaButton.qml b/examples/declarative/listview/content/MediaButton.qml index c92305a..6c672ea 100644 --- a/examples/declarative/listview/content/MediaButton.qml +++ b/examples/declarative/listview/content/MediaButton.qml @@ -7,8 +7,8 @@ <Property name="text"/> </properties> - <Image id="Image" src="pics/button.png"/> - <Image id="Pressed" src="pics/button-pressed.png" opacity="0"/> + <Image id="Image" source="pics/button.png"/> + <Image id="Pressed" source="pics/button-pressed.png" opacity="0"/> <MouseRegion id="MouseRegion" anchors.fill="{Image}" onClicked="Container.clicked.emit();"/> <Text font.bold="true" color="white" anchors.centeredIn="{Image}" text="{Container.text}"/> <width>{Image.width}</width> diff --git a/examples/declarative/listview/dummydata/MyPetsModel.qml b/examples/declarative/listview/dummydata/MyPetsModel.qml index 5af7fbf..e1617a3 100644 --- a/examples/declarative/listview/dummydata/MyPetsModel.qml +++ b/examples/declarative/listview/dummydata/MyPetsModel.qml @@ -4,48 +4,57 @@ Be sure to name the file the same as the id. --> <ListModel id="MyPetsModel"> <Pet> - <name>Rover</name> - <type>Dog</type> - <age>5</age> + <name>Polly</name> + <type>Parrot</type> + <age>12</age> + <size>Small</size> </Pet> <Pet> - <name>Whiskers</name> - <type>Cat</type> - <age>2</age> + <name>Penny</name> + <type>Turtle</type> + <age>4</age> + <size>Small</size> </Pet> <Pet> <name>Warren</name> <type>Rabbit</type> <age>2</age> - </Pet> - <Pet> - <name>Polly</name> - <type>Parrot</type> - <age>12</age> + <size>Small</size> </Pet> <Pet> <name>Spot</name> <type>Dog</type> <age>9</age> + <size>Medium</size> </Pet> <Pet> - <name>Tiny</name> - <type>Elephant</type> - <age>15</age> - </Pet> - <Pet> - <name>Penny</name> - <type>Turtle</type> - <age>4</age> + <name>Whiskers</name> + <type>Cat</type> + <age>2</age> + <size>Medium</size> </Pet> <Pet> <name>Joey</name> <type>Kangaroo</type> <age>1</age> + <size>Medium</size> </Pet> <Pet> <name>Kimba</name> <type>Bunny</type> <age>65</age> + <size>Large</size> + </Pet> + <Pet> + <name>Rover</name> + <type>Dog</type> + <age>5</age> + <size>Large</size> + </Pet> + <Pet> + <name>Tiny</name> + <type>Elephant</type> + <age>15</age> + <size>Large</size> </Pet> </ListModel> diff --git a/examples/declarative/listview/recipes.qml b/examples/declarative/listview/recipes.qml index 0f6324f..db8604e 100644 --- a/examples/declarative/listview/recipes.qml +++ b/examples/declarative/listview/recipes.qml @@ -54,7 +54,7 @@ Rect { width: parent.width Image { id: recipePic - src: picture + source: picture width: 48 height: 48 } @@ -115,13 +115,13 @@ Rect { Image { anchors.right: flick.right anchors.top: flick.top - src: "content/pics/moreUp.png" + source: "content/pics/moreUp.png" opacity: flick.atYBeginning ? 0 : 1 } Image { anchors.right: flick.right anchors.bottom: flick.bottom - src: "content/pics/moreDown.png" + source: "content/pics/moreDown.png" opacity: flick.atYEnd ? 0 : 1 } } diff --git a/examples/declarative/listview/sections.qml b/examples/declarative/listview/sections.qml new file mode 100644 index 0000000..60acd62 --- /dev/null +++ b/examples/declarative/listview/sections.qml @@ -0,0 +1,69 @@ +//! [0] +Rect { + width: 200 + height: 240 + 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 that includes a separator for sections. + Component { + id: PetDelegate + Item { + id: Wrapper + width: 200 + // My height is the combined height of the description and the section separator + height: Separator.height + Desc.height + Rect { + id: Separator + color: "lightsteelblue" + width: parent.width + // Only show the section separator when we are the beginning of a new section + // Note that for this to work nicely, the list must be ordered by section. + height: Wrapper.ListView.prevSection != Wrapper.ListView.section ? 20 : 0 + opacity: Wrapper.ListView.prevSection != Wrapper.ListView.section ? 1 : 0 + Text { + text: Wrapper.ListView.section; font.bold: true + x: 2; height: parent.height; vAlign: 'AlignVCenter' + } + } + Item { + id: Desc + x: 5 + height: Layout.height + 4 + anchors.top: Separator.bottom + VerticalLayout { + id: Layout + y: 2 + Text { text: 'Name: ' + name } + Text { text: 'Type: ' + type } + Text { text: 'Age: ' + age } + } + } + } + } + // Define a highlight component. Just one of these will be instantiated + // by each ListView and placed behind the current item. + Component { + id: PetHighlight + Rect { + color: "#FFFF88" + } + } + // The list + ListView { + id: List + width: 200 + height: parent.height + model: MyPetsModel + delegate: PetDelegate + highlight: PetHighlight + // The sectionExpression is simply the size of the pet. + // We use this to determine which section we are in above. + sectionExpression: "size" + focus: true + } +} +//! [0] diff --git a/examples/declarative/minehunt/Explosion.qml b/examples/declarative/minehunt/Explosion.qml index 1e4f03d..8d868bc 100644 --- a/examples/declarative/minehunt/Explosion.qml +++ b/examples/declarative/minehunt/Explosion.qml @@ -9,7 +9,7 @@ Item { height: 21 lifeSpan: 3600000 lifeSpanDeviation: 0 - src: "pics/star.png" + source: "pics/star.png" count: 200 angle: 270 angleDeviation: 360 diff --git a/examples/declarative/minehunt/minehunt.qml b/examples/declarative/minehunt/minehunt.qml index 5c1b071..fb65fa3 100644 --- a/examples/declarative/minehunt/minehunt.qml +++ b/examples/declarative/minehunt/minehunt.qml @@ -10,10 +10,10 @@ <Axis startX="20" startY="20" endX="20" endY="0" /> </axis> <front> - <Image src="pics/front.png" width="40" height="40"> + <Image source="pics/front.png" width="40" height="40"> <Image anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}" - src="pics/flag.png" opacity="{modelData.hasFlag}"> + source="pics/flag.png" opacity="{modelData.hasFlag}"> <opacity> <Behaviour> <NumericAnimation property="opacity" duration="250"/> @@ -23,12 +23,12 @@ </Image> </front> <back> - <Image src="pics/back.png" width="40" height="40"> + <Image source="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}"/> + source="pics/bomb.png" opacity="{modelData.hasMine}"/> <Explosion anchors.horizontalCenter="{parent.horizontalCenter}" anchors.verticalCenter="{parent.verticalCenter}" explode="{modelData.hasMine==true && modelData.flipped==true}"/> </Image> </back> @@ -50,7 +50,7 @@ </Flipable> </Component> </resources> - <Image src="pics/No-Ones-Laughing-3.jpg" tile="true"/> + <Image source="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> @@ -61,12 +61,12 @@ </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"/> + <Image x="100" y="20" source="pics/bomb-color.png"/> <Text x="100" y="60" color="white" text="{numMines}"/> - <Image x="140" y="20" src="pics/flag-color.png"/> + <Image x="140" y="20" source="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'}}}"> + <Image x="240" y="0" source="{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> diff --git a/examples/declarative/namespaces/BlueStuff/Rect.qml b/examples/declarative/namespaces/BlueStuff/Rect.qml deleted file mode 100644 index 94e066c..0000000 --- a/examples/declarative/namespaces/BlueStuff/Rect.qml +++ /dev/null @@ -1 +0,0 @@ -<Rect color="blue"/> diff --git a/examples/declarative/namespaces/Local.qml b/examples/declarative/namespaces/Local.qml deleted file mode 100644 index 5fb2aef..0000000 --- a/examples/declarative/namespaces/Local.qml +++ /dev/null @@ -1 +0,0 @@ -<Text>This is a local component</Text> diff --git a/examples/declarative/namespaces/components.qml b/examples/declarative/namespaces/components.qml deleted file mode 100644 index ea5e2d9..0000000 --- a/examples/declarative/namespaces/components.qml +++ /dev/null @@ -1,17 +0,0 @@ -<Item id="Root"> - <properties> - <Property name="period" value="1000"/> - <Property name="color" value="green"/> - </properties> - - <Component id="SpinSquare"> - <Item> - <Rect color="{Root.color}" width="{Root.width}" height="{width}" x="{-width/2}" y="{-height/2}"/> - <rotation> - <NumericAnimation from="0" to="360" repeat="true" running="true" duration="{Root.period}"/> - </rotation> - </Item> - </Component> - - <ComponentInstance component="{SpinSquare}" x="{Root.width/2}" y="{Root.height/2}"/> -</Item> diff --git a/examples/declarative/namespaces/lib/Chronos/Clock.qml b/examples/declarative/namespaces/lib/Chronos/Clock.qml deleted file mode 100644 index 088a45c..0000000 --- a/examples/declarative/namespaces/lib/Chronos/Clock.qml +++ /dev/null @@ -1,15 +0,0 @@ -<?qtfx namespacepath:http://nokia.com/qml/Chronos=. ?> - -<Image id="clock" src="pics/clockface.png" xmlns:This="http://nokia.com/qml/Chronos"> - <properties> - <Property name="hours" value="0"/> - <Property name="minutes" value="0"/> - <Property name="seconds" value="0"/> - </properties> - <DateTimeFormatter id="format" time="{clock.time}"/> - <Item x="{clock.width/2}" y="{clock.height/2}"> - <This:Hand id="hour" length="{clock.height/4}" rotation="{clock.hours*30+clock.minutes/2+clock.seconds/120}"/> - <This:Hand id="minute" length="{clock.height/3}" thickness="3" rotation="{clock.minutes*6+clock.seconds/10}"/> - <This:Hand id="second" length="{clock.height/2.5}" thickness="1" rotation="{clock.seconds*6}"/> - </Item> -</Image> diff --git a/examples/declarative/namespaces/lib/Chronos/Hand.qml b/examples/declarative/namespaces/lib/Chronos/Hand.qml deleted file mode 100644 index 3662e74..0000000 --- a/examples/declarative/namespaces/lib/Chronos/Hand.qml +++ /dev/null @@ -1,9 +0,0 @@ -<Item id="Hand"> - <properties> - <Property name="length" value="100"/> - <Property name="thickness" value="0"/> - </properties> - <Item rotation="-90"> - <Rect width="{length}" height="{thickness==0 ? length/8 : thickness}" y="{-height/2}"/> - </Item> -</Item> diff --git a/examples/declarative/namespaces/lib/Chronos/pics/clockface.png b/examples/declarative/namespaces/lib/Chronos/pics/clockface.png Binary files differdeleted file mode 100644 index a885950..0000000 --- a/examples/declarative/namespaces/lib/Chronos/pics/clockface.png +++ /dev/null diff --git a/examples/declarative/namespaces/lib/Path/PathLabel.qml b/examples/declarative/namespaces/lib/Path/PathLabel.qml deleted file mode 100644 index c4b08b0..0000000 --- a/examples/declarative/namespaces/lib/Path/PathLabel.qml +++ /dev/null @@ -1 +0,0 @@ -<Text color="green"/> diff --git a/examples/declarative/namespaces/lib/RedStuff/Rect.qml b/examples/declarative/namespaces/lib/RedStuff/Rect.qml deleted file mode 100644 index 3429b09..0000000 --- a/examples/declarative/namespaces/lib/RedStuff/Rect.qml +++ /dev/null @@ -1 +0,0 @@ -<Rect color="red"/> diff --git a/examples/declarative/namespaces/lib/Wrong/Wrong.qml b/examples/declarative/namespaces/lib/Wrong/Wrong.qml deleted file mode 100644 index 3af55f6..0000000 --- a/examples/declarative/namespaces/lib/Wrong/Wrong.qml +++ /dev/null @@ -1,3 +0,0 @@ -<Rect> - <Local/> <!-- not allowed - not in this component! --> -</Rect> diff --git a/examples/declarative/namespaces/library.qml b/examples/declarative/namespaces/library.qml deleted file mode 100644 index ae10ed8..0000000 --- a/examples/declarative/namespaces/library.qml +++ /dev/null @@ -1,12 +0,0 @@ -<?qtfx namespacepath:http://nokia.com/qml=lib ?> - -<Rect id="obj" width="200" height="200" xmlns:Chronos="http://nokia.com/qml/Chronos"> - <properties> - <Property name="time_sec"/> - </properties> - <time_sec> <!-- simple animation, not bound to the real time --> - <NumericAnimation from="0" to="43200" duration="43200000" running="true" repeat="true"/> - </time_sec> - <Chronos:Clock x="10" y="10" width="{parent.width-20}" height="{parent.height-20}" - hours="{Math.floor(time_sec/3600)}" minutes="{Math.floor(time_sec/60)%60}" seconds="{time_sec%60}"/> -</Rect> diff --git a/examples/declarative/namespaces/path.qml b/examples/declarative/namespaces/path.qml deleted file mode 100644 index 795447b..0000000 --- a/examples/declarative/namespaces/path.qml +++ /dev/null @@ -1,18 +0,0 @@ -<!-- Empty Namespaces paths allow unqualified Types to be found - in other locations. For file URLs, multiple paths can be - given, forming a file search path. --> - -<?qtfx namespacepath:=lib/Chronos ?> <!-- Clock will be found here --> -<?qtfx namespacepath:=lib/Path ?> <!-- PathLabel will be found here --> - -<Rect id="obj" width="200" height="200"> - <properties> - <Property name="time_sec"/> - </properties> - <time_sec> <!-- simple animation, not bound to the real time --> - <NumericAnimation from="0" to="43200" duration="43200000" running="true" repeat="true"/> - </time_sec> - <Clock x="10" y="10" width="{parent.width-20}" height="{parent.height-20}" - hours="{Math.floor(time_sec/3600)}" minutes="{Math.floor(time_sec/60)%60}" seconds="{time_sec%60}"/> - <PathLabel text="This is a clock"/> -</Rect> diff --git a/examples/declarative/namespaces/simple.qml b/examples/declarative/namespaces/simple.qml deleted file mode 100644 index 16d9815..0000000 --- a/examples/declarative/namespaces/simple.qml +++ /dev/null @@ -1,5 +0,0 @@ -<?qtfx namespacepath:http://nokia.com/qml=lib ?> -<Rect id="obj" width="100" height="100" xmlns:bs="BlueStuff" xmlns:rs="http://nokia.com/qml/RedStuff"> - <bs:Rect x="20" y="20" width="50" height="50"/> - <rs:Rect x="30" y="30" width="50" height="50"/> -</Rect> diff --git a/examples/declarative/namespaces/wrong1.qml b/examples/declarative/namespaces/wrong1.qml deleted file mode 100644 index 721c45a..0000000 --- a/examples/declarative/namespaces/wrong1.qml +++ /dev/null @@ -1,4 +0,0 @@ -<?qtfx namespacepath:http://nokia.com/qml=lib ?> -<Rect id="obj" width="100" height="100" xmlns:w="http://nokia.com/qml/Wrong" color="white"> - <w:Wrong/> -</Rect> diff --git a/examples/declarative/scrollbar/display.qml b/examples/declarative/scrollbar/display.qml index 4412d7f..42e8f25 100644 --- a/examples/declarative/scrollbar/display.qml +++ b/examples/declarative/scrollbar/display.qml @@ -7,7 +7,7 @@ Rect { anchors.fill: parent Image { id: Picture - src: "pics/niagara_falls.jpg" + source: "pics/niagara_falls.jpg" } viewportWidth: Picture.width viewportHeight: Picture.height diff --git a/examples/declarative/slideswitch/Switch.qml b/examples/declarative/slideswitch/Switch.qml index f62e4b6..5862646 100644 --- a/examples/declarative/slideswitch/Switch.qml +++ b/examples/declarative/slideswitch/Switch.qml @@ -31,7 +31,7 @@ Item { } Image { id: Groove - src: "background.svg" + source: "background.svg" } MouseRegion { anchors.fill: Groove @@ -39,14 +39,14 @@ Item { } Image { id: Knob - src: "knob.svg" + source: "knob.svg" x: 1 y: 2 } MouseRegion { anchors.fill: Knob onClicked: { toggle() } - onReleased: { if (!isClick) dorelease() } + onReleased: { dorelease() } drag.target: Knob drag.axis: "x" drag.xmin: 1 diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml new file mode 100644 index 0000000..bbe9f55 --- /dev/null +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml @@ -0,0 +1,9 @@ +//! [0] +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 +} +//! [0] diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml index 4ea77f3..cc5ebae 100644 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml @@ -1,9 +1,34 @@ -<Rect id="page" width="{layout.width}" height="{layout.height}" color='white'> - <VerticalLayout id="layout" width="{contents.width}" margin="5" spacing="5"> - <GroupBox contents="RemoveButton1.qml" label="Rectangle Component"/> - <GroupBox contents="RemoveButton2.qml" label="Closed Remove Item Button"/> - <GroupBox contents="RemoveButton3.qml" label="Open Remove Item Button"/> - <GroupBox contents="RemoveButton4.qml" label="State Based Button"/> - <GroupBox contents="RemoveButton5.qml" label="Animated Button"/> - </VerticalLayout> -</Rect> +Rect { + id: page + width: layout.width + height: layout.height + color: "white" + VerticalLayout { + id: layout + width: contents.width + GroupBox { + contents: "1/RemoveButton.qml" + label: "Rectangle Component" + } + GroupBox { + contents: "2/RemoveButton.qml" + label: "Closed Remove Item Button" + } + GroupBox { + contents: "2a/RemoveButton.qml" + label: "Alternative Closed Button" + } + GroupBox { + contents: "3/RemoveButton.qml" + label: "Open Remove Item Button" + } + GroupBox { + contents: "4/RemoveButton.qml" + label: "State Based Button" + } + GroupBox { + contents: "5/RemoveButton.qml" + label: "Animated Button" + } + } +} diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml new file mode 100644 index 0000000..247e38b --- /dev/null +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml @@ -0,0 +1,18 @@ +//! [0] +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/trash.png" + } +} +//! [0] diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2a/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2a/RemoveButton.qml new file mode 100644 index 0000000..6c6a949 --- /dev/null +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2a/RemoveButton.qml @@ -0,0 +1,20 @@ +//! [0] +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + children: [ + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/trash.png" + } + ] +} +//! [0] diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml new file mode 100644 index 0000000..964975f --- /dev/null +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml @@ -0,0 +1,39 @@ +//! [0] +Rect { + id: removeButton + width: 230 + height: 30 + color: "red" + radius: 5 + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/cancel.png" + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/ok.png" + } + Text { + id: text + anchors.verticalCenter: parent.verticalCenter + anchors.left: confirmIcon.right + anchors.leftMargin: 4 + anchors.right: cancelIcon.left + anchors.rightMargin: 4 + font.bold: true + color: "white" + hAlign: AlignHCenter + text: "Remove" + } +} +//! [0] diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml new file mode 100644 index 0000000..79aae7a --- /dev/null +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml @@ -0,0 +1,110 @@ +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 +//! [script] + resources: [ + Script { + function toggle() { + if (removeButton.state == 'opened') { + removeButton.state = ''; + } else { + removeButton.state = 'opened'; + } + } + + } + ] +//! [script] +//! [mouse region] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/trash.png" + opacity: 1 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } +//! [mouse region] + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/cancel.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/ok.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Text { + id: text + anchors.verticalCenter: parent.verticalCenter + anchors.left: confirmIcon.right + anchors.leftMargin: 4 + anchors.right: cancelIcon.left + anchors.rightMargin: 4 + font.bold: true + color: "white" + hAlign: AlignHCenter + text: "Remove" + opacity: 0 + } +//! [states] + states: [ + State { + name: "opened" + SetProperty { + target: removeButton + property: "width" + value: 230 + } + SetProperty { + target: text + property: "opacity" + value: 1 + } + SetProperty { + target: confirmIcon + property: "opacity" + value: 1 + } + SetProperty { + target: cancelIcon + property: "opacity" + value: 1 + } + SetProperty { + target: trashIcon + property: "opacity" + value: 0 + } + } + ] +//! [states] +} diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml new file mode 100644 index 0000000..6c9078a --- /dev/null +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml @@ -0,0 +1,117 @@ +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + resources: [ + Script { + function toggle() { + if (removeButton.state == 'opened') { + removeButton.state = ''; + } else { + removeButton.state = 'opened'; + } + } + + } + ] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/trash.png" + opacity: 1 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/cancel.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/ok.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Text { + id: text + anchors.verticalCenter: parent.verticalCenter + anchors.left: confirmIcon.right + anchors.leftMargin: 4 + anchors.right: cancelIcon.left + anchors.rightMargin: 4 + font.bold: true + color: "white" + hAlign: AlignHCenter + text: "Remove" + opacity: 0 + } + states: [ + State { + name: "opened" + SetProperty { + target: removeButton + property: "width" + value: 230 + } + SetProperty { + target: text + property: "opacity" + value: 1 + } + SetProperty { + target: confirmIcon + property: "opacity" + value: 1 + } + SetProperty { + target: cancelIcon + property: "opacity" + value: 1 + } + SetProperty { + target: trashIcon + property: "opacity" + value: 0 + } + } + ] +//! [transition] + transitions: [ + Transition { + fromState: "*" + toState: "opened" + reversible: true + NumericAnimation { + properties: "opacity,x,width" + duration: 200 + } + } + ] +//! [transition] +} diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml index 01f26ee..665c072 100644 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml @@ -1,17 +1,59 @@ -<Item id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}"> - <properties> - <Property name="contents"/> - <Property name="label"/> - </properties> - <Rect id="wrapper" x="5" y="10" radius="10" - width="{groupBox.width-20}" height="{groupBox.height-20}" - color="white" pen.color="black"> - <Item id="subItem" qml="{groupBox.contents}" - anchors.top="{parent.top}" anchors.topMargin="10" - anchors.right="{parent.right}" anchors.rightMargin="10" - width="{qmlItem.width}" height="{qmlItem.height}"/> - </Rect> - <Rect x="20" y="0" height="{text.height}" width="{text.width+10}" color="white"> - <Text x="5" id="text" text="{label}" font.bold="true"/> - </Rect> -</Item> +FocusRealm { + id: groupBox + width: Math.max(270, subItem.width+40) + height: Math.max(70, subItem.height+40) + properties: Property { + name: "contents" + } + properties: Property { + name: "label" + } + Rect { + id: wrapper + x: 5 + y: 10 + radius: 10 + width: groupBox.width-20 + height: groupBox.height-20 + color: "white" + pen.color: "black" + Item { + id: subItem + qml: groupBox.contents + anchors.top: parent.top + anchors.topMargin: 10 + anchors.right: parent.right + anchors.rightMargin: 10 + width: qmlItem.width + height: qmlItem.height + } + } + Rect { + x: 20 + y: 0 + height: text.height + width: text.width+10 + color: "white" + Text { + x: 5 + id: text + text: label + font.bold: true + } + } + Rect { + color: "black" + anchors.fill: parent + opacity: parent.focus ? 0 : 0.3 + MouseRegion { + anchors.fill: parent + onClicked: { parent.parent.focus=true } + } + opacity: Behaviour { + NumericAnimation { + property: "opacity" + duration: 250 + } + } + } +} diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml deleted file mode 100644 index dc3f505..0000000 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml +++ /dev/null @@ -1,4 +0,0 @@ -<Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"/> diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml deleted file mode 100644 index 2ba488d..0000000 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml +++ /dev/null @@ -1,10 +0,0 @@ -<Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"> - <Image id="trashIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/trash.png"/> -</Rect> diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml deleted file mode 100644 index 9a364c5..0000000 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml +++ /dev/null @@ -1,23 +0,0 @@ -<Rect id="removeButton" - width="230" height="30" - color="red" - radius="5"> - <Image id="cancelIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png"/> - <Image id="confirmIcon" - width="22" height="22" - anchors.left="{parent.left}" anchors.leftMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png"/> - <Text id="text" - anchors.verticalCenter="{parent.verticalCenter}" - anchors.left="{confirmIcon.right}" anchors.leftMargin="4" - anchors.right="{cancelIcon.left}" anchors.rightMargin="4" - font.bold="true" - color="white" - hAlign="AlignHCenter" - text="Remove"/> -</Rect> diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml deleted file mode 100644 index 45ca19d..0000000 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml +++ /dev/null @@ -1,65 +0,0 @@ -<Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"> - <resources> - <Script> - function toggle() { - print('removeButton.toggle()'); - if (removeButton.state == 'opened') { - removeButton.state = ''; - } else { - removeButton.state = 'opened'; - } - } - </Script> - </resources> - <Image id="trashIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/trash.png" - opacity="1"> - <MouseRegion - anchors.fill="{parent}" - onClicked="toggle()"/> - </Image> - <Image id="cancelIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png" - opacity="0"> - <MouseRegion - anchors.fill="{parent}" - onClicked="toggle()"/> - </Image> - <Image id="confirmIcon" - width="22" height="22" - anchors.left="{parent.left}" anchors.leftMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png" - opacity="0"> - <MouseRegion - anchors.fill="{parent}" - onClicked="toggle()"/> - </Image> - <Text id="text" - anchors.verticalCenter="{parent.verticalCenter}" - anchors.left="{confirmIcon.right}" anchors.leftMargin="4" - anchors.right="{cancelIcon.left}" anchors.rightMargin="4" - font.bold="true" - color="white" - hAlign="AlignHCenter" - text="Remove" - opacity="0"/> - <states> - <State name="opened"> - <SetProperty target="{removeButton}" property="width" value="230"/> - <SetProperty target="{text}" property="opacity" value="1"/> - <SetProperty target="{confirmIcon}" property="opacity" value="1"/> - <SetProperty target="{cancelIcon}" property="opacity" value="1"/> - <SetProperty target="{trashIcon}" property="opacity" value="0"/> - </State> - </states> -</Rect> diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml deleted file mode 100644 index 68c1838..0000000 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml +++ /dev/null @@ -1,70 +0,0 @@ -<Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"> - <resources> - <Script> - function toggle() { - print('removeButton.toggle()'); - if (removeButton.state == 'opened') { - removeButton.state = ''; - } else { - removeButton.state = 'opened'; - } - } - </Script> - </resources> - <Image id="trashIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/trash.png" - opacity="1"> - <MouseRegion - anchors.fill="{parent}" - onClicked="toggle()"/> - </Image> - <Image id="cancelIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png" - opacity="0"> - <MouseRegion - anchors.fill="{parent}" - onClicked="toggle()"/> - </Image> - <Image id="confirmIcon" - width="22" height="22" - anchors.left="{parent.left}" anchors.leftMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png" - opacity="0"> - <MouseRegion - anchors.fill="{parent}" - onClicked="toggle()"/> - </Image> - <Text id="text" - anchors.verticalCenter="{parent.verticalCenter}" - anchors.left="{confirmIcon.right}" anchors.leftMargin="4" - anchors.right="{cancelIcon.left}" anchors.rightMargin="4" - font.bold="true" - color="white" - hAlign="AlignHCenter" - text="Remove" - opacity="0"/> - <states> - <State name="opened"> - <SetProperty target="{removeButton}" property="width" value="230"/> - <SetProperty target="{text}" property="opacity" value="1"/> - <SetProperty target="{confirmIcon}" property="opacity" value="1"/> - <SetProperty target="{cancelIcon}" property="opacity" value="1"/> - <SetProperty target="{trashIcon}" property="opacity" value="0"/> - </State> - </states> - <transitions> - <Transition fromState="*" toState="opened" reversible="true"> - <NumericAnimation properties="opacity,x,width" duration="200"/> - </Transition> - </transitions> -</Rect> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml new file mode 100644 index 0000000..0218c3d --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml @@ -0,0 +1,30 @@ +//! [load] +Item { + id: contactField + clip: true + width: 230 + height: 30 + RemoveButton { + id: removeButton + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + } +//! [load] + Text { + id: fieldText + width: contactField.width-80 + anchors.right: removeButton.left + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + font.bold: true + color: "black" + text: 123123 + } + Image { + source: "../../shared/pics/phone.png" + anchors.right: fieldText.left + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + } +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml new file mode 100644 index 0000000..3142c45 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml @@ -0,0 +1,115 @@ +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + resources: [ + Script { + function toggle() { + if (removeButton.state == 'opened') { + removeButton.state = ''; + } else { + removeButton.state = 'opened'; + } + } + + } + ] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/trash.png" + opacity: 1 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/cancel.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/ok.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Text { + id: text + anchors.verticalCenter: parent.verticalCenter + anchors.left: confirmIcon.right + anchors.leftMargin: 4 + anchors.right: cancelIcon.left + anchors.rightMargin: 4 + font.bold: true + color: "white" + hAlign: "AlignHCenter" + text: "Remove" + opacity: 0 + } + states: [ + State { + name: "opened" + SetProperty { + target: removeButton + property: "width" + value: 230 + } + SetProperty { + target: text + property: "opacity" + value: 1 + } + SetProperty { + target: confirmIcon + property: "opacity" + value: 1 + } + SetProperty { + target: cancelIcon + property: "opacity" + value: 1 + } + SetProperty { + target: trashIcon + property: "opacity" + value: 0 + } + } + ] + transitions: [ + Transition { + fromState: "*" + toState: "opened" + reversible: true + NumericAnimation { + properties: "opacity,x,width" + duration: 200 + } + } + ] +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml new file mode 100644 index 0000000..62089b8 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml @@ -0,0 +1,33 @@ +//! [load] +Item { + id: contactField + clip: true + width: 230 + height: 30 + Item { + id: removeButton + qml: "RemoveButton.qml" + width: qmlItem.width + height: qmlItem.height + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + } +//! [load] + Text { + id: fieldText + width: contactField.width-80 + anchors.right: removeButton.left + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + font.bold: true + color: "black" + text: 123123 + } + Image { + source: "../../shared/pics/phone.png" + anchors.right: fieldText.left + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + } +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml new file mode 100644 index 0000000..3142c45 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml @@ -0,0 +1,115 @@ +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + resources: [ + Script { + function toggle() { + if (removeButton.state == 'opened') { + removeButton.state = ''; + } else { + removeButton.state = 'opened'; + } + } + + } + ] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/trash.png" + opacity: 1 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/cancel.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/ok.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Text { + id: text + anchors.verticalCenter: parent.verticalCenter + anchors.left: confirmIcon.right + anchors.leftMargin: 4 + anchors.right: cancelIcon.left + anchors.rightMargin: 4 + font.bold: true + color: "white" + hAlign: "AlignHCenter" + text: "Remove" + opacity: 0 + } + states: [ + State { + name: "opened" + SetProperty { + target: removeButton + property: "width" + value: 230 + } + SetProperty { + target: text + property: "opacity" + value: 1 + } + SetProperty { + target: confirmIcon + property: "opacity" + value: 1 + } + SetProperty { + target: cancelIcon + property: "opacity" + value: 1 + } + SetProperty { + target: trashIcon + property: "opacity" + value: 0 + } + } + ] + transitions: [ + Transition { + fromState: "*" + toState: "opened" + reversible: true + NumericAnimation { + properties: "opacity,x,width" + duration: 200 + } + } + ] +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml new file mode 100644 index 0000000..1366548 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml @@ -0,0 +1,29 @@ +import "lib" +Item { + id: contactField + clip: true + width: 230 + height: 30 + RemoveButton { + id: removeButton + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + } + Text { + id: fieldText + width: contactField.width-80 + anchors.right: removeButton.left + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + font.bold: true + color: "black" + text: 123123 + } + Image { + source: "../../shared/pics/phone.png" + anchors.right: fieldText.left + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + } +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1b/lib/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/1b/lib/RemoveButton.qml new file mode 100644 index 0000000..a358b21 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/1b/lib/RemoveButton.qml @@ -0,0 +1,117 @@ +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + resources: [ + Script { + + function toggle() { + print('removeButton.toggle()'); + if (removeButton.state == 'opened') { + removeButton.state = ''; + } else { + removeButton.state = 'opened'; + } + } + + } + ] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../../shared/pics/trash.png" + opacity: 1 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../../shared/pics/cancel.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../../shared/pics/ok.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Text { + id: text + anchors.verticalCenter: parent.verticalCenter + anchors.left: confirmIcon.right + anchors.leftMargin: 4 + anchors.right: cancelIcon.left + anchors.rightMargin: 4 + font.bold: true + color: "white" + hAlign: AlignHCenter + text: "Remove" + opacity: 0 + } + states: [ + State { + name: "opened" + SetProperty { + target: removeButton + property: "width" + value: 230 + } + SetProperty { + target: text + property: "opacity" + value: 1 + } + SetProperty { + target: confirmIcon + property: "opacity" + value: 1 + } + SetProperty { + target: cancelIcon + property: "opacity" + value: 1 + } + SetProperty { + target: trashIcon + property: "opacity" + value: 0 + } + } + ] + transitions: [ + Transition { + fromState: "*" + toState: "opened" + reversible: true + NumericAnimation { + properties: "opacity,x,width" + duration: 200 + } + } + ] +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml new file mode 100644 index 0000000..2542c1c --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml @@ -0,0 +1,32 @@ +Item { + id: contactField + clip: true + width: 230 + height: 30 +//! [use properties and signals] + RemoveButton { + id: removeButton + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + expandedWidth: contactField.width + onConfirmed: { fieldText.text='' } + } +//! [use properties and signals] + Text { + id: fieldText + width: contactField.width-80 + anchors.right: removeButton.left + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + font.bold: true + color: "black" + text: 123123 + } + Image { + source: "../../shared/pics/phone.png" + anchors.right: fieldText.left + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + } +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml new file mode 100644 index 0000000..45b1899 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml @@ -0,0 +1,124 @@ +//! [define properties and signals] +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + properties: Property { + name: "expandedWidth" + value: 230 + } + signals: Signal { + name: "confirmed" + } +//! [define properties and signals] + resources: [ + Script { + function toggle() { + if (removeButton.state == 'opened') { + removeButton.state = ''; + } else { + removeButton.state = 'opened'; + } + } + + } + ] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/trash.png" + opacity: 1 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/cancel.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/ok.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle(); removeButton.confirmed.emit() } + } + } + Text { + id: text + anchors.verticalCenter: parent.verticalCenter + anchors.left: confirmIcon.right + anchors.leftMargin: 4 + anchors.right: cancelIcon.left + anchors.rightMargin: 4 + font.bold: true + color: "white" + hAlign: "AlignHCenter" + text: "Remove" + opacity: 0 + } + states: [ + State { + name: "opened" + SetProperty { + target: removeButton + property: "width" + value: removeButton.expandedWidth + } + SetProperty { + target: text + property: "opacity" + value: 1 + } + SetProperty { + target: confirmIcon + property: "opacity" + value: 1 + } + SetProperty { + target: cancelIcon + property: "opacity" + value: 1 + } + SetProperty { + target: trashIcon + property: "opacity" + value: 0 + } + } + ] + transitions: [ + Transition { + fromState: "*" + toState: "opened" + reversible: true + NumericAnimation { + properties: "opacity,x,width" + duration: 200 + } + } + ] +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml index 13bc209..4d95424 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml @@ -1,12 +1,47 @@ -<Rect id="page" width="{layout.width}" height="{layout.height}" color='white'> - <properties> - <Property name="mouseGrabbed" value="false"/> - </properties> - <VerticalLayout id="layout" width="{contents.width}" margin="5" spacing="5"> - <GroupBox contents="ContactField1.qml" label="Loading Component"/> - <GroupBox contents="ContactField2.qml" label="Using properties"/> - <GroupBox contents="ContactField3.qml" label="Defining signals"/> - <GroupBox contents="Contact3.qml" label="Multiple Items"/> - <GroupBox contents="Contact4.qml" label="Mouse Grabbing"/> - </VerticalLayout> -</Rect> +Rect { + id: page + width: layout.width + height: layout.height + color: "white" + GridLayout { + id: layout + columns: 2 + rows: 4 + width: contents.width + GroupBox { + contents: "1/ContactField.qml" + label: "Loading: simple" + } + GroupBox { + contents: "1a/ContactField.qml" + label: "Loading: qml property" + } + GroupBox { + contents: "1b/ContactField.qml" + label: "Loading: added path" + } + GroupBox { + contents: "2/ContactField.qml" + label: "Using properties" + } + GroupBox { + id: prev + contents: "3/ContactField.qml" + label: "Defining signals" + } + Rect { + color: "black" + opacity: 0.3 + width: prev.width + height: prev.height + } + GroupBox { + contents: "3/Contact.qml" + label: "Multiple Items" + } + GroupBox { + contents: "4/Contact.qml" + label: "Mouse Grabbing" + } + } +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml new file mode 100644 index 0000000..33ac627 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml @@ -0,0 +1,53 @@ +Item { + id: contactDetails + width: 230 + height: layout.height + properties: Property { + name: "contactid" + value: "" + } + properties: Property { + name: "label" + onValueChanged: { labelField.value = label } + } + properties: Property { + name: "phone" + onValueChanged: { phoneField.value = phone } + } + properties: Property { + name: "email" + onValueChanged: { emailField.value = email } + } + VerticalLayout { + id: layout + anchors.fill: parent + spacing: 5 + margin: 5 + ContactField { + id: labelField + anchors.left: layout.left + anchors.leftMargin: 5 + anchors.right: layout.right + anchors.rightMargin: 5 + label: "Name" + } + ContactField { + id: phoneField + anchors.left: layout.left + anchors.leftMargin: 5 + anchors.right: layout.right + anchors.rightMargin: 5 + icon: "../../shared/pics/phone.png" + label: "Phone" + } + ContactField { + id: emailField + anchors.left: layout.left + anchors.leftMargin: 5 + anchors.right: layout.right + anchors.rightMargin: 5 + icon: "../../shared/pics/email.png" + label: "Email" + } + } +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml new file mode 100644 index 0000000..2d3d58a --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml @@ -0,0 +1,69 @@ +//! [all] +Item { + id: contactField + clip: true + width: 230 + height: 30 + properties: Property { + name: "label" + value: "Name" + } + properties: Property { + name: "icon" + value: "../../shared/pics/phone.png" + } + properties: Property { + name: "value" + } + RemoveButton { + id: removeButton + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + expandedWidth: contactField.width + onConfirmed: { fieldText.text='' } + } + FieldText { + id: fieldText + width: contactField.width-70 + anchors.right: removeButton.left + anchors.rightMargin: 5 + anchors.verticalCenter: parent.verticalCenter + label: contactField.label + text: contactField.value + } + Image { + anchors.right: fieldText.left + anchors.rightMargin: 5 + anchors.verticalCenter: parent.verticalCenter + source: contactField.icon + } + states: [ + State { + name: "editingText" + when: fieldText.state == 'editing' + SetProperty { + target: removeButton.anchors + property: "rightMargin" + value: -35 + } + SetProperty { + target: fieldText + property: "width" + value: contactField.width + } + } + ] + transitions: [ + Transition { + fromState: "" + toState: "*" + reversible: true + NumericAnimation { + properties: "width,rightMargin" + duration: 200 + } + } + ] +} +//! [all] diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml new file mode 100644 index 0000000..cf654cf --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml @@ -0,0 +1,156 @@ +//! [value change] +Rect { + id: fieldText + height: 30 + radius: 5 + color: "white" + properties: Property { + name: "text" + value: "" + onValueChanged: { reset() } + } +//! [value change] + properties: Property { + name: "label" + value: "" + } + signals: Signal { + name: "confirmed" + } + resources: [ + Script { + + function edit() { + fieldText.state='editing'; + } + function confirm() { + fieldText.text = textEdit.text; + fieldText.state=''; + fieldText.confirmed.emit(); + } + function reset() { + textEdit.text = fieldText.text; + fieldText.state=''; + } + + } + ] + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/cancel.png" + opacity: 0 + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/ok.png" + opacity: 0 + } + TextEdit { + id: textEdit + anchors.left: parent.left + anchors.leftMargin: 5 + anchors.right: parent.right + anchors.rightMargin: 5 + anchors.verticalCenter: parent.verticalCenter + color: "black" + font.bold: true + readOnly: true + wrap: false + } +//! [behavior] + Text { + id: textLabel + x: 5 + width: parent.width-10 + anchors.verticalCenter: parent.verticalCenter + hAlign: "AlignHCenter" + color: "#505050" + font.italic: true + text: fieldText.label + opacity: textEdit.text == '' ? 1 : 0 + opacity: Behaviour { + NumericAnimation { + property: "opacity" + duration: 250 + } + } + } +//! [behavior] + MouseRegion { + anchors.fill: cancelIcon + onClicked: { reset() } + } + MouseRegion { + anchors.fill: confirmIcon + onClicked: { confirm() } + } + MouseRegion { + id: editRegion + anchors.fill: textEdit + onClicked: { edit() } + } + states: [ + State { + name: "editing" + SetProperty { + target: confirmIcon + property: "opacity" + value: 1 + } + SetProperty { + target: cancelIcon + property: "opacity" + value: 1 + } + SetProperty { + target: textEdit + property: "readOnly" + value: false + } + SetProperty { + target: textEdit + property: "focus" + value: true + } + SetProperty { + target: editRegion + property: "opacity" + value: 0 + } + SetProperty { + target: textEdit.anchors + property: "leftMargin" + value: 39 + } + SetProperty { + target: textEdit.anchors + property: "rightMargin" + value: 39 + } + } + ] + transitions: [ + Transition { + fromState: "" + toState: "*" + reversible: true + NumericAnimation { + properties: "opacity,leftMargin,rightMargin" + duration: 200 + } + ColorAnimation { + duration: 150 + } + } + ] +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml new file mode 100644 index 0000000..309ee5a --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml @@ -0,0 +1,122 @@ +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + properties: Property { + name: "expandedWidth" + value: 230 + } + signals: Signal { + name: "confirmed" + } + resources: [ + Script { + function toggle() { + if (removeButton.state == 'opened') { + removeButton.state = ''; + } else { + removeButton.state = 'opened'; + } + } + + } + ] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/trash.png" + opacity: 1 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/cancel.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/ok.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle(); removeButton.confirmed.emit() } + } + } + Text { + id: text + anchors.verticalCenter: parent.verticalCenter + anchors.left: confirmIcon.right + anchors.leftMargin: 4 + anchors.right: cancelIcon.left + anchors.rightMargin: 4 + font.bold: true + color: "white" + hAlign: "AlignHCenter" + text: "Remove" + opacity: 0 + } + states: [ + State { + name: "opened" + SetProperty { + target: removeButton + property: "width" + value: removeButton.expandedWidth + } + SetProperty { + target: text + property: "opacity" + value: 1 + } + SetProperty { + target: confirmIcon + property: "opacity" + value: 1 + } + SetProperty { + target: cancelIcon + property: "opacity" + value: 1 + } + SetProperty { + target: trashIcon + property: "opacity" + value: 0 + } + } + ] + transitions: [ + Transition { + fromState: "*" + toState: "opened" + reversible: true + NumericAnimation { + properties: "opacity,x,width" + duration: 200 + } + } + ] +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml new file mode 100644 index 0000000..0587a51 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml @@ -0,0 +1,59 @@ +//! [grab property] +Item { + id: contactDetails + width: 230 + height: layout.height + properties: Property { + name: "mouseGrabbed" + value: false + } +//! [grab property] + properties: Property { + name: "contactid" + value: "" + } + properties: Property { + name: "label" + onValueChanged: { labelField.value = label } + } + properties: Property { + name: "phone" + onValueChanged: { phoneField.value = phone } + } + properties: Property { + name: "email" + onValueChanged: { emailField.value = email } + } + VerticalLayout { + id: layout + anchors.fill: parent + spacing: 5 + margin: 5 + ContactField { + id: labelField + anchors.left: layout.left + anchors.leftMargin: 5 + anchors.right: layout.right + anchors.rightMargin: 5 + label: "Name" + } + ContactField { + id: phoneField + anchors.left: layout.left + anchors.leftMargin: 5 + anchors.right: layout.right + anchors.rightMargin: 5 + icon: "../../shared/pics/phone.png" + label: "Phone" + } + ContactField { + id: emailField + anchors.left: layout.left + anchors.leftMargin: 5 + anchors.right: layout.right + anchors.rightMargin: 5 + icon: "../../shared/pics/email.png" + label: "Email" + } + } +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml new file mode 100644 index 0000000..0c422b7 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml @@ -0,0 +1,64 @@ +Item { + id: contactField + clip: true + height: 30 + properties: Property { + name: "label" + } + properties: Property { + name: "icon" + } + properties: Property { + name: "value" + } + RemoveButton { + id: removeButton + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + expandedWidth: contactField.width + onConfirmed: { fieldText.text='' } + } + FieldText { + id: fieldText + width: contactField.width-70 + anchors.right: removeButton.left + anchors.rightMargin: 5 + anchors.verticalCenter: parent.verticalCenter + label: contactField.label + text: contactField.value + } + Image { + anchors.right: fieldText.left + anchors.rightMargin: 5 + anchors.verticalCenter: parent.verticalCenter + source: contactField.icon + } + states: [ + State { + name: "editingText" + when: fieldText.state == 'editing' + SetProperty { + target: removeButton.anchors + property: "rightMargin" + value: -35 + } + SetProperty { + target: fieldText + property: "width" + value: contactField.width + } + } + ] + transitions: [ + Transition { + fromState: "" + toState: "*" + reversible: true + NumericAnimation { + properties: "width,rightMargin" + duration: 200 + } + } + ] +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml new file mode 100644 index 0000000..6bb4e0a --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml @@ -0,0 +1,157 @@ +Rect { + id: fieldText + height: 30 + radius: 5 + color: "white" + properties: Property { + name: "text" + value: "" + onValueChanged: { reset() } + } + properties: Property { + name: "label" + value: "" + } + signals: Signal { + name: "confirmed" + } + resources: [ + Script { + + function edit() { + if (!contactDetails.mouseGrabbed) { + fieldText.state='editing'; + contactDetails.mouseGrabbed=true; + } + } + function confirm() { + fieldText.text = textEdit.text; + fieldText.state=''; + contactDetails.mouseGrabbed=false; + fieldText.confirmed.emit(); + } + function reset() { + textEdit.text = fieldText.text; + fieldText.state=''; + contactDetails.mouseGrabbed=false; + } + + } + ] + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/cancel.png" + opacity: 0 + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/ok.png" + opacity: 0 + } + TextEdit { + id: textEdit + anchors.left: parent.left + anchors.leftMargin: 5 + anchors.right: parent.right + anchors.rightMargin: 5 + anchors.verticalCenter: parent.verticalCenter + color: "black" + font.bold: true + readOnly: true + wrap: false + } + Text { + id: textLabel + x: 5 + width: parent.width-10 + anchors.verticalCenter: parent.verticalCenter + hAlign: "AlignHCenter" + color: "#505050" + font.italic: true + text: fieldText.label + opacity: textEdit.text == '' ? 1 : 0 + opacity: Behaviour { + NumericAnimation { + property: "opacity" + duration: 250 + } + } + } + MouseRegion { + anchors.fill: cancelIcon + onClicked: { reset() } + } + MouseRegion { + anchors.fill: confirmIcon + onClicked: { confirm() } + } + MouseRegion { + id: editRegion + anchors.fill: textEdit + onClicked: { edit() } + } + states: [ + State { + name: "editing" + SetProperty { + target: confirmIcon + property: "opacity" + value: 1 + } + SetProperty { + target: cancelIcon + property: "opacity" + value: 1 + } + SetProperty { + target: textEdit + property: "readOnly" + value: false + } + SetProperty { + target: textEdit + property: "focus" + value: true + } + SetProperty { + target: editRegion + property: "opacity" + value: 0 + } + SetProperty { + target: textEdit.anchors + property: "leftMargin" + value: 39 + } + SetProperty { + target: textEdit.anchors + property: "rightMargin" + value: 39 + } + } + ] + transitions: [ + Transition { + fromState: "" + toState: "*" + reversible: true + NumericAnimation { + properties: "opacity,leftMargin,rightMargin" + duration: 200 + } + ColorAnimation { + duration: 150 + } + } + ] +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml new file mode 100644 index 0000000..b57a95b --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml @@ -0,0 +1,128 @@ +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + properties: Property { + name: "expandedWidth" + value: 230 + } + signals: Signal { + name: "confirmed" + } + resources: [ +//! [grab] + Script { + function toggle() { + if (removeButton.state == 'opened') { + removeButton.state = ''; + contactDetails.mouseGrabbed=false; + } else { + if (!contactDetails.mouseGrabbed) { + removeButton.state = 'opened'; + contactDetails.mouseGrabbed=true; + } + } + } + + } +//! [grab] + ] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/trash.png" + opacity: 1 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/cancel.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/ok.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle(); removeButton.confirmed.emit() } + } + } + Text { + id: text + anchors.verticalCenter: parent.verticalCenter + anchors.left: confirmIcon.right + anchors.leftMargin: 4 + anchors.right: cancelIcon.left + anchors.rightMargin: 4 + font.bold: true + color: "white" + hAlign: "AlignHCenter" + text: "Remove" + opacity: 0 + } + states: [ + State { + name: "opened" + SetProperty { + target: removeButton + property: "width" + value: removeButton.expandedWidth + } + SetProperty { + target: text + property: "opacity" + value: 1 + } + SetProperty { + target: confirmIcon + property: "opacity" + value: 1 + } + SetProperty { + target: cancelIcon + property: "opacity" + value: 1 + } + SetProperty { + target: trashIcon + property: "opacity" + value: 0 + } + } + ] + transitions: [ + Transition { + fromState: "*" + toState: "opened" + reversible: true + NumericAnimation { + properties: "opacity,x,width" + duration: 200 + } + } + ] +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml b/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml deleted file mode 100644 index 2933437..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml +++ /dev/null @@ -1,29 +0,0 @@ -<Item id="contactDetails" - width="230" - height="{layout.height}"> - <properties> - <Property name="contactid" value=""/> - <Property name="label" onValueChanged="labelField.value = label"/> - <Property name="phone" onValueChanged="phoneField.value = phone"/> - <Property name="email" onValueChanged="emailField.value = email"/> - </properties> - <VerticalLayout id="layout" - anchors.fill="{parent}" - spacing="5" - margin="5"> - <ContactField3 id="labelField" - anchors.left="{layout.left}" anchors.leftMargin="5" - anchors.right="{layout.right}" anchors.rightMargin="5" - label="Name"/> - <ContactField3 id="phoneField" - anchors.left="{layout.left}" anchors.leftMargin="5" - anchors.right="{layout.right}" anchors.rightMargin="5" - icon="../shared/pics/phone.png" - label="Phone"/> - <ContactField3 id="emailField" - anchors.left="{layout.left}" anchors.leftMargin="5" - anchors.right="{layout.right}" anchors.rightMargin="5" - icon="../shared/pics/email.png" - label="Email"/> - </VerticalLayout> -</Item> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml b/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml deleted file mode 100644 index 9e988c0..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml +++ /dev/null @@ -1,29 +0,0 @@ -<Item id="contactDetails" - width="230" - height="{layout.height}"> - <properties> - <Property name="contactid" value=""/> - <Property name="label" onValueChanged="labelField.value = label"/> - <Property name="phone" onValueChanged="phoneField.value = phone"/> - <Property name="email" onValueChanged="emailField.value = email"/> - </properties> - <VerticalLayout id="layout" - anchors.fill="{parent}" - spacing="5" - margin="5"> - <ContactField4 id="labelField" - anchors.left="{layout.left}" anchors.leftMargin="5" - anchors.right="{layout.right}" anchors.rightMargin="5" - label="Name"/> - <ContactField4 id="phoneField" - anchors.left="{layout.left}" anchors.leftMargin="5" - anchors.right="{layout.right}" anchors.rightMargin="5" - icon="../shared/pics/phone.png" - label="Phone"/> - <ContactField4 id="emailField" - anchors.left="{layout.left}" anchors.leftMargin="5" - anchors.right="{layout.right}" anchors.rightMargin="5" - icon="../shared/pics/email.png" - label="Email"/> - </VerticalLayout> -</Item> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml deleted file mode 100644 index 7bfdd28..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml +++ /dev/null @@ -1,18 +0,0 @@ -<Item id="contactField" - clip="true" - width="230" - height="30"> - <RemoveButton1 id="removeButton" - anchors.right="{parent.right}" - anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"/> - <Text id="fieldText" - width="{contactField.width-80}" - anchors.right="{removeButton.left}" anchors.rightMargin="10" - anchors.verticalCenter="{parent.verticalCenter}" - font.bold="true" - color="black" - text="123123"/> - <Image src="../shared/pics/phone.png" - anchors.right="{fieldText.left}" anchors.rightMargin="10" - anchors.verticalCenter="{parent.verticalCenter}"/> -</Item> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml deleted file mode 100644 index 7ec3e4d..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml +++ /dev/null @@ -1,20 +0,0 @@ -<Item id="contactField" - clip="true" - width="230" - height="30"> - <RemoveButton2 id="removeButton" - anchors.right="{parent.right}" - anchors.top="{parent.top}" anchors.bottom="{parent.bottom}" - expandedWidth="{contactField.width}" - onConfirmed="print('Clear field text'); fieldText.text=''"/> - <Text id="fieldText" - width="{contactField.width-80}" - anchors.right="{removeButton.left}" anchors.rightMargin="10" - anchors.verticalCenter="{parent.verticalCenter}" - font.bold="true" - color="black" - text="123123"/> - <Image src="../shared/pics/phone.png" - anchors.right="{fieldText.left}" anchors.rightMargin="10" - anchors.verticalCenter="{parent.verticalCenter}"/> -</Item> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml deleted file mode 100644 index cef25ce..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml +++ /dev/null @@ -1,36 +0,0 @@ -<Item id="contactField" - clip="true" - width="230" - height="30"> - <properties> - <Property name="label" value="Name"/> - <Property name="icon" value="../shared/pics/phone.png"/> - <Property name="value"/> - </properties> - <RemoveButton3 id="removeButton" - anchors.right="{parent.right}" - anchors.top="{parent.top}" anchors.bottom="{parent.bottom}" - expandedWidth="{contactField.width}" - onConfirmed="print('Clear field text'); fieldText.text=''"/> - <FieldText3 id="fieldText" - width="{contactField.width-70}" - anchors.right="{removeButton.left}" anchors.rightMargin="5" - anchors.verticalCenter="{parent.verticalCenter}" - label="{contactField.label}" - text="{contactField.value}"/> - <Image - anchors.right="{fieldText.left}" anchors.rightMargin="5" - anchors.verticalCenter="{parent.verticalCenter}" - src="{contactField.icon}"/> - <states> - <State name="editingText" when="{fieldText.state == 'editing'}"> - <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/> - <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/> - </State> - </states> - <transitions> - <Transition fromState='' toState="*" reversible="true"> - <NumericAnimation properties="width,rightMargin" duration="200"/> - </Transition> - </transitions> -</Item> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml deleted file mode 100644 index 13ccbc0..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml +++ /dev/null @@ -1,35 +0,0 @@ -<Item id="contactField" - clip="true" - height="30"> - <properties> - <Property name="label"/> - <Property name="icon"/> - <Property name="value"/> - </properties> - <RemoveButton4 id="removeButton" - anchors.right="{parent.right}" - anchors.top="{parent.top}" anchors.bottom="{parent.bottom}" - expandedWidth="{contactField.width}" - onConfirmed="print('Clear field text'); fieldText.text=''"/> - <FieldText4 id="fieldText" - width="{contactField.width-70}" - anchors.right="{removeButton.left}" anchors.rightMargin="5" - anchors.verticalCenter="{parent.verticalCenter}" - label="{contactField.label}" - text="{contactField.value}"/> - <Image - anchors.right="{fieldText.left}" anchors.rightMargin="5" - anchors.verticalCenter="{parent.verticalCenter}" - src="{contactField.icon}"/> - <states> - <State name="editingText" when="{fieldText.state == 'editing'}"> - <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/> - <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/> - </State> - </states> - <transitions> - <Transition fromState='' toState="*" reversible="true"> - <NumericAnimation properties="width,rightMargin" duration="200"/> - </Transition> - </transitions> -</Item> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml b/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml deleted file mode 100644 index 97c0772..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml +++ /dev/null @@ -1,91 +0,0 @@ -<Rect id="fieldText" - height="30" - radius="5" - color="white"> - <properties> - <Property - name="text" - value="" - onValueChanged="reset()"/> - <Property - name="label" - value=""/> - </properties> - <signals> - <Signal name="confirmed"/> - </signals> - <resources> - <Script> - function edit() { - fieldText.state='editing'; - } - function confirm() { - fieldText.text = textEdit.text; - fieldText.state=''; - fieldText.confirmed.emit(); - } - function reset() { - textEdit.text = fieldText.text; - fieldText.state=''; - } - </Script> - </resources> - <Image id="cancelIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png" - opacity="0"/> - <Image id="confirmIcon" - width="22" height="22" - anchors.left="{parent.left}" anchors.leftMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png" - opacity="0"/> - <TextEdit id="textEdit" - anchors.left="{parent.left}" anchors.leftMargin="5" - anchors.right="{parent.right}" anchors.rightMargin="5" - anchors.verticalCenter="{parent.verticalCenter}" - color="black" - font.bold="true" - readOnly="true" - wrap="false" - /> - <Text id="textLabel" - x="5" width="{parent.width-10}" - anchors.verticalCenter="{parent.verticalCenter}" - hAlign="AlignHCenter" - color="#505050" - font.italic="true" - text="{fieldText.label}" - opacity="{textEdit.text != '' ? 0 : 1}"> - <opacity> - <Behaviour> - <NumericAnimation property="opacity" duration="250"/> - </Behaviour> - </opacity> - </Text> - <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/> - <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/> - <MouseRegion - id="editRegion" - anchors.fill="{textEdit}" - onClicked="edit()"/> - <states> - <State name="editing"> - <SetProperty target="{confirmIcon}" property="opacity" value="1"/> - <SetProperty target="{cancelIcon}" property="opacity" value="1"/> - <SetProperty target="{textEdit}" property="readOnly" value="false"/> - <SetProperty target="{textEdit}" property="focus" value="true"/> - <SetProperty target="{editRegion}" property="opacity" value="0"/> - <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/> - <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/> - </State> - </states> - <transitions> - <Transition fromState='' toState="*" reversible="true"> - <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/> - <ColorAnimation duration="150"/> - </Transition> - </transitions> -</Rect> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml b/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml deleted file mode 100644 index 45bb18d..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml +++ /dev/null @@ -1,96 +0,0 @@ -<Rect id="fieldText" - height="30" - radius="5" - color="white"> - <properties> - <Property - name="text" - value="" - onValueChanged="reset()"/> - <Property - name="label" - value=""/> - </properties> - <signals> - <Signal name="confirmed"/> - </signals> - <resources> - <Script> - function edit() { - if (!page.mouseGrabbed) { - fieldText.state='editing'; - page.mouseGrabbed=true; - } - } - function confirm() { - fieldText.text = textEdit.text; - fieldText.state=''; - page.mouseGrabbed=false; - fieldText.confirmed.emit(); - } - function reset() { - textEdit.text = fieldText.text; - fieldText.state=''; - page.mouseGrabbed=false; - } - </Script> - </resources> - <Image id="cancelIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png" - opacity="0"/> - <Image id="confirmIcon" - width="22" height="22" - anchors.left="{parent.left}" anchors.leftMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png" - opacity="0"/> - <TextEdit id="textEdit" - anchors.left="{parent.left}" anchors.leftMargin="5" - anchors.right="{parent.right}" anchors.rightMargin="5" - anchors.verticalCenter="{parent.verticalCenter}" - color="black" - font.bold="true" - readOnly="true" - wrap="false" - /> - <Text id="textLabel" - x="5" width="{parent.width-10}" - anchors.verticalCenter="{parent.verticalCenter}" - hAlign="AlignHCenter" - color="#505050" - font.italic="true" - text="{fieldText.label}" - opacity="{textEdit.text != '' ? 0 : 1}"> - <opacity> - <Behaviour> - <NumericAnimation property="opacity" duration="250"/> - </Behaviour> - </opacity> - </Text> - <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/> - <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/> - <MouseRegion - id="editRegion" - anchors.fill="{textEdit}" - onClicked="edit()"/> - <states> - <State name="editing"> - <SetProperty target="{confirmIcon}" property="opacity" value="1"/> - <SetProperty target="{cancelIcon}" property="opacity" value="1"/> - <SetProperty target="{textEdit}" property="readOnly" value="false"/> - <SetProperty target="{textEdit}" property="focus" value="true"/> - <SetProperty target="{editRegion}" property="opacity" value="0"/> - <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/> - <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/> - </State> - </states> - <transitions> - <Transition fromState='' toState="*" reversible="true"> - <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/> - <ColorAnimation duration="150"/> - </Transition> - </transitions> -</Rect> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml b/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml index 01f26ee..665c072 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml @@ -1,17 +1,59 @@ -<Item id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}"> - <properties> - <Property name="contents"/> - <Property name="label"/> - </properties> - <Rect id="wrapper" x="5" y="10" radius="10" - width="{groupBox.width-20}" height="{groupBox.height-20}" - color="white" pen.color="black"> - <Item id="subItem" qml="{groupBox.contents}" - anchors.top="{parent.top}" anchors.topMargin="10" - anchors.right="{parent.right}" anchors.rightMargin="10" - width="{qmlItem.width}" height="{qmlItem.height}"/> - </Rect> - <Rect x="20" y="0" height="{text.height}" width="{text.width+10}" color="white"> - <Text x="5" id="text" text="{label}" font.bold="true"/> - </Rect> -</Item> +FocusRealm { + id: groupBox + width: Math.max(270, subItem.width+40) + height: Math.max(70, subItem.height+40) + properties: Property { + name: "contents" + } + properties: Property { + name: "label" + } + Rect { + id: wrapper + x: 5 + y: 10 + radius: 10 + width: groupBox.width-20 + height: groupBox.height-20 + color: "white" + pen.color: "black" + Item { + id: subItem + qml: groupBox.contents + anchors.top: parent.top + anchors.topMargin: 10 + anchors.right: parent.right + anchors.rightMargin: 10 + width: qmlItem.width + height: qmlItem.height + } + } + Rect { + x: 20 + y: 0 + height: text.height + width: text.width+10 + color: "white" + Text { + x: 5 + id: text + text: label + font.bold: true + } + } + Rect { + color: "black" + anchors.fill: parent + opacity: parent.focus ? 0 : 0.3 + MouseRegion { + anchors.fill: parent + onClicked: { parent.parent.focus=true } + } + opacity: Behaviour { + NumericAnimation { + property: "opacity" + duration: 250 + } + } + } +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml deleted file mode 100644 index 68c1838..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml +++ /dev/null @@ -1,70 +0,0 @@ -<Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"> - <resources> - <Script> - function toggle() { - print('removeButton.toggle()'); - if (removeButton.state == 'opened') { - removeButton.state = ''; - } else { - removeButton.state = 'opened'; - } - } - </Script> - </resources> - <Image id="trashIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/trash.png" - opacity="1"> - <MouseRegion - anchors.fill="{parent}" - onClicked="toggle()"/> - </Image> - <Image id="cancelIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png" - opacity="0"> - <MouseRegion - anchors.fill="{parent}" - onClicked="toggle()"/> - </Image> - <Image id="confirmIcon" - width="22" height="22" - anchors.left="{parent.left}" anchors.leftMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png" - opacity="0"> - <MouseRegion - anchors.fill="{parent}" - onClicked="toggle()"/> - </Image> - <Text id="text" - anchors.verticalCenter="{parent.verticalCenter}" - anchors.left="{confirmIcon.right}" anchors.leftMargin="4" - anchors.right="{cancelIcon.left}" anchors.rightMargin="4" - font.bold="true" - color="white" - hAlign="AlignHCenter" - text="Remove" - opacity="0"/> - <states> - <State name="opened"> - <SetProperty target="{removeButton}" property="width" value="230"/> - <SetProperty target="{text}" property="opacity" value="1"/> - <SetProperty target="{confirmIcon}" property="opacity" value="1"/> - <SetProperty target="{cancelIcon}" property="opacity" value="1"/> - <SetProperty target="{trashIcon}" property="opacity" value="0"/> - </State> - </states> - <transitions> - <Transition fromState="*" toState="opened" reversible="true"> - <NumericAnimation properties="opacity,x,width" duration="200"/> - </Transition> - </transitions> -</Rect> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml deleted file mode 100644 index d9ff4c5..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml +++ /dev/null @@ -1,76 +0,0 @@ -<Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"> - <properties> - <Property name="expandedWidth" value="230"/> - </properties> - <signals> - <Signal name="confirmed"/> - </signals> - <resources> - <Script> - function toggle() { - print('removeButton.toggle()'); - if (removeButton.state == 'opened') { - removeButton.state = ''; - } else { - removeButton.state = 'opened'; - } - } - </Script> - </resources> - <Image id="trashIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/trash.png" - opacity="1"> - <MouseRegion - anchors.fill="{parent}" - onClicked="toggle()"/> - </Image> - <Image id="cancelIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png" - opacity="0"> - <MouseRegion - anchors.fill="{parent}" - onClicked="toggle()"/> - </Image> - <Image id="confirmIcon" - width="22" height="22" - anchors.left="{parent.left}" anchors.leftMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png" - opacity="0"> - <MouseRegion - anchors.fill="{parent}" - onClicked="toggle(); removeButton.confirmed.emit()"/> - </Image> - <Text id="text" - anchors.verticalCenter="{parent.verticalCenter}" - anchors.left="{confirmIcon.right}" anchors.leftMargin="4" - anchors.right="{cancelIcon.left}" anchors.rightMargin="4" - font.bold="true" - color="white" - hAlign="AlignHCenter" - text="Remove" - opacity="0"/> - <states> - <State name="opened"> - <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/> - <SetProperty target="{text}" property="opacity" value="1"/> - <SetProperty target="{confirmIcon}" property="opacity" value="1"/> - <SetProperty target="{cancelIcon}" property="opacity" value="1"/> - <SetProperty target="{trashIcon}" property="opacity" value="0"/> - </State> - </states> - <transitions> - <Transition fromState="*" toState="opened" reversible="true"> - <NumericAnimation properties="opacity,x,width" duration="200"/> - </Transition> - </transitions> -</Rect> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml deleted file mode 100644 index d9ff4c5..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml +++ /dev/null @@ -1,76 +0,0 @@ -<Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"> - <properties> - <Property name="expandedWidth" value="230"/> - </properties> - <signals> - <Signal name="confirmed"/> - </signals> - <resources> - <Script> - function toggle() { - print('removeButton.toggle()'); - if (removeButton.state == 'opened') { - removeButton.state = ''; - } else { - removeButton.state = 'opened'; - } - } - </Script> - </resources> - <Image id="trashIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/trash.png" - opacity="1"> - <MouseRegion - anchors.fill="{parent}" - onClicked="toggle()"/> - </Image> - <Image id="cancelIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png" - opacity="0"> - <MouseRegion - anchors.fill="{parent}" - onClicked="toggle()"/> - </Image> - <Image id="confirmIcon" - width="22" height="22" - anchors.left="{parent.left}" anchors.leftMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png" - opacity="0"> - <MouseRegion - anchors.fill="{parent}" - onClicked="toggle(); removeButton.confirmed.emit()"/> - </Image> - <Text id="text" - anchors.verticalCenter="{parent.verticalCenter}" - anchors.left="{confirmIcon.right}" anchors.leftMargin="4" - anchors.right="{cancelIcon.left}" anchors.rightMargin="4" - font.bold="true" - color="white" - hAlign="AlignHCenter" - text="Remove" - opacity="0"/> - <states> - <State name="opened"> - <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/> - <SetProperty target="{text}" property="opacity" value="1"/> - <SetProperty target="{confirmIcon}" property="opacity" value="1"/> - <SetProperty target="{cancelIcon}" property="opacity" value="1"/> - <SetProperty target="{trashIcon}" property="opacity" value="0"/> - </State> - </states> - <transitions> - <Transition fromState="*" toState="opened" reversible="true"> - <NumericAnimation properties="opacity,x,width" duration="200"/> - </Transition> - </transitions> -</Rect> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml deleted file mode 100644 index a489e95..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml +++ /dev/null @@ -1,80 +0,0 @@ -<Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"> - <properties> - <Property name="expandedWidth" value="230"/> - </properties> - <signals> - <Signal name="confirmed"/> - </signals> - <resources> - <Script> - function toggle() { - print('removeButton.toggle()'); - if (removeButton.state == 'opened') { - removeButton.state = ''; - page.mouseGrabbed=false; - } else { - if (!page.mouseGrabbed) { - removeButton.state = 'opened'; - page.mouseGrabbed=true; - } - } - } - </Script> - </resources> - <Image id="trashIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/trash.png" - opacity="1"> - <MouseRegion - anchors.fill="{parent}" - onClicked="toggle()"/> - </Image> - <Image id="cancelIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png" - opacity="0"> - <MouseRegion - anchors.fill="{parent}" - onClicked="toggle()"/> - </Image> - <Image id="confirmIcon" - width="22" height="22" - anchors.left="{parent.left}" anchors.leftMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png" - opacity="0"> - <MouseRegion - anchors.fill="{parent}" - onClicked="toggle(); removeButton.confirmed.emit()"/> - </Image> - <Text id="text" - anchors.verticalCenter="{parent.verticalCenter}" - anchors.left="{confirmIcon.right}" anchors.leftMargin="4" - anchors.right="{cancelIcon.left}" anchors.rightMargin="4" - font.bold="true" - color="white" - hAlign="AlignHCenter" - text="Remove" - opacity="0"/> - <states> - <State name="opened"> - <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/> - <SetProperty target="{text}" property="opacity" value="1"/> - <SetProperty target="{confirmIcon}" property="opacity" value="1"/> - <SetProperty target="{cancelIcon}" property="opacity" value="1"/> - <SetProperty target="{trashIcon}" property="opacity" value="0"/> - </State> - </states> - <transitions> - <Transition fromState="*" toState="opened" reversible="true"> - <NumericAnimation properties="opacity,x,width" duration="200"/> - </Transition> - </transitions> -</Rect> diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml new file mode 100644 index 0000000..ce338e2 --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml @@ -0,0 +1,47 @@ +import "../lib" +Item { + id: contacts + width: 240 + height: 230 + properties: Property { + name: "mouseGrabbed" + value: false + } + resources: [ +//! [model] + SqlConnection { + id: contactDatabase + name: "qmlConnection" + driver: "QSQLITE" + databaseName: "../../shared/contacts.sqlite" + }, + SqlQuery { + id: contactList + connection: contactDatabase + query: "SELECT recid, label, email, phone FROM contacts ORDER BY label, recid" + } +//! [model] + ] +//! [view] + ListView { + id: contactListView + anchors.fill: parent + clip: true + model: contactList + focus: true +//! [delegate] + delegate: [ + Text { + x: 45 + y: 12 + width: contactListView.width-45 + height: 30 + color: "black" + font.bold: true + text: model.label + } + ] +//! [delegate] + } +//! [view] +} diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml new file mode 100644 index 0000000..b6b3c31 --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml @@ -0,0 +1,129 @@ +import "../lib" +Item { + id: contacts + width: 240 + height: 230 + properties: Property { + name: "mouseGrabbed" + value: false + } + resources: [ + SqlConnection { + id: contactDatabase + name: "qmlConnection" + driver: "QSQLITE" + databaseName: "../../shared/contacts.sqlite" + }, + SqlQuery { + id: contactList + connection: contactDatabase + query: "SELECT recid, label, email, phone FROM contacts ORDER BY label, recid" + } + ] +//! [button] + Button { + id: cancelEditButton + anchors.top: parent.top + anchors.topMargin: 5 + anchors.right: parent.right + anchors.rightMargin: 5 + icon: "../../shared/pics/cancel.png" + opacity: mouseGrabbed ? 0 : 1 + } +//! [button] + ListView { + id: contactListView + anchors.left: parent.left + anchors.right: parent.right + anchors.top: cancelEditButton.bottom + anchors.bottom: parent.bottom + clip: true + model: contactList + focus: true + delegate: [ +//! [components] + Item { + id: wrapper + x: 0 + width: ListView.view.width + height: 34 + Text { + id: label + x: 45 + y: 12 + width: parent.width-45 + color: "black" + font.bold: true + text: model.label + } + MouseRegion { + anchors.fill: label + onClicked: { wrapper.state='opened' } + } + Contact { + id: details + anchors.fill: parent + contactid: model.recid + label: model.label + email: model.email + phone: model.phone + opacity: 0 + } +//! [components] +//! [states] + states: [ + State { + name: "opened" + SetProperty { + target: wrapper + property: "height" + value: contactListView.height + } + SetProperty { + target: contactListView + property: "yPosition" + value: wrapper.y + } + SetProperty { + target: contactListView + property: "locked" + value: 1 + } + SetProperty { + target: label + property: "opacity" + value: 0 + } + SetProperty { + target: details + property: "opacity" + value: 1 + } + } + ] +//! [states] +//! [transitions] + transitions: [ + Transition { + NumericAnimation { + duration: 500 + properties: "yPosition,height,opacity" + } + } + ] +//! [transitions] +//! [connections] + Connection { + sender: cancelEditButton + signal: "clicked()" + script: { + if (wrapper.state == 'opened') { + wrapper.state = ''; + } + } + } +//! [connections] + } + ] + } +} diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml new file mode 100644 index 0000000..f0b55db --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml @@ -0,0 +1,142 @@ +import "../lib" +Item { + id: contacts + width: 240 + height: 230 + properties: Property { + name: "mouseGrabbed" + value: false + } + resources: [ + SqlConnection { + id: contactDatabase + name: "qmlConnection" + driver: "QSQLITE" + databaseName: "../../shared/contacts.sqlite" + }, + SqlQuery { + id: contactList + connection: contactDatabase + query: "SELECT recid AS contactid, label, email, phone FROM contacts ORDER BY label, recid" + } + ] + Button { + id: cancelEditButton + anchors.top: parent.top + anchors.topMargin: 5 + anchors.right: parent.right + anchors.rightMargin: 5 + icon: "../../shared/pics/cancel.png" + opacity: mouseGrabbed ? 0 : 1 + } + ListView { + id: contactListView + anchors.left: parent.left + anchors.right: parent.right + anchors.top: cancelEditButton.bottom + anchors.bottom: parent.bottom + clip: true + model: contactList + focus: true + delegate: [ + Item { + id: wrapper + x: 0 + width: ListView.view.width + height: 34 + Text { + id: label + x: 45 + y: 12 + width: parent.width-45 + text: model.label + color: "black" + font.bold: true + } +//! [setting qml] + MouseRegion { + anchors.fill: label + onClicked: { + Details.qml = 'Contact.qml'; + wrapper.state='opened'; + } + } + Item { + id: Details + anchors.fill: wrapper + opacity: 0 +//! [setting qml] +//! [binding] + Bind { + target: Details.qmlItem + property: "contactid" + value: model.contactid + } + Bind { + target: Details.qmlItem + property: "label" + value: model.label + } + Bind { + target: Details.qmlItem + property: "phone" + value: model.phone + } + Bind { + target: Details.qmlItem + property: "email" + value: model.email + } +//! [binding] + } + states: [ + State { + name: "opened" + SetProperty { + target: wrapper + property: "height" + value: contactListView.height + } + SetProperty { + target: contactListView + property: "yPosition" + value: wrapper.y + } + SetProperty { + target: contactListView + property: "locked" + value: 1 + } + SetProperty { + target: label + property: "opacity" + value: 0 + } + SetProperty { + target: Details + property: "opacity" + value: 1 + } + } + ] + transitions: [ + Transition { + NumericAnimation { + duration: 500 + properties: "yPosition,height,opacity" + } + } + ] + Connection { + sender: cancelEditButton + signal: "clicked()" + script: { + if (wrapper.state == 'opened') { + wrapper.state = ''; + } + } + } + } + ] + } +} diff --git a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml index 6907676..e8d9a19 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml @@ -1,37 +1,29 @@ -<Rect id="page" width="{layout.width}" height="{layout.height}" color='white'> - <GridLayout id="layout" width="{contents.width}" height="{contents.height}"> - <FocusRealm id="realm1" focus="false" width="280" height="320"> - <GroupBox contents="ContactView1.qml" label="something" anchors.fill="{parent}"/> - <Rect id="box1" color="black" anchors.fill="{parent}" opacity="0.3"> - <MouseRegion anchors.fill="{parent}" onClicked="print('1'); realm1.focus=true; realm2.focus=false; realm3.focus=false; box1.opacity='0'; box2.opacity='0.3'; box3.opacity='0.3'" onPressed="" onPositionChanged=""/> - <opacity> - <Behaviour> - <NumericAnimation property="opacity" duration="250"/> - </Behaviour> - </opacity> - </Rect> - </FocusRealm> - <FocusRealm id="realm2" focus="false" width="280" height="320"> - <GroupBox contents="ContactView2.qml" label="something" anchors.fill="{parent}"/> - <Rect id="box2" color="black" anchors.fill="{parent}" opacity="0.3"> - <MouseRegion anchors.fill="{parent}" onClicked="realm1.focus=false; realm2.focus=true; realm3.focus=false; box1.opacity='0.3'; box2.opacity='0'; box3.opacity='0.3'" onPressed="" onPositionChanged=""/> - <opacity> - <Behaviour> - <NumericAnimation property="opacity" duration="250"/> - </Behaviour> - </opacity> - </Rect> - </FocusRealm> - <FocusRealm id="realm3" focus="true" width="280" height="320"> - <GroupBox contents="ContactView3.qml" label="something" anchors.fill="{parent}"/> - <Rect id="box3" color="black" anchors.fill="{parent}" opacity="0.3"> - <MouseRegion anchors.fill="{parent}" onClicked="realm1.focus=false; realm2.focus=false; realm3.focus=true; box1.opacity='0.3'; box2.opacity='0.3'; box3.opacity='0'" onPressed="" onPositionChanged=""/> - <opacity> - <Behaviour> - <NumericAnimation property="opacity" duration="250"/> - </Behaviour> - </opacity> - </Rect> - </FocusRealm> - </GridLayout> -</Rect> +Rect { + id: page + width: layout.width + height: layout.height + color: "white" + Bind { + id: currentItem + value: true + } + // relies on the current focus behavior whereby setting focus=true on a + // component removes focus from any previous element + GridLayout { + id: layout + width: contents.width + height: contents.height + GroupBox { + contents: "1/ContactView.qml" + label: "something" + } + GroupBox { + contents: "2/ContactView.qml" + label: "something" + } + GroupBox { + contents: "3/ContactView.qml" + label: "something" + } + } +} diff --git a/examples/declarative/tutorials/contacts/3_Collections/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/Button.qml deleted file mode 100644 index 8290d35..0000000 --- a/examples/declarative/tutorials/contacts/3_Collections/Button.qml +++ /dev/null @@ -1,38 +0,0 @@ -<Item id="button" width="30" height="30"> - <properties> - <Property name="icon"/> - </properties> - <signals> - <Signal name="clicked"/> - </signals> - <Rect id="buttonRect" - anchors.fill="{parent}" - color="lightgreen" - radius="5"> - <Image id="iconImage" - src="{button.icon}" - anchors.horizontalCenter="{buttonRect.horizontalCenter}" - anchors.verticalCenter="{buttonRect.verticalCenter}"/> - <MouseRegion id="buttonMouseRegion" - anchors.fill="{buttonRect}" - onClicked="button.clicked.emit()"/> - <states> - <State name="pressed" when="{buttonMouseRegion.pressed == true}"> - <SetProperty target="{buttonRect}" property="color" value="green"/> - </State> - </states> - <transitions> - <Transition fromState="*" toState="pressed"> - <ColorAnimation duration="200"/> - </Transition> - <Transition fromState="pressed" toState="*"> - <ColorAnimation duration="1000"/> - </Transition> - </transitions> - </Rect> - <opacity> - <Behaviour> - <NumericAnimation property="opacity" duration="250"/> - </Behaviour> - </opacity> -</Item> diff --git a/examples/declarative/tutorials/contacts/3_Collections/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/Contact.qml deleted file mode 100644 index f620c25..0000000 --- a/examples/declarative/tutorials/contacts/3_Collections/Contact.qml +++ /dev/null @@ -1,28 +0,0 @@ -<Item id="contactDetails" - anchors.fill="{parent}"> - <properties> - <Property name="contactid" value=""/> - <Property name="label" onValueChanged="labelField.value = label"/> - <Property name="phone" onValueChanged="phoneField.value = phone"/> - <Property name="email" onValueChanged="emailField.value = email"/> - </properties> - <VerticalLayout id="layout" - anchors.fill="{parent}" - spacing="5" - margin="5"> - <ContactField id="labelField" - anchors.left="{layout.left}" anchors.leftMargin="5" - anchors.right="{layout.right}" anchors.rightMargin="5" - label="Name"/> - <ContactField id="phoneField" - anchors.left="{layout.left}" anchors.leftMargin="5" - anchors.right="{layout.right}" anchors.rightMargin="5" - icon="../shared/pics/phone.png" - label="Phone"/> - <ContactField id="emailField" - anchors.left="{layout.left}" anchors.leftMargin="5" - anchors.right="{layout.right}" anchors.rightMargin="5" - icon="../shared/pics/email.png" - label="Email"/> - </VerticalLayout> -</Item> diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactField.qml deleted file mode 100644 index 819914c..0000000 --- a/examples/declarative/tutorials/contacts/3_Collections/ContactField.qml +++ /dev/null @@ -1,35 +0,0 @@ -<Item id="contactField" - clip="true" - height="30"> - <properties> - <Property name="label"/> - <Property name="icon"/> - <Property name="value"/> - </properties> - <RemoveButton id="removeButton" - anchors.right="{parent.right}" - anchors.top="{parent.top}" anchors.bottom="{parent.bottom}" - expandedWidth="{contactField.width}" - onConfirmed="print('Clear field text'); fieldText.text=''"/> - <FieldText id="fieldText" - width="{contactField.width-70}" - anchors.right="{removeButton.left}" anchors.rightMargin="5" - anchors.verticalCenter="{parent.verticalCenter}" - label="{contactField.label}" - text="{contactField.value}"/> - <Image - anchors.right="{fieldText.left}" anchors.rightMargin="5" - anchors.verticalCenter="{parent.verticalCenter}" - src="{contactField.icon}"/> - <states> - <State name="editingText" when="{fieldText.state == 'editing'}"> - <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/> - <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/> - </State> - </states> - <transitions> - <Transition fromState='' toState="*" reversible="true"> - <NumericAnimation properties="width,rightMargin" duration="200"/> - </Transition> - </transitions> -</Item> diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml deleted file mode 100644 index 6606094..0000000 --- a/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml +++ /dev/null @@ -1,28 +0,0 @@ -<Item id="contacts" - width="240" - height="230"> - <properties> - <Property name="mouseGrabbed" value="false"/> - </properties> - <resources> - <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../shared/contacts.sqlite"/> - <SqlQuery id="contactList" connection="{contactDatabase}"> - <query>SELECT recid, label, email, phone FROM contacts ORDER BY label, recid</query> - </SqlQuery> - <Component id="contactDelegate"> - <Text - x="45" y="12" - width="{contactListView.width-45}" - height="30" - color="black" - font.bold="true" - text="{model.label}"/> - </Component> - </resources> - <ListView id="contactListView" - anchors.fill="{parent}" - clip="true" - model="{contactList}" - delegate="{contactDelegate}" - focus="true"/> -</Item> diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml deleted file mode 100644 index 97868e3..0000000 --- a/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml +++ /dev/null @@ -1,68 +0,0 @@ -<Item id="contacts" - width="240" - height="230"> - <properties> - <Property name="mouseGrabbed" value="false"/> - </properties> - <resources> - <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../shared/contacts.sqlite"/> - <SqlQuery id="contactList" connection="{contactDatabase}"> - <query>SELECT recid AS contactid, label, email, phone FROM contacts ORDER BY label, recid</query> - </SqlQuery> - <Component id="contactDelegate"> - <Item id="wrapper" - x="0" - width="{ListView.view.width}" height="34"> - <Text id="label" - x="45" y="12" - width="{parent.width-45}" - text="{model.label}" - color="black" - font.bold="true"> - </Text> - <MouseRegion - anchors.fill="{label}" - onClicked="wrapper.state='opened'"/> - <Contact id="details" - anchors.fill="{parent}" - contactid="{model.contactid}" - label="{model.label}" - email="{model.email}" - phone="{model.phone}" - opacity="0"/> - <states> - <State name='opened'> - <SetProperty target="{wrapper}" property="height" value="{contactListView.height}"/> - <SetProperty target="{contactListView}" property="yPosition" value="{wrapper.y}"/> - <SetProperty target="{contactListView}" property="locked" value="1"/> - <SetProperty target="{label}" property="opacity" value="0"/> - <SetProperty target="{details}" property="opacity" value="1"/> - </State> - </states> - <transitions> - <Transition> - <NumericAnimation duration="500" properties="yPosition,height,opacity"/> - </Transition> - </transitions> - <Connection sender="{cancelEditButton}" signal="clicked()"> - if (wrapper.state == 'opened') { - wrapper.state = ''; - } - </Connection> - </Item> - </Component> - </resources> - <Button id="cancelEditButton" - anchors.top="{parent.top}" anchors.topMargin="5" - anchors.right="{parent.right}" anchors.rightMargin="5" - icon="../shared/pics/cancel.png"/> - <ListView id="contactListView" - anchors.left="{parent.left}" - anchors.right="{parent.right}" - anchors.top="{cancelEditButton.bottom}" - anchors.bottom="{parent.bottom}" - clip="true" - model="{contactList}" - delegate="{contactDelegate}" - focus="true"/> -</Item> diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml deleted file mode 100644 index c15ece2..0000000 --- a/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml +++ /dev/null @@ -1,73 +0,0 @@ -<Item id="contacts" - width="240" - height="230"> - <properties> - <Property name="mouseGrabbed" value="false"/> - </properties> - <resources> - <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../shared/contacts.sqlite"/> - <SqlQuery id="contactList" connection="{contactDatabase}"> - <query>SELECT recid AS contactid, label, email, phone FROM contacts ORDER BY label, recid</query> - </SqlQuery> - <Component id="contactDelegate"> - <Item id="wrapper" - x="0" - width="{ListView.view.width}" height="34"> - <Text id="label" - x="45" y="12" - width="{parent.width-45}" - text="{model.label}" - color="black" - font.bold="true"> - </Text> - <MouseRegion - anchors.fill="{label}"> - <onClicked> - Details.qml = 'Contact.qml'; - wrapper.state='opened'; - </onClicked> - </MouseRegion> - <Item id="Details" - anchors.fill="{wrapper}" - opacity="0"> - <Bind target="{Details.qmlItem}" property="contactid" value="{model.contactid}"/> - <Bind target="{Details.qmlItem}" property="label" value="{model.label}"/> - <Bind target="{Details.qmlItem}" property="phone" value="{model.phone}"/> - <Bind target="{Details.qmlItem}" property="email" value="{model.email}"/> - </Item> - <states> - <State name='opened'> - <SetProperty target="{wrapper}" property="height" value="{contactListView.height}"/> - <SetProperty target="{contactListView}" property="yPosition" value="{wrapper.y}"/> - <SetProperty target="{contactListView}" property="locked" value="1"/> - <SetProperty target="{label}" property="opacity" value="0"/> - <SetProperty target="{Details}" property="opacity" value="1"/> - </State> - </states> - <transitions> - <Transition> - <NumericAnimation duration="500" properties="yPosition,height,opacity"/> - </Transition> - </transitions> - <Connection sender="{cancelEditButton}" signal="clicked()"> - if (wrapper.state == 'opened') { - wrapper.state = ''; - } - </Connection> - </Item> - </Component> - </resources> - <Button id="cancelEditButton" - anchors.top="{parent.top}" anchors.topMargin="5" - anchors.right="{parent.right}" anchors.rightMargin="5" - icon="../shared/pics/cancel.png"/> - <ListView id="contactListView" - anchors.left="{parent.left}" - anchors.right="{parent.right}" - anchors.top="{cancelEditButton.bottom}" - anchors.bottom="{parent.bottom}" - clip="true" - model="{contactList}" - delegate="{contactDelegate}" - focus="true"/> -</Item> diff --git a/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml deleted file mode 100644 index 583c73e..0000000 --- a/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml +++ /dev/null @@ -1,96 +0,0 @@ -<Rect id="fieldText" - height="30" - radius="5" - color="white"> - <properties> - <Property - name="text" - value="" - onValueChanged="reset()"/> - <Property - name="label" - value=""/> - </properties> - <signals> - <Signal name="confirmed"/> - </signals> - <resources> - <Script> - function edit() { - if (!contacts.mouseGrabbed) { - fieldText.state='editing'; - contacts.mouseGrabbed=true; - } - } - function confirm() { - fieldText.text = textEdit.text; - fieldText.state=''; - contacts.mouseGrabbed=false; - fieldText.confirmed.emit(); - } - function reset() { - textEdit.text = fieldText.text; - fieldText.state=''; - contacts.mouseGrabbed=false; - } - </Script> - </resources> - <Image id="cancelIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png" - opacity="0"/> - <Image id="confirmIcon" - width="22" height="22" - anchors.left="{parent.left}" anchors.leftMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png" - opacity="0"/> - <TextEdit id="textEdit" - anchors.left="{parent.left}" anchors.leftMargin="5" - anchors.right="{parent.right}" anchors.rightMargin="5" - anchors.verticalCenter="{parent.verticalCenter}" - color="black" - font.bold="true" - readOnly="true" - wrap="false" - /> - <Text id="textLabel" - x="5" width="{parent.width-10}" - anchors.verticalCenter="{parent.verticalCenter}" - hAlign="AlignHCenter" - color="#505050" - font.italic="true" - text="{fieldText.label}" - opacity="{textEdit.text != '' ? 0 : 1}"> - <opacity> - <Behaviour> - <NumericAnimation property="opacity" duration="250"/> - </Behaviour> - </opacity> - </Text> - <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/> - <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/> - <MouseRegion - id="editRegion" - anchors.fill="{textEdit}" - onClicked="edit()"/> - <states> - <State name="editing"> - <SetProperty target="{confirmIcon}" property="opacity" value="1"/> - <SetProperty target="{cancelIcon}" property="opacity" value="1"/> - <SetProperty target="{textEdit}" property="readOnly" value="false"/> - <SetProperty target="{textEdit}" property="focus" value="true"/> - <SetProperty target="{editRegion}" property="opacity" value="0"/> - <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/> - <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/> - </State> - </states> - <transitions> - <Transition fromState='' toState="*" reversible="true"> - <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/> - <ColorAnimation duration="150"/> - </Transition> - </transitions> -</Rect> diff --git a/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml b/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml index 01f26ee..665c072 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml @@ -1,17 +1,59 @@ -<Item id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}"> - <properties> - <Property name="contents"/> - <Property name="label"/> - </properties> - <Rect id="wrapper" x="5" y="10" radius="10" - width="{groupBox.width-20}" height="{groupBox.height-20}" - color="white" pen.color="black"> - <Item id="subItem" qml="{groupBox.contents}" - anchors.top="{parent.top}" anchors.topMargin="10" - anchors.right="{parent.right}" anchors.rightMargin="10" - width="{qmlItem.width}" height="{qmlItem.height}"/> - </Rect> - <Rect x="20" y="0" height="{text.height}" width="{text.width+10}" color="white"> - <Text x="5" id="text" text="{label}" font.bold="true"/> - </Rect> -</Item> +FocusRealm { + id: groupBox + width: Math.max(270, subItem.width+40) + height: Math.max(70, subItem.height+40) + properties: Property { + name: "contents" + } + properties: Property { + name: "label" + } + Rect { + id: wrapper + x: 5 + y: 10 + radius: 10 + width: groupBox.width-20 + height: groupBox.height-20 + color: "white" + pen.color: "black" + Item { + id: subItem + qml: groupBox.contents + anchors.top: parent.top + anchors.topMargin: 10 + anchors.right: parent.right + anchors.rightMargin: 10 + width: qmlItem.width + height: qmlItem.height + } + } + Rect { + x: 20 + y: 0 + height: text.height + width: text.width+10 + color: "white" + Text { + x: 5 + id: text + text: label + font.bold: true + } + } + Rect { + color: "black" + anchors.fill: parent + opacity: parent.focus ? 0 : 0.3 + MouseRegion { + anchors.fill: parent + onClicked: { parent.parent.focus=true } + } + opacity: Behaviour { + NumericAnimation { + property: "opacity" + duration: 250 + } + } + } +} diff --git a/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml deleted file mode 100644 index 493ab7a..0000000 --- a/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml +++ /dev/null @@ -1,80 +0,0 @@ -<Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"> - <properties> - <Property name="expandedWidth" value="230"/> - </properties> - <signals> - <Signal name="confirmed"/> - </signals> - <resources> - <Script> - function toggle() { - print('removeButton.toggle()'); - if (removeButton.state == 'opened') { - removeButton.state = ''; - contacts.mouseGrabbed=false; - } else { - if (!contacts.mouseGrabbed) { - removeButton.state = 'opened'; - contacts.mouseGrabbed=true; - } - } - } - </Script> - </resources> - <Image id="trashIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/trash.png" - opacity="1"> - <MouseRegion - anchors.fill="{parent}" - onClicked="toggle()"/> - </Image> - <Image id="cancelIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png" - opacity="0"> - <MouseRegion - anchors.fill="{parent}" - onClicked="toggle()"/> - </Image> - <Image id="confirmIcon" - width="22" height="22" - anchors.left="{parent.left}" anchors.leftMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png" - opacity="0"> - <MouseRegion - anchors.fill="{parent}" - onClicked="toggle(); removeButton.confirmed.emit()"/> - </Image> - <Text id="text" - anchors.verticalCenter="{parent.verticalCenter}" - anchors.left="{confirmIcon.right}" anchors.leftMargin="4" - anchors.right="{cancelIcon.left}" anchors.rightMargin="4" - font.bold="true" - color="white" - hAlign="AlignHCenter" - text="Remove" - opacity="0"/> - <states> - <State name="opened"> - <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/> - <SetProperty target="{text}" property="opacity" value="1"/> - <SetProperty target="{confirmIcon}" property="opacity" value="1"/> - <SetProperty target="{cancelIcon}" property="opacity" value="1"/> - <SetProperty target="{trashIcon}" property="opacity" value="0"/> - </State> - </states> - <transitions> - <Transition fromState="*" toState="opened" reversible="true"> - <NumericAnimation properties="opacity,x,width" duration="200"/> - </Transition> - </transitions> -</Rect> diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml new file mode 100644 index 0000000..57267f8 --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml @@ -0,0 +1,61 @@ +Item { + id: button + width: 30 + height: 30 + properties: Property { + name: "icon" + } + signals: Signal { + name: "clicked" + } + Rect { + id: buttonRect + anchors.fill: parent + color: "lightgreen" + radius: 5 + Image { + id: iconImage + source: button.icon + anchors.horizontalCenter: buttonRect.horizontalCenter + anchors.verticalCenter: buttonRect.verticalCenter + } + MouseRegion { + id: buttonMouseRegion + anchors.fill: buttonRect + onClicked: { button.clicked.emit() } + } + states: [ + State { + name: "pressed" + when: buttonMouseRegion.pressed == true + SetProperty { + target: buttonRect + property: "color" + value: "green" + } + } + ] + transitions: [ + Transition { + fromState: "*" + toState: "pressed" + ColorAnimation { + duration: 200 + } + }, + Transition { + fromState: "pressed" + toState: "*" + ColorAnimation { + duration: 1000 + } + } + ] + } + opacity: Behaviour { + NumericAnimation { + property: "opacity" + duration: 250 + } + } +} diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml new file mode 100644 index 0000000..a7e78dc --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml @@ -0,0 +1,52 @@ +Item { + id: contactDetails + anchors.fill: parent + properties: Property { + name: "contactid" + value: "" + } + properties: Property { + name: "label" + onValueChanged: { labelField.value = label } + } + properties: Property { + name: "phone" + onValueChanged: { phoneField.value = phone } + } + properties: Property { + name: "email" + onValueChanged: { emailField.value = email } + } + VerticalLayout { + id: layout + anchors.fill: parent + spacing: 5 + margin: 5 + ContactField { + id: labelField + anchors.left: layout.left + anchors.leftMargin: 5 + anchors.right: layout.right + anchors.rightMargin: 5 + label: "Name" + } + ContactField { + id: phoneField + anchors.left: layout.left + anchors.leftMargin: 5 + anchors.right: layout.right + anchors.rightMargin: 5 + icon: "../../shared/pics/phone.png" + label: "Phone" + } + ContactField { + id: emailField + anchors.left: layout.left + anchors.leftMargin: 5 + anchors.right: layout.right + anchors.rightMargin: 5 + icon: "../../shared/pics/email.png" + label: "Email" + } + } +} diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml new file mode 100644 index 0000000..0c422b7 --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml @@ -0,0 +1,64 @@ +Item { + id: contactField + clip: true + height: 30 + properties: Property { + name: "label" + } + properties: Property { + name: "icon" + } + properties: Property { + name: "value" + } + RemoveButton { + id: removeButton + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + expandedWidth: contactField.width + onConfirmed: { fieldText.text='' } + } + FieldText { + id: fieldText + width: contactField.width-70 + anchors.right: removeButton.left + anchors.rightMargin: 5 + anchors.verticalCenter: parent.verticalCenter + label: contactField.label + text: contactField.value + } + Image { + anchors.right: fieldText.left + anchors.rightMargin: 5 + anchors.verticalCenter: parent.verticalCenter + source: contactField.icon + } + states: [ + State { + name: "editingText" + when: fieldText.state == 'editing' + SetProperty { + target: removeButton.anchors + property: "rightMargin" + value: -35 + } + SetProperty { + target: fieldText + property: "width" + value: contactField.width + } + } + ] + transitions: [ + Transition { + fromState: "" + toState: "*" + reversible: true + NumericAnimation { + properties: "width,rightMargin" + duration: 200 + } + } + ] +} diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml new file mode 100644 index 0000000..8ba01da --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml @@ -0,0 +1,157 @@ +Rect { + id: fieldText + height: 30 + radius: 5 + color: "white" + properties: Property { + name: "text" + value: "" + onValueChanged: { reset() } + } + properties: Property { + name: "label" + value: "" + } + signals: Signal { + name: "confirmed" + } + resources: [ + Script { + + function edit() { + if (!contacts.mouseGrabbed) { + fieldText.state='editing'; + contacts.mouseGrabbed=true; + } + } + function confirm() { + fieldText.text = textEdit.text; + fieldText.state=''; + contacts.mouseGrabbed=false; + fieldText.confirmed.emit(); + } + function reset() { + textEdit.text = fieldText.text; + fieldText.state=''; + contacts.mouseGrabbed=false; + } + + } + ] + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/cancel.png" + opacity: 0 + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/ok.png" + opacity: 0 + } + TextEdit { + id: textEdit + anchors.left: parent.left + anchors.leftMargin: 5 + anchors.right: parent.right + anchors.rightMargin: 5 + anchors.verticalCenter: parent.verticalCenter + color: "black" + font.bold: true + readOnly: true + wrap: false + } + Text { + id: textLabel + x: 5 + width: parent.width-10 + anchors.verticalCenter: parent.verticalCenter + hAlign: "AlignHCenter" + color: "#505050" + font.italic: true + text: fieldText.label + opacity: textEdit.text == '' ? 1 : 0 + opacity: Behaviour { + NumericAnimation { + property: "opacity" + duration: 250 + } + } + } + MouseRegion { + anchors.fill: cancelIcon + onClicked: { reset() } + } + MouseRegion { + anchors.fill: confirmIcon + onClicked: { confirm() } + } + MouseRegion { + id: editRegion + anchors.fill: textEdit + onClicked: { edit() } + } + states: [ + State { + name: "editing" + SetProperty { + target: confirmIcon + property: "opacity" + value: 1 + } + SetProperty { + target: cancelIcon + property: "opacity" + value: 1 + } + SetProperty { + target: textEdit + property: "readOnly" + value: false + } + SetProperty { + target: textEdit + property: "focus" + value: true + } + SetProperty { + target: editRegion + property: "opacity" + value: 0 + } + SetProperty { + target: textEdit.anchors + property: "leftMargin" + value: 39 + } + SetProperty { + target: textEdit.anchors + property: "rightMargin" + value: 39 + } + } + ] + transitions: [ + Transition { + fromState: "" + toState: "*" + reversible: true + NumericAnimation { + properties: "opacity,leftMargin,rightMargin" + duration: 200 + } + ColorAnimation { + duration: 150 + } + } + ] +} diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml new file mode 100644 index 0000000..0b90e48 --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml @@ -0,0 +1,126 @@ +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + properties: Property { + name: "expandedWidth" + value: 230 + } + signals: Signal { + name: "confirmed" + } + resources: [ + Script { + function toggle() { + if (removeButton.state == 'opened') { + removeButton.state = ''; + contacts.mouseGrabbed=false; + } else { + if (!contacts.mouseGrabbed) { + removeButton.state = 'opened'; + contacts.mouseGrabbed=true; + } + } + } + + } + ] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/trash.png" + opacity: 1 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/cancel.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/ok.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle(); removeButton.confirmed.emit() } + } + } + Text { + id: text + anchors.verticalCenter: parent.verticalCenter + anchors.left: confirmIcon.right + anchors.leftMargin: 4 + anchors.right: cancelIcon.left + anchors.rightMargin: 4 + font.bold: true + color: "white" + hAlign: "AlignHCenter" + text: "Remove" + opacity: 0 + } + states: [ + State { + name: "opened" + SetProperty { + target: removeButton + property: "width" + value: removeButton.expandedWidth + } + SetProperty { + target: text + property: "opacity" + value: 1 + } + SetProperty { + target: confirmIcon + property: "opacity" + value: 1 + } + SetProperty { + target: cancelIcon + property: "opacity" + value: 1 + } + SetProperty { + target: trashIcon + property: "opacity" + value: 0 + } + } + ] + transitions: [ + Transition { + fromState: "*" + toState: "opened" + reversible: true + NumericAnimation { + properties: "opacity,x,width" + duration: 200 + } + } + ] +} diff --git a/examples/declarative/tutorials/contacts/Final/Button.qml b/examples/declarative/tutorials/contacts/Final/Button.qml index 8290d35..14965b5 100644 --- a/examples/declarative/tutorials/contacts/Final/Button.qml +++ b/examples/declarative/tutorials/contacts/Final/Button.qml @@ -10,7 +10,7 @@ color="lightgreen" radius="5"> <Image id="iconImage" - src="{button.icon}" + source="{button.icon}" anchors.horizontalCenter="{buttonRect.horizontalCenter}" anchors.verticalCenter="{buttonRect.verticalCenter}"/> <MouseRegion id="buttonMouseRegion" diff --git a/examples/declarative/tutorials/contacts/Final/ContactField.qml b/examples/declarative/tutorials/contacts/Final/ContactField.qml index fe9329a..80ffd30 100644 --- a/examples/declarative/tutorials/contacts/Final/ContactField.qml +++ b/examples/declarative/tutorials/contacts/Final/ContactField.qml @@ -21,7 +21,7 @@ <Image anchors.right="{fieldText.left}" anchors.rightMargin="5" anchors.verticalCenter="{parent.verticalCenter}" - src="{contactField.icon}"/> + source="{contactField.icon}"/> <states> <State name="editingText" when="{fieldText.state == 'editing'}"> <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/> diff --git a/examples/declarative/tutorials/contacts/Final/FieldText.qml b/examples/declarative/tutorials/contacts/Final/FieldText.qml index a82cecd..ad7669d 100644 --- a/examples/declarative/tutorials/contacts/Final/FieldText.qml +++ b/examples/declarative/tutorials/contacts/Final/FieldText.qml @@ -39,13 +39,13 @@ width="22" height="22" anchors.right="{parent.right}" anchors.rightMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png" + source="../shared/pics/cancel.png" opacity="0"/> <Image id="confirmIcon" width="22" height="22" anchors.left="{parent.left}" anchors.leftMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png" + source="../shared/pics/ok.png" opacity="0"/> <TextEdit id="textEdit" anchors.left="{parent.left}" anchors.leftMargin="0" @@ -63,7 +63,7 @@ color="#505050" font.italic="true" text="{fieldText.label}" - opacity="{textEdit.text != '' ? 0 : 1}"> + opacity="{textEdit.text == '' ? 1 : 0}"> <opacity> <Behaviour> <NumericAnimation property="opacity" duration="250"/> diff --git a/examples/declarative/tutorials/contacts/Final/RemoveButton.qml b/examples/declarative/tutorials/contacts/Final/RemoveButton.qml index 493ab7a..b096bca 100644 --- a/examples/declarative/tutorials/contacts/Final/RemoveButton.qml +++ b/examples/declarative/tutorials/contacts/Final/RemoveButton.qml @@ -28,7 +28,7 @@ width="22" height="22" anchors.right="{parent.right}" anchors.rightMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/trash.png" + source="../shared/pics/trash.png" opacity="1"> <MouseRegion anchors.fill="{parent}" @@ -38,7 +38,7 @@ width="22" height="22" anchors.right="{parent.right}" anchors.rightMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png" + source="../shared/pics/cancel.png" opacity="0"> <MouseRegion anchors.fill="{parent}" @@ -48,7 +48,7 @@ width="22" height="22" anchors.left="{parent.left}" anchors.leftMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png" + source="../shared/pics/ok.png" opacity="0"> <MouseRegion anchors.fill="{parent}" diff --git a/examples/declarative/tutorials/contacts/Final/SearchBar.qml b/examples/declarative/tutorials/contacts/Final/SearchBar.qml index aea5a5d..3965e39 100644 --- a/examples/declarative/tutorials/contacts/Final/SearchBar.qml +++ b/examples/declarative/tutorials/contacts/Final/SearchBar.qml @@ -6,7 +6,7 @@ <Image id="searchIcon" anchors.left="{parent.left}" anchors.leftMargin="5" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/search.png"/> + source="../shared/pics/search.png"/> <TextEdit id="searchEdit" anchors.left="{searchIcon.right}" anchors.right="{parent.right}" anchors.leftMargin="5" anchors.rightMargin="5" diff --git a/examples/declarative/tutorials/contacts/shared/contacts.sqlite b/examples/declarative/tutorials/contacts/shared/contacts.sqlite Binary files differindex 7347adc..6918878 100644 --- a/examples/declarative/tutorials/contacts/shared/contacts.sqlite +++ b/examples/declarative/tutorials/contacts/shared/contacts.sqlite diff --git a/examples/declarative/velocity/Day.qml b/examples/declarative/velocity/Day.qml index 3441648..b65f2bc 100644 --- a/examples/declarative/velocity/Day.qml +++ b/examples/declarative/velocity/Day.qml @@ -4,7 +4,7 @@ <Property name="stickies" /> </properties> - <Image x="10" y="10" src="cork.jpg" opaque="true"/> + <Image x="10" y="10" source="cork.jpg" opaque="true"/> <Text x="20" y="20" height="40" font.size="14" font.bold="true" width="370" text="{day}" style="Outline" styleColor="#dedede"/> <Repeater dataSource="{Page.stickies}"> @@ -13,13 +13,13 @@ <Follow source="{-Flick.xVelocity / 100}" spring="2.0" damping="0.1"/> </rotation> <Item id="Sticky" scale="0.5"> - <Image id="StickyImage" src="sticky.png" smooth="true" y="-20" x="{8 + -width * 0.6 / 2}" scale="0.6" /> + <Image id="StickyImage" source="sticky.png" smooth="true" y="-20" x="{8 + -width * 0.6 / 2}" scale="0.6" /> <TextEdit id="MyText" smooth="true" font.size="28" readOnly="false" x="-104" y="36" wrap="true" rotation="-8" text="{noteText}" width="195" height="172" /> <Item y="-20" x="{StickyImage.x}" width="{StickyImage.width * StickyImage.scale}" height="{StickyImage.height * StickyImage.scale}" > <MouseRegion id="Mouse" onClicked="MyText.focus = true" anchors.fill="{parent}" drag.target="{StickyPage}" drag.axis="xy" drag.ymin="0" drag.ymax="500" drag.xmin="0" drag.xmax="400"/> </Item> </Item> - <Image src="tack.png" x="{-width / 2}" y="{-height * 0.7 / 2}" scale="0.7" /> + <Image source="tack.png" x="{-width / 2}" y="{-height * 0.7 / 2}" scale="0.7" /> <states> <State name="pressed" when="{Mouse.pressed}"> diff --git a/examples/declarative/webview/autosize.qml b/examples/declarative/webview/autosize.qml index fedd497..c32b752 100644 --- a/examples/declarative/webview/autosize.qml +++ b/examples/declarative/webview/autosize.qml @@ -1,42 +1,59 @@ -<!-- The WebView size is determined by the width, height, - idealWidth, and idealHeight properties. --> -<Rect id="Rect" color="white" width="200" height="{Layout.height}"> - <VerticalLayout id="Layout" spacing="2"> - <WebView> - <html><![CDATA[ - No width defined. - ]]></html> - <Rect color="#10000000" anchors.fill="{parent}"/> - </WebView> - <WebView width="{Rect.width}"> - <html><![CDATA[ - The width is full. - ]]></html> - <Rect color="#10000000" anchors.fill="{parent}"/> - </WebView> - <WebView width="{Rect.width/2}"> - <html><![CDATA[ - The width is half. - ]]></html> - <Rect color="#10000000" anchors.fill="{parent}"/> - </WebView> - <WebView idealWidth="{Rect.width/2}"> - <html><![CDATA[ - The idealWidth is half. - ]]></html> - <Rect color="#10000000" anchors.fill="{parent}"/> - </WebView> - <WebView idealWidth="{Rect.width/2}"> - <html><![CDATA[ - The_idealWidth_is_half. - ]]></html> - <Rect color="#10000000" anchors.fill="{parent}"/> - </WebView> - <WebView width="{Rect.width/2}"> - <html><![CDATA[ - The_width_is_half. - ]]></html> - <Rect color="#10000000" anchors.fill="{parent}"/> - </WebView> - </VerticalLayout> -</Rect> +// The WebView size is determined by the width, height, +// idealWidth, and idealHeight properties. +Rect { + id: Rect + color: "white" + width: 200 + height: Layout.height + VerticalLayout { + id: Layout + spacing: 2 + WebView { + html: "No width defined." + Rect { + color: "#10000000" + anchors.fill: parent + } + } + WebView { + width: Rect.width + html: "The width is full." + Rect { + color: "#10000000" + anchors.fill: parent + } + } + WebView { + width: Rect.width/2 + html: "The width is half." + Rect { + color: "#10000000" + anchors.fill: parent + } + } + WebView { + idealWidth: Rect.width/2 + html: "The idealWidth is half." + Rect { + color: "#10000000" + anchors.fill: parent + } + } + WebView { + idealWidth: Rect.width/2 + html: "The_idealWidth_is_half." + Rect { + color: "#10000000" + anchors.fill: parent + } + } + WebView { + width: Rect.width/2 + html: "The_width_is_half." + Rect { + color: "#10000000" + anchors.fill: parent + } + } + } +} diff --git a/examples/declarative/webview/content/SpinSquare.qml b/examples/declarative/webview/content/SpinSquare.qml index ced45d5..5c14506 100644 --- a/examples/declarative/webview/content/SpinSquare.qml +++ b/examples/declarative/webview/content/SpinSquare.qml @@ -1,12 +1,29 @@ -<Item id="Root"> - <properties> - <Property name="period" value="250"/> - <Property name="color" value="black"/> - </properties> - <Item x="{Root.width/2}" y="{Root.height/2}"> - <Rect color="{Root.color}" width="{Root.width}" height="{width}" x="{-width/2}" y="{-height/2}"/> - <rotation> - <NumericAnimation from="0" to="360" repeat="true" running="true" duration="{Root.period}"/> - </rotation> - </Item> -</Item> +Item { + id: Root + properties: Property { + name: "period" + value: 250 + } + properties: Property { + name: "color" + value: "black" + } + Item { + x: Root.width/2 + y: Root.height/2 + Rect { + color: Root.color + x: -width/2 + y: -height/2 + width: Root.width + height: width + } + rotation: NumericAnimation { + from: 0 + to: 360 + repeat: true + running: true + duration: Root.period + } + } +} diff --git a/examples/declarative/webview/inline-html.qml b/examples/declarative/webview/inline-html.qml index 701db41..5f6d410 100644 --- a/examples/declarative/webview/inline-html.qml +++ b/examples/declarative/webview/inline-html.qml @@ -1,13 +1,12 @@ -<!-- Inline HTML with loose formatting can be - set on the html property by using CDATA. --> -<WebView> - <html><![CDATA[ - <body bgcolor="white"> - <table border=1> - <tr><th><th>One<th>Two<th>Three - <tr><th>1<td>X<td>1<td>X - <tr><th>2<td>0<td>X<td>0 - <tr><th>3<td>X<td>1<td>X - </table> - ]]></html> -</WebView> +// Inline HTML with loose formatting can be +// set on the html property. +WebView { + html:"\ + <body bgcolor=white>\ + <table border=1>\ + <tr><th><th>One<th>Two<th>Three\ + <tr><th>1<td>X<td>1<td>X\ + <tr><th>2<td>0<td>X<td>0\ + <tr><th>3<td>X<td>1<td>X\ + </table>" +} diff --git a/examples/declarative/webview/inline-xhtml.qml b/examples/declarative/webview/inline-xhtml.qml deleted file mode 100644 index 4acb417..0000000 --- a/examples/declarative/webview/inline-xhtml.qml +++ /dev/null @@ -1,14 +0,0 @@ -<!-- Inline xHTML (with strict XML formatting) can be - set on the html property by giving it the appropriate namespace. --> -<WebView> - <html xmlns="http://www.w3.org/1999/xhtml"> - <body bgcolor="white"> - <table border="1"> - <tr><th></th><th>One</th><th>Two</th><th>Three</th></tr> - <tr><th>1</th><td>X</td><td>1</td><td>X</td></tr> - <tr><th>2</th><td>0</td><td>X</td><td>0</td></tr> - <tr><th>3</th><td>X</td><td>1</td><td>X</td></tr> - </table> - </body> - </html> -</WebView> diff --git a/examples/declarative/webview/qml-in-html.qml b/examples/declarative/webview/qml-in-html.qml index 8c1c06f..29dded5 100644 --- a/examples/declarative/webview/qml-in-html.qml +++ b/examples/declarative/webview/qml-in-html.qml @@ -1,20 +1,30 @@ -<!-- The WebView supports QML data through the HTML OBJECT tag --> -<Flickable width="{250*.75}" height="240" - viewportWidth="{Web.width*Web.scale}" viewportHeight="{Web.height*Web.scale}"> -<WebView id="Web" width="250" height="420" scale="0.75" settings.pluginsEnabled="true"> - <html><![CDATA[ - <html> - <body bgcolor=white> - These are QML plugins, shown in a QML WebView via HTML OBJECT tags, all scaled to 75% - and placed in a Flickable area... - <table border=1> - <tr><th>Duration <th>Color <th>Plugin - <tr><td>500 <td>red <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=500 color=red /> - <tr><td>2000 <td>blue <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=2000 color=blue /> - <tr><td>1000 <td>green <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=1000 color=green /> - </table> - </body> - </html> - ]]></html> -</WebView> -</Flickable> +// The WebView supports QML data through the HTML OBJECT tag +Rect { + color:"blue" + Flickable { + width: parent.width + height: parent.height/2 + viewportWidth: Web.width*Web.scale + viewportHeight: Web.height*Web.scale + WebView { + id: Web + width: 250 + height: 420 + scale: 0.75 + smooth: true + settings.pluginsEnabled: true + html: "<html>\ + <body bgcolor=white>\ + These are QML plugins, shown in a QML WebView via HTML OBJECT tags, all scaled to 75%\ + and placed in a Flickable area...\ + <table border=1>\ + <tr><th>Duration <th>Color <th>Plugin\ + <tr><td>500 <td>red <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=500 color=red />\ + <tr><td>2000 <td>blue <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=2000 color=blue />\ + <tr><td>1000 <td>green <td><OBJECT data=content/SpinSquare.qml TYPE=application/x-qt-plugin width=100 height=100 period=1000 color=green />\ + </table>\ + </body>\ + </html>" + } + } +} diff --git a/examples/declarative/webview/transparent.qml b/examples/declarative/webview/transparent.qml index 71e1621..8614822 100644 --- a/examples/declarative/webview/transparent.qml +++ b/examples/declarative/webview/transparent.qml @@ -1,6 +1,11 @@ -<!-- The WebView background is transparent - if the HTML does not specify a background --> - -<Rect color="green" width="{Web.width}" height="{Web.height}"> - <WebView id="Web" html="Hello <b>World!</b>"/> -</Rect> +// The WebView background is transparent +// if the HTML does not specify a background +Rect { + color: "green" + width: Web.width + height: Web.height + WebView { + id: Web + html: "Hello <b>World!</b>" + } +} diff --git a/examples/declarative/xmldata/daringfireball.qml b/examples/declarative/xmldata/daringfireball.qml index cfd0a98..5e98d1b 100644 --- a/examples/declarative/xmldata/daringfireball.qml +++ b/examples/declarative/xmldata/daringfireball.qml @@ -1,6 +1,6 @@ <Rect color="white" width="600" height="600"> <resources> - <XmlListModel id="feedModel" src="http://daringfireball.net/index.xml" + <XmlListModel id="feedModel" source="http://daringfireball.net/index.xml" query="doc($src)/feed/entry"> <namespaceDeclarations> declare default element namespace 'http://www.w3.org/2005/Atom'; diff --git a/examples/declarative/xmldata/yahoonews.qml b/examples/declarative/xmldata/yahoonews.qml index 80ace18..32a706e 100644 --- a/examples/declarative/xmldata/yahoonews.qml +++ b/examples/declarative/xmldata/yahoonews.qml @@ -1,6 +1,6 @@ <Rect color="black" gradientColor="#AAAAAA" width="600" height="600"> <resources> - <XmlListModel id="feedModel" src="http://rss.news.yahoo.com/rss/oceania" query="doc($src)/rss/channel/item"> + <XmlListModel id="feedModel" source="http://rss.news.yahoo.com/rss/oceania" query="doc($src)/rss/channel/item"> <Role name="title" query="title/string()"/> <Role name="link" query="link/string()"/> <Role name="description" query="description/string()" isCData="true"/> |
