Converted the examples.

1 files changed, 77 insertions, 56 deletions

diff --git a/examples/declarative/listview/highlight.qml b/examples/declarative/listview/highlight.qml
index 5ce7acb..cbadb72 100644
--- a/examples/declarative/listview/highlight.qml
+++ b/examples/declarative/listview/highlight.qml
@@ -1,56 +1,77 @@
-<Rect 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.
-    This one contains my pets.
-    -->
-
-    <!--
-    Define a delegate component.  A component will be
-    instantiated for each visible item in the list.
-    -->
-    <Component id="PetDelegate">
-        <Item id="Wrapper" width="200" height="50">
-            <VerticalLayout>
-                <Text text="{'Name: ' + name}"/>
-                <Text text="{'Type: ' + type}"/>
-                <Text text="{'Age: ' + age}"/>
-            </VerticalLayout>
-
-            <!--
-            Use the ListView.isCurrentItem attached property to
-            indent the item if it is the current item.
-            -->
-            <states>
-                <State name="Current" when="{Wrapper.ListView.isCurrentItem}">
-                    <SetProperty target="{Wrapper}" property="x" value="10"/>
-                </State>
-            </states>
-            <transitions>
-                <Transition>
-                    <NumericAnimation properties="x" duration="200" />
-                </Transition>
-            </transitions>
-        </Item>
-    </Component>
-
-    <!--
-    Specify a highlight with custom movement.  Note that autoHighlight
-    is set to false in the ListView so that we can control how the
-    highlight moves to the current item.
-    -->
-    <Component id="PetHighlight">
-        <Rect width="200" height="50" color="#FFFF88">
-            <y>
-                <Follow source="{List1.current.y}" spring="3" damping="0.1"/>
-            </y>
-        </Rect>
-    </Component>
-
-    <ListView id="List1" width="200" height="{parent.height}" model="{MyPetsModel}"
-              delegate="{PetDelegate}" highlight="{PetHighlight}" autoHighlight="false"
-              focus="true"/>
-
-</Rect>
+Rect {
+    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.
+    // This one contains my pets.
+    // Define a delegate component.  A component will be
+    // instantiated for each visible item in the list.
+    Component {
+        id: PetDelegate
+        Item {
+            id: Wrapper
+            width: 200
+            height: 50
+            VerticalLayout {
+                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.
+            states: [
+                State {
+                    name: "Current"
+                    when: Wrapper.ListView.isCurrentItem
+                    SetProperty {
+                        target: Wrapper
+                        property: "x"
+                        value: 10
+                    }
+                }
+            ]
+            transitions: [
+                Transition {
+                    NumericAnimation {
+                        properties: "x"
+                        duration: 200
+                    }
+                }
+            ]
+        }
+    }
+    // Specify a highlight with custom movement.  Note that autoHighlight
+    // is set to false in the ListView so that we can control how the
+    // highlight moves to the current item.
+    Component {
+        id: PetHighlight
+        Rect {
+            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
+        focus: true
+    }
+}