diff options
Diffstat (limited to 'examples')
21 files changed, 508 insertions, 843 deletions
diff --git a/examples/declarative/animation/animation.qml b/examples/declarative/animation/animation.qml index ccfe164..31c75e1 100644 --- a/examples/declarative/animation/animation.qml +++ b/examples/declarative/animation/animation.qml @@ -4,17 +4,20 @@ Rectangle { width: 400 height: 200 color: "white" + Rectangle { width: 40 height: 40 y: 80 color: "#FF0000" radius: 10 + // Animate the x property. Setting repeat to true makes the // animation repeat indefinitely, otherwise it would only run once. x: SequentialAnimation { running: true repeat: true + // Move from 0 to 360 in 500ms, using the easeInOutQuad easing function NumberAnimation { from: 0 @@ -22,10 +25,12 @@ Rectangle { easing: "easeInOutQuad" duration: 500 } + // Then pause for 200ms PauseAnimation { duration: 200 } + // Then move back to 0 in 2 seconds, using the easeInOutElastic easing function NumberAnimation { from: 360 @@ -34,16 +39,19 @@ Rectangle { duration: 2000 } } + // Alternate color between red and green color: SequentialAnimation { running: true repeat: true + ColorAnimation { property: "color" from: "#FF0000" to: "#00FF00" duration: 5000 } + ColorAnimation { property: "color" from: "#00FF00" diff --git a/examples/declarative/border-image/MyBorderImage.qml b/examples/declarative/border-image/MyBorderImage.qml index d64bfb2..9eb1270 100644 --- a/examples/declarative/border-image/MyBorderImage.qml +++ b/examples/declarative/border-image/MyBorderImage.qml @@ -1,9 +1,10 @@ import Qt 4.6 Item { - property var horizontalMode : BorderImage.Stretch - property var verticalMode : BorderImage.Stretch + property alias horizontalMode: image.horizontalTileMode + property alias verticalMode: image.verticalTileMode property alias source: image.source + property int minWidth property int minHeight property int maxWidth @@ -12,6 +13,7 @@ Item { id: container width: 240; height: 240 + BorderImage { id: image; x: container.width / 2 - width / 2; y: container.height / 2 - height / 2 @@ -27,8 +29,6 @@ Item { NumberAnimation { from: container.maxHeight; to: container.minHeight; duration: 2000; easing: "easeInOutQuad" } } - horizontalTileMode: container.horizontalMode - verticalTileMode: container.verticalMode border.top: container.margin border.left: container.margin border.bottom: container.margin diff --git a/examples/declarative/connections/connections.qml b/examples/declarative/connections/connections.qml index 521cc01..b693b7e 100644 --- a/examples/declarative/connections/connections.qml +++ b/examples/declarative/connections/connections.qml @@ -5,6 +5,7 @@ Rectangle { color: "blue" width: 40 height: 30 + Rectangle { id: dot color: "red" @@ -13,19 +14,19 @@ Rectangle { x: rect.width/2 y: rect.height/2 } + MouseRegion { id: mr anchors.fill: rect } + Connection { sender: mr signal: "clicked(mouse)" script: { - - color="green"; - dot.x = mouse.x-1; - dot.y = mouse.y-1; - + color = "green"; + dot.x = mouse.x-1; + dot.y = mouse.y-1; } } } diff --git a/examples/declarative/dynamic/dynamic.js b/examples/declarative/dynamic/dynamic.js index 8f1e138..8bfdba3 100644 --- a/examples/declarative/dynamic/dynamic.js +++ b/examples/declarative/dynamic/dynamic.js @@ -2,54 +2,56 @@ var dynamicObject = null; var fourthBox = null; var component = null; var started = false; + function createQml(p) { - return createQmlObject('DynRect {}',p,'DynPart.qml'); + return createQmlObject('DynRect {}', p, 'DynPart.qml'); } function destroyDynamicObject() { - if(!(dynamicObject==null)){ + if (!(dynamicObject == null)) { dynamicObject.destroy(); dynamicObject = null; } } function instantCreateWithComponent() {//Like create, but assumes instant readyness - if(dynamicObject!=null)//Already made + if (dynamicObject != null)//Already made return null; component = createComponent("dynamic.qml"); dynamicObject = component.createObject(); - if(dynamicObject == null){ + + if (dynamicObject == null) { print("error creating component"); - }else{ + } else { dynamicObject.parent = targetItem; return dynamicObject; } return null; } -function finishCreation(){ - if(component.isReady && dynamicObject == null){ +function finishCreation() { + if (component.isReady && dynamicObject == null) { dynamicObject = component.createObject(); dynamicObject.parent = targetItem; - }else if(component.isError){ + } else if (component.isError) { dynamicObject = null; print("error creating component"); print(component.errorsString()); } } -function createWithComponent(){ - if(component!=null){ +function createWithComponent() { + if (component != null) { return finishCreation(); } - if(started!=false){ + if (started != false) { finishCreation();//Remakes if destroyed return dynamicObject; } started = true; component = createComponent("dynamic.qml"); finishCreation(); - if(dynamicObject != null){ + if (dynamicObject != null) { return dynamicObject; } component.statusChanged.connect(finishCreation); diff --git a/examples/declarative/dynamic/dynamic.qml b/examples/declarative/dynamic/dynamic.qml index 6ea7ab8..66fdf87 100644 --- a/examples/declarative/dynamic/dynamic.qml +++ b/examples/declarative/dynamic/dynamic.qml @@ -1,22 +1,55 @@ import Qt 4.6 -Rectangle { id: page; width: 800; height: 800; color:"black" +Rectangle { + id: page + width: 800 + height: 800 + color: "black" Script { source: "dynamic.js" } - property bool extendStars: false; + + property bool extendStars: false + Item { id: targetItem; x: 100; y: 100; } Item { id: targetItem2; x: 0; y: 300; } - Rectangle { width: 100; height: 100; color: "green"; id: rect - MouseRegion { anchors.fill:parent; onClicked: {a = createWithComponent();}} + + Rectangle { + id: rect + width: 100 + height: 100 + color: "green" + + MouseRegion { + anchors.fill: parent + onClicked: { a = createWithComponent(); } + } } - Rectangle { width: 100; height: 100; color: "red"; id: rect2; y:100; - MouseRegion { anchors.fill:parent; onClicked: {destroyDynamicObject();}} + + Rectangle { + id: rect2 + width: 100 + height: 100 + y: 100 + color: "red" + + MouseRegion { + anchors.fill:parent + onClicked: { destroyDynamicObject(); } + } } - Rectangle { width: 100; height: 100; color: "blue"; id: rect3; y:200; - MouseRegion { anchors.fill:parent; onClicked: - { - if(fourthBox == null) { + + Rectangle { + id: rect3 + width: 100 + height: 100 + y: 200 + color: "blue" + + MouseRegion { + anchors.fill: parent + onClicked: { + if (fourthBox == null) { a = createQml(targetItem2); - if(a!=null) { + if (a != null) { a.parent = targetItem2;//BUG: this should happen automatically fourthBox = a; print(a.toStr()); @@ -31,5 +64,14 @@ Rectangle { id: page; width: 800; height: 800; color:"black" } } } - Particles { x:0; y:0; count:20; lifeSpan:500; width:100; height: if(extendStars){400;}else{300;} source:"star.png"} + + Particles { + x: 0 + y: 0 + count: 20 + lifeSpan: 500 + width: 100 + height: if (extendStars) { 400; } else { 300; } + source: "star.png" + } } diff --git a/examples/declarative/effects/test.qml b/examples/declarative/effects/test.qml index 83bfde2..73c6839 100644 --- a/examples/declarative/effects/test.qml +++ b/examples/declarative/effects/test.qml @@ -2,89 +2,108 @@ import Qt 4.6 Rectangle { color: "white" - width: 800 + width: 600 height: 600 Image { + id: blur source: "pic.jpg" effect: Blur { - blurRadius: NumberAnimation { id: blur; from: 0; to: 10; duration: 200; repeat: true } + blurRadius: NumberAnimation { + id: blurEffect + from: 0; to: 10 + duration: 200 + repeat: true + } } - MouseRegion { anchors.fill: parent; onClicked: blur.running = !blur.running } - - Text { color: "white"; text: "Blur" } + MouseRegion { anchors.fill: parent; onClicked: blurEffect.running = !blurEffect.running } } + Text { text: "Blur"; anchors.top: blur.bottom; anchors.horizontalCenter: blur.horizontalCenter } + Image { + id: grayscale source: "pic.jpg" - x: 200 - effect: Grayscale {} - Text { color: "white"; text: "Grayscale" } + effect: Grayscale {} } + Text { text: "Grayscale"; anchors.top: grayscale.bottom; anchors.horizontalCenter: grayscale.horizontalCenter } + Image { + id: colorize source: "pic.jpg" - x: 400 - effect: Colorize { color: "blue" } - Text { color: "white"; text: "Colorize" } + effect: Colorize { color: "blue" } } + Text { text: "Colorize"; anchors.top: colorize.bottom; anchors.horizontalCenter: colorize.horizontalCenter } + Image { + id: pixelize source: "pic.jpg" - y: 300 + effect: Pixelize { - pixelSize: NumberAnimation { id: pixelize; from: 0; to: 10; duration: 200; repeat: true } + pixelSize: NumberAnimation { + id: pixelizeEffect + from: 0; to: 10 + duration: 200 + repeat: true + } } - MouseRegion { anchors.fill: parent; onClicked: pixelize.running = !pixelize.running } - - Text { color: "white"; text: "Pixelize" } + MouseRegion { anchors.fill: parent; onClicked: pixelizeEffect.running = !pixelizeEffect.running } } + Text { text: "Pixelize"; anchors.top: pixelize.bottom; anchors.horizontalCenter: pixelize.horizontalCenter } Image { + id: dropShadow source: "pic.jpg" - x: 200 y: 300 + effect: DropShadow { blurRadius: 3 offset.x: 3 - offset.y: NumberAnimation { id: dropShadow; from: 0; to: 10; duration: 200; repeat: true; } + offset.y: NumberAnimation { id: dropShadowEffect; from: 0; to: 10; duration: 200; repeat: true; } } - MouseRegion { anchors.fill: parent; onClicked: dropShadow.running = !dropShadow.running } - - Text { color: "white"; text: "DropShadow" } + MouseRegion { anchors.fill: parent; onClicked: dropShadowEffect.running = !dropShadowEffect.running } } + Text { text: "Drop Shadow"; anchors.top: dropShadow.bottom; anchors.horizontalCenter: dropShadow.horizontalCenter } Image { + id: bloom source: "pic.jpg" - x: 400 y: 300 + effect: Bloom { blurRadius: 3 brightness: 128 - strength: NumberAnimation { id: bloom; from: 0; to: 1; duration: 200; repeat: true; } + strength: NumberAnimation { + id: bloomEffect + from: 0; to: 1 + duration: 200 + repeat: true + } } - MouseRegion { anchors.fill: parent; onClicked: bloom.running = !bloom.running } - - Text { color: "white"; text: "Bloom" } + MouseRegion { anchors.fill: parent; onClicked: bloomEffect.running = !bloomEffect.running } } + Text { text: "Bloom"; anchors.top: bloom.bottom; anchors.horizontalCenter: bloom.horizontalCenter } + Text { x: 100; y: 250 - text: "Clicking Blur, Pixelize or DropShadow will \ntoggle animation." + text: "Clicking Blur, Pixelize, Drop Shadow or Bloom will \ntoggle animation." color: "black" } diff --git a/examples/declarative/gridview/gridview.qml b/examples/declarative/gridview/gridview.qml index 2e5110a..93931c7 100644 --- a/examples/declarative/gridview/gridview.qml +++ b/examples/declarative/gridview/gridview.qml @@ -4,57 +4,35 @@ Rectangle { width: 300; height: 400; color: "white" ListModel { - id: AppModel - ListElement { - name: "Music" - icon: "AudioPlayer_48.png" - } - ListElement { - name: "Movies" - icon: "VideoPlayer_48.png" - } - ListElement { - name: "Camera" - icon: "Camera_48.png" - } - ListElement { - name: "Calendar" - icon: "DateBook_48.png" - } - ListElement { - name: "Messaging" - icon: "EMail_48.png" - } - ListElement { - name: "Todo List" - icon: "TodoList_48.png" - } - ListElement { - name: "Contacts" - icon: "AddressBook_48.png" - } + id: appModel + ListElement { name: "Music"; icon: "pics/AudioPlayer_48.png" } + ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" } + ListElement { name: "Camera"; icon: "pics/Camera_48.png" } + ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" } + ListElement { name: "Messaging"; icon: "pics/EMail_48.png" } + ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" } + ListElement { name: "Contacts"; icon: "pics/AddressBook_48.png" } } Component { - id: AppDelegate + id: appDelegate Item { width: 100; height: 100 - Image { id: Icon; y: 20; anchors.horizontalCenter: parent.horizontalCenter; source: icon } - Text { anchors.top: Icon.bottom; anchors.horizontalCenter: parent.horizontalCenter; text: name } + Image { id: myIcon; y: 20; anchors.horizontalCenter: parent.horizontalCenter; source: icon } + Text { anchors.top: myIcon.bottom; anchors.horizontalCenter: parent.horizontalCenter; text: name } } } Component { - id: AppHighlight - Rectangle { width: 80; height: 80; color: "#FFFF88" } + id: appHighlight + Rectangle { width: 80; height: 80; color: "lightsteelblue" } } GridView { - id: List1 anchors.fill: parent cellWidth: 100; cellHeight: 100 - model: AppModel; delegate: AppDelegate - highlight: AppHighlight + model: appModel; delegate: appDelegate + highlight: appHighlight focus: true } } diff --git a/examples/declarative/layouts/Button.qml b/examples/declarative/layouts/Button.qml index 1fa0dee..44d0c7b 100644 --- a/examples/declarative/layouts/Button.qml +++ b/examples/declarative/layouts/Button.qml @@ -1,8 +1,10 @@ import Qt 4.6 + Rectangle { border.color: "black"; color: "steelblue"; radius: 5; width: pix.width + textelement.width + 13; height: pix.height + 10; id: page property string text property string icon signal clicked + Image { id: pix; x: 5; y:5; source: parent.icon} Text { id: textelement; text: page.text; color: "white"; x:pix.width+pix.x+3; anchors.verticalCenter: pix.verticalCenter;} MouseRegion{ id:mr; anchors.fill: parent; onClicked: {parent.focus = true; page.clicked()}} @@ -15,6 +17,6 @@ Rectangle { border.color: "black"; color: "steelblue"; radius: 5; width: pix.wid transitions: Transition{ - NumberAnimation{ properties:"x,left"; easing:"easeInOutQuad"; duration:200 } + NumberAnimation { properties:"x,left"; easing:"easeInOutQuad"; duration:200 } } } diff --git a/examples/declarative/layouts/layouts.qml b/examples/declarative/layouts/layouts.qml index b54a7f3..accd969 100644 --- a/examples/declarative/layouts/layouts.qml +++ b/examples/declarative/layouts/layouts.qml @@ -1,20 +1,25 @@ import Qt 4.6 -Item { id: resizable - width:400; height:400; - GraphicsObjectContainer{ +Item { + id: resizable + width:400 + height:400 + + GraphicsObjectContainer { anchors.fill:parent - QGraphicsWidget{ + + QGraphicsWidget { size.width:parent.width size.height:parent.height - layout: QGraphicsLinearLayout{ - LayoutItem{ + + layout: QGraphicsLinearLayout { + LayoutItem { minimumSize: "100x100" maximumSize: "300x300" preferredSize: "100x100" Rectangle { color: "yellow"; anchors.fill: parent } } - LayoutItem{ + LayoutItem { minimumSize: "100x100" maximumSize: "400x400" preferredSize: "200x200" diff --git a/examples/declarative/layouts/positioners.qml b/examples/declarative/layouts/positioners.qml index fe28105..90efde2 100644 --- a/examples/declarative/layouts/positioners.qml +++ b/examples/declarative/layouts/positioners.qml @@ -1,43 +1,130 @@ import Qt 4.6 -Rectangle { width: 420; height: 420; id:page; color:"white" - Column { id: layout1; y:0; //width: 100; height:250; - move: Transition{ NumberAnimation {properties: "y"; easing: "easeOutBounce" }} - add: Transition{ NumberAnimation { properties: "y"; from: 500; duration:500; easing: "easeOutQuad"}} - remove: Transition { NumberAnimation { properties:"y"; to: 500; duration:500; easing: "easeInQuad"}} - Rectangle { color: "red"; width: 100; height: 50; border.color: "black"; radius: 15 } - Rectangle { id: blueV1; color: "lightsteelblue"; width: 100; height: 50; border.color: "black"; radius: 15 - //opacity: Behavior{ NumberAnimation {}} + +Rectangle { + id: page + width: 420 + height: 420 + color: "white" + + Column { + id: layout1 + y: 0 + move: Transition { + NumberAnimation { + properties: "y"; easing: "easeOutBounce" + } } - Rectangle { color: "green"; width: 100; height: 50; border.color: "black"; radius: 15 } - Rectangle { id: blueV2; color: "lightsteelblue"; width: 100; height: 50; border.color: "black"; radius: 15 - //opacity: Behavior{ NumberAnimation {}} + add: Transition { + NumberAnimation { + properties: "y"; from: 500; duration:500; easing: "easeOutQuad" + } } + remove: Transition { + NumberAnimation { + properties:"y"; to: 500; duration:500; easing: "easeInQuad" + } + } + Rectangle { color: "red"; width: 100; height: 50; border.color: "black"; radius: 15 } + Rectangle { id: blueV1; color: "lightsteelblue"; width: 100; height: 50; border.color: "black"; radius: 15 } + Rectangle { color: "green"; width: 100; height: 50; border.color: "black"; radius: 15 } + Rectangle { id: blueV2; color: "lightsteelblue"; width: 100; height: 50; border.color: "black"; radius: 15 } Rectangle { color: "orange"; width: 100; height: 50; border.color: "black"; radius: 15 } } - Row { id: layout2; y:300; - move: Transition{ NumberAnimation {properties: "x"; easing: "easeOutBounce" }} - add: Transition{ NumberAnimation { properties: "x"; from: 500; duration:500; easing: "easeOutQuad"} - NumberAnimation { properties: "opacity"; from: 0; duration: 500;}} - remove: Transition { NumberAnimation { properties: "x"; to: 500; duration:500; easing: "easeInQuad"} - NumberAnimation { properties: "opacity"; from: 1; duration: 500}} + + Row { + id: layout2 + y: 300 + move: Transition { + NumberAnimation { + properties: "x"; easing: "easeOutBounce" + } + } + add: Transition { + NumberAnimation { + properties: "x"; from: 500; duration:500; easing: "easeOutQuad" + } + NumberAnimation { + properties: "opacity"; from: 0; duration: 500; + } + } + remove: Transition { + NumberAnimation { + properties: "x"; to: 500; duration:500; easing: "easeInQuad" + } + NumberAnimation { + properties: "opacity"; from: 1; duration: 500 + } + } Rectangle { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 } Rectangle { id: blueH1; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 } Rectangle { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 } Rectangle { id: blueH2; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 } Rectangle { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 } } - Button { text: "Remove"; icon: "del.png"; x: 135; y:90; - onClicked: {blueH2.opacity=0; blueH1.opacity=0; blueV1.opacity=0; blueV2.opacity=0; blueG1.opacity=0; blueG2.opacity=0; blueG3.opacity=0;} - } - Button { text: "Add"; icon: "add.png"; x: 145; y:140; - onClicked: {blueH2.opacity=1; blueH1.opacity=1; blueV1.opacity=1; blueV2.opacity=1; blueG1.opacity=1; blueG2.opacity=1; blueG3.opacity=1;} - } - Grid { x:260; y:0; columns:3 - remove: Transition { NumberAnimation{ properties: "opacity"; from: 1; to: 0; duration: 500} - NumberAnimation{properties: "x,y"; easing: "easeOutBounce"} } - move: Transition { NumberAnimation{ properties: "x,y"; easing: "easeOutBounce" }} - add: Transition { NumberAnimation{ properties: "opacity"; from: 0; to: 1; duration: 500} - NumberAnimation{properties: "x,y"; easing: "easeOutBounce"} } + + Button { + text: "Remove" + icon: "del.png" + x: 135 + y: 90 + + onClicked: { + blueH2.opacity = 0 + blueH1.opacity = 0 + blueV1.opacity = 0 + blueV2.opacity = 0 + blueG1.opacity = 0 + blueG2.opacity = 0 + blueG3.opacity = 0 + } + } + + Button { + text: "Add" + icon: "add.png" + x: 145 + y: 140 + + onClicked: { + blueH2.opacity = 1 + blueH1.opacity = 1 + blueV1.opacity = 1 + blueV2.opacity = 1 + blueG1.opacity = 1 + blueG2.opacity = 1 + blueG3.opacity = 1 + } + } + + Grid { + x: 260 + y: 0 + columns: 3 + + remove: Transition { + NumberAnimation { + properties: "opacity"; from: 1; to: 0; duration: 500 + } + NumberAnimation { + properties: "x,y"; easing: "easeOutBounce" + } + } + + move: Transition { + NumberAnimation { + properties: "x,y"; easing: "easeOutBounce" + } + } + + add: Transition { + NumberAnimation { + properties: "opacity"; from: 0; to: 1; duration: 500 + } + NumberAnimation { + properties: "x,y"; easing: "easeOutBounce" + } + } + Rectangle { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 } Rectangle { id: blueG1; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 } Rectangle { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 } 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/snow/ImageBatch.qml b/examples/declarative/snow/ImageBatch.qml index 62f986c..3945087 100644 --- a/examples/declarative/snow/ImageBatch.qml +++ b/examples/declarative/snow/ImageBatch.qml @@ -35,14 +35,14 @@ GridView { XmlRole { name: "url"; query: "media:content/@url/string()" } } - Item { + delegate: Item { id: root property bool isSelected: GridView.isCurrentItem && grid.isSelected transformOrigin: "Center" width: grid.imageWidth; height: grid.imageHeight; Image { id: flickrImage; source: url; fillMode: "PreserveAspectFit"; smooth: true; anchors.fill: parent; - opacity: (status == 1)?1:0; opacity: Behavior { NumberAnimation { properties: "opacity" } } } + opacity: (status == Image.Ready)?1:0; opacity: Behavior { NumberAnimation { properties: "opacity" } } } Loading { anchors.centerIn: parent; visible: flickrImage.status!=1 } states: State { diff --git a/examples/declarative/support/contact.cpp b/examples/declarative/support/contact.cpp deleted file mode 100644 index 9ffeb97..0000000 --- a/examples/declarative/support/contact.cpp +++ /dev/null @@ -1,81 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 1992-$THISYEAR$ $TROLLTECH$. All rights reserved. -** -** This file is part of the $MODULE$ of the Qt Toolkit. -** -** $TROLLTECH_DUAL_LICENSE$ -** -** This file is provided AS IS with NO WARRANTY OF ANY KIND, INCLUDING THE -** WARRANTY OF DESIGN, MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. -** -****************************************************************************/ - -#include "contact.h" - -QML_DEFINE_TYPE(0,0,0,0,Contact,Contact); -Contact::Contact() : QObject(0) -{ - m_firstName = "John"; - m_lastName = "Smith"; - m_portraitFile = "contact.png"; - m_company = "Trollkia"; - m_emails << "smith@trollkia.com" << "john45@gmail.com"; - - m_numbers << new PhoneNumber; - m_numbers << new PhoneNumber; - m_numbers << new PhoneNumber; - - m_numbers.at(0)->setType(PhoneNumber::HomePhone); - m_numbers.at(0)->setNumber("35412451"); - - m_numbers.at(1)->setType(PhoneNumber::BusinessPhone); - m_numbers.at(1)->setNumber("33424994"); - - m_numbers.at(2)->setType(PhoneNumber::MobilePhone); - m_numbers.at(2)->setNumber("0424655137"); - - m_addresses << new Address; - m_addresses << new Address; - m_addresses << new Address; - m_addresses.at(0)->setNumber(13); - m_addresses.at(0)->setStreet("Blackhill Cr"); - m_addresses.at(0)->setCountry("Australia"); - m_addresses.at(1)->setNumber(116); - m_addresses.at(1)->setStreet("Sandankerveien"); - m_addresses.at(1)->setCountry("Norway"); - m_addresses.at(2)->setNumber(92); - m_addresses.at(2)->setStreet("Elizibeth St"); - m_addresses.at(2)->setCountry("Australia"); -} - -void Contact::addNumber(PhoneNumber *newNumber) -{ - m_numbers << newNumber; - emit numbersChanged(); -} - -void Contact::addAddress(Address *newAddress) -{ - m_addresses << newAddress; - emit addressesChanged(); -} - -void Contact::addEmail(QString &newEmail) -{ - - m_emails << newEmail; - emit emailsChanged(); -} - -QML_DEFINE_TYPE(0,0,0,0,Address,Address); -Address::Address() -: _number(0) -{ -} - -QML_DEFINE_TYPE(0,0,0,0,PhoneNumber, PhoneNumber); -PhoneNumber::PhoneNumber() -: _type(HomePhone) -{ -} diff --git a/examples/declarative/support/contact.h b/examples/declarative/support/contact.h deleted file mode 100644 index 7b25869..0000000 --- a/examples/declarative/support/contact.h +++ /dev/null @@ -1,140 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 1992-$THISYEAR$ $TROLLTECH$. All rights reserved. -** -** This file is part of the $MODULE$ of the Qt Toolkit. -** -** $TROLLTECH_DUAL_LICENSE$ -** -** This file is provided AS IS with NO WARRANTY OF ANY KIND, INCLUDING THE -** WARRANTY OF DESIGN, MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. -** -****************************************************************************/ - -#ifndef CONTACT_H -#define CONTACT_H - -#include <qml.h> -#include <QtCore> - -class Address : public QObject -{ - Q_OBJECT -public: - Address(); - - Q_PROPERTY(int number READ number WRITE setNumber NOTIFY changed); - Q_PROPERTY(QString street READ street WRITE setStreet NOTIFY changed); - Q_PROPERTY(QString country READ country WRITE setCountry NOTIFY changed); - - int number() const { return _number; } - void setNumber(int n) { _number = n; emit changed(); } - - QString street() const { return _street; } - void setStreet(const QString &s) { _street = s; emit changed(); } - - QString country() const { return _country; } - void setCountry(const QString &c) { _country = c; emit changed(); } - -signals: - void changed(); - -private: - int _number; - QString _street; - QString _country; -}; -QML_DECLARE_TYPE(Address); - -class PhoneNumber : public QObject -{ - Q_OBJECT - Q_ENUMS(PhoneType) -public: - PhoneNumber(); - - enum PhoneType { - HomePhone, - BusinessPhone, - MobilePhone - }; - - Q_PROPERTY(QString number READ number WRITE setNumber NOTIFY changed); - Q_PROPERTY(PhoneType type READ type WRITE setType NOTIFY changed); - - QString number() const { return _number; } - void setNumber(QString n) { _number = n; emit changed(); } - - PhoneType type() const { return _type; } - void setType(PhoneType type) { _type = type; emit changed(); } - -signals: - void changed(); - -private: - QString _number; - PhoneType _type; -}; -QML_DECLARE_TYPE(PhoneNumber); - -class Contact : public QObject -{ - Q_OBJECT -public: - Contact(); - - Q_PROPERTY(QString firstName READ firstName WRITE setFirstName NOTIFY nameChanged); - QString firstName() const { return m_firstName; } - - Q_PROPERTY(QString lastName READ lastName WRITE setLastName NOTIFY nameChanged); - QString lastName() const { return m_lastName; } - - Q_PROPERTY(QString portraitFile READ portraitFile WRITE setPortraitFile NOTIFY portraitChanged); - QString portraitFile() const { return m_portraitFile; } - - Q_PROPERTY(QString company READ company WRITE setCompany NOTIFY companyChanged); - QString company() const { return m_company; } - - Q_PROPERTY(QStringList emails READ emails WRITE setEmails NOTIFY emailsChanged); - QStringList emails() const { return m_emails; } - - Q_PROPERTY(QList<Address *>* addresses READ addresses); - QList<Address *>* addresses() { return &m_addresses; } - - Q_PROPERTY(QList<PhoneNumber *>* numbers READ numbers); - QList<PhoneNumber *>* numbers() { return &m_numbers; } - - - void addEmail(QString&); - void addAddress(Address*); - void addNumber(PhoneNumber*); - -public slots: - void setFirstName(const QString &name) { m_firstName = name; emit nameChanged(); } - void setLastName(const QString &name) { m_lastName = name; emit nameChanged(); } - void setPortraitFile(const QString &portraitFile) { m_portraitFile = portraitFile; emit portraitChanged(); } - void setCompany(const QString &company) { m_company = company; emit companyChanged(); } - void setEmails(const QStringList &emails) { m_emails = emails; emit emailsChanged(); } - -signals: - void nameChanged(); - void portraitChanged(); - void companyChanged(); - void emailsChanged(); - void numbersChanged(); - void addressesChanged(); - -private: - QString m_firstName; - QString m_lastName; - QString m_portraitFile; - - QString m_company; - - QList<Address *> m_addresses; - QList<PhoneNumber *>m_numbers; - QStringList m_emails; -}; -QML_DECLARE_TYPE(Contact); - -#endif diff --git a/examples/declarative/support/contactmodel.cpp b/examples/declarative/support/contactmodel.cpp deleted file mode 100644 index ff71b9c..0000000 --- a/examples/declarative/support/contactmodel.cpp +++ /dev/null @@ -1,158 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 1992-$THISYEAR$ $TROLLTECH$. All rights reserved. -** -** This file is part of the $MODULE$ of the Qt Toolkit. -** -** $TROLLTECH_DUAL_LICENSE$ -** -** This file is provided AS IS with NO WARRANTY OF ANY KIND, INCLUDING THE -** WARRANTY OF DESIGN, MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. -** -****************************************************************************/ - -#include "contactmodel.h" - -ContactModel::ContactModel(QObject *parent) : QListModelInterface(parent) -{ - QFile f("../contacts/contacts.txt"); - f.open(QIODevice::ReadOnly); - QTextStream ts(&f); - QString text = ts.readLine(); - while(!text.isEmpty()) { - Contact *c = new Contact; - QStringList list = text.split(" "); - c->setFirstName(list[0]); - c->setLastName(list[1]); - for (int i = 2; i < list.count(); ++i) - c->addEmail(list[i]); - //contactList.append(c); - insertContact(c); - - text = ts.readLine(); - } - f.close(); -} - -ContactModel::~ContactModel() -{ - while (!contactList.isEmpty()) { - Contact *c = contactList.takeFirst(); - delete c; - } -} - -int ContactModel::count() const -{ - return contactList.count(); -} - -QHash<int,QVariant> ContactModel::data(int index, const QList<int> &roles) const -{ - QHash<int,QVariant> returnHash; - - for (int i = 0; i < roles.size(); ++i) { - int role = roles.at(i); - QVariant info; - switch(role) { - case PortraitRole: - info = "contact.png"; - break; - case FirstNameRole: - info = contactList.at(index)->firstName(); - break; - case LastNameRole: - info = contactList.at(index)->lastName(); - break; - case CompanyRole: - info = contactList.at(index)->company(); - break; - case EmailsRole: - info = contactList.at(index)->emails(); - break; - case AddressesRole: - //returns QVariant BOOL - info = QVariant::fromValue(contactList.at(index)->addresses()); - break; - case NumbersRole: - info = QVariant::fromValue(contactList.at(index)->numbers()); - break; - default: - break; - } - returnHash.insert(role, info); - } - - return returnHash; -} - -QString ContactModel::toString(int role) const -{ - switch(role) { - case PortraitRole: - return "portrait"; - case FirstNameRole: - return "firstName"; - case LastNameRole: - return "lastName"; - case CompanyRole: - return "company"; - case EmailsRole: - return "emails"; - case AddressesRole: - return "addresses"; - case NumbersRole: - return "numbers"; - default: - return ""; - } -} - -QList<int> ContactModel::roles() const -{ - return QList<int>() << PortraitRole << FirstNameRole << LastNameRole << CompanyRole << EmailsRole << AddressesRole << NumbersRole; -} - -void ContactModel::deleteContact(int index) -{ - delete contactList.takeAt(index); - emit itemsRemoved(index, 1); -} - -int ContactModel::insertContact(Contact *contact) -{ - int index = 0; - QString fullName = contact->lastName(); - index = findIndex(fullName); - contactList.insert(index, contact); - emit itemsInserted(index, 1); - return index; -} - - -//search - binary search algorithm lastname only - -int ContactModel::findIndex(QString &searchName) const -{ - int start = 0; - int end = contactList.size()-1; - int middle = 0; - QString middleString; - - while (start <= end) - { - middle = (start+end)/2; - middleString = contactList.at(middle)->lastName(); - if (isAfter(searchName, middleString) < 0) start = middle+1; - else if( isAfter(middleString, searchName) < 0) end = middle-1; - else return middle; - } - return start; -} - -int ContactModel::isAfter(QString &name1, QString &name2) const -{ - //if c1 is after c2 alphabetically, return positive - int compString = QString::compare(name1, name2, Qt::CaseInsensitive); - return -compString; -} diff --git a/examples/declarative/support/contactmodel.h b/examples/declarative/support/contactmodel.h deleted file mode 100644 index e262358..0000000 --- a/examples/declarative/support/contactmodel.h +++ /dev/null @@ -1,55 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 1992-$THISYEAR$ $TROLLTECH$. All rights reserved. -** -** This file is part of the $MODULE$ of the Qt Toolkit. -** -** $TROLLTECH_DUAL_LICENSE$ -** -** This file is provided AS IS with NO WARRANTY OF ANY KIND, INCLUDING THE -** WARRANTY OF DESIGN, MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. -** -****************************************************************************/ - -#ifndef _CONTACTMODEL_H_ -#define _CONTACTMODEL_H_ - -#include <qlistmodelinterface.h> -#include "contact.h" - -class ContactModel : public QListModelInterface -{ - Q_OBJECT -public: - ContactModel(QObject *parent = 0); - ~ContactModel(); - - enum Roles { - PortraitRole, - FirstNameRole, - LastNameRole, - CompanyRole, - EmailsRole, - AddressesRole, - NumbersRole - }; - - int count() const; - - QHash<int,QVariant> data(int index, const QList<int> &roles) const; - QList<int> roles() const; - - - QString toString(int role) const; - - void deleteContact(int index); - int insertContact(Contact *contact); - - int isAfter(QString &name1, QString &name2) const; - int findIndex(QString &searchName) const; - -private: - QList<Contact*> contactList; -}; - -#endif diff --git a/examples/declarative/support/support.pro b/examples/declarative/support/support.pro deleted file mode 100644 index 1da1a28..0000000 --- a/examples/declarative/support/support.pro +++ /dev/null @@ -1,12 +0,0 @@ -TEMPLATE = lib -TARGET = QtFxSupport -DEPENDPATH += . -INCLUDEPATH += . -MOC_DIR = .moc -OBJECTS_DIR = .obj -DESTDIR = ../../lib -QT += script declarative - -HEADERS += contact.h contactmodel.h -SOURCES += contact.cpp contactmodel.cpp - 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 } } diff --git a/examples/declarative/xmldata/yahoonews.qml b/examples/declarative/xmldata/yahoonews.qml index 6d43f46..7d8b8a2 100644 --- a/examples/declarative/xmldata/yahoonews.qml +++ b/examples/declarative/xmldata/yahoonews.qml @@ -5,100 +5,74 @@ Rectangle { GradientStop { position: 0; color: "black" } GradientStop { position: 1.0; color: "#AAAAAA" } } - width: 600 - height: 600 - resources: [ - XmlListModel { - id: feedModel - source: "http://rss.news.yahoo.com/rss/oceania" - query: "/rss/channel/item" - XmlRole { - name: "title" - query: "title/string()" - } - XmlRole { - name: "link" - query: "link/string()" - } - XmlRole { - name: "description" - query: "description/string()" + width: 600; height: 600 + + XmlListModel { + id: feedModel + source: "http://rss.news.yahoo.com/rss/oceania" + query: "/rss/channel/item" + XmlRole { name: "title"; query: "title/string()" } + XmlRole { name: "link"; query: "link/string()" } + XmlRole { name: "description"; query: "description/string()" } + } + + Component { + id: feedDelegate + Item { + id: delegate + height: wrapper.height + 10 + + MouseRegion { + anchors.fill: wrapper + onPressed: delegate.ListView.view.currentIndex = index; + onClicked: if (wrapper.state == 'Details') wrapper.state = ''; else wrapper.state = 'Details'; } - }, - Component { - id: feedDelegate - Item { - id: delegate - height: wrapper.height + 10 - MouseRegion { - anchors.fill: wrapper - onPressed: { delegate.ListView.view.currentIndex = index; } - onClicked: { if (wrapper.state == 'Details') { wrapper.state = '';} else {wrapper.state = 'Details';} } + + Rectangle { + id: wrapper + y: 5; height: titleText.height + 10; width: 580 + color: "#F0F0F0"; radius: 5 + Text { + id: titleText + x: 10; y: 5 + text: '<a href=\'' + link + '\'>' + title + '</a>' + font.bold: true; font.family: "Helvetica"; font.pointSize: 14 + onLinkActivated: { print('link clicked: ' + link) } } - Rectangle { - 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.pointSize: 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 + + Text { + x: 10 + id: descriptionText + text: description + width: 560 + wrap: true + font.family: "Helvetica" + anchors.top: titleText.bottom + anchors.topMargin: 5 + opacity: 0 + } + + states: State { + name: "Details" + PropertyChanges { target: wrapper; height: childrenRect.height + 10 } + PropertyChanges { target: descriptionText; opacity: 1 } + } + + transitions: Transition { + from: "*"; to: "Details"; reversible: true + SequentialAnimation { + NumberAnimation { duration: 200; properties: "height"; easing: "easeOutQuad" } + NumberAnimation { duration: 200; properties: "opacity" } } - states: [ - State { - name: "Details" - PropertyChanges { target: wrapper; height: childrenRect.height + 10 } - PropertyChanges { target: description; opacity: 1 } - } - ] - transitions: [ - Transition { - from: "*" - to: "Details" - reversible: true - SequentialAnimation { - NumberAnimation { - duration: 200 - properties: "height" - easing: "easeOutQuad" - } - NumberAnimation { - duration: 200 - properties: "opacity" - } - } - } - ] } } } - ] + } + ListView { id: list - x: 10 - y: 10 - width: parent.width - 20 - height: parent.height - 20 - clip: true + x: 10; y: 10 + width: parent.width - 20; height: parent.height - 20 model: feedModel delegate: feedDelegate } diff --git a/examples/examples.pro b/examples/examples.pro index 7acd67b..c53bc7d 100644 --- a/examples/examples.pro +++ b/examples/examples.pro @@ -46,7 +46,6 @@ contains(QT_CONFIG, multimedia) { contains(QT_CONFIG, script): SUBDIRS += script contains(QT_CONFIG, phonon):!static: SUBDIRS += phonon -contains(QT_CONFIG, webkit): SUBDIRS += webkit embedded:SUBDIRS += qws !wince*:!symbian: { !contains(QT_EDITION, Console):contains(QT_BUILD_PARTS, tools):SUBDIRS += designer |