7 files changed, 136 insertions, 126 deletions

diff --git a/doc/src/declarative/animation.qdoc b/doc/src/declarative/animation.qdoc
index fb14fdc..f7e03ee 100644
--- a/doc/src/declarative/animation.qdoc
+++ b/doc/src/declarative/animation.qdoc
@@ -25,15 +25,13 @@ Other Features:
 \o Animation synchronization
 \endlist
 
-The simplest form of animation is using \c <NumericAnimation/>
+The simplest form of animation is using \c NumericAnimation
 
 The following example creates a bouncing effect:
 \code
 Rect {
     id: rect
-    width: 120
-    height: 200
-    color: "white"
+    width: 120; height: 200; color: "white"
     Image {
         id: img
         source: "pics/qtlogo.png"
diff --git a/doc/src/declarative/components.qdoc b/doc/src/declarative/components.qdoc
index db59b61..6564375 100644
--- a/doc/src/declarative/components.qdoc
+++ b/doc/src/declarative/components.qdoc
@@ -12,7 +12,9 @@ Writing and using components allows you to:
 \o Create new Qml elements without writing a new C++ class. (See \l {cppitem}{Creating Qml elements in C++})
 \endlist
 
-Components are placed in \e <Name>.qml files, allowing \e <Name> to then be used as a tag elsewhere. For example, if you have a Slider.qml file, you can then use \c <Slider> to place a slider.
+Components are placed in \e <Name>.qml files, allowing \e <Name> to then be used as a tag
+elsewhere. For example, if you have a Slider.qml file, you can then use \c {Slider \{\}} to
+place a slider.
 
 Components may be collected into \l {qmlmodules}{modules}.
 
diff --git a/doc/src/declarative/cppitem.qdoc b/doc/src/declarative/cppitem.qdoc
index 534b32b..d212a5e 100644
--- a/doc/src/declarative/cppitem.qdoc
+++ b/doc/src/declarative/cppitem.qdoc
@@ -5,8 +5,8 @@
 
 \section1 Making a C++ object available in QML
 
-In QML, XML tags and attributes correspond to Qt objects and properties. Thus, any Qt object
-can potentially be used as an element in QML. More specifically, to make an object available in QML,
+In QML, the item types and properties correspond to Qt objects and properties. Thus, any Qt object
+can potentially be used as an item in QML. More specifically, to make an object available in QML,
 it should:
 \list
 \o Be a subclass of QObject.
diff --git a/doc/src/declarative/focus.qdoc b/doc/src/declarative/focus.qdoc
index fc747a9..bb54852 100644
--- a/doc/src/declarative/focus.qdoc
+++ b/doc/src/declarative/focus.qdoc
@@ -17,14 +17,15 @@ When the user presses or releases a key, the following occurs:
 \o The key event is delivered by the scene to the fluid UI \l Item with \e {active focus}.  If no fluid UI \l Item has \e {active focus}, the key event is \l {QEvent::ignore()}{ignored} and regular Qt key handling continues.
 \o If the fluid UI \l Item with \e {active focus} accepts the key event, propagation stops.  Otherwise the event is "bubbled up", by recursively passing it to each \l Item's parent until either the event is accepted, or the root \l Item is reached.
 
-If the \c {<Rect/>} element in the following example has active focus and the \e A key is pressed, it will bubble up to the \c {<KeyActions/>}.  However, pressing the \e B key will bubble up to the root item and thus subsequently be \l {QEvent::ignore()}{ignored}.
+If the \c {Rect} element in the following example has active focus and the \e A key is pressed, it will bubble up to the \c {KeyActions}.  However, pressing the \e B key will bubble up to the root item and thus subsequently be \l {QEvent::ignore()}{ignored}.
 
 \code
-<Item>
-    <KeyActions keyA="print('Key A was pressed')">
-        <Rect />
-    </KeyActions>
-</Item>
+Item {
+    KeyActions {
+        keyA: "print('Key A was pressed')"
+        Rect {}
+    }
+}
 \endcode
 
 \o If the root \l Item is reached, the key event is \l {QEvent::ignore()}{ignored} and regular Qt key handling continues.
@@ -38,9 +39,9 @@ read-only property \c {Item::activeFocus}.  For example, here we have a \l Text
 element whose text is determined by whether or not it has \e {active focus}.
 
 \code
-<Text>
-    <text>{activeFocus?"I have active focus!":"I do not have active focus"}</text>
-</Text>
+Text {
+    text: activeFocus ? "I have active focus!" : "I do not have active focus"
+}
 \endcode
 
 \section1 Acquiring Focus and Focus Realms
@@ -55,14 +56,16 @@ the \c {<KeyActions/>} element has \e {active focus} and pressing the
 \table
 \row
 \o \code
-    <Rect color="lightsteelblue" width="240" height="25">
-        <Text id="MyText" />
-        <KeyActions focus="true">
-            <keyA>MyText.text = "Key A was pressed"</keyA>
-            <keyB>MyText.text = "Key B was pressed"</keyB>
-            <keyC>MyText.text = "Key C was pressed"</keyC>
-        </KeyActions>
-    </Rect>
+    Rect {
+        color: "lightsteelblue"; width: 240; height: 25
+        Text { id: MyText }
+        KeyActions {
+            focus: true
+            keyA: "MyText.text = 'Key A was pressed'"
+            keyB: "MyText.text = 'Key B was pressed'"
+            keyC: "MyText.text = 'Key C was pressed'"
+        }
+    }
 \endcode
 \o \image declarative-qmlfocus1.png
 \endtable
@@ -78,34 +81,42 @@ reponds accordingly.
 \table
 \row
 \o \code
-<Rect color="red" width="240" height="55">
-    <MyWidget />
-    <MyWidget y="30" focus="true"/>
-</Rect>
+Rect {
+    color: "red"; width: 240; height: 55
+    MyWidget {}
+    MyWidget { y: 30; focus: true }
+}
 \endcode
 \o \code
-<Rect color="red" width="240" height="55">
-    <Rect color="lightsteelblue" width="240" height="25">
-        <Text id="MyText" />
-        <KeyActions focus="true">
-            <keyA>MyText.text = "Key A was pressed"</keyA>
-            <keyB>MyText.text = "Key B was pressed"</keyB>
-            <keyC>MyText.text = "Key C was pressed"</keyC>
-        </KeyActions>
-    </Rect>
-    <Rect y="30" focus="true" color="lightsteelblue" width="240" height="25">
-        <Text id="MyText" />
-        <KeyActions focus="true">
-            <keyA>MyText.text = "Key A was pressed"</keyA>
-            <keyB>MyText.text = "Key B was pressed"</keyB>
-            <keyC>MyText.text = "Key C was pressed"</keyC>
-        </KeyActions>
-    </Rect>
+Rect {
+    color: "red"; width: 240; height: 55
+    Rect {
+        color: "lightsteelblue"; width: 240; height: 25
+        Text { id: MyText }
+        KeyActions {
+            focus: true
+            keyA: "MyText.text = 'Key A was pressed'"
+            keyB: "MyText.text = 'Key B was pressed'"
+            keyC: "MyText.text = 'Key C was pressed'"
+        }
+    }
+    Rect {
+        y: 30; focus: true
+        color: "lightsteelblue"; width: 240; height: 25
+        Text { id: MyText }
+        KeyActions {
+            focus: true
+            keyA: "MyText.text = 'Key A was pressed'"
+            keyB: "MyText.text = 'Key B was pressed'"
+            keyC: "MyText.text = 'Key C was pressed'"
+        }
+    }
+}
 \endcode
 \endtable
 
 The right hand side of the example shows the expanded code - the equivalent QML
-without the use of the component \c {<MyWidget/>}.  From this, the problem is
+without the use of the component \c {MyWidget}.  From this, the problem is
 evident - there are no less than three elements that have the \c {Item::focus} 
 property set to true.  Ultimately only one element can have focus, and the 
 system has to decide which on.  In this case the first appearance of the 
@@ -113,12 +124,12 @@ system has to decide which on.  In this case the first appearance of the
 of \c {Item::focus} in the other two instances is reverted back to false.  This
 is exactly the opposite of what was wanted!
 
-This problem is fundamentally one of visibility.  The \c {<MyWidget/>} 
-components each set their \c {<KeyActions/>} as focused as that is all they can
+This problem is fundamentally one of visibility.  The \c {MyWidget} 
+components each set their \c {KeyActions} as focused as that is all they can
 do - they don't know how they are going to be used, but they do know that when
-they're in use their \c {<KeyActions/>} element is what needs focus.  Likewise
-the code that uses the \c {<MyWidget/>}'s sets the second \c {<MyWidget/>} as
-focused because, while it doesn't know exactly how the \c {<MyWidget/>} is 
+they're in use their \c {KeyActions} element is what needs focus.  Likewise
+the code that uses the \c {MyWidget}'s sets the second \c {MyWidget} as
+focused because, while it doesn't know exactly how the \c {MyWidget} is 
 implemented, it knows that it wants the second one to be focused.  No one piece
 of code knows everything about the other, which is exactly how it should be.
 
@@ -134,16 +145,19 @@ result shown.
 \table
 \row
 \o \code
-<FocusRealm width="240" height="25">
-    <Rect color="lightsteelblue" width="240" height="25">
-        <Text id="MyText" />
-        <KeyActions focus="true">
-            <keyA>MyText.text = "Key A was pressed"</keyA>
-            <keyB>MyText.text = "Key B was pressed"</keyB>
-            <keyC>MyText.text = "Key C was pressed"</keyC>
-        </KeyActions>
-    </Rect>
-</FocusRealm>
+FocusRealm {
+    width: 240; height: 25
+    Rect {
+        color: "lightsteelblue"; width: 240; height: 25
+        Text { id: MyText }
+        KeyActions {
+            focus: true
+            keyA: "MyText.text = 'Key A was pressed'"
+            keyB: "MyText.text = 'Key B was pressed'"
+            keyC: "MyText.text = 'Key C was pressed'"
+        }
+    }
+}
 \endcode
 \o \image declarative-qmlfocus2.png
 \endtable
@@ -164,16 +178,18 @@ then on clicking the either one gives it focus.
 \table
 \row 
 \o \code
-<Rect color="red" width="240" height="55">
-    <MyClickableWidget />
-    <MyClickableWidget y="30" focus="true"/>
-</Rect>
+Rect {
+    color: "red"; width: 240; height: 55
+    MyClickableWidget {}
+    MyClickableWidget { y: 30; focus: true }
+}
 \endcode
 \o \code
-<FocusRealm id="Page" width="240" height="25">
-    <MyWidget focus="true" />
-    <MouseRegion anchors.fill="{parent}" onClick="Page.focus = true" />
-</FocusRealm>
+FocusRealm {
+    id: Page; width: 240; height: 25
+    MyWidget { focus: true }
+    MouseRegion { anchors.fill: parent; onClicked: { Page.focus = true } }
+}
 \endcode
 \endtable
 
@@ -201,25 +217,23 @@ print the name of the current list item.
 \table
 \row
 \o \code
-<Rect color="lightsteelblue" width="240" height="320">
-
-    <ListView id="MyView" anchors.fill="{parent}" focus="true">
-        <model>
-            <ListModel>
-                <Row><name>Bob</name></Row>
-                <Row><name>John</name></Row>
-                <Row><name>Michael</name></Row>
-            </ListModel>
-        </model>
-        <delegate>
-            <FocusRealm width="{contents.width}" height="{contents.height}">
-                <Text text="{name}" />
-                <KeyActions return="print(name)" focus="true" />
-            </FocusRealm>
-        </delegate>
-    </ListView>
-
-</Rect>
+Rect {
+    color: "lightsteelblue"; width: 240; height: 320
+
+    ListView {
+        id: MyView; anchors.fill: parent; focus: true
+        model: ListModel {
+            ListElement { name: "Bob" }
+            ListElement { name: "John" }
+            ListElement { name: "Michael" }
+        }
+        delegate: FocusRealm {
+            width: contents.width; height: contents.height
+            Text { text: name }
+            KeyActions { return: "print(name)"; focus: true }
+        }
+    }
+}
 \endcode
 \o \image declarative-qmlfocus4.png
 \endtable
diff --git a/doc/src/declarative/qmlforcpp.qdoc b/doc/src/declarative/qmlforcpp.qdoc
index 282f261..e29b962 100644
--- a/doc/src/declarative/qmlforcpp.qdoc
+++ b/doc/src/declarative/qmlforcpp.qdoc
@@ -8,7 +8,7 @@
     The QML syntax declaratively describes how to construct an in memory
     object tree.  QML is usually used to describe a visual scene graph 
     but it is not conceptually limited to this: the QML format is an abstract 
-    description of \b any object tree.  
+    description of \bold any object tree.  
 
     QML also includes property bindings.  Bindings are ECMAScript expressions 
     of a properties value.  Whenever the value of the expression changes - 
@@ -49,7 +49,7 @@
         y: 10
         width: 100
         height: 100
-        src: "background.png"
+        source: "background.png"
 
         Text {
             height: 50
@@ -62,11 +62,24 @@
     \endcode
 
     The QML snippet shown above instantiates one \c Image instance and one 
-    \c Text instance and sets properties on both.  \b Everything in QML 
+    \c Text instance and sets properties on both.  \bold Everything in QML 
     ultimately comes down to either instantiating an object instance, or
     assigning a property a value.  QML relies heavily on Qt's meta object system
     and can only instantiate classes that derive from QObject.
 
+    In the above example, each property is placed on its own line.  You can
+    also place multiple properties on one line by separating them with a
+    semi-colon. The code below is equivalent to the example above.
+
+    \code
+    Image {
+        id: myRect
+        x: 10; y: 10; width: 100; height: 100
+        source: "background.png"
+        Text { height: 50; width: 100; color: "white"; font.fontSize: 16; text: "Hello world!" }
+    }
+    \endcode
+
     QML can set properties that are more complex than just simple types like 
     integers and strings.  Properties can be object pointers or Qt interface 
     pointers or even lists of object or Qt interface pointers!  QML is typesafe,
@@ -251,9 +264,9 @@
 
     \code
     Image {
-        src: "background.png"
+        source: "background.png"
         Text {
-            text: src
+            text: source
         }
     }
     \endcode
@@ -505,7 +518,7 @@
     objects are not associated with any particular instance.  How the values
     of the attached properties apply to the behaviour they are controlling is
     entirely implementation dependent.  An additional consequence of this is
-    that \b any object can attach \b any attached property.  The following is
+    that \bold any object can attach \bold any attached property.  The following is
     perfectly valid, although the attached property has no actual effect:
 
     \code
diff --git a/doc/src/snippets/declarative/listview/highlight.qml b/doc/src/snippets/declarative/listview/highlight.qml
index d8bbb22..e3c948e 100644
--- a/doc/src/snippets/declarative/listview/highlight.qml
+++ b/doc/src/snippets/declarative/listview/highlight.qml
@@ -1,7 +1,6 @@
 Rect {
-    width: 180
-    height: 200
-    color: "white"
+    width: 180; height: 200; color: "white"
+
     // ContactModel model is defined in dummydata/ContactModel.qml
     // The viewer automatically loads files in dummydata/* to assist
     // development without a real data source.
@@ -13,16 +12,11 @@ Rect {
         id: Delegate
         Item {
             id: Wrapper
-            width: 180
-            height: 40
+            width: 180; height: 40
             VerticalLayout {
                 x: 5; y: 5
-                Text {
-                    text: '<b>Name:</b> ' + name
-                }
-                Text {
-                    text: '<b>Number:</b> ' + number
-                }
+                Text { text: '<b>Name:</b> ' + name }
+                Text { text: '<b>Number:</b> ' + number }
             }
         }
     }
@@ -34,10 +28,8 @@ Rect {
     Component {
         id: Highlight
         Rect {
-            width: 180
-            height: 40
-            color: "lightsteelblue"
-            radius: 5
+            width: 180; height: 40
+            color: "lightsteelblue"; radius: 5
             y: Follow {
                 source: List.current.y
                 spring: 3
@@ -47,10 +39,8 @@ Rect {
     }
     ListView {
         id: List
-        width: 180
-        height: parent.height
-        model: ContactModel
-        delegate: Delegate
+        width: parent.height; height: parent.height
+        model: ContactModel; delegate: Delegate
         highlight: Highlight
         autoHighlight: false
         focus: true
diff --git a/doc/src/snippets/declarative/listview/listview.qml b/doc/src/snippets/declarative/listview/listview.qml
index 3596af1..21a5fce 100644
--- a/doc/src/snippets/declarative/listview/listview.qml
+++ b/doc/src/snippets/declarative/listview/listview.qml
@@ -1,8 +1,7 @@
 //! [3]
 Rect {
-    width: 180
-    height: 200
-    color: "white"
+    width: 180; height: 200; color: "white"
+
     // ContactModel model is defined in dummydata/ContactModel.qml
     // The viewer automatically loads files in dummydata/* to assist
     // development without a real data source.
@@ -14,16 +13,11 @@ Rect {
         id: Delegate
         Item {
             id: Wrapper
-            width: 180
-            height: 40
+            width: 180; height: 40
             VerticalLayout {
                 x: 5; y: 5
-                Text {
-                    text: '<b>Name:</b> ' + name
-                }
-                Text {
-                    text: '<b>Number:</b> ' + number
-                }
+                Text { text: '<b>Name:</b> ' + name }
+                Text { text: '<b>Number:</b> ' + number }
             }
         }
     }
@@ -42,8 +36,7 @@ Rect {
     // The actual list
 //! [2]
     ListView {
-        width: 480
-        height: parent.height
+        width: parent.width; height: parent.height
         model: ContactModel
         delegate: Delegate
         highlight: Highlight