diff options
| author | Martin Jones <martin.jones@nokia.com> | 2009-04-30 07:09:47 (GMT) |
|---|---|---|
| committer | Martin Jones <martin.jones@nokia.com> | 2009-04-30 07:09:47 (GMT) |
| commit | 3b79fb99c9fdf4f80fa0ca2168f421b3489aebc8 (patch) | |
| tree | 5fd9c2ce72b1bae898ca37843069c3746e4172dd /examples | |
| parent | c50f26a26f1e7ac22bd3ff08fe24a927c57e127b (diff) | |
| parent | 0e664dabc5b7325634e54d120eb374940497ca0f (diff) | |
| download | Qt-3b79fb99c9fdf4f80fa0ca2168f421b3489aebc8.zip Qt-3b79fb99c9fdf4f80fa0ca2168f421b3489aebc8.tar.gz Qt-3b79fb99c9fdf4f80fa0ca2168f421b3489aebc8.tar.bz2 | |
Merge branch 'kinetic-declarativeui' of git@scm.dev.nokia.troll.no:qt/kinetic into kinetic-declarativeui
Conflicts:
src/declarative/fx/qfxpathview.cpp
Diffstat (limited to 'examples')
32 files changed, 1262 insertions, 891 deletions
diff --git a/examples/declarative/contacts/dummydata/contactModel.qml b/examples/declarative/contacts/dummydata/contactModel.qml index 341b7a6..48b2fd9 100644 --- a/examples/declarative/contacts/dummydata/contactModel.qml +++ b/examples/declarative/contacts/dummydata/contactModel.qml @@ -1,103 +1,103 @@ -<ListModel> - <Contact> - <firstName>Aaron</firstName> - <lastName>Kennedy</lastName> - <portrait>contact.png</portrait> - <emails> - <Email address="akennedy@trolltech.com"/> - <Email address="aaron.kennedy@trolltech.com"/> - </emails> - </Contact> - <Contact> - <firstName>Contact</firstName> - <lastName>1</lastName> - <portrait>contact.png</portrait> - </Contact> - <Contact> - <firstName>Contact</firstName> - <lastName>2</lastName> - <portrait>contact.png</portrait> - </Contact> - <Contact> - <firstName>Contact</firstName> - <lastName>3</lastName> - <portrait>contact.png</portrait> - </Contact> - <Contact> - <firstName>Contact</firstName> - <lastName>4</lastName> - <portrait>contact.png</portrait> - </Contact> - <Contact> - <firstName>Contact</firstName> - <lastName>5</lastName> - <portrait>contact.png</portrait> - </Contact> - <Contact> - <firstName>Contact</firstName> - <lastName>6</lastName> - <portrait>contact.png</portrait> - </Contact> - <Contact> - <firstName>Contact</firstName> - <lastName>7</lastName> - <portrait>contact.png</portrait> - </Contact> - <Contact> - <firstName>Contact</firstName> - <lastName>8</lastName> - <portrait>contact.png</portrait> - </Contact> - <Contact> - <firstName>Contact</firstName> - <lastName>9</lastName> - <portrait>contact.png</portrait> - </Contact> - <Contact> - <firstName>Alan</firstName> - <lastName>Alpert</lastName> - <portrait>contact.png</portrait> - </Contact> - <Contact> - <firstName>Betty</firstName> - <lastName>Boo</lastName> - <portrait>contact.png</portrait> - </Contact> - <Contact> - <firstName>Foo</firstName> - <lastName>Bar</lastName> - <portrait>contact.png</portrait> - </Contact> - <Contact> - <firstName>Marius</firstName> - <lastName>Bugge Monsen</lastName> - <portrait>contact.png</portrait> - </Contact> - <Contact> - <firstName>Martin</firstName> - <lastName>Jones</lastName> - <portrait>contact.png</portrait> - <emails> - <Email address="mjones@trolltech.com"/> - <Email address="martin.jones@trolltech.com"/> - </emails> - </Contact> - <Contact> - <firstName>Michael</firstName> - <lastName>Brasser</lastName> - <portrait>contact.png</portrait> - <emails> - <Email address="mbrasser@trolltech.com"/> - </emails> - </Contact> - <Contact> - <firstName>Yann</firstName> - <lastName>Bodson</lastName> - <portrait>contact.png</portrait> - </Contact> - <Contact> - <firstName>Yogi</firstName> - <lastName>Bear</lastName> - <portrait>contact.png</portrait> - </Contact> -</ListModel> +ListModel2 { + ListElement { + firstName: "Aaron" + lastName: "Kennedy" + portrait: "contact.png" + emails: [ + ListElement { address: "akennedy@trolltech.com" }, + ListElement { address: "aaron.kennedy@trolltech.com" } + ] + } + ListElement { + firstName: "ListElement" + lastName: 1 + portrait: "contact.png" + } + ListElement { + firstName: "ListElement" + lastName: 2 + portrait: "contact.png" + } + ListElement { + firstName: "ListElement" + lastName: 3 + portrait: "contact.png" + } + ListElement { + firstName: "ListElement" + lastName: 4 + portrait: "contact.png" + } + ListElement { + firstName: "ListElement" + lastName: 5 + portrait: "contact.png" + } + ListElement { + firstName: "ListElement" + lastName: 6 + portrait: "contact.png" + } + ListElement { + firstName: "ListElement" + lastName: 7 + portrait: "contact.png" + } + ListElement { + firstName: "ListElement" + lastName: 8 + portrait: "contact.png" + } + ListElement { + firstName: "ListElement" + lastName: 9 + portrait: "contact.png" + } + ListElement { + firstName: "Alan" + lastName: "Alpert" + portrait: "contact.png" + } + ListElement { + firstName: "Betty" + lastName: "Boo" + portrait: "contact.png" + } + ListElement { + firstName: "Foo" + lastName: "Bar" + portrait: "contact.png" + } + ListElement { + firstName: "Marius" + lastName: "Bugge Monsen" + portrait: "contact.png" + } + ListElement { + firstName: "Martin" + lastName: "Jones" + portrait: "contact.png" + emails: [ + ListElement { address: "mjones@trolltech.com" }, + ListElement { address: "martin.jones@trolltech.com" } + ] + } + ListElement { + firstName: "Michael" + lastName: "Brasser" + portrait: "contact.png" + emails: ListElement { + address: "mbrasser@trolltech.com" + } + } + ListElement { + firstName: "Yann" + lastName: "Bodson" + portrait: "contact.png" + } + ListElement { + firstName: "Yogi" + lastName: "Bear" + portrait: "contact.png" + } +} diff --git a/examples/declarative/easing/easing.qml b/examples/declarative/easing/easing.qml index f95d8c6..32c1b9b 100644 --- a/examples/declarative/easing/easing.qml +++ b/examples/declarative/easing/easing.qml @@ -1,67 +1,92 @@ -<Rect id="Window" width="640" height="{Layout.height}" color="white"> +Rect { + id: Window + width: 640 + height: Layout.height + color: "white" - <resources> - <ListModel id="EasingTypes"> - <ListItem><type>easeLinear</type></ListItem> - <ListItem><type>easeInQuad</type></ListItem> - <ListItem><type>easeOutQuad</type></ListItem> - <ListItem><type>easeInOutQuad</type></ListItem> - <ListItem><type>easeOutInQuad</type></ListItem> - <ListItem><type>easeInCubic</type></ListItem> - <ListItem><type>easeOutCubic</type></ListItem> - <ListItem><type>easeInOutCubic</type></ListItem> - <ListItem><type>easeOutInCubic</type></ListItem> - <ListItem><type>easeInQuart</type></ListItem> - <ListItem><type>easeOutQuart</type></ListItem> - <ListItem><type>easeInOutQuart</type></ListItem> - <ListItem><type>easeOutInQuart</type></ListItem> - <ListItem><type>easeInQuint</type></ListItem> - <ListItem><type>easeOutQuint</type></ListItem> - <ListItem><type>easeInOutQuint</type></ListItem> - <ListItem><type>easeOutInQuint</type></ListItem> - <ListItem><type>easeInSine</type></ListItem> - <ListItem><type>easeOutSine</type></ListItem> - <ListItem><type>easeInOutSine</type></ListItem> - <ListItem><type>easeOutInSine</type></ListItem> - <ListItem><type>easeInExpo</type></ListItem> - <ListItem><type>easeOutExpo</type></ListItem> - <ListItem><type>easeInOutExpo</type></ListItem> - <ListItem><type>easeOutInExpo</type></ListItem> - <ListItem><type>easeInCirc</type></ListItem> - <ListItem><type>easeOutCirc</type></ListItem> - <ListItem><type>easeInOutCirc</type></ListItem> - <ListItem><type>easeOutInCirc</type></ListItem> - <ListItem><type>easeInElastic</type></ListItem> - <ListItem><type>easeOutElastic</type></ListItem> - <ListItem><type>easeInOutElastic</type></ListItem> - <ListItem><type>easeOutInElastic</type></ListItem> - <ListItem><type>easeInBack</type></ListItem> - <ListItem><type>easeOutBack</type></ListItem> - <ListItem><type>easeInOutBack</type></ListItem> - <ListItem><type>easeOutInBack</type></ListItem> - <ListItem><type>easeOutBounce</type></ListItem> - <ListItem><type>easeInBounce</type></ListItem> - <ListItem><type>easeInOutBounce</type></ListItem> - <ListItem><type>easeOutInBounce</type></ListItem> - </ListModel> - </resources> - - <VerticalLayout id="Layout" anchors.left="{Window.left}" anchors.right="{Window.right}"> - <Repeater dataSource="{EasingTypes}"> - <Component> - <Text id="Text" text="{type}" height="18" font.italic="true"> - <x> - <SequentialAnimation id="Anim"> - <NumericAnimation from="0" to="{Window.width / 2}" easing="{type}" duration="1000"/> - <PauseAnimation duration="300"/> - <NumericAnimation to="0" from="{Window.width / 2}" easing="{type}" duration="1000"/> - </SequentialAnimation> - </x> - <children> - <MouseRegion onClicked="Anim.running=true" anchors.fill="{parent}"/> - </children> - </Text> - </Component> - </Repeater> - </VerticalLayout> -</Rect> + ListModel2 { + id: EasingTypes + ListElement { type: "easeLinear" } + ListElement { type: "easeInQuad" } + ListElement { type: "easeOutQuad" } + ListElement { type: "easeInOutQuad" } + ListElement { type: "easeOutInQuad" } + ListElement { type: "easeInCubic" } + ListElement { type: "easeOutCubic" } + ListElement { type: "easeInOutCubic" } + ListElement { type: "easeOutInCubic" } + ListElement { type: "easeInQuart" } + ListElement { type: "easeOutQuart" } + ListElement { type: "easeInOutQuart" } + ListElement { type: "easeOutInQuart" } + ListElement { type: "easeInQuint" } + ListElement { type: "easeOutQuint" } + ListElement { type: "easeInOutQuint" } + ListElement { type: "easeOutInQuint" } + ListElement { type: "easeInSine" } + ListElement { type: "easeOutSine" } + ListElement { type: "easeInOutSine" } + ListElement { type: "easeOutInSine" } + ListElement { type: "easeInExpo" } + ListElement { type: "easeOutExpo" } + ListElement { type: "easeInOutExpo" } + ListElement { type: "easeOutInExpo" } + ListElement { type: "easeInCirc" } + ListElement { type: "easeOutCirc" } + ListElement { type: "easeInOutCirc" } + ListElement { type: "easeOutInCirc" } + ListElement { type: "easeInElastic" } + ListElement { type: "easeOutElastic" } + ListElement { type: "easeInOutElastic" } + ListElement { type: "easeOutInElastic" } + ListElement { type: "easeInBack" } + ListElement { type: "easeOutBack" } + ListElement { type: "easeInOutBack" } + ListElement { type: "easeOutInBack" } + ListElement { type: "easeOutBounce" } + ListElement { type: "easeInBounce" } + ListElement { type: "easeInOutBounce" } + ListElement { type: "easeOutInBounce" } + } + + VerticalLayout { + id: Layout + anchors.left: Window.left + anchors.right: Window.right + Repeater { + dataSource: EasingTypes + Component { + Text { + id: Text + text: type + height: 18 + font.italic: true + x: SequentialAnimation { + id: Anim + NumericAnimation { + from: 0 + to: Window.width / 2 + easing: type + duration: 1000 + } + PauseAnimation { + duration: 300 + } + NumericAnimation { + to: 0 + from: Window.width / 2 + easing: type + duration: 1000 + } + } + children: [ + MouseRegion { + onClicked: { Anim.running=true } + anchors.fill: parent + } + ] + } + } + } + } +} 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 6c672ea..bb2510a 100644 --- a/examples/declarative/listview/content/MediaButton.qml +++ b/examples/declarative/listview/content/MediaButton.qml @@ -1,21 +1,40 @@ -<Item id="Container"> - <signals> - <Signal name="clicked"/> - </signals> - - <properties> - <Property name="text"/> - </properties> - - <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> - - <states> - <State name="Pressed" when="{MouseRegion.pressed == true}"> - <SetProperties target="{Pressed}" opacity="1"/> - </State> - </states> -</Item> +Item { + id: Container + signals: Signal { + name: "clicked" + } + properties: Property { + name: "text" + } + 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 + states: [ + State { + name: "Pressed" + when: MouseRegion.pressed == true + SetProperties { + target: Pressed + opacity: 1 + } + } + ] +} diff --git a/examples/declarative/listview/dummydata/MyPetsModel.qml b/examples/declarative/listview/dummydata/MyPetsModel.qml index e1617a3..1c96b7f 100644 --- a/examples/declarative/listview/dummydata/MyPetsModel.qml +++ b/examples/declarative/listview/dummydata/MyPetsModel.qml @@ -1,60 +1,59 @@ -<!-- -ListModel allows free form list models to be defined and populated. -Be sure to name the file the same as the id. ---> -<ListModel id="MyPetsModel"> - <Pet> - <name>Polly</name> - <type>Parrot</type> - <age>12</age> - <size>Small</size> - </Pet> - <Pet> - <name>Penny</name> - <type>Turtle</type> - <age>4</age> - <size>Small</size> - </Pet> - <Pet> - <name>Warren</name> - <type>Rabbit</type> - <age>2</age> - <size>Small</size> - </Pet> - <Pet> - <name>Spot</name> - <type>Dog</type> - <age>9</age> - <size>Medium</size> - </Pet> - <Pet> - <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> +// ListModel allows free form list models to be defined and populated. +// Be sure to name the file the same as the id. +ListModel2 { + id: MyListElementsModel + ListElement { + name: "Polly" + type: "Parrot" + age: 12 + size: "Small" + } + ListElement { + name: "Penny" + type: "Turtle" + age: 4 + size: "Small" + } + ListElement { + name: "Warren" + type: "Rabbit" + age: 2 + size: "Small" + } + ListElement { + name: "Spot" + type: "Dog" + age: 9 + size: "Medium" + } + ListElement { + name: "Whiskers" + type: "Cat" + age: 2 + size: "Medium" + } + ListElement { + name: "Joey" + type: "Kangaroo" + age: 1 + size: "Medium" + } + ListElement { + name: "Kimba" + type: "Bunny" + age: 65 + size: "Large" + } + ListElement { + name: "Rover" + type: "Dog" + age: 5 + size: "Large" + } + ListElement { + name: "Tiny" + type: "Elephant" + age: 15 + size: "Large" + } +} diff --git a/examples/declarative/listview/dummydata/Recipies.qml b/examples/declarative/listview/dummydata/Recipies.qml index 49bc610..6b20409 100644 --- a/examples/declarative/listview/dummydata/Recipies.qml +++ b/examples/declarative/listview/dummydata/Recipies.qml @@ -1,112 +1,87 @@ -<ListModel id="Recipies"> - <Recipe title="Pancakes" picture="content/pics/pancakes.jpg"> - <ingredients> - <![CDATA[ - <html> - <ul> - <li> 1 cup (150g) self-raising flour - <li> 1 tbs caster sugar - <li> 3/4 cup (185ml) milk - <li> 1 egg - </ul> - </html> - ]]> - </ingredients> - <method> - <![CDATA[ - <html> - <ol> - <li> Sift flour and sugar together into a bowl. Add a pinch of salt. - <li> Beat milk and egg together, then add to dry ingredients. Beat until smooth. - <li> Pour mixture into a pan on medium heat and cook until bubbles appear on the surface. - <li> Turn over and cook other side until golden. - </ol> - ]]> - </method> - </Recipe> - <Recipe title="Fruit Salad" picture="content/pics/fruit-salad.jpg"> - <ingredients> - * Seasonal Fruit - </ingredients> - <method> - * Chop fruit and place in a bowl. - </method> - </Recipe> - <Recipe title="Vegetable Soup" picture="content/pics/vegetable-soup.jpg"> - <ingredients> - <![CDATA[ - <html> - <ul> - <li> 1 onion - <li> 1 turnip - <li> 1 potato - <li> 1 carrot - <li> 1 head of celery - <li> 1 1/2 litres of water - </ul> - </html> - ]]> - </ingredients> - <method> - <![CDATA[ - <html> - <ol> - <li> Chop vegetables. - <li> Boil in water until vegetables soften. - <li> Season with salt and pepper to taste. - </ol> - </html> - ]]> - </method> - </Recipe> - <Recipe title="Hamburger" picture="content/pics/hamburger.jpg"> - <ingredients> - <![CDATA[ - <html> - <ul> - <li> 500g minced beef - <li> Seasoning - <li> lettuce, tomato, onion, cheese - <li> 1 hamburger bun for each burger - </ul> - </html> - ]]> - </ingredients> - <method> - <![CDATA[ - <html> - <ol> - <li> Mix the beef, together with seasoning, in a food processor. - <li> Shape the beef into burgers. - <li> Grill the burgers for about 5 mins on each side (until cooked through) - <li> Serve each burger on a bun with ketchup, cheese, lettuce, tomato and onion. - </ol> - </html> - ]]> - </method> - </Recipe> - <Recipe title="Lemonade" picture="content/pics/lemonade.jpg"> - <ingredients> - <![CDATA[ - <html> - <ul> - <li> 1 cup Lemon Juice - <li> 1 cup Sugar - <li> 6 Cups of Water (2 cups warm water, 4 cups cold water) - </ul> - </html> - ]]> - </ingredients> - <method> - <![CDATA[ - <html> - <ol> - <li> Pour 2 cups of warm water into a pitcher and stir in sugar until it dissolves. - <li> Pour in lemon juice, stir again, and add 4 cups of cold water. - <li> Chill or serve over ice cubes. - </ol> - </html> - ]]> - </method> - </Recipe> -</ListModel> +ListModel2 { + id: Recipies + ListElement { + title: "Pancakes" + picture: "content/pics/pancakes.jpg" + ingredients: "<html> \ + <ul> \ + <li> 1 cup (150g) self-raising flour \ + <li> 1 tbs caster sugar \ + <li> 3/4 cup (185ml) milk \ + <li> 1 egg \ + </ul> \ + </html>" + method: "<html> \ + <ol> \ + <li> Sift flour and sugar together into a bowl. Add a pinch of salt. \ + <li> Beat milk and egg together, then add to dry ingredients. Beat until smooth. \ + <li> Pour mixture into a pan on medium heat and cook until bubbles appear on the surface. \ + <li> Turn over and cook other side until golden. \ + </ol>" + } + ListElement { + title: "Fruit Salad" + picture: "content/pics/fruit-salad.jpg" + ingredients: "* Seasonal Fruit" + method: "* Chop fruit and place in a bowl." + } + ListElement { + title: "Vegetable Soup" + picture: "content/pics/vegetable-soup.jpg" + ingredients: "<html> \ + <ul> \ + <li> 1 onion \ + <li> 1 turnip \ + <li> 1 potato \ + <li> 1 carrot \ + <li> 1 head of celery \ + <li> 1 1/2 litres of water \ + </ul> \ + </html>" + method: "<html> \ + <ol> \ + <li> Chop vegetables. \ + <li> Boil in water until vegetables soften. \ + <li> Season with salt and pepper to taste. \ + </ol> \ + </html>" + } + ListElement { + title: "Hamburger" + picture: "content/pics/hamburger.jpg" + ingredients: "<html> \ + <ul> \ + <li> 500g minced beef \ + <li> Seasoning \ + <li> lettuce, tomato, onion, cheese \ + <li> 1 hamburger bun for each burger \ + </ul> \ + </html>" + method: "<html> \ + <ol> \ + <li> Mix the beef, together with seasoning, in a food processor. \ + <li> Shape the beef into burgers. \ + <li> Grill the burgers for about 5 mins on each side (until cooked through) \ + <li> Serve each burger on a bun with ketchup, cheese, lettuce, tomato and onion. \ + </ol> \ + </html>" + } + ListElement { + title: "Lemonade" + picture: "content/pics/lemonade.jpg" + ingredients: "<html> \ + <ul> \ + <li> 1 cup Lemon Juice \ + <li> 1 cup Sugar \ + <li> 6 Cups of Water (2 cups warm water, 4 cups cold water) \ + </ul> \ + </html>" + method: "<html> \ + <ol> \ + <li> Pour 2 cups of warm water into a pitcher and stir in sugar until it dissolves. \ + <li> Pour in lemon juice, stir again, and add 4 cups of cold water. \ + <li> Chill or serve over ice cubes. \ + </ol> \ + </html>" + } +} diff --git a/examples/declarative/minehunt/minehunt.qml b/examples/declarative/minehunt/minehunt.qml index fb65fa3..cde2612 100644 --- a/examples/declarative/minehunt/minehunt.qml +++ b/examples/declarative/minehunt/minehunt.qml @@ -1,73 +1,166 @@ -<Item id="field" width="370" height="480"> - <properties> - <Property name="clickx" type="Int" value="0"/> - <Property name="clicky" type="Int" value="0"/> - </properties> - <resources> - <Component id="tile"> - <Flipable id="flipable" width="40" height="40"> - <axis> - <Axis startX="20" startY="20" endX="20" endY="0" /> - </axis> - <front> - <Image source="pics/front.png" width="40" height="40"> - <Image anchors.horizontalCenter="{parent.horizontalCenter}" - anchors.verticalCenter="{parent.verticalCenter}" - source="pics/flag.png" opacity="{modelData.hasFlag}"> - <opacity> - <Behaviour> - <NumericAnimation property="opacity" duration="250"/> - </Behaviour> - </opacity> - </Image> - </Image> - </front> - <back> - <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}" - 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> - <states> - <State name="back" when="{modelData.flipped == true}"> - <SetProperty target="{flipable}" property="rotation" value="180" /> - </State> - </states> - <transitions> - <Transition> - <SequentialAnimation> - <PauseAnimation duration="{var ret = Math.abs(flipable.parent.x-field.clickx) + Math.abs(flipable.parent.y-field.clicky); if (ret > 0) {if(modelData.hasMine==true && modelData.flipped==true){ret*3;}else{ret;}} else {0}}"/> - <NumericAnimation easing="easeInOutQuad" properties="rotation"/> - </SequentialAnimation> - </Transition> - </transitions> - <MouseRegion anchors.fill="{parent}" - onClicked="field.clickx = flipable.parent.x; field.clicky = flipable.parent.y; row = Math.floor(index/9); col = index - (Math.floor(index/9) * 9); if(mouse.button==undefined || mouse.button==Qt.RightButton){flag(row,col);}else{flip(row,col);}" /> - </Flipable> - </Component> - </resources> - <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> - <ComponentInstance component="{tile}" - x="{(index - (Math.floor(index/9) * 9)) * 41}" - y="{Math.floor(index/9) * 41}"/> - </Component> - </Repeater> - <Item id="gamedata" width="370" height="100" y="380"> - <Text color="white" font.size="18" x="20" y="20">In play:</Text> - <Image x="100" y="20" source="pics/bomb-color.png"/> - <Text x="100" y="60" color="white" text="{numMines}"/> - <Image x="140" y="20" source="pics/flag-color.png"/> - <Text x="140" y="60" color="white" text="{numFlags}"/> - - <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> -</Item> +Item { + id: field + width: 370 + height: 480 + properties: Property { + name: "clickx" + type: "Int" + value: 0 + } + properties: Property { + name: "clicky" + type: "Int" + value: 0 + } + resources: [ + Component { + id: tile + Flipable { + id: flipable + width: 40 + height: 40 + axis: Axis { + startX: 20 + startY: 20 + endX: 20 + endY: 0 + } + front: Image { + source: "pics/front.png" + width: 40 + height: 40 + Image { + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + source: "pics/flag.png" + opacity: modelData.hasFlag + opacity: Behaviour { + NumericAnimation { + property: "opacity" + duration: 250 + } + } + } + } + back: 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 + source: "pics/bomb.png" + opacity: modelData.hasMine + } + Explosion { + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + explode: modelData.hasMine==true && modelData.flipped==true + } + } + states: [ + State { + name: "back" + when: modelData.flipped == true + SetProperty { + target: flipable + property: "rotation" + value: 180 + } + } + ] + transitions: [ + Transition { + SequentialAnimation { + PauseAnimation { + duration: {var ret = Math.abs(flipable.parent.x-field.clickx) + Math.abs(flipable.parent.y-field.clicky); if (ret > 0) {if(modelData.hasMine==true && modelData.flipped==true){ret*3;}else{ret;}} else {0}} + } + NumericAnimation { + easing: "easeInOutQuad" + properties: "rotation" + } + } + } + ] + MouseRegion { + anchors.fill: parent + onClicked: { field.clickx = flipable.parent.x; field.clicky = flipable.parent.y; row = Math.floor(index/9); col = index - (Math.floor(index/9) * 9); if(mouse.button==undefined || mouse.button==Qt.RightButton){flag(row,col);}else{flip(row,col);} } + } + } + } + ] + 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 { + ComponentInstance { + component: tile + x: (index - (Math.floor(index/9) * 9)) * 41 + y: Math.floor(index/9) * 41 + } + } + } + Item { + id: gamedata + width: 370 + height: 100 + y: 380 + Text { + color: "white" + font.size: 18 + x: 20 + y: 20 + } + Image { + x: 100 + y: 20 + source: "pics/bomb-color.png" + } + Text { + x: 100 + y: 60 + color: "white" + text: numMines + } + Image { + x: 140 + y: 20 + source: "pics/flag-color.png" + } + Text { + x: 140 + y: 60 + color: "white" + text: numFlags + } + 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() } + } + } + } +} diff --git a/examples/declarative/mouseregion/mouse.qml b/examples/declarative/mouseregion/mouse.qml index 7aaf51a..6d10425 100644 --- a/examples/declarative/mouseregion/mouse.qml +++ b/examples/declarative/mouseregion/mouse.qml @@ -1,24 +1,48 @@ -<Rect color="white" width="200" height="200"> - <Rect width="50" height="50" color="red"> - <Text text="Click" anchors.centeredIn="{parent}"/> - <MouseRegion onPressed="print('press (x: ' + mouse.x + ' y: ' + mouse.y + ' button: ' + (mouse.button == Qt.RightButton ? 'right' : 'left') + ' Shift: ' + (mouse.modifiers & Qt.ShiftModifier ? 'true' : 'false') + ')')" - onReleased="print('release (x: ' + mouse.x + ' y: ' + mouse.y + ' isClick: ' + mouse.isClick + ' wasHeld: ' + mouse.wasHeld + ')')" - onClicked="print('click (x: ' + mouse.x + ' y: ' + mouse.y + ' wasHeld: ' + mouse.wasHeld + ')')" - onDoubleClicked="print('double click (x: ' + mouse.x + ' y: ' + mouse.y + ')')" - onPressAndHold="print('press and hold')" - onExitedWhilePressed="print('exiting while pressed')" - onReenteredWhilePressed="print('reentering while pressed')" anchors.fill="{parent}"/> - </Rect> - <Rect y="100" width="50" height="50" color="blue"> - <Text text="Drag" anchors.centeredIn="{parent}"/> - <MouseRegion drag.target="{parent}" - drag.axis="x" drag.xmin="0" drag.xmax="150" - onPressed="print('press')" - onReleased="print('release (isClick: ' + mouse.isClick + ') (wasHeld: ' + mouse.wasHeld + ')')" - onClicked="print('click' + '(wasHeld: ' + mouse.wasHeld + ')')" - onDoubleClicked="print('double click')" - onPressAndHold="print('press and hold')" - onExitedWhilePressed="print('exiting while pressed')" - onReenteredWhilePressed="print('reentering while pressed')" anchors.fill="{parent}"/> - </Rect> -</Rect> +Rect { + color: "white" + width: 200 + height: 200 + Rect { + width: 50 + height: 50 + color: "red" + Text { + text: "Click" + anchors.centeredIn: parent + } + MouseRegion { + onPressed: { print('press (x: ' + mouse.x + ' y: ' + mouse.y + ' button: ' + (mouse.button == Qt.RightButton ? 'right' : 'left') + ' Shift: ' + (mouse.modifiers & Qt.ShiftModifier ? 'true' : 'false') + ')') } + onReleased: { print('release (x: ' + mouse.x + ' y: ' + mouse.y + ' isClick: ' + mouse.isClick + ' wasHeld: ' + mouse.wasHeld + ')') } + onClicked: { print('click (x: ' + mouse.x + ' y: ' + mouse.y + ' wasHeld: ' + mouse.wasHeld + ')') } + onDoubleClicked: { print('double click (x: ' + mouse.x + ' y: ' + mouse.y + ')') } + onPressAndHold: { print('press and hold') } + onExitedWhilePressed: { print('exiting while pressed') } + onReenteredWhilePressed: { print('reentering while pressed') } + anchors.fill: parent + } + } + Rect { + y: 100 + width: 50 + height: 50 + color: "blue" + Text { + text: "Drag" + anchors.centeredIn: parent + } + MouseRegion { + drag.target: parent + drag.axis: "x" + drag.xmin: 0 + drag.xmax: 150 + onPressed: { print('press') } + onReleased: { print('release (isClick: ' + mouse.isClick + ') (wasHeld: ' + mouse.wasHeld + ')') } + onClicked: { print('click' + '(wasHeld: ' + mouse.wasHeld + ')') } + onDoubleClicked: { print('double click') } + onPressAndHold: { print('press and hold') } + onExitedWhilePressed: { print('exiting while pressed') } + onReenteredWhilePressed: { print('reentering while pressed') } + anchors.fill: parent + } + } +} 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 959d193..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" source="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/slideswitch/Switch.qml b/examples/declarative/slideswitch/Switch.qml index a3f75e8..5862646 100644 --- a/examples/declarative/slideswitch/Switch.qml +++ b/examples/declarative/slideswitch/Switch.qml @@ -46,7 +46,7 @@ Item { 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/velocity/Day.qml b/examples/declarative/velocity/Day.qml index b65f2bc..7d26e88 100644 --- a/examples/declarative/velocity/Day.qml +++ b/examples/declarative/velocity/Day.qml @@ -1,41 +1,115 @@ -<Rect width="400" height="500" radius="7" pen.color="black" id="Page"> - <properties> - <Property name="day" type="string" /> - <Property name="stickies" /> - </properties> - - <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}"> - <Item x="{Math.random() * 200 + 100}" y="{Math.random() * 300 + 50}" id="StickyPage"> - <rotation> - <Follow source="{-Flick.xVelocity / 100}" spring="2.0" damping="0.1"/> - </rotation> - <Item id="Sticky" scale="0.5"> - <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 source="tack.png" x="{-width / 2}" y="{-height * 0.7 / 2}" scale="0.7" /> - - <states> - <State name="pressed" when="{Mouse.pressed}"> - <SetProperties target="{Sticky}" rotation="8" scale="1"/> - <SetProperties target="{Page}" z="8"/> - </State> - </states> - <transitions> - <Transition> - <NumericAnimation properties="rotation,scale" duration="200"/> - </Transition> - </transitions> - </Item> - </Repeater> - - - - -</Rect> +Rect { + width: 400 + height: 500 + radius: 7 + pen.color: "black" + id: Page + properties: Property { + name: "day" + type: "string" + } + properties: Property { + name: "stickies" + } + 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 + Item { + x: Math.random() * 200 + 100 + y: Math.random() * 300 + 50 + id: StickyPage + rotation: Follow { + source: -Flick.xVelocity / 100 + spring: 2.0 + damping: 0.1 + } + Item { + id: Sticky + scale: 0.5 + 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 + } + } + } + Image { + source: "tack.png" + x: -width / 2 + y: -height * 0.7 / 2 + scale: 0.7 + } + states: [ + State { + name: "pressed" + when: Mouse.pressed + SetProperties { + target: Sticky + rotation: 8 + scale: 1 + } + SetProperties { + target: Page + z: 8 + } + } + ] + transitions: [ + Transition { + NumericAnimation { + properties: "rotation,scale" + duration: 200 + } + } + ] + } + } +} diff --git a/examples/declarative/velocity/velocity.qml b/examples/declarative/velocity/velocity.qml index 0215d37..ff95527 100644 --- a/examples/declarative/velocity/velocity.qml +++ b/examples/declarative/velocity/velocity.qml @@ -1,81 +1,113 @@ -<Rect color="lightSteelBlue" width="800" height="600"> - <ListModel id="List"> - <Day> - <name>Sunday</name> - <dayColor>#808080</dayColor> - <notes> - <Note noteText="Lunch" /> - <Note noteText="Party" /> - </notes> - </Day> - <Day> - <name>Monday</name> - <dayColor>blue</dayColor> - <notes> - <Note noteText="Pickup kids" /> - <Note noteText="Checkout kinetic" /> - <Note noteText="Read email" /> - </notes> - </Day> - <Day> - <name>Tuesday</name> - <dayColor>yellow</dayColor> - <notes> - <Note noteText="Walk dog" /> - <Note noteText="Buy newspaper" /> - </notes> - </Day> - <Day> - <name>Wednesday</name> - <dayColor>purple</dayColor> - <notes> - <Note noteText="Cook dinner" /> - <Note noteText="Eat dinner" /> - </notes> - </Day> - <Day> - <name>Thursday</name> - <dayColor>blue</dayColor> - <notes> - <Note noteText="5:30pm Meeting" /> - <Note noteText="Weed garden" /> - </notes> - </Day> - <Day> - <name>Friday</name> - <dayColor>green</dayColor> - <notes> - <Note noteText="Still work" /> - <Note noteText="Drink" /> - </notes> - </Day> - <Day> - <name>Saturday</name> - <dayColor>orange</dayColor> - <notes> - <Note noteText="Drink" /> - <Note noteText="Drink" /> - </notes> - </Day> - </ListModel> - - <Flickable id="Flick" anchors.fill="{parent}" viewportWidth="{Lay.width}"> - <HorizontalLayout id="Lay"> - <Repeater dataSource="{List}"> - <Component> - <Day day="{name}" color="{dayColor}" stickies="{notes}"/> - </Component> - </Repeater> - <!-- - <Day color="#808080" day="Sunday" /> - <Day color="blue" day="Monday"/> - <Day color="yellow" day="Tuesday"/> - <Day color="purple" day="Wednesday"/> - <Day color="blue" day="Thursday"/> - <Day color="green" day="Friday"/> - <Day color="orange" day="Saturday"/> - --> - </HorizontalLayout> - </Flickable> - -</Rect> +Rect { + color: "lightSteelBlue" + width: 800 + height: 600 + ListModel2 { + id: List + ListElement { + name: "Sunday" + dayColor: "#808080" + notes: [ + ListElement { + noteText: "Lunch" + }, + ListElement { + noteText: "Party" + } + ] + } + ListElement { + name: "Monday" + dayColor: "blue" + notes: [ + ListElement { + noteText: "Pickup kids" + }, + ListElement { + noteText: "Checkout kinetic" + }, + ListElement { + noteText: "Read email" + } + ] + } + ListElement { + name: "Tuesday" + dayColor: "yellow" + notes: [ + ListElement { + noteText: "Walk dog" + }, + ListElement { + noteText: "Buy newspaper" + } + ] + } + ListElement { + name: "Wednesday" + dayColor: "purple" + notes: [ + ListElement { + noteText: "Cook dinner" + }, + ListElement { + noteText: "Eat dinner" + } + ] + } + ListElement { + name: "Thursday" + dayColor: "blue" + notes: [ + ListElement { + noteText: "5:30pm Meeting" + }, + ListElement { + noteText: "Weed garden" + } + ] + } + ListElement { + name: "Friday" + dayColor: "green" + notes: [ + ListElement { + noteText: "Still work" + }, + ListElement { + noteText: "Drink" + } + ] + } + ListElement { + name: "Saturday" + dayColor: "orange" + notes: [ + ListElement { + noteText: "Drink" + }, + ListElement { + noteText: "Drink" + } + ] + } + } + Flickable { + id: Flick + anchors.fill: parent + viewportWidth: Lay.width + HorizontalLayout { + id: Lay + Repeater { + dataSource: List + Component { + Day { + day: name + color: dayColor + stickies: notes + } + } + } + } + } +} 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 5e98d1b..3877adf 100644 --- a/examples/declarative/xmldata/daringfireball.qml +++ b/examples/declarative/xmldata/daringfireball.qml @@ -1,25 +1,59 @@ -<Rect color="white" width="600" height="600"> - <resources> - <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'; - </namespaceDeclarations> - <Role name="title" query="title/string()"/> - <Role name="tagline" query="author/name/string()"/> - <Role name="content" query="content/string()" isCData="true"/> - </XmlListModel> - <Component id="feedDelegate"> - <Item height="{contents.height + 20}"> - <Text x="10" id="TitleText" text="{title}" font.bold="true"/> - <Text text="{'by ' + tagline}" anchors.left="{TitleText.right}" anchors.leftMargin="10" font.italic="true"/> - <Text x="10" text="{content}" anchors.top="{TitleText.bottom}" width="580" wrap="true"> - <onLinkActivated>print('link clicked: ' + link)</onLinkActivated> - </Text> - </Item> - </Component> - </resources> - - <ListView id="list" anchors.fill="{parent}" clip="true" - model="{feedModel}" delegate="{feedDelegate}"/> -</Rect> +Rect { + color: "white" + width: 600 + height: 600 + resources: [ + 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';" + Role { + name: "title" + query: "title/string()" + } + Role { + name: "tagline" + query: "author/name/string()" + } + Role { + name: "content" + query: "content/string()" + isCData: true + } + }, + Component { + id: feedDelegate + Item { + height: contents.height + 20 + Text { + x: 10 + id: TitleText + text: title + font.bold: true + } + Text { + text: 'by ' + tagline + anchors.left: TitleText.right + anchors.leftMargin: 10 + font.italic: true + } + Text { + x: 10 + text: content + anchors.top: TitleText.bottom + width: 580 + wrap: true + onLinkActivated: { print('link clicked: ' + link) } + } + } + } + ] + ListView { + id: list + anchors.fill: parent + clip: true + model: feedModel + delegate: feedDelegate + } +} diff --git a/examples/declarative/xmldata/yahoonews.qml b/examples/declarative/xmldata/yahoonews.qml index 32a706e..a465cdd 100644 --- a/examples/declarative/xmldata/yahoonews.qml +++ b/examples/declarative/xmldata/yahoonews.qml @@ -1,38 +1,111 @@ -<Rect color="black" gradientColor="#AAAAAA" width="600" height="600"> - <resources> - <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"/> - </XmlListModel> - <Component id="feedDelegate"> - <Item id="Delegate" height="{Wrapper.height + 10}"> - <MouseRegion anchors.fill="{Wrapper}" onPressed="Delegate.ListView.list.currentIndex = index;" - onClicked="if (Wrapper.state == 'Details') { Wrapper.state = '';} else {Wrapper.state = 'Details';}"/> - <Rect id="Wrapper" y="5" height="{TitleText.height + 10}" width="580" color="#F0F0F0" radius="5"> - <Text x="10" y="5" id="TitleText" text="{'<a href=\'' + link + '\'>' + title + '</a>'}" font.bold="true" font.family="Helvetica" font.size="14" onLinkActivated="print('link clicked: ' + link)"/> - <Text x="10" id="Description" text="{description}" width="560" wrap="true" font.family="Helvetica" - anchors.top="{TitleText.bottom}" anchors.topMargin="5" opacity="0"/> - - <states> - <State name="Details"> - <SetProperty target="{Wrapper}" property="height" binding="contents.height + 10"/> - <SetProperty target="{Description}" property="opacity" value="1"/> - </State> - </states> - <transitions> - <Transition fromState="*" toState="Details" reversible="true"> - <SequentialAnimation> - <NumericAnimation duration="200" properties="height" easing="easeOutQuad"/> - <NumericAnimation duration="200" properties="opacity"/> - </SequentialAnimation> - </Transition> - </transitions> - </Rect> - </Item> - </Component> - </resources> - - <ListView id="list" x="10" y="10" width="{parent.width - 20}" height="{parent.height - 20}" clip="true" - model="{feedModel}" delegate="{feedDelegate}" currentItemPositioning="Snap"/> -</Rect> +Rect { + color: "black" + gradientColor: "#AAAAAA" + width: 600 + height: 600 + resources: [ + 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 + } + }, + Component { + id: feedDelegate + Item { + id: Delegate + height: Wrapper.height + 10 + MouseRegion { + anchors.fill: Wrapper + onPressed: { Delegate.ListView.list.currentIndex = index; } + onClicked: { if (Wrapper.state == 'Details') { Wrapper.state = '';} else {Wrapper.state = 'Details';} } + } + Rect { + id: Wrapper + y: 5 + height: TitleText.height + 10 + width: 580 + color: "#F0F0F0" + radius: 5 + Text { + x: 10 + y: 5 + id: TitleText + text: '<a href=\'' + link + '\'>' + title + '</a>' + font.bold: true + font.family: "Helvetica" + font.size: 14 + onLinkActivated: { print('link clicked: ' + link) } + } + Text { + x: 10 + id: Description + text: description + width: 560 + wrap: true + font.family: "Helvetica" + anchors.top: TitleText.bottom + anchors.topMargin: 5 + opacity: 0 + } + states: [ + State { + name: "Details" + SetProperty { + target: Wrapper + property: "height" + binding: "contents.height + 10" + } + SetProperty { + target: Description + property: "opacity" + value: 1 + } + } + ] + transitions: [ + Transition { + fromState: "*" + toState: "Details" + reversible: true + SequentialAnimation { + NumericAnimation { + duration: 200 + properties: "height" + easing: "easeOutQuad" + } + NumericAnimation { + duration: 200 + properties: "opacity" + } + } + } + ] + } + } + } + ] + ListView { + id: list + x: 10 + y: 10 + width: parent.width - 20 + height: parent.height - 20 + clip: true + model: feedModel + delegate: feedDelegate + currentItemPositioning: "Snap" + } +} |
