Doc: Update custom property documentation

Task-number: QDS-7735
Change-Id: I1f4551e6d5f1319c73bc6e1b05c3c0390feecda9
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>

15 files changed, 65 insertions, 47 deletions

diff --git a/doc/qtdesignstudio/images/add-local-custom-property.png b/doc/qtdesignstudio/images/add-local-custom-property.png
new file mode 100644
index 0000000000..68b848f5aa
--- /dev/null
+++ b/doc/qtdesignstudio/images/add-local-custom-property.png
diff --git a/doc/qtdesignstudio/images/add-new-property-dialog.png b/doc/qtdesignstudio/images/add-new-property-dialog.png
new file mode 100644
index 0000000000..6aac047855
--- /dev/null
+++ b/doc/qtdesignstudio/images/add-new-property-dialog.png
diff --git a/doc/qtdesignstudio/images/custom-properties.png b/doc/qtdesignstudio/images/custom-properties.png
new file mode 100644
index 0000000000..531e62f903
--- /dev/null
+++ b/doc/qtdesignstudio/images/custom-properties.png
diff --git a/doc/qtdesignstudio/src/components/qtquick-component-instances.qdoc b/doc/qtdesignstudio/src/components/qtquick-component-instances.qdoc
index 30249eb580..d3a04f89be 100644
--- a/doc/qtdesignstudio/src/components/qtquick-component-instances.qdoc
+++ b/doc/qtdesignstudio/src/components/qtquick-component-instances.qdoc
@@ -51,7 +51,7 @@
             custom properties on the \uicontrol {Properties} tab in the
             \l {Connections} view.
             \image qmldesigner-dynamicprops.png "Connections View Properties tab"
-            For more information, see \l{Specifying Dynamic Properties}.
+            For more information, see \l{Specifying Custom Properties}.
         \li To enable users to interact with the component instances, connect
             the instances to signals on the \uicontrol Connections tab in the
             \uicontrol {Connections} view. For example, you can specify what
diff --git a/doc/qtdesignstudio/src/components/qtquick-components-custom.qdoc b/doc/qtdesignstudio/src/components/qtquick-components-custom.qdoc
index 33876c3d12..27e9ee1210 100644
--- a/doc/qtdesignstudio/src/components/qtquick-components-custom.qdoc
+++ b/doc/qtdesignstudio/src/components/qtquick-components-custom.qdoc
@@ -63,7 +63,7 @@
             \uicontrol Navigator or the \uicontrol {2D} view.
         \li Edit component properties in the \uicontrol Properties view.
             The available properties depend on the component type. You can
