Doc: Add info about supported property types

Also describe that custom properties are visible in the
Properties view, where their values can be set.

Change-Id: Ie82975116ae4de0ebb92050e7e2190315521ff8b
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

4 files changed, 99 insertions, 23 deletions

diff --git a/doc/qtcreator/images/qmldesigner-dynamicprops.png b/doc/qtcreator/images/qmldesigner-dynamicprops.png
index ae2125481a..82cd304888 100644
--- a/doc/qtcreator/images/qmldesigner-dynamicprops.png
+++ b/doc/qtcreator/images/qmldesigner-dynamicprops.png
diff --git a/doc/qtcreator/images/qtquick-custom-properties.png b/doc/qtcreator/images/qtquick-custom-properties.png
new file mode 100644
index 0000000000..9964bb6317
--- /dev/null
+++ b/doc/qtcreator/images/qtquick-custom-properties.png
diff --git a/doc/qtcreator/src/qtquick/qtquick-connection-editor-properties.qdoc b/doc/qtcreator/src/qtquick/qtquick-connection-editor-properties.qdoc
index 9c05d2524c..176a9070a3 100644
--- a/doc/qtcreator/src/qtquick/qtquick-connection-editor-properties.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-connection-editor-properties.qdoc
@@ -30,8 +30,8 @@
 
     \title Specifying Dynamic Properties
 
-    In addition to the properties predefined for QML types, you can specify
-    \e {dynamic properties} to add properties that would not otherwise
+    Each predefined QML type has a set of predefined properties that you can
+    specify values for. You can add custom properties that would not otherwise
     exist for a particular type. You bind the properties to dynamic expressions
     to define global properties for an object that can be read by other objects.
     For example, you can specify global properties for the root object that you
@@ -42,18 +42,19 @@
     and then use bindings to refer to the value of the margin property from
     other objects.
 
-    Similarly, you can add dynamic properties at component level.
+    Similarly, you can add custom properties for your own QML types that are
+    based on the predefined types.
 
-    You can specify dynamic properties for objects in the
-    \uicontrol Connections view.
+    You can add properties for objects in the \uicontrol Connections view,
+    \uicontrol Properties tab.
 
-    \image qmldesigner-dynamicprops.png
+    \image qmldesigner-dynamicprops.png "Custom properties in Connection View Custom Properties tab"
 
-    To specify dynamic properties for an object:
+    To add properties for an object:
 
     \list 1
-        \li In the \uicontrol {Connections} view, select the
-            \uicontrol {Properties} tab.
+        \li Select \uicontrol View > \uicontrol Views >
+            \uicontrol {Connections View} > \uicontrol {Properties}.
         \li Select the \inlineimage plus.png
             (\uicontrol Add) button to add a dynamic property for the currently
             selected item. The item ID is displayed in the \uicontrol Item
@@ -61,9 +62,67 @@
         \li Double-click the value in the \uicontrol Property column to give a
             name to the property.
         \li Double-click the value in the \uicontrol {Property Type} column to
-            specify the type of the property.
+            specify the \l{Supported Property Types}{type of the property}.
         \li Double-click the value in the \uicontrol {Property Value} column
-            to specify a dynamic expression as the value of the property.
+            to specify the value of the property.
     \endlist
 
+    The properties you add for a QML type are displayed in the
+    \uicontrol Properties view when you select a component of
+    that type in \uicontrol Navigator or \uicontrol {Form Editor}.
+
+    \image qtquick-custom-properties.png "Custom properties in Properties view"
+
+    For more information about setting property values in the
+    \uicontrol Properties view, see \l{Specifying Item Properties}.
+
+    For an example of using custom properties in an application, see
+    \l{Creating a Mobile Application}.
+
+    \section1 Supported Property Types
+
+    The following table describes the supported property types:
+
+    \table
+    \header
+        \li Type
+        \li Description
+    \row
+        \li alias
+        \li \l{Property Aliases}{Property alias} that holds a reference to
+            another property
+    \row
+        \li bool
+        \li Binary \c true or \c false value
+    \row
+        \li color
+        \li Color value that can be specified by using an SVG color name, such
+            as "red", "green", or "lightsteelblue", or a hexadecimal triplet or
+            quad in the form "#RRGGBB" and "#AARRGGBB", respectively. For
+            example, the color red corresponds to a triplet of "#FF0000" and
+            a slightly transparent blue to a quad of "#800000FF".
+            In addition, you can use the following Qt functions: \l{Qt::rgba()}
+            {Qt.rgba()}, \l{Qt::hsva()}{Qt.hsva()}, \l{Qt::hsla()}{Qt.hsla()},
+            \l{Qt::darker()}{Qt.darker()}, \l{Qt::lighter()}{Qt.lighter()}, and
+            \l{Qt::tint()}{Qt.tint()}.
+    \row
+        \li int
+        \li Whole integer number, such as 0, 10, or -20
+    \row
+        \li real
+        \li Number with a decimal point
+    \row
+        \li string
+        \li Free form text string
+    \row
+        \li url
+        \li Resource locator, such as a file name. It can be either  absolute,
+            (\c http://qt-project.org), or relative  (\c pics/logo.png). A
+            relative URL is resolved relative to the URL of the parent
+            component.
+    \row
+        \li variant
+        \li Generic property type. For example, variant properties can store
+            numbers, strings, objects, arrays, and functions.
+    \endtable
 */
diff --git a/doc/qtcreator/src/qtquick/qtquick-properties.qdoc b/doc/qtcreator/src/qtquick/qtquick-properties.qdoc
index 78c70b2809..b26107ca2a 100644
--- a/doc/qtcreator/src/qtquick/qtquick-properties.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-properties.qdoc
@@ -32,25 +32,30 @@
 
     The \uicontrol Properties view displays all the properties of the selected
     item. The properties are grouped by type. The top part of the view displays
-    properties that are common to all QML types, such as position, size, and
-    visibility.
+    properties that are common to all QML types, such as type, id, position,
+    size, and visibility.
 
-    The bottom part of the view displays properties that are specific to each
-    QML type. For example, the following image displays the properties you can
-    set for \uicontrol Rectangle and \uicontrol Text items.
+    The bottom part of the view displays properties that have been defined for
+    the QML type. For example, the following image displays the predefined
+    properties you can set for \uicontrol Rectangle and \uicontrol Text items.
 
     \image qmldesigner-element-properties.png
 
-    To change the item type, double-click the \uicontrol Type field in the
-    \uicontrol Properties view, and enter the name of another QML type in the
-    field. If you have specified properties for the item that are not supported
-    for the new type, the type cannot be changed and an error message is
-    displayed. Select the \inlineimage icons/action-icon.png
+    When you create a component using a QML type, the component has all the
+    properties of the type you used. If you realize later that another
+    QML type with another set of predefined properties would be more suitable
+    for your purposes, you can change the component type by double-clicking the
+    \uicontrol Type field in the \uicontrol Properties view. Enter the name of
+    another QML type in the field.
+
+    If you have specified values for properties that are not supported by
+    the new type, \QC offers to remove them for you. If you'd rather do
+    this yourself, you can select the \inlineimage icons/action-icon.png
     (\uicontrol Actions) menu next to the property name, and then select
     \uicontrol Reset to remove the property values before trying again.
 
-    To modify the common properties of multiple items simultaneously, select
-    them in the \uicontrol Navigator or on the canvas:
+    To modify the values of common properties of multiple items simultaneously,
+    select the items in the \uicontrol Navigator or on the canvas:
 
     \list
         \li On Windows, press and hold \key Ctrl and \key Shift, and then click
@@ -71,6 +76,18 @@
     For more information on the properties available for an item, press
     \key {F1}.
 
+    \section1 Specifying Custom Properties
+
+    Each predefined QML type has a set of properties that you can extend by
+    defining additional properties for your own QML components. For more
+    information, see \l{Specifying Dynamic Properties}.
+
+    The properties you add for a QML type are displayed in the
+    \uicontrol Properties view when you select a component
+    of that type in \uicontrol Navigator or \uicontrol {Form Editor}.
+
+    \image qtquick-custom-properties.png "Custom properties in Properties view"
+
     \section1 Viewing Changes in Properties
 
     The default values of properties are displayed in white color, while the