summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAaron Kennedy <aaron.kennedy@nokia.com>2009-10-09 08:37:07 (GMT)
committerAaron Kennedy <aaron.kennedy@nokia.com>2009-10-09 08:37:07 (GMT)
commit65aa9ff2704fed181eee2b189fc0db81a59ff75f (patch)
treef90d7dff3e3aae7d17c6224aae518056cc2b6d50
parent3b3213679a35cdfb1eedcd5b27e6c40f1eca45fd (diff)
parent4c9a504c206ec1c35852107046a1424d468e2978 (diff)
downloadQt-65aa9ff2704fed181eee2b189fc0db81a59ff75f.zip
Qt-65aa9ff2704fed181eee2b189fc0db81a59ff75f.tar.gz
Qt-65aa9ff2704fed181eee2b189fc0db81a59ff75f.tar.bz2
Merge branch 'kinetic-declarativeui' of git@scm.dev.nokia.troll.no:qt/kinetic into kinetic-declarativeui
-rw-r--r--examples/declarative/listview/recipes.qml228
-rw-r--r--examples/declarative/webview/newwindows.qml33
-rw-r--r--examples/declarative/xmldata/daringfireball.qml81
3 files changed, 168 insertions, 174 deletions
diff --git a/examples/declarative/listview/recipes.qml b/examples/declarative/listview/recipes.qml
index 4ccb344..3410f56 100644
--- a/examples/declarative/listview/recipes.qml
+++ b/examples/declarative/listview/recipes.qml
@@ -1,128 +1,136 @@
import Qt 4.6
-
import "content"
+
// This example illustrates expanding a list item to show a more detailed view
+
Rectangle {
id: page
width: 400; height: 240; color: "black"
- resources: [
- // Delegate for the recipes. This delegate has two modes:
- // 1. the list mode (default), which just shows the picture and title of the recipe.
- // 2. the details mode, which also shows the ingredients and method.
- Component {
- id: recipeDelegate
- Item {
- id: wrapper
- width: list.width
- // Create a property to contain the visibility of the details.
- // We can bind multiple element's opacity to this one property,
- // rather than having a "PropertyChanges" line for each element we
- // want to fade.
- property real detailsOpacity : 0
-
- // A simple rounded rectangle for the background
- Rectangle {
- id: background
- x: 1; y: 2; width: parent.width-2; height: parent.height-4
- color: "#FEFFEE"; border.color: "#FFBE4F"; radius: 5
- }
- // This mouse region covers the entire delegate.
- // When clicked it changes mode to 'Details'. If we are already
- // in Details mode, then no change will happen.
- MouseRegion {
- id: pageMouse
- anchors.fill: parent
- onClicked: { wrapper.state = 'Details' }
- }
- // Layout the page. Picture, title and ingredients at the top, method at the
- // bottom. Note that elements that should not be visible in the list
- // mode have their opacity set to wrapper.detailsOpacity.
- Row {
- id: topLayout
- x: 10; y: 10; height: recipePic.height; width: parent.width
- spacing: 10
- Image {
- id: recipePic
- source: picture; width: 48; height: 48
- }
- Column {
- height: recipePic.height; width: background.width-recipePic.width-20
- spacing: 5
- Text { id: name; text: title; font.bold: true; font.pointSize: 16 }
- Text {
- text: "Ingredients"; font.pointSize: 12; font.bold: true
- opacity: wrapper.detailsOpacity
- }
- Text {
- text: ingredients; wrap: true; width: parent.width
- opacity: wrapper.detailsOpacity
- }
- }
+
+ // Delegate for the recipes. This delegate has two modes:
+ // 1. the list mode (default), which just shows the picture and title of the recipe.
+ // 2. the details mode, which also shows the ingredients and method.
+ Component {
+ id: recipeDelegate
+ Item {
+ id: wrapper
+ width: list.width
+
+ // Create a property to contain the visibility of the details.
+ // We can bind multiple element's opacity to this one property,
+ // rather than having a "PropertyChanges" line for each element we
+ // want to fade.
+ property real detailsOpacity : 0
+
+ // A simple rounded rectangle for the background
+ Rectangle {
+ id: background
+ x: 1; y: 2; width: parent.width - 2; height: parent.height - 4
+ color: "#FEFFEE"; border.color: "#FFBE4F"; radius: 5
+ }
+
+ // This mouse region covers the entire delegate.
+ // When clicked it changes mode to 'Details'. If we are already
+ // in Details mode, then no change will happen.
+ MouseRegion {
+ id: pageMouse
+ anchors.fill: parent
+ onClicked: wrapper.state = 'Details';
+ }
+
+ // Layout the page. Picture, title and ingredients at the top, method at the
+ // bottom. Note that elements that should not be visible in the list
+ // mode have their opacity set to wrapper.detailsOpacity.
+ Row {
+ id: topLayout
+ x: 10; y: 10; height: recipePic.height; width: parent.width
+ spacing: 10
+
+ Image {
+ id: recipePic
+ source: picture; width: 48; height: 48
}
- Item {
- id: details
- x: 10; width: parent.width-20
- anchors.top: topLayout.bottom; anchors.topMargin: 10
- anchors.bottom: parent.bottom; anchors.bottomMargin: 10
- opacity: wrapper.detailsOpacity
+
+ Column {
+ height: recipePic.height; width: background.width-recipePic.width-20
+ spacing: 5
+ Text { id: name; text: title; font.bold: true; font.pointSize: 16 }
Text {
- id: methodTitle
- text: "Method"; font.pointSize: 12; font.bold: true
- anchors.top: parent.top
- }
- Flickable {
- id: flick
- anchors.top: methodTitle.bottom; anchors.bottom: parent.bottom
- width: parent.width; viewportHeight: methodText.height; clip: true
- Text { id: methodText; text: method; wrap: true; width: details.width }
- }
- Image {
- anchors.right: flick.right; anchors.top: flick.top
- source: "content/pics/moreUp.png"; opacity: flick.atYBeginning ? 0 : 1
+ text: "Ingredients"; font.pointSize: 12; font.bold: true
+ opacity: wrapper.detailsOpacity
}
- Image {
- anchors.right: flick.right; anchors.bottom: flick.bottom
- source: "content/pics/moreDown.png"; opacity: flick.atYEnd ? 0 : 1
+ Text {
+ text: ingredients; wrap: true; width: parent.width
+ opacity: wrapper.detailsOpacity
}
}
- // A button to close the detailed view, i.e. set the state back to default ('').
- MediaButton {
- anchors.right: background.right; anchors.rightMargin: 5
- y: 10; opacity: wrapper.detailsOpacity
- text: "Close"; onClicked: { wrapper.state = '' }
+ }
+
+ Item {
+ id: details
+ x: 10; width: parent.width-20
+ anchors.top: topLayout.bottom; anchors.topMargin: 10
+ anchors.bottom: parent.bottom; anchors.bottomMargin: 10
+ opacity: wrapper.detailsOpacity
+
+ Text {
+ id: methodTitle
+ text: "Method"; font.pointSize: 12; font.bold: true
+ anchors.top: parent.top
+ }
+ Flickable {
+ id: flick
+ anchors.top: methodTitle.bottom; anchors.bottom: parent.bottom
+ width: parent.width; viewportHeight: methodText.height; clip: true
+ Text { id: methodText; text: method; wrap: true; width: details.width }
}
- // Make the default height equal the hight of the picture, plus margin.
- height: 68
- states: [
- State {
- name: "Details"
- PropertyChanges { target: background; color: "white" }
- // Make the picture bigger
- PropertyChanges { target: recipePic; width: 128; height: 128 }
- // Make details visible
- PropertyChanges { target: wrapper; detailsOpacity: 1; x: 0 }
- // Make the detailed view fill the entire list area
- PropertyChanges { target: wrapper; height: list.height }
- // Move the list so that this item is at the top.
- PropertyChanges { target: wrapper.ListView.view; explicit: true; viewportY: wrapper.y }
- // Disallow flicking while we're in detailed view
- PropertyChanges { target: wrapper.ListView.view; interactive: false }
- }
- ]
- transitions: [
- Transition {
- // Make the state changes smooth
- ParallelAnimation {
- ColorAnimation { property: "color"; duration: 500 }
- NumberAnimation {
- duration: 300; properties: "detailsOpacity,x,viewportY,height,width"
- }
- }
+ Image {
+ anchors.right: flick.right; anchors.top: flick.top
+ source: "content/pics/moreUp.png"; opacity: flick.atYBeginning ? 0 : 1
+ }
+ Image {
+ anchors.right: flick.right; anchors.bottom: flick.bottom
+ source: "content/pics/moreDown.png"; opacity: flick.atYEnd ? 0 : 1
+ }
+ }
+
+ // A button to close the detailed view, i.e. set the state back to default ('').
+ MediaButton {
+ anchors.right: background.right; anchors.rightMargin: 5
+ y: 10; opacity: wrapper.detailsOpacity
+ text: "Close"; onClicked: wrapper.state = '';
+ }
+
+ // Make the default height equal the hight of the picture, plus margin.
+ height: 68
+
+ states: State {
+ name: "Details"
+ PropertyChanges { target: background; color: "white" }
+ // Make the picture bigger
+ PropertyChanges { target: recipePic; width: 128; height: 128 }
+ // Make details visible
+ PropertyChanges { target: wrapper; detailsOpacity: 1; x: 0 }
+ // Make the detailed view fill the entire list area
+ PropertyChanges { target: wrapper; height: list.height }
+ // Move the list so that this item is at the top.
+ PropertyChanges { target: wrapper.ListView.view; explicit: true; viewportY: wrapper.y }
+ // Disallow flicking while we're in detailed view
+ PropertyChanges { target: wrapper.ListView.view; interactive: false }
+ }
+
+ transitions: Transition {
+ // Make the state changes smooth
+ ParallelAnimation {
+ ColorAnimation { property: "color"; duration: 500 }
+ NumberAnimation {
+ duration: 300; properties: "detailsOpacity,x,viewportY,height,width"
}
- ]
+ }
}
}
- ]
+ }
+
// The actual list
ListView {
id: list
diff --git a/examples/declarative/webview/newwindows.qml b/examples/declarative/webview/newwindows.qml
index 59e3b3e..e2ed58f 100644
--- a/examples/declarative/webview/newwindows.qml
+++ b/examples/declarative/webview/newwindows.qml
@@ -7,22 +7,23 @@ import Qt 4.6
Row {
id: pages
- height: 200
- resources: [
- Component {
- id: webViewPage
- Rectangle {
- width: webView.width
- height: webView.height
- WebView {
- id: webView
- newWindowComponent: webViewPage
- newWindowParent: pages
- url: "newwindows.html"
- }
- }
+ height: 200; width: 500
+
+ Component {
+ id: webViewPage
+ Rectangle {
+ width: webView.width
+ height: webView.height
+ border.color: "gray"
+
+ WebView {
+ id: webView
+ newWindowComponent: webViewPage
+ newWindowParent: pages
+ url: "newwindows.html"
+ }
}
- ]
- width: 500
+ }
+
Loader { sourceComponent: webViewPage }
}
diff --git a/examples/declarative/xmldata/daringfireball.qml b/examples/declarative/xmldata/daringfireball.qml
index bea38c8..938bdd5 100644
--- a/examples/declarative/xmldata/daringfireball.qml
+++ b/examples/declarative/xmldata/daringfireball.qml
@@ -2,59 +2,44 @@ import Qt 4.6
Rectangle {
color: "white"
- width: 600
- height: 600
- resources: [
- XmlListModel {
- id: feedModel
- source: "http://daringfireball.net/index.xml"
- query: "/feed/entry"
- namespaceDeclarations: "declare default element namespace 'http://www.w3.org/2005/Atom';"
- XmlRole {
- name: "title"
- query: "title/string()"
- }
- XmlRole {
- name: "tagline"
- query: "author/name/string()"
+ width: 600; height: 600
+
+ XmlListModel {
+ id: feedModel
+ source: "http://daringfireball.net/index.xml"
+ query: "/feed/entry"
+ namespaceDeclarations: "declare default element namespace 'http://www.w3.org/2005/Atom';"
+ XmlRole { name: "title"; query: "title/string()" }
+ XmlRole { name: "tagline"; query: "author/name/string()" }
+ XmlRole { name: "content"; query: "content/string()" }
+ }
+
+ Component {
+ id: feedDelegate
+ Item {
+ height: childrenRect.height + 20
+ Text {
+ id: titleText
+ x: 10
+ text: title; font.bold: true
}
- XmlRole {
- name: "content"
- query: "content/string()"
+ Text {
+ text: 'by ' + tagline
+ anchors.left: titleText.right; anchors.leftMargin: 10
+ font.italic: true
}
- },
- Component {
- id: feedDelegate
- Item {
- height: childrenRect.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) }
- }
+ 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
+ model: feedModel; delegate: feedDelegate
}
}