Re-organized the Qt Quick page. Changed titles and links.

Task-number: QTBUG-16071

1 files changed, 171 insertions, 6 deletions

diff --git a/doc/src/declarative/propertybinding.qdoc b/doc/src/declarative/propertybinding.qdoc
index 92cf874..6f7c40a 100644
--- a/doc/src/declarative/propertybinding.qdoc
+++ b/doc/src/declarative/propertybinding.qdoc
@@ -29,12 +29,179 @@
 \page propertybinding.html
 \ingroup qml-features
 \contentspage QML Features
-\previouspage QML Features
-\nextpage Using QML Positioner and Repeater Items
+\previouspage QML Syntax
+\nextpage {QML Basic Types}{Data Types}
 \title Property Binding
 
+\section1 Properties
 
-\section1 Introduction
+QML property rules coincide with many of JavaScript's property rules.
+Properties begin with a lowercase letter (with the exception of
+\l{Attached Properties}). \l {JavaScript Reserved Words}{JavaScript reserved words}
+are not valid property names.
+
+\section1 Property types
+
+QML supports properties of many types (see \l{QML Basic Types}). The basic types
+include int, real, bool, string, color, and lists.
+
+\code
+Item {
+    x: 10.5             // a 'real' property
+    ...
+    state: "details"    // a 'string' property
+    focus: true         // a 'bool' property
+}
+\endcode
+
+QML properties are \i type-safe. That is, properties only allow you to assign
+a value that matches the property type. For example, the \c x property of item is a real, and if you try to assign
+a string to it you will get an error.
+
+\badcode
+Item {
+    property real value: "hello"  // illegal!
+}
+\endcode
+
+\section1 The \c id Property
+
+Each object can be given a special unique property called an \c id. No other object within the
+same QML component (see \l{QML Documents}) can have the same \c id value. Assigning an id enables the object
+to be referred to by other objects and scripts.
+
+The first Rectangle element below has an \c id, "myRect". The second Rectangle element defines its
+own width by referring to \tt myRect.width, which means it will have the same \tt width
+value as the first Rectangle element.
+
+\code
+Item {
+    Rectangle {
+        id: myRect
+        width: 100
+        height: 100
+    }
+    Rectangle {
+        width: myRect.width
+        height: 200
+    }
+}
+\endcode
+
+Note that an \c id must begin with a lower-case letter or an underscore. The \c id cannot contain characters other than letters, numbers, underscores, and \l {JavaScript Reserved Words}{JavaScript reserved words}.
+
+
+\section1 List properties
+
+List properties look like this:
+
+\code
+Item {
+    children: [
+        Image {},
+        Text {}
+    ]
+}
+\endcode
+
+The list is enclosed in square brackets, with a comma separating the
+list elements. In cases where you are only assigning a single item to a
+list, you can omit the square brackets:
+
+\code
+Image {
+    children: Rectangle {}
+}
+\endcode
+
+Items in the list can be accessed by the \c index. See the \l{list}{list type} documentation
+for more details about list properties and their available operations.
+
+
+\section1 Default Properties
+
+Each object type can specify one of its list or object properties as its default property.
+If a property has been declared as the default property, the property tag can be omitted.
+
+For example this code:
+\code
+State {
+    changes: [
+        PropertyChanges {},
+        PropertyChanges {}
+    ]
+}
+\endcode
+
+can be simplified to:
+
+\code
+State {
+    PropertyChanges {}
+    PropertyChanges {}
+}
+\endcode
+
+because \c changes is the default property of the \c State type.
+
+\section1 Grouped Properties
+\target dot properties
+
+In some cases properties form a logical group and use a 'dot' or grouped notation
+to show this.
+
+Grouped properties can be written like this:
+\qml
+Text {
+    font.pixelSize: 12
+    font.bold: true
+}
+\endqml
+
+or like this:
+\qml
+Text {
+    font { pixelSize: 12; bold: true }
+}
+\endqml
+
+In the element documentation grouped properties are shown using the 'dot' notation.
+
+\section1 Attached Properties
+\target attached-properties
+
+Some objects attach properties to another object.  Attached Properties
+are of the form \c {Type.property} where \c Type is the type of the
+element that attaches \c property.
+
+For example:
+\code
+Component {
+    id: myDelegate
+    Text {
+        text: "Hello"
+        color: ListView.isCurrentItem ? "red" : "blue"
+    }
+}
+ListView {
+    delegate: myDelegate
+}
+\endcode
+
+The \l ListView element attaches the \c ListView.isCurrentItem property
+to each delegate it creates.
+
+Another example of attached properties is the \l Keys element which
+attaches properties for handling key presses to
+any visual Item, for example:
+
+\code
+Item {
+    focus: true
+    Keys.onSelectPressed: console.log("Selected")
+}
+\endcode
+\section1 Property Binding
 Property binding is a declarative way of specifying the value of a property.  Binding allows
 a property's value to be expressed as an JavaScript expression that defines the value relative
 to other property values or data accessible in the application.  The property value is
@@ -103,7 +270,7 @@ Rectangle {
 
 \section1 Effects of Property Assignment in JavaScript
 
-Assigning a property value from JavaScript does \i not create a property binding.
+Assigning a property value from JavaScript does \e not create a property binding.
 For example:
 
 \code
@@ -153,7 +320,5 @@ Binding {
     value: slider.value
 }
 \endqml
-
-
 */