-            \l{Specifying Dynamic Properties}{add properties for
+            \l{Specifying Custom Properties}{add properties for
             components} on the \uicontrol {Properties} tab in the
             \uicontrol Connections view.
         \li To change the appearance and behavior of the component instances
diff --git a/doc/qtdesignstudio/src/overviews/qtquick-creating-ui-logic.qdoc b/doc/qtdesignstudio/src/overviews/qtquick-creating-ui-logic.qdoc
index 1b7be83102..561eb8c62c 100644
--- a/doc/qtdesignstudio/src/overviews/qtquick-creating-ui-logic.qdoc
+++ b/doc/qtdesignstudio/src/overviews/qtquick-creating-ui-logic.qdoc
@@ -136,7 +136,7 @@
     \endif
     \row
         \li Adding custom properties for a particular component type
-        \li \l{Specifying Dynamic Properties}
+        \li \l{Specifying Custom Properties}
     \omit
     \row
         \li Adding properties for controlling states
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc b/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc
index 19473763a1..330b2ee7be 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc
@@ -71,7 +71,7 @@
         \li Edit component properties in the \l Properties view.
 
             The available properties depend on the component type. You can
-            \l{Specifying Dynamic Properties}{add properties for components} on
+            \l{Specifying Custom Properties}{add properties for components} on
             the \uicontrol Properties tab in the {Connections} view.
     \endlist
 
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-simulink.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-simulink.qdoc
index 3a7b5d0037..5970a72126 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-simulink.qdoc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-simulink.qdoc
@@ -165,7 +165,7 @@
     Navigator to add the properties on the \uicontrol Properties tab in the
     \l Connections view.
 
-    See \l {Specifying Dynamic Properties} for a detailed description of how
+    See \l {Specifying Custom Properties} for a detailed description of how
     to add a custom property. The name of the property and the data type
     need to match those of the send or receive property of the Simulink model.
 
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc
index a501611d8c..15026d2c51 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc
@@ -219,7 +219,7 @@
         \li \l{Preset Components}
         \li \l{Specifying Component Properties}
         \li \l{Adding Bindings Between Properties}
-        \li \l{Specifying Dynamic Properties}
+        \li \l{Specifying Custom Properties}
     \endlist
 
     \section1 Signal
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
index 2c7f0f5355..bcccd0bf39 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
@@ -144,7 +144,7 @@
                             \list
                                 \li\l{Connecting Components to Signals}
                                 \li\l{Adding Bindings Between Properties}
-                                \li\l{Specifying Dynamic Properties}
+                                \li\l{Specifying Custom Properties}
                             \endlist
                         \li \l{Adding States}
                     \endlist
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-effects-materials.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-effects-materials.qdoc
index 872196b761..741551dffe 100644
--- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-effects-materials.qdoc
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-effects-materials.qdoc
@@ -217,5 +217,5 @@
     \image studio-custom-material-uniform-properties.png "Uniforms as properties in Connections view Properties tab"
 
     For more information about adding properties, see
-    \l{Specifying Dynamic Properties}.
+    \l{Specifying Custom Properties}.
 */
diff --git a/doc/qtdesignstudio/src/views/qtquick-connection-editor-properties.qdoc b/doc/qtdesignstudio/src/views/qtquick-connection-editor-properties.qdoc
index 65de3356c8..887bd9700f 100644
--- a/doc/qtdesignstudio/src/views/qtquick-connection-editor-properties.qdoc
+++ b/doc/qtdesignstudio/src/views/qtquick-connection-editor-properties.qdoc
@@ -31,10 +31,10 @@
     \else
     \nextpage quick-connections-backend.html
     \endif
+    \sa {Specifying Component Properties}
+    \title Specifying Custom Properties
 
-    \title Specifying Dynamic Properties
-
-    Each preset \l{glossary-component}{component} has a set of preset properties
+    Each \l{Preset Components}{preset component }has a set of preset properties
     that you can specify values for. You can add custom properties that would
     not otherwise exist for a particular \l{Component Types}{component type}.
     You bind the properties to dynamic expressions to define global properties
@@ -55,49 +55,35 @@
     should have an \e int or \e real property for speed to which the UI is
     bound.
 
-    You can add properties for components on the \uicontrol Properties tab in
-    in the \l {Connections} view.
-
-    \image qmldesigner-dynamicprops.png "Custom properties in the Connections view Custom Properties tab"
+    \section1 Adding Properties for a Component
 
-    To add properties for a component:
+    To add a custom property for a component:
 
     \list 1
-        \li Go to the \uicontrol Properties tab in the \l Connections view.
+        \li Go to the \uicontrol {Local Custom Properties} section in the
+        \uicontrol Properties view.
         \li Select the \inlineimage icons/plus.png
-            (\uicontrol Add) button to add a dynamic property for the currently
-            selected component. The component ID is displayed in the \uicontrol Item
-            column.
-        \li Double-click the value in the \uicontrol Property column to give a
-            name to the property. Property names must begin with a lower case
-            letter and can only contain letters, numbers, and underscores.
-            JavaScript \e {reserved words} are not valid property names.
-        \li Double-click the value in the \uicontrol {Property Type} column to
-            specify the \l{Supported Property Types}{type of the property}.
-        \li Double-click the value in the \uicontrol {Property Value} column
-            to specify the value of the property.
+            (\uicontrol Add) button to add a custom property for the currently
+            selected component.
+            \image add-local-custom-property.png
+        \li Set the \uicontrol Name and \uicontrol Type for the property.
+            \image add-new-property-dialog.png
     \endlist
 
-    Right-click a property and select \uicontrol {Open Binding Editor} in
-    the context menu to bind the value of the property to that of another one
-    or to data accessible in the application in \uicontrol {Binding Editor}.
-    For more information, see \l{Setting Bindings}.
-
-    \image qmldesigner-binding-editor.png "Binding Editor"
+    \section1 Binding a Property Value
 
-    The properties you add for a component are displayed in the \l Properties
-    view when you select a component of that type in the \l Navigator or
-    \l {2D} view.
+    To bind the value of the property to that of another one or to data
+    accessible in the application.
 
-    \image qtquick-custom-properties.png "Custom properties in Properties view"
-
-    For more information about setting property values in the
-    \l Properties view, see \l{Specifying Component Properties}.
+    \list 1
+      \li In the \uicontrol Properties view, select
+        \inlineimage icons/action-icon.png
+        next to the property.
+      \li Select \uicontrol {Set Binding}.
+        \image qmldesigner-binding-editor.png "Binding Editor"
+    \endlist
 
-    \if defined(qtcreator)
-    For an example of using custom properties in an application, see
-    \l{Creating a Mobile Application}.
-    \endif
+    For more information, see \l{Setting Bindings}.
 
     \section1 Supported Property Types
 
@@ -135,6 +121,9 @@
         \li string
         \li Free form text string
     \row
+        \li TextureInput
+        \li Specifies a texture exposed to the shaders of a CustomMaterial or Effect.
+    \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
@@ -144,5 +133,14 @@
         \li variant
         \li Generic property type. For example, variant properties can store
             numbers, strings, objects, arrays, and functions.
+    \row
+        \li vector2d
+        \li Refers to a value with x and y attributes.
+    \row
+        \li vector3d
+        \li Refers to a value with x, y, and z attributes.
+    \row
+        \li vector4d
+        \li Refers to a value with x, y, z, and w attributes.
     \endtable
 */
diff --git a/doc/qtdesignstudio/src/views/qtquick-connection-editor.qdoc b/doc/qtdesignstudio/src/views/qtquick-connection-editor.qdoc
index 62c9bdb543..9c8360f565 100644
--- a/doc/qtdesignstudio/src/views/qtquick-connection-editor.qdoc
+++ b/doc/qtdesignstudio/src/views/qtquick-connection-editor.qdoc
@@ -48,7 +48,7 @@
             the value of a property changes, the values of any properties that
             are bound to it are automatically updated accordingly.
 
-        \li \l{Specifying Dynamic Properties}
+        \li \l{Specifying Custom Properties}
 
             Each preset component has a set of preset properties that you
             can specify values for. You can add custom properties that would
diff --git a/doc/qtdesignstudio/src/views/qtquick-connection-view.qdoc b/doc/qtdesignstudio/src/views/qtquick-connection-view.qdoc
index cc13bc0ee6..f7ba59a7dc 100644
--- a/doc/qtdesignstudio/src/views/qtquick-connection-view.qdoc
+++ b/doc/qtdesignstudio/src/views/qtquick-connection-view.qdoc
@@ -85,7 +85,7 @@
         \li \uicontrol Properties
         \li Add custom properties that would not otherwise exist for a
             particular preset component or your own custom component.
-        \li \l{Specifying Dynamic Properties}
+        \li \l{Specifying Custom Properties}
     \if defined(qtcreator)
     \row
         \li \uicontrol Backends
diff --git a/doc/qtdesignstudio/src/views/qtquick-properties-view.qdoc b/doc/qtdesignstudio/src/views/qtquick-properties-view.qdoc
index ca8f331767..8eb86df321 100644
--- a/doc/qtdesignstudio/src/views/qtquick-properties-view.qdoc
+++ b/doc/qtdesignstudio/src/views/qtquick-properties-view.qdoc
@@ -44,6 +44,26 @@
 
     \image qmldesigner-element-properties.png "Rectangle and Text properties"
 
+    \section1 Custom Properties
+
+    Custom Properties are properties that the user has added to the component.
+
+    There are two types of custom properties:
+
+    \table
+      \header
+        \li Custom Property Type
+        \li Description
+      \row
+        \li Local Custom Property
+        \li A property that has been added for a \l{Preset Components}{preset component}.
+      \row
+        \li Exposed Custom Property
+        \li A property that has been added inside a component.
+    \endtable
+
+    \image custom-properties.png
+
     \section1 Summary of Properties View Buttons
 
     The following table lists the \uicontrol Properties view buttons: