Doc: Update info about binding and connection editor

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

7 files changed, 78 insertions, 7 deletions

diff --git a/doc/qtcreator/images/qmldesigner-connections.png b/doc/qtcreator/images/qmldesigner-connections.png
index 165385d9b2..ae0f3146a8 100644
--- a/doc/qtcreator/images/qmldesigner-connections.png
+++ b/doc/qtcreator/images/qmldesigner-connections.png
diff --git a/doc/qtcreator/images/qtquick-connection-editor-action.png b/doc/qtcreator/images/qtquick-connection-editor-action.png
new file mode 100644
index 0000000000..7fca44baac
--- /dev/null
+++ b/doc/qtcreator/images/qtquick-connection-editor-action.png
diff --git a/doc/qtcreator/images/qtquick-connection-editor-assignment.png b/doc/qtcreator/images/qtquick-connection-editor-assignment.png
new file mode 100644
index 0000000000..60c9831184
--- /dev/null
+++ b/doc/qtcreator/images/qtquick-connection-editor-assignment.png
diff --git a/doc/qtcreator/src/qtquick/qtquick-components.qdoc b/doc/qtcreator/src/qtquick/qtquick-components.qdoc
index 24b81e80dd..8ea2cbda70 100644
--- a/doc/qtcreator/src/qtquick/qtquick-components.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-components.qdoc
@@ -76,16 +76,28 @@
     \list 1
         \li Drag and drop components from \uicontrol Library (1) to
             \uicontrol Navigator (2) or \uicontrol {Form Editor} (3).
-        \li Select components in \uicontrol Navigator to edit their
-            properties in \uicontrol Properties.
+        \li Select components in \uicontrol Navigator to edit the
+            values of their properties in \uicontrol Properties.
             \image qmldesigner-properties-view.png "Properties view"
             For more information, see \l {Specifying Item Properties}.
-        \li Connect components to signals or create bindings between components
-            in the \uicontrol Connections view.
+        \li To change the appearance and behavior of your components in ways
+            that are not supported out of the box, you can define custom
+            properties for your components in the \uicontrol Connections view,
+            \uicontrol Properties tab.
+            \image qmldesigner-dynamicprops.png "Connections view Properties tab"
+            For more information, see \l{Specifying Dynamic Properties}.
+        \li To enable users to interact with components, connect the components
+            to signals in the \uicontrol Connections view. For example, you can
+            specify what happens when a component is clicked.
+            For more information, see \l{Connecting Objects to Signals}.
+            \image qmldesigner-connections.png "Connections view Connections tab"
+        \li To dynamically change the behavior of an object when another object
+            changes, create bindings between components in the
+            \uicontrol Connections view, \uicontrol Bindings tab.
+            For more information, see \l{Adding Bindings Between Properties}.
             \image qmldesigner-bindings.png "Connections view Bindings tab"
-            For more information, see \l{Adding Connections}.
-        \li Add states to apply sets of changes to the properties of one or
-            several components in the \uicontrol States view.
+        \li Add states to apply sets of changes to the property values of one
+            or several components in the \uicontrol States view.
             For more information, see \l{Adding States}.
         \li Animate component properties in the \uicontrol Timeline view.
             For more information, see \l{Creating Animations}.
diff --git a/doc/qtcreator/src/qtquick/qtquick-connection-editor-bindings.qdoc b/doc/qtcreator/src/qtquick/qtquick-connection-editor-bindings.qdoc
index b8ecfaab9d..d3139ce23b 100644
--- a/doc/qtcreator/src/qtquick/qtquick-connection-editor-bindings.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-connection-editor-bindings.qdoc
@@ -65,4 +65,10 @@
         \li Double-click the value in the \uicontrol {Source Property} column
             to select the property to bind the target property to.
     \endlist
+
+    Right-click a binding and select \uicontrol {Open Binding Editor} in
+    the context menu to specify the binding as a JavaScript expression in
+    \uicontrol {Binding Editor}. For more information, see \l{Setting Bindings}.
+
+    \image qmldesigner-binding-editor.png "Binding Editor"
 */
diff --git a/doc/qtcreator/src/qtquick/qtquick-connection-editor-properties.qdoc b/doc/qtcreator/src/qtquick/qtquick-connection-editor-properties.qdoc
index 176a9070a3..870091441b 100644
--- a/doc/qtcreator/src/qtquick/qtquick-connection-editor-properties.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-connection-editor-properties.qdoc
@@ -67,6 +67,13 @@
             to specify the value of the property.
     \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"
+
     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}.
diff --git a/doc/qtcreator/src/qtquick/qtquick-connection-editor-signals.qdoc b/doc/qtcreator/src/qtquick/qtquick-connection-editor-signals.qdoc
index 2a64174185..876f32f514 100644
--- a/doc/qtcreator/src/qtquick/qtquick-connection-editor-signals.qdoc
+++ b/doc/qtcreator/src/qtquick/qtquick-connection-editor-signals.qdoc
@@ -42,6 +42,16 @@
     clicked within the area. Since the signal name is \c clicked, the signal
     handler for receiving this signal is named \c onClicked.
 
+    A signal is automatically emitted when the value of a QML property changes.
+    This type of signal is a \e{property change signal} and signal handlers
+    for  these signals are written in the form \c on<Property>Changed, where
+    \e <Property> is the name of the property, with the first letter
+    capitalized.
+
+    For example, the MouseArea type has a \c pressed property. To receive a
+    notification whenever this property changes, you would use a signal handler
+    called \c onPressedChanged.
+
     For more information about signals and signal handlers, see
     \l{Signal and Handler Event System}.
 
@@ -70,7 +80,43 @@
             to specify the actions.
     \endlist
 
+    Right-click a connection and select \uicontrol {Open Connection Editor}
+    in the context menu to specify the connection in
+    \uicontrol {Connection Editor}.
+
     \if defined(qtdesignstudio)
+    \section1 Adding Actions and Assignments
+
+    You use the \uicontrol {Connection Editor} to create the JavaScript
+    expressions for \e actions and \e assignments. An \e action connects
+    an object to a signal, whereas an \e assignment fetches property values
+    from another object.
+
+    For more information about the logical operators that you can use to
+    construct conditional expressions, see \l {Summary of Logical Operators}.
+
+    To create JavaScript expressions for actions:
+
+    \image qtquick-connection-editor-action.png
+
+    \list 1
+        \li Select \uicontrol Action as the type of the connections object.
+        \li Select the object to connect to a signal.
+        \li Select the action to perform when the signal is emitted.
+    \endlist
+
+    To create JavaScript expressions for assignments:
+
+    \image qtquick-connection-editor-assignment.png
+
+    \list 1
+        \li Select \uicontrol Assignment as the type of the connections object.
+        \li Select the target object for the property assignment.
+        \li Select the property of the target object to assign a value to.
+        \li Select the source object for the property assignment.
+        \li Select the property of the source object to fetch the value from.
+    \endlist
+
     For an example of connecting the \c clicked signal of a button to a
     \l{Adding States}{state}, see \l {Log In UI - Part 3}.
     \endif