Fix code style in examples

6 files changed, 200 insertions, 114 deletions

diff --git a/examples/declarative/listview/dynamic.qml b/examples/declarative/listview/dynamic.qml
index 32483fa..efd0e10 100644
--- a/examples/declarative/listview/dynamic.qml
+++ b/examples/declarative/listview/dynamic.qml
@@ -8,6 +8,7 @@ Rectangle {
 
     ListModel {
         id: fruitModel
+
         ListElement {
             name: "Apple"; cost: 2.45
             attributes: [
@@ -51,12 +52,16 @@ Rectangle {
 
     Component {
         id: fruitDelegate
+
         Item {
             width: parent.width; height: 55
             
             Column {
-                id: moveButtons; x: 5; width: childrenRect.width; anchors.verticalCenter: parent.verticalCenter
-                Image { source: "content/pics/go-up.png"
+                id: moveButtons
+                x: 5; width: childrenRect.width; anchors.verticalCenter: parent.verticalCenter
+
+                Image {
+                    source: "content/pics/go-up.png"
                     MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index,index-1,1) }
                 }
                 Image { source: "content/pics/go-down.png"
@@ -66,33 +71,63 @@ Rectangle {
 
             Column {
                 anchors { right: itemButtons.left; verticalCenter: parent.verticalCenter; left: moveButtons.right; leftMargin: 10 }
+
                 Text {
-                    id: label; font.bold: true; text: name; elide: Text.ElideRight; font.pixelSize: 15
-                    width: parent.width; color: "White"
+                    id: label
+                    width: parent.width
+                    color: "White"
+                    font.bold: true; font.pixelSize: 15
+                    text: name; elide: Text.ElideRight
                 }
                 Row {
                     spacing: 5
-                    Repeater { model: attributes; Component { Text { text: description; color: "White" } } }
+                    Repeater {
+                        model: attributes
+                        Component { 
+                            Text { text: description; color: "White" }
+                        }
+                    }
                 }
             }
 
             Row {
                 id: itemButtons
-                anchors.right: removeButton.left; anchors.rightMargin: 35; spacing: 10
-                width: childrenRect.width; anchors.verticalCenter: parent.verticalCenter
-                Image { source: "content/pics/list-add.png"
-                    ClickAutoRepeating { id: clickUp; anchors.fill: parent; onClicked: fruitModel.setProperty(index,"cost",cost+0.25) }
-                    scale: clickUp.isPressed ? 0.9 : 1; transformOrigin: Item.Center
+
+                anchors { right: removeButton.left; rightMargin: 35; verticalCenter: parent.verticalCenter }
+                width: childrenRect.width 
+                spacing: 10
+
+                Image {
+                    source: "content/pics/list-add.png"
+                    scale: clickUp.isPressed ? 0.9 : 1
+                    transformOrigin: Item.Center
+
+                    ClickAutoRepeating {
+                        id: clickUp
+                        anchors.fill: parent
+                        onClicked: fruitModel.setProperty(index, "cost", cost+0.25)
+                    }
                 }
+
                 Text { id: costText; text: '$'+Number(cost).toFixed(2); font.pixelSize: 15; color: "White"; font.bold: true; }
-                Image { source: "content/pics/list-remove.png"
-                    ClickAutoRepeating { id: clickDown; anchors.fill: parent; onClicked: fruitModel.setProperty(index,"cost",Math.max(0,cost-0.25)) }
-                    scale: clickDown.isPressed ? 0.9 : 1; transformOrigin: Item.Center
+
+                Image {
+                    source: "content/pics/list-remove.png"
+                    scale: clickDown.isPressed ? 0.9 : 1
+                    transformOrigin: Item.Center
+
+                    ClickAutoRepeating { 
+                        id: clickDown
+                        anchors.fill: parent
+                        onClicked: fruitModel.setProperty(index, "cost", Math.max(0,cost-0.25))
+                    }
                 }
             }
             Image {
-                id: removeButton; source: "content/pics/archive-remove.png"
+                id: removeButton
                 anchors { verticalCenter: parent.verticalCenter; right: parent.right; rightMargin: 10 }
+                source: "content/pics/archive-remove.png"
+
                 MouseArea { anchors.fill:parent; onClicked: fruitModel.remove(index) }
             }
         }
@@ -100,60 +135,75 @@ Rectangle {
 
     ListView {
         id: view
-        model: fruitModel; delegate: fruitDelegate
         anchors { top: parent.top; left: parent.left; right: parent.right; bottom: buttons.top }
+        model: fruitModel
+        delegate: fruitDelegate
     }
 
     // Attach scrollbar to the right edge of the view.
     ScrollBar {
         id: verticalScrollBar
+
+        width: 8; height: view.height; anchors.right: view.right
         opacity: 0
         orientation: "Vertical"
         position: view.visibleArea.yPosition
         pageSize: view.visibleArea.heightRatio
-        width: 8
-        height: view.height
-        anchors.right: view.right
+
         // Only show the scrollbar when the view is moving.
-        states: [
-            State {
-                name: "ShowBars"; when: view.moving
-                PropertyChanges { target: verticalScrollBar; opacity: 1 }
-            }
-        ]
-        transitions: [ Transition { NumberAnimation { properties: "opacity"; duration: 400 } } ]
+        states: State {
+            name: "ShowBars"; when: view.moving
+            PropertyChanges { target: verticalScrollBar; opacity: 1 }
+        }
+        transitions: Transition {
+            NumberAnimation { properties: "opacity"; duration: 400 }
+        } 
     }
 
     Row {
-        x: 8; width: childrenRect.width
-        height: childrenRect.height
+        id: buttons
+
+        x: 8; width: childrenRect.width; height: childrenRect.height
         anchors { bottom: parent.bottom; bottomMargin: 8 }
         spacing: 8
-        id: buttons
-        Image { source: "content/pics/archive-insert.png"
-            MouseArea { anchors.fill: parent;
+
+        Image {
+            source: "content/pics/archive-insert.png"
+
+            MouseArea {
+                anchors.fill: parent
                 onClicked: {
                     fruitModel.append({
                         "name":"Pizza Margarita",
                         "cost":5.95,
                         "attributes":[{"description": "Cheese"},{"description": "Tomato"}]
-                        })
+                    })
                 }
             }
         }
-        Image { source: "content/pics/archive-insert.png"
-            MouseArea { anchors.fill: parent;
+
+        Image {
+            source: "content/pics/archive-insert.png"
+
+            MouseArea {
+                anchors.fill: parent;
                 onClicked: {
-                    fruitModel.insert(0,{
+                    fruitModel.insert(0, {
                         "name":"Pizza Supreme",
                         "cost":9.95,
                         "attributes":[{"description": "Cheese"},{"description": "Tomato"},{"description": "The Works"}]
-                        })
+                    })
                 }
             }
         }
-        Image { source: "content/pics/archive-remove.png"
-            MouseArea { anchors.fill: parent; onClicked: fruitModel.clear() }
+
+        Image { 
+            source: "content/pics/archive-remove.png"
+
+            MouseArea { 
+                anchors.fill: parent
+                onClicked: fruitModel.clear()
+            }
         }
     }
 }
diff --git a/examples/declarative/listview/highlight.qml b/examples/declarative/listview/highlight.qml
index 2b54dd8..2f7f2ca 100644
--- a/examples/declarative/listview/highlight.qml
+++ b/examples/declarative/listview/highlight.qml
@@ -1,12 +1,13 @@
 import Qt 4.7
 
 Rectangle {
-    width: 400; height: 300; color: "white"
+    width: 400; height: 300
 
     // 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.  A component will be
     // instantiated for each visible item in the list.
     Component {
@@ -21,20 +22,14 @@ Rectangle {
             }
             // Use the ListView.isCurrentItem attached property to
             // indent the item if it is the current item.
-            states: [
-                State {
-                    name: "Current"
-                    when: wrapper.ListView.isCurrentItem
-                    PropertyChanges { target: wrapper; x: 10 }
-                }
-            ]
-            transitions: [
-                Transition {
-                    NumberAnimation {
-                        properties: "x"; duration: 200
-                    }
-                }
-            ]
+            states: State {
+                name: "Current"
+                when: wrapper.ListView.isCurrentItem
+                PropertyChanges { target: wrapper; x: 10 }
+            }
+            transitions: Transition {
+                NumberAnimation { properties: "x"; duration: 200 } 
+            }
         }
     }
     // Specify a highlight with custom movement.  Note that highlightFollowsCurrentItem
@@ -43,14 +38,16 @@ Rectangle {
     Component {
         id: petHighlight
         Rectangle {
-            width: 200; height: 50; color: "#FFFF88"
+            width: 200; height: 50
+            color: "#FFFF88"
             SpringFollow on y { to: list1.currentItem.y; spring: 3; damping: 0.1 }
         }
     }
     ListView {
         id: list1
         width: 200; height: parent.height
-        model: MyPetsModel; delegate: petDelegate
+        model: MyPetsModel
+        delegate: petDelegate
         highlight: petHighlight; highlightFollowsCurrentItem: false
         focus: true
     }
diff --git a/examples/declarative/listview/itemlist.qml b/examples/declarative/listview/itemlist.qml
index 2f4aa31..e387f28 100644
--- a/examples/declarative/listview/itemlist.qml
+++ b/examples/declarative/listview/itemlist.qml
@@ -10,23 +10,27 @@ Rectangle {
 
     VisualItemModel {
         id: itemModel
+
         Rectangle {
-            height: view.height; width: view.width; color: "#FFFEF0"
+            width: view.width; height: view.height
+            color: "#FFFEF0"
             Text { text: "Page 1"; font.bold: true; anchors.centerIn: parent }
         }
         Rectangle {
-            height: view.height; width: view.width; color: "#F0FFF7"
+            width: view.width; height: view.height
+            color: "#F0FFF7"
             Text { text: "Page 2"; font.bold: true; anchors.centerIn: parent }
         }
         Rectangle {
-            height: view.height; width: view.width; color: "#F4F0FF"
+            width: view.width; height: view.height
+            color: "#F4F0FF"
             Text { text: "Page 3"; font.bold: true; anchors.centerIn: parent }
         }
     }
 
     ListView {
         id: view
-        anchors.fill: parent; anchors.bottomMargin: 30
+        anchors { fill: parent; bottomMargin: 30 }
         model: itemModel
         preferredHighlightBegin: 0; preferredHighlightEnd: 0
         highlightRangeMode: "StrictlyEnforceRange"
@@ -35,22 +39,27 @@ Rectangle {
     }
 
     Rectangle {
+        width: 240; height: 30
+        anchors { top: view.bottom; bottom: parent.bottom }
         color: "gray"
-        anchors.top: view.bottom
-        anchors.bottom: parent.bottom
-        height: 30
-        width: 240
 
         Row {
             anchors.centerIn: parent
             spacing: 20
+
             Repeater {
                 model: itemModel.count
+
                 Rectangle {
                     width: 5; height: 5
                     radius: 3
-                    MouseArea { width: 20; height: 20; anchors.centerIn: parent; onClicked: view.currentIndex = index }
                     color: view.currentIndex == index ? "blue" : "white"
+
+                    MouseArea { 
+                        width: 20; height: 20
+                        anchors.centerIn: parent
+                        onClicked: view.currentIndex = index
+                    }
                 }
             }
         }
diff --git a/examples/declarative/listview/listview-example.qml b/examples/declarative/listview/listview-example.qml
index d648b60..9409356 100644
--- a/examples/declarative/listview/listview-example.qml
+++ b/examples/declarative/listview/listview-example.qml
@@ -1,12 +1,13 @@
 import Qt 4.7
 
 Rectangle {
-    width: 600; height: 300; color: "white"
+    width: 600; height: 300
 
     // 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.  A component will be
     // instantiated for each visible item in the list.
     Component {
@@ -31,46 +32,53 @@ Rectangle {
     // Show the model in three lists, with different highlight ranges.
     // preferredHighlightBegin and preferredHighlightEnd set the
     // range in which to attempt to maintain the highlight.
+    //
     // Note that the second and third ListView
     // set their currentIndex to be the same as the first, and that
     // the first ListView is given keyboard focus.
+    //
     // The default mode allows the currentItem to move freely
     // within the visible area.  If it would move outside the visible
     // area, the view is scrolled to keep it visible.
+    //
     // The second list sets a highlight range which attempts to keep the
     // current item within the the bounds of the range, however
     // items will not scroll beyond the beginning or end of the view,
     // forcing the highlight to move outside the range at the ends.
+    //
     // The third list sets the highlightRangeMode to StrictlyEnforceRange
     // and sets a range smaller than the height of an item.  This
     // forces the current item to change when the view is flicked,
     // since the highlight is unable to move.
+    //
     // Note that the first ListView sets its currentIndex to be equal to
     // the third ListView's currentIndex.  By flicking List3 with
     // 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
+        highlight: petHighlight
+        currentIndex: list3.currentIndex
         focus: true
     }
     ListView {
         id: list2
         x: 200; width: 200; height: parent.height
-        model: MyPetsModel; delegate: petDelegate; highlight: petHighlight
-        preferredHighlightBegin: 80
-        preferredHighlightEnd: 220
-        highlightRangeMode: "ApplyRange"
+        model: MyPetsModel; delegate: petDelegate
+        highlight: petHighlight
         currentIndex: list1.currentIndex
+        preferredHighlightBegin: 80; preferredHighlightEnd: 220
+        highlightRangeMode: "ApplyRange"
     }
     ListView {
         id: list3
         x: 400; width: 200; height: parent.height
-        model: MyPetsModel; delegate: petDelegate; highlight: petHighlight
+        model: MyPetsModel; delegate: petDelegate
+        highlight: petHighlight
         currentIndex: list1.currentIndex
-        preferredHighlightBegin: 125
-        preferredHighlightEnd: 125
+        preferredHighlightBegin: 125; preferredHighlightEnd: 125
         highlightRangeMode: "StrictlyEnforceRange"
         flickDeceleration: 1000
     }
diff --git a/examples/declarative/listview/recipes.qml b/examples/declarative/listview/recipes.qml
index 66c4109..990e272 100644
--- a/examples/declarative/listview/recipes.qml
+++ b/examples/declarative/listview/recipes.qml
@@ -5,16 +5,17 @@ import "content"
 
 Rectangle {
     id: page
-    width: 400; height: 240; color: "black"
+    width: 400; height: 240
+    color: "black"
 
     // 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,
@@ -22,11 +23,15 @@ Rectangle {
             // want to fade.
             property real detailsOpacity : 0
 
+            width: list.width
+
             // 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
+                color: "#FEFFEE"
+                border.color: "#FFBE4F"
+                radius: 5
             }
 
             // This mouse region covers the entire delegate.
@@ -52,13 +57,17 @@ Rectangle {
                 }
 
                 Column {
-                    height: recipePic.height; width: background.width-recipePic.width-20
+                    width: background.width-recipePic.width-20; height: recipePic.height; 
                     spacing: 5
+
                     Text { id: name; text: title; font.bold: true; font.pointSize: 16 }
+
                     Text {
-                        text: "Ingredients"; font.pointSize: 12; font.bold: true
+                        text: "Ingredients"
+                        font.pointSize: 12; font.bold: true
                         opacity: wrapper.detailsOpacity
                     }
+
                     Text {
                         text: ingredients
                         wrapMode: Text.WordWrap
@@ -71,52 +80,61 @@ Rectangle {
             Item {
                 id: details
                 x: 10; width: parent.width-20
-                anchors.top: topLayout.bottom; anchors.topMargin: 10
-                anchors.bottom: parent.bottom; anchors.bottomMargin: 10
+                anchors { top: topLayout.bottom; topMargin: 10; bottom: parent.bottom; bottomMargin: 10 }
                 opacity: wrapper.detailsOpacity
 
                 Text {
                     id: methodTitle
-                    text: "Method"; font.pointSize: 12; font.bold: true
                     anchors.top: parent.top
+                    text: "Method"
+                    font.pointSize: 12; font.bold: true
                 }
+
                 Flickable {
                     id: flick
-                    anchors.top: methodTitle.bottom; anchors.bottom: parent.bottom
-                    width: parent.width; contentHeight: methodText.height; clip: true
+                    width: parent.width
+                    anchors { top: methodTitle.bottom; bottom: parent.bottom }
+                    contentHeight: methodText.height; clip: true
+
                     Text { id: methodText; text: method; wrapMode: Text.WordWrap; 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; 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; 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 = '';
+                y: 10; anchors { right: background.right; rightMargin: 5 }
+                opacity: wrapper.detailsOpacity
+                text: "Close"
+
+                onClicked: wrapper.state = '';
             }
 
-            // Make the default height equal the hight of the picture, plus margin.
+            // Set the default height to the height 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 }
+                PropertyChanges { target: recipePic; width: 128; height: 128 } // Make picture bigger
+                PropertyChanges { target: wrapper; detailsOpacity: 1; x: 0 } // Make details visible
+                PropertyChanges { target: wrapper; height: list.height } // Fill the entire list area with the detailed view
+
                 // Move the list so that this item is at the top.
                 PropertyChanges { target: wrapper.ListView.view; explicit: true; contentY: wrapper.y }
+
                 // Disallow flicking while we're in detailed view
                 PropertyChanges { target: wrapper.ListView.view; interactive: false }
             }
@@ -125,9 +143,7 @@ Rectangle {
                 // Make the state changes smooth
                 ParallelAnimation {
                     ColorAnimation { property: "color"; duration: 500 }
-                    NumberAnimation {
-                        duration: 300; properties: "detailsOpacity,x,contentY,height,width"
-                    }
+                    NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" }
                 }
             }
         }
@@ -136,7 +152,9 @@ Rectangle {
     // The actual list
     ListView {
         id: list
-        model: Recipes; delegate: recipeDelegate
-        anchors.fill: parent; clip: true
+        anchors.fill: parent
+        clip: true
+        model: Recipes
+        delegate: recipeDelegate
     }
 }
diff --git a/examples/declarative/listview/sections.qml b/examples/declarative/listview/sections.qml
index 7c132a4..0a81f63 100644
--- a/examples/declarative/listview/sections.qml
+++ b/examples/declarative/listview/sections.qml
@@ -4,7 +4,7 @@ import Qt 4.7
 Rectangle {
     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.
@@ -13,15 +13,16 @@ Rectangle {
     // 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: desc.height
+            height: desc.height // height is the combined height of the description and the section separator
+
             Item {
                 id: desc
-                x: 5
-                height: layout.height + 4
+                x: 5; height: layout.height + 4
+
                 Column {
                     id: layout
                     y: 2
@@ -32,22 +33,24 @@ Rectangle {
             }
         }
     }
+
     // Define a highlight component.  Just one of these will be instantiated
     // by each ListView and placed behind the current item.
     Component {
         id: petHighlight
-        Rectangle {
-            color: "#FFFF88"
-        }
+        Rectangle { color: "#FFFF88" }
     }
+
     // The list
     ListView {
         id: myList
-        width: 200
-        height: parent.height
+
+        width: 200; height: parent.height
         model: MyPetsModel
         delegate: petDelegate
         highlight: petHighlight
+        focus: true
+
         // The sectionExpression is simply the size of the pet.
         // We use this to determine which section we are in above.
         section.property: "size"
@@ -57,11 +60,12 @@ Rectangle {
             width: 200
             height: 20
             Text {
-                text: section; font.bold: true
-                x: 2; height: parent.height; verticalAlignment: 'AlignVCenter'
+                x: 2; height: parent.height
+                verticalAlignment: 'AlignVCenter'
+                text: section
+                font.bold: true
             }
         }
-        focus: true
     }
 }
 //! [0]