diff options
author | Aaron Kennedy <aaron.kennedy@nokia.com> | 2009-04-30 05:00:08 (GMT) |
---|---|---|
committer | Aaron Kennedy <aaron.kennedy@nokia.com> | 2009-04-30 05:00:08 (GMT) |
commit | 27b180804d506a734318edc7a6062d7fdd9dca6d (patch) | |
tree | 85ec4099faec108b33db4e473db3cd9ca37d4960 | |
parent | f2fb6b63c6e5572d02245c64da652f13174588b9 (diff) | |
parent | 7e95bf13d72b28c87dab4b346fd96de6e8a4c046 (diff) | |
download | Qt-27b180804d506a734318edc7a6062d7fdd9dca6d.zip Qt-27b180804d506a734318edc7a6062d7fdd9dca6d.tar.gz Qt-27b180804d506a734318edc7a6062d7fdd9dca6d.tar.bz2 |
Merge branch 'kinetic-declarativeui' of git@scm.dev.nokia.troll.no:qt/kinetic into kinetic-declarativeui
Conflicts:
examples/declarative/follow/pong.qml
examples/declarative/listview/dummydata/MyPetsModel.qml
33 files changed, 443 insertions, 325 deletions
diff --git a/doc/src/declarative/pics/ListViewHorizontal.png b/doc/src/declarative/pics/ListViewHorizontal.png Binary files differindex 63c7c86..4633a0e 100644 --- a/doc/src/declarative/pics/ListViewHorizontal.png +++ b/doc/src/declarative/pics/ListViewHorizontal.png diff --git a/doc/src/declarative/pics/ListViewSections.png b/doc/src/declarative/pics/ListViewSections.png Binary files differnew file mode 100644 index 0000000..9270126 --- /dev/null +++ b/doc/src/declarative/pics/ListViewSections.png diff --git a/doc/src/declarative/pics/trivialListView.png b/doc/src/declarative/pics/trivialListView.png Binary files differindex 175e455..3782570 100644 --- a/doc/src/declarative/pics/trivialListView.png +++ b/doc/src/declarative/pics/trivialListView.png diff --git a/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml b/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml new file mode 100644 index 0000000..302dfd2 --- /dev/null +++ b/doc/src/snippets/declarative/listview/dummydata/ContactModel.qml @@ -0,0 +1,18 @@ +<!-- +ListModel allows free form list models to be defined and populated. +Be sure to name the file the same as the id. +--> +<ListModel id="ContactModel"> + <Contact> + <name>Bill Smith</name> + <number>555 3264</number> + </Contact> + <Contact> + <name>John Brown</name> + <number>555 8426</number> + </Contact> + <Contact> + <name>Sam Wise</name> + <number>555 0473</number> + </Contact> +</ListModel> diff --git a/doc/src/snippets/declarative/listview/highlight.qml b/doc/src/snippets/declarative/listview/highlight.qml new file mode 100644 index 0000000..d8bbb22 --- /dev/null +++ b/doc/src/snippets/declarative/listview/highlight.qml @@ -0,0 +1,59 @@ +Rect { + width: 180 + height: 200 + color: "white" + // ContactModel model is defined in dummydata/ContactModel.qml + // The viewer automatically loads files in dummydata/* to assist + // development without a real data source. + + // Define a delegate component. A component will be + // instantiated for each visible item in the list. +//! [0] + Component { + id: Delegate + Item { + id: Wrapper + width: 180 + height: 40 + VerticalLayout { + x: 5; y: 5 + Text { + text: '<b>Name:</b> ' + name + } + Text { + text: '<b>Number:</b> ' + number + } + } + } + } +//! [0] + // Specify a highlight with custom movement. Note that autoHighlight + // is set to false in the ListView so that we can control how the + // highlight moves to the current item. +//! [1] + Component { + id: Highlight + Rect { + width: 180 + height: 40 + color: "lightsteelblue" + radius: 5 + y: Follow { + source: List.current.y + spring: 3 + damping: 0.1 + } + } + } + ListView { + id: List + width: 180 + height: parent.height + model: ContactModel + delegate: Delegate + highlight: Highlight + autoHighlight: false + focus: true + } +//! [1] +} diff --git a/doc/src/snippets/declarative/listview/listview.qml b/doc/src/snippets/declarative/listview/listview.qml new file mode 100644 index 0000000..5b99bbd --- /dev/null +++ b/doc/src/snippets/declarative/listview/listview.qml @@ -0,0 +1,55 @@ +//! [3] +Rect { + width: 480 + height: 40 + color: "white" + // ContactModel model is defined in dummydata/ContactModel.qml + // The viewer automatically loads files in dummydata/* to assist + // development without a real data source. + + // Define a delegate component. A component will be + // instantiated for each visible item in the list. +//! [0] + Component { + id: Delegate + Item { + id: Wrapper + width: 180 + height: 40 + VerticalLayout { + x: 5; y: 5 + Text { + text: '<b>Name:</b> ' + name + } + Text { + text: '<b>Number:</b> ' + number + } + } + } + } +//! [0] + // Define a highlight component. Just one of these will be instantiated + // by each ListView and placed behind the current item. +//! [1] + Component { + id: Highlight + Rect { + color: "lightsteelblue" + radius: 5 + } + } +//! [1] + // The actual list +//! [2] + ListView { + width: 480 + height: parent.height + model: ContactModel + delegate: Delegate + highlight: Highlight + focus: true + orientation: 'Horizontal' + } +//! [2] +} +//! [3] diff --git a/examples/declarative/follow/pong.qml b/examples/declarative/follow/pong.qml index ed4a652..b6695bd 100644 --- a/examples/declarative/follow/pong.qml +++ b/examples/declarative/follow/pong.qml @@ -3,6 +3,7 @@ Rect { width: 640 height: 480 color: "#000000" + // Make a ball to bounce Rect { id: Ball @@ -11,6 +12,7 @@ Rect { height: 20 color: "#00ee00" z: 1 + // Add a property for the target y coordinate properties: Property { name: "targetY" @@ -20,6 +22,7 @@ Rect { name: "direction" value: "right" } + // Move the ball to the right and back to the left repeatedly x: SequentialAnimation { running: true @@ -43,17 +46,22 @@ Rect { 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) + onTopChanged: { + if (y <= 0) targetY = Page.height-20; else if (y >= Page.height-20) - targetY = 0; } + targetY = 0; + } } + // Place bats to the left and right of the view, following the y // coordinates of the ball. Rect { @@ -80,41 +88,44 @@ Rect { enabled: Ball.direction == 'right' } } + // The rest, to make it look realistic, if neither ever scores... Rect { color: "#00ee00" + x: 320-80 + y: 0 width: 40 height: 60 - x: 320-80 } Rect { color: "#000000" - width: 20 - height: 40 x: 320-70 y: 10 + width: 20 + height: 40 } Rect { color: "#00ee00" + x: 320+40 + y: 0 width: 40 height: 60 - x: 320+40 } Rect { color: "#000000" - width: 20 - height: 40 x: 320+50 y: 10 + width: 20 + height: 40 } Repeater { dataSource: 24 Rect { color: "#00ee00" - width: 10 - height: 10 x: 320-5 y: index*20 + width: 10 + height: 10 } } } diff --git a/examples/declarative/listview/dummydata/MyPetsModel.qml b/examples/declarative/listview/dummydata/MyPetsModel.qml index def8cf3..1c96b7f 100644 --- a/examples/declarative/listview/dummydata/MyPetsModel.qml +++ b/examples/declarative/listview/dummydata/MyPetsModel.qml @@ -1,50 +1,59 @@ // ListModel allows free form list models to be defined and populated. // Be sure to name the file the same as the id. ListModel2 { - id: MyPetsModel + id: MyListElementsModel ListElement { - name: "Rover" - type: "Dog" - age: 5 + name: "Polly" + type: "Parrot" + age: 12 + size: "Small" } ListElement { - name: "Whiskers" - type: "Cat" - age: 2 + name: "Penny" + type: "Turtle" + age: 4 + size: "Small" } ListElement { name: "Warren" type: "Rabbit" age: 2 - } - ListElement { - name: "Polly" - type: "Parrot" - age: 12 + size: "Small" } ListElement { name: "Spot" type: "Dog" age: 9 + size: "Medium" } ListElement { - name: "Tiny" - type: "Elephant" - age: 15 - } - ListElement { - name: "Penny" - type: "Turtle" - age: 4 + 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/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/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/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/src/declarative/fx/qfxlistview.cpp b/src/declarative/fx/qfxlistview.cpp index 0724e3a..13e5b21 100644 --- a/src/declarative/fx/qfxlistview.cpp +++ b/src/declarative/fx/qfxlistview.cpp @@ -798,37 +798,23 @@ void QFxListViewPrivate::fixupX() \brief The ListView element provides a list view of items provided by a model. The model is typically provided by a QAbstractListModel "C++ model object", but can also be created directly in XML. - The items are laid out vertically or horizontally and may be flicked to scroll. The below example creates a very simple vertical list, using an XML model. \image trivialListView.png - \code - <resources> - <ListModel id="contactModel"> - <Contact> - <firstName>John</firstName> - <lastName>Smith</lastName> - </Contact> - <Contact> - <firstName>Bill</firstName> - <lastName>Jones</lastName> - </Contact> - <Contact> - <firstName>Jane</firstName> - <lastName>Doe</lastName> - </Contact> - </ListModel> - <Component id="contactDelegate"> - <Rect pen.color="blue" z="-1" height="20" width="80" color="white" radius="2"> - <Text id="name" text="{firstName + ' ' + lastName}" font.size="11"/> - </Rect> - </Component> - </resources> - - <ListView id="list" width="320" height="240" clip="true" - model="{contactModel}" delegate="{contactDelegate}"/> - \endcode + + The user interface defines a delegate to display an item, a highlight, + and the ListView which uses the above. + + \snippet doc/src/snippets/declarative/listview/listview.qml 3 + + The model is defined as a ListModel using XML: + \quotefromfile doc/src/snippets/declarative/listview/dummydata/ContactModel.qml + \skipto <ListModel + \printuntil </ListModel + + In this case ListModel is a handy way for us to test our UI. In practice + the model would be implemented in C++, or perhaps via a SQL data source. */ QFxListView::QFxListView(QFxItem *parent) @@ -854,25 +840,7 @@ QFxListView::~QFxListView() The C++ model object must be a \l QListModelInterface subclass, a \l VisualModel, or a simple list. - Models can also be created directly in XML, using the \l ListModel element. For example: - \code - <ListModel id="contactModel"> - <Contact> - <firstName>John</firstName> - <lastName>Smith</lastName> - </Contact> - <Contact> - <firstName>Bill</firstName> - <lastName>Jones</lastName> - </Contact> - <Contact> - <firstName>Jane</firstName> - <lastName>Doe</lastName> - </Contact> - </ListModel> - - <ListView model="{contactModel}" .../> - \endcode + Models can also be created directly in XML, using the \l ListModel element. */ QVariant QFxListView::model() const { @@ -922,17 +890,7 @@ void QFxListView::setModel(const QVariant &model) The delegate provides a template describing what each item in the view should look and act like. Here is an example delegate: - \code - <Component id="contactDelegate"> - <Item id="wrapper"> - <Image id="pic" width="100" height="100" file="{portrait}"/> - <Text id="name" text="{firstName + ' ' + lastName}" - anchors.left="{pic.right}" anchors.leftMargin="5"/> - </Item> - </Component> - ... - <ListView delegate="{contactDelegate}" .../> - \endcode + \snippet doc/src/snippets/declarative/listview/listview.qml 0 */ QmlComponent *QFxListView::delegate() const { @@ -1012,13 +970,9 @@ int QFxListView::count() const The below example demonstrates how to make a simple highlight for a vertical list. - \code - <Component id="ListHighlight"> - <Rect color="lightsteelblue" radius="4"/> - </Component> - <ListView highlight="{ListHighlight}"> - \endcode - \image ListViewHighlight.png + + \snippet doc/src/snippets/declarative/listview/listview.qml 1 + \image trivialListView.png \sa autoHighlight */ @@ -1043,17 +997,12 @@ void QFxListView::setHighlight(QmlComponent *highlight) If autoHighlight is true, the highlight will be moved smoothly to follow the current item. If autoHighlight is false, the highlight will not be moved by the view, and must be implemented - by the highlight, for example: - - \code - <Component id="Highlight"> - <Rect id="Wrapper" color="#242424" radius="4" width="320" height="60" > - <y> - <Follow source="{Wrapper.ListView.view.current.y}" spring="3" damping="0.2"/> - </y> - </Rect> - </Component> - \endcode + by the highlight. The following example creates a highlight with + its motion defined by the spring \l {Follow}: + + \snippet doc/src/snippets/declarative/listview/highlight.qml 1 + + \sa highlight */ bool QFxListView::autoHighlight() const { @@ -1079,11 +1028,18 @@ void QFxListView::setAutoHighlight(bool autoHighlight) The modes supported are: \list \i Free - For Mouse, the current item may be positioned anywhere, - whether within the visible area, or outside. during Keyboard interaction, + whether within the visible area, or outside. During Keyboard interaction, the current item can move within the visible area, and the view will scroll to keep the highlight visible. - \i Snap - - \i SnapAuto - + \i Snap - For mouse, the current item may be positioned anywhere, + whether within the visible area, or outside. During keyboard interaction, + the current item will be kept in the visible area and will prefer to be + positioned at the \l snapPosition, however the view will never scroll + beyond the beginning or end of the view. + \i SnapAuto - For both mouse and keyboard, the current item will be + kept at the \l {snapPosition}. Additionally, if the view is dragged or + flicked, the current item will be automatically updated to be the item + currently at the snapPosition. \endlist */ QFxListView::CurrentItemPositioning QFxListView::currentItemPositioning() const @@ -1121,10 +1077,10 @@ void QFxListView::setSnapPosition(int pos) \qmlproperty enumeration ListView::orientation This property holds the orientation of the list. - Possible values are \c Qt::Vertical (default) and \c Qt::Horizontal. + Possible values are \c Vertical (default) and \c Horizontal. Vertical Example: - \image ListViewVertical.png + \image trivialListView.png Horizontal Example: \image ListViewHorizontal.png */ @@ -1205,24 +1161,15 @@ void QFxListView::setCacheBuffer(int b) \qmlproperty string ListView::sectionExpression This property holds the expression to be evaluated for the section attached property. - Each item in the list has attached properties named \c section and - \c prevSection. These may be used to place a section header for - related items. The example below assumes that the model is alphabetically - sorted. The section expression is the first character of the \c description - property. If \c section and \c prevSection differ, the item will - display a section header. - - \code - <Component id="Delegate"> - <Item id="wrapper" x="0" width="240" height="{Separator.height + Desc.height}"> - <Item id="Separator" height="{wrapper.ListView.prevSection != wrapper.ListView.section ? 10 : 0}" width="240"> - <Text text="{wrapper.ListView.section}" anchors.fill="{parent}"/> - </Item> - <Text id="Desc" text="{description} width="{parent.width}" height="30"/> - </Item> - </Component> - <ListView anchors.fill="{parent}" sectionExpression="{String(description).charAt(0)}" delegate="{Delegate}" model="{Model}"/> - \endcode + Each item in the list has attached properties named \c ListView.section and + \c ListView.prevSection. These may be used to place a section header for + related items. The example below assumes that the model is sorted by size of + pet. The section expression is the size property. If \c ListView.section and + \c ListView.prevSection differ, the item will display a section header. + + \snippet examples/declarative/listview/sections.qml 0 + + \image ListViewSections.png */ QString QFxListView::sectionExpression() const { diff --git a/src/declarative/fx/qfxwebview.cpp b/src/declarative/fx/qfxwebview.cpp index 7c05088..05730f9 100644 --- a/src/declarative/fx/qfxwebview.cpp +++ b/src/declarative/fx/qfxwebview.cpp @@ -589,7 +589,8 @@ void QFxWebView::paintGLContents(GLPainter &p) #if defined(QFX_RENDER_QPAINTER) bool wasAA = p.testRenderHint(QPainter::Antialiasing); - p.setRenderHints(QPainter::Antialiasing, d->smooth); + bool wasSM = p.testRenderHint(QPainter::SmoothPixmapTransform); + p.setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform, d->smooth); QRectF clipf = p.clipRegion().boundingRect(); const QRect clip = p.clipRegion().isEmpty() ? content : clipf.toRect(); #elif defined(QFX_RENDER_OPENGL) @@ -656,6 +657,7 @@ void QFxWebView::paintGLContents(GLPainter &p) } #if defined(QFX_RENDER_QPAINTER) p.setRenderHints(QPainter::Antialiasing, wasAA); + p.setRenderHints(QPainter::SmoothPixmapTransform, wasSM); #endif } diff --git a/src/declarative/util/qfxview.cpp b/src/declarative/util/qfxview.cpp index 42047b6..5611bca 100644 --- a/src/declarative/util/qfxview.cpp +++ b/src/declarative/util/qfxview.cpp @@ -265,7 +265,7 @@ void QFxView::continueExecute() d->root = item; connect(item, SIGNAL(widthChanged()), this, SLOT(sizeChanged())); connect(item, SIGNAL(heightChanged()), this, SLOT(sizeChanged())); - sizeChanged(); + emit sceneResized(QSize(d->root->width(),d->root->height())); } else if (QWidget *wid = qobject_cast<QWidget *>(obj)) { window()->setAttribute(Qt::WA_OpaquePaintEvent, false); window()->setAttribute(Qt::WA_NoSystemBackground, false); diff --git a/src/declarative/util/qmlstateoperations.cpp b/src/declarative/util/qmlstateoperations.cpp index 8a10ca3..755befe 100644 --- a/src/declarative/util/qmlstateoperations.cpp +++ b/src/declarative/util/qmlstateoperations.cpp @@ -59,6 +59,7 @@ public: }; /*! + \preliminary \qmlclass ParentChange \brief The ParentChange element allows you to reparent an object in a state. */ |