From 0e75846b831bbeb4794cc4e3d00cd3096726d35e Mon Sep 17 00:00:00 2001 From: Martin Jones Date: Tue, 5 May 2009 10:43:23 +1000 Subject: Join some lines in examples. --- examples/declarative/listview/highlight.qml | 46 +++------- examples/declarative/listview/listview.qml | 63 +++++-------- examples/declarative/listview/recipes.qml | 134 +++++++--------------------- 3 files changed, 66 insertions(+), 177 deletions(-) diff --git a/examples/declarative/listview/highlight.qml b/examples/declarative/listview/highlight.qml index cbadb72..9a672d9 100644 --- a/examples/declarative/listview/highlight.qml +++ b/examples/declarative/listview/highlight.qml @@ -1,7 +1,6 @@ Rect { - width: 400 - height: 300 - color: "white" + width: 400; height: 300; 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. @@ -12,18 +11,11 @@ Rect { id: PetDelegate Item { id: Wrapper - width: 200 - height: 50 + width: 200; height: 50 VerticalLayout { - Text { - text: 'Name: ' + name - } - Text { - text: 'Type: ' + type - } - Text { - text: 'Age: ' + age - } + Text { text: 'Name: ' + name } + Text { text: 'Type: ' + type } + Text { text: 'Age: ' + age } } // Use the ListView.isCurrentItem attached property to // indent the item if it is the current item. @@ -32,17 +24,14 @@ Rect { name: "Current" when: Wrapper.ListView.isCurrentItem SetProperty { - target: Wrapper - property: "x" - value: 10 + target: Wrapper; property: "x"; value: 10 } } ] transitions: [ Transition { NumericAnimation { - properties: "x" - duration: 200 + properties: "x"; duration: 200 } } ] @@ -54,24 +43,15 @@ Rect { Component { id: PetHighlight Rect { - width: 200 - height: 50 - color: "#FFFF88" - y: Follow { - source: List1.current.y - spring: 3 - damping: 0.1 - } + width: 200; height: 50; color: "#FFFF88" + y: Follow { source: List1.current.y; spring: 3; damping: 0.1 } } } ListView { id: List1 - width: 200 - height: parent.height - model: MyPetsModel - delegate: PetDelegate - highlight: PetHighlight - autoHighlight: false + width: 200; height: parent.height + model: MyPetsModel; delegate: PetDelegate + highlight: PetHighlight; autoHighlight: false focus: true } } diff --git a/examples/declarative/listview/listview.qml b/examples/declarative/listview/listview.qml index b71ed4e..a222378 100644 --- a/examples/declarative/listview/listview.qml +++ b/examples/declarative/listview/listview.qml @@ -1,7 +1,6 @@ Rect { - width: 600 - height: 300 - color: "white" + width: 600; height: 300; 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. @@ -12,29 +11,22 @@ Rect { id: PetDelegate Item { id: Wrapper - width: 200 - height: 50 + width: 200; height: 50 VerticalLayout { - Text { - text: 'Name: ' + name - } - Text { - text: 'Type: ' + type - } - Text { - text: 'Age: ' + age - } + 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" - } + Rect { color: "#FFFF88" } } + // Show the model in three lists, with different currentItemPositioning. // currentItemPositioning determines how the list behaves when the // current item changes. Note that the second and third ListView @@ -54,35 +46,23 @@ Rect { // the mouse, the current index of List1 will be changed. ListView { id: List1 - width: 200 - height: parent.height - model: MyPetsModel - delegate: PetDelegate - highlight: PetHighlight - currentIndex: List3.currentIndex + width: 200; height: parent.height + model: MyPetsModel; delegate: PetDelegate + highlight: PetHighlight; currentIndex: List3.currentIndex focus: true } ListView { id: List2 - x: 200 - width: 200 - height: parent.height - model: MyPetsModel - delegate: PetDelegate - highlight: PetHighlight - currentItemPositioning: "Snap" - snapPosition: 125 + x: 200; width: 200; height: parent.height + model: MyPetsModel; delegate: PetDelegate; highlight: PetHighlight + currentItemPositioning: "Snap"; snapPosition: 125 currentIndex: List1.currentIndex } ListView { id: List3 - x: 400 - width: 200 - height: parent.height - model: MyPetsModel - delegate: PetDelegate - currentItemPositioning: "SnapAuto" - snapPosition: 125 + x: 400; width: 200; height: parent.height + model: MyPetsModel; delegate: PetDelegate + currentItemPositioning: "SnapAuto"; snapPosition: 125 currentIndex: List1.currentIndex children: [ // Position a static highlight rather than a normal highlight so that @@ -92,11 +72,8 @@ Rect { // Note that we specify the 'children' property. This is because // the default property of a ListView is 'delegate'. Rect { - y: 125 - width: 200 - height: 50 - color: "#FFFF88" - z: -1 + y: 125; width: 200; height: 50 + color: "#FFFF88"; z: -1 } ] } diff --git a/examples/declarative/listview/recipes.qml b/examples/declarative/listview/recipes.qml index db8604e..db9ef61 100644 --- a/examples/declarative/listview/recipes.qml +++ b/examples/declarative/listview/recipes.qml @@ -2,9 +2,7 @@ import "content" // This example illustrates expanding a list item to show a more detailed view Rect { id: page - width: 400 - height: 240 - color: "black" + 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. @@ -26,13 +24,8 @@ Rect { // A simple rounded rectangle for the background Rect { id: background - x: 1 - y: 2 - width: parent.width-2 - height: parent.height-4 - color: "#FEFFEE" - pen.color: "#FFBE4F" - radius: 5 + x: 1; y: 2; width: parent.width-2; height: parent.height-4 + color: "#FEFFEE"; pen.color: "#FFBE4F"; radius: 5 } // This mouse region covers the entire delegate. // When clicked it changes mode to 'Details'. If we are already @@ -47,145 +40,86 @@ Rect { // mode have their opacity set to wrapper.detailsOpacity. HorizontalLayout { id: topLayout - x: 10 - y: 10 + x: 10; y: 10; height: recipePic.height; width: parent.width spacing: 10 - height: recipePic.height - width: parent.width Image { id: recipePic - source: picture - width: 48 - height: 48 + source: picture; width: 48; height: 48 } VerticalLayout { - height: recipePic.height + height: recipePic.height; width: background.width-recipePic.width-20 spacing: 5 - width: background.width-recipePic.width-20 - Text { - id: name - text: title - font.bold: true - font.size: 16 - } + Text { id: name; text: title; font.bold: true; font.size: 16 } Text { + text: "Ingredients"; font.size: 12; font.bold: true opacity: wrapper.detailsOpacity - text: "Ingredients" - font.size: 12 - font.bold: true } Text { + text: ingredients; wrap: true; width: parent.width opacity: wrapper.detailsOpacity - text: ingredients - wrap: true - width: parent.width } } } Item { id: details - x: 10 - width: parent.width-20 - anchors.top: topLayout.bottom - anchors.topMargin: 10 - anchors.bottom: parent.bottom - anchors.bottomMargin: 10 + 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.size: 12 - font.bold: true + text: "Method"; font.size: 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 - } + 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 + 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 + 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 = '' } + 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" - SetProperty { - target: background - property: "color" - value: "white" - } + SetProperty { target: background; property: "color"; value: "white" } // Make the picture bigger - SetProperties { - target: recipePic - width: 128 - height: 128 - } + SetProperties { target: recipePic; width: 128; height: 128 } // Make details visible - SetProperties { - target: wrapper - detailsOpacity: 1 - x: 0 - } + SetProperties { target: wrapper; detailsOpacity: 1; x: 0 } // Make the detailed view fill the entire list area - SetProperty { - target: wrapper - property: "height" - value: List.height - } + SetProperty { target: wrapper; property: "height"; value: List.height } // Move the list so that this item is at the top. SetProperty { target: wrapper.ListView.view - property: "yPosition" - value: wrapper.y + property: "yPosition"; value: wrapper.y } // Disallow flicking while we're in detailed view - SetProperty { - target: wrapper.ListView.view - property: "locked" - value: 1 - } + SetProperty { target: wrapper.ListView.view; property: "locked"; value: 1 } } ] transitions: [ Transition { // Make the state changes smooth ParallelAnimation { - ColorAnimation { - duration: 500 - } + ColorAnimation { duration: 500 } NumericAnimation { - duration: 300 - properties: "detailsOpacity,x,yPosition,height,width" + duration: 300; properties: "detailsOpacity,x,yPosition,height,width" } } } @@ -196,9 +130,7 @@ Rect { // The actual list ListView { id: List - model: Recipies - anchors.fill: parent - clip: true - delegate: recipeDelegate + model: Recipies; delegate: recipeDelegate + anchors.fill: parent; clip: true } } -- cgit v0.12