Doc: Describe Qt Quick Designer Form Editor and Text Editor tabs

Users can now use the code editor within the Qt Quick Designer.

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

7 files changed, 38 insertions, 28 deletions

diff --git a/doc/src/qtquick/creator-mobile-app-tutorial.qdoc b/doc/src/qtquick/creator-mobile-app-tutorial.qdoc
index 8ebcb6bbed..e22106218c 100644
--- a/doc/src/qtquick/creator-mobile-app-tutorial.qdoc
+++ b/doc/src/qtquick/creator-mobile-app-tutorial.qdoc
@@ -121,7 +121,8 @@
 
     \list 1
 
-        \li Select \uicontrol Edit to open Page1Form.ui.qml in the code editor.
+        \li Select \uicontrol {Text Editor} to open Page1Form.ui.qml in the
+            text editor tab.
 
         \li Right-click \uicontrol Image and select \uicontrol Refactoring >
             \uicontrol {Move Component into Separate File}.
@@ -142,7 +143,7 @@
     Bubble.qml with the \l{accelbubble/Bubble.qml}{Bubble.qml} example file.
 
     The UI is now ready and you can switch to editing the Page1.qml and
-    Bubble.qml files in the \uicontrol Edit mode, as described in the
+    Bubble.qml files in the \uicontrol {Text Editor}, as described in the
     following section.
 
     \section1 Moving the Bubble
@@ -153,15 +154,15 @@
     UI Form, so you also need to remove the corresponding code from Page1.qml
     (or the application cannot be built).
 
-    In the code editor, edit Bubble.qml to add properties that we will use to
-    position the image:
+    In the \uicontrol {Text Editor}, edit Bubble.qml to add properties that we
+    use to will position the image:
 
     \quotefromfile accelbubble/Bubble.qml
     \skipto Image
     \printuntil }
 
-    In the code editor, edit main.qml to specify the application title, as
-    illustrated by the following code snippet:
+    In the \uicontrol {Text Editor}, edit main.qml to specify the application
+    title, as illustrated by the following code snippet:
 
     \quotefromfile accelbubble/main.qml
     \skipto ApplicationWindow
diff --git a/doc/src/qtquick/creator-tutorial-create-qq-project.qdocinc b/doc/src/qtquick/creator-tutorial-create-qq-project.qdocinc
index 4c678f677b..0feb6d36e3 100644
--- a/doc/src/qtquick/creator-tutorial-create-qq-project.qdocinc
+++ b/doc/src/qtquick/creator-tutorial-create-qq-project.qdocinc
@@ -34,6 +34,7 @@
 
     \endlist
 
-    \QC generates a UI file, \e MainForm.ui.qml, that you can modify in the
-    \uicontrol Design mode and a QML file, \e main.qml, that you can modify in
-    the \uicontrol Edit mode to add the application logic.
+    \QC generates a UI file, \e Page1Form.ui.qml, that you can modify in the
+    \QMLD \uicontrol {Form Editor} and two QML files, \e Page1.qml and
+    \e main.qml, that you can modify in the \uicontrol {Text Editor} to add the
+    application logic.
diff --git a/doc/src/qtquick/qtquick-app-development.qdoc b/doc/src/qtquick/qtquick-app-development.qdoc
index fba39e121b..8d373449e1 100644
--- a/doc/src/qtquick/qtquick-app-development.qdoc
+++ b/doc/src/qtquick/qtquick-app-development.qdoc
@@ -52,8 +52,9 @@
 
         \li \l {Using Qt Quick Designer}
 
-            You can use the code editor (Edit mode) or the visual editor (Design
-            mode) to develop Qt Quick applications.
+            You can use the \uicontrol {Form Editor} or the
+            \uicontrol {Text Editor} of \QMLD in the \uicontrol Design mode to
+            develop Qt Quick applications.
 
         \li \l {Editing PathView Properties}
 
diff --git a/doc/src/qtquick/qtquick-buttons.qdoc b/doc/src/qtquick/qtquick-buttons.qdoc
index c82166789f..b924e801da 100644
--- a/doc/src/qtquick/qtquick-buttons.qdoc
+++ b/doc/src/qtquick/qtquick-buttons.qdoc
@@ -49,7 +49,8 @@
             \note Types are listed in the \uicontrol Library only if the
             filename begins with a capital letter.
 
-        \li Click \uicontrol {Design} to edit the file in the visual editor.
+        \li Click \uicontrol {Design} to edit the file in the
+            \uicontrol {Form Editor}.
 
         \li In the \uicontrol Navigator, select \uicontrol Item and set the
             width (\uicontrol W) and height (\uicontrol H) of the button in the
@@ -153,7 +154,8 @@
             \note Types are listed in the \uicontrol Library only if the
             filename begins with a capital letter.
 
-        \li Click \uicontrol {Design} to edit the file in the visual editor.
+        \li Click \uicontrol {Design} to edit the file in the
+            \uicontrol {Form Editor}.
 
         \li In the \uicontrol Navigator, select \uicontrol Item and set the
             width (\uicontrol W) and height (\uicontrol H) of the button in the
@@ -263,7 +265,8 @@
 
            \image qmldesigner-borderimage-connections.png "Item connections"
 
-        \li In the code editor, specify the \c clicked signal for the Item:
+        \li In the \uicontrol {Text Editor}, specify the \c clicked signal for
+            the Item:
 
             \qml
             Item {
diff --git a/doc/src/qtquick/qtquick-components.qdoc b/doc/src/qtquick/qtquick-components.qdoc
index b857c4ee0f..1b9be02297 100644
--- a/doc/src/qtquick/qtquick-components.qdoc
+++ b/doc/src/qtquick/qtquick-components.qdoc
@@ -115,7 +115,8 @@
 
         \li Click \uicontrol Design to open the .qml file in \QMLD.
 
-        \li Drag and drop a QML type from the \uicontrol Library to the editor.
+        \li Drag and drop a QML type from the \uicontrol Library to the
+            \uicontrol Navigator or \uicontrol {Form Editor}.
 
         \li Edit its properties in the \uicontrol Properties pane.
 
diff --git a/doc/src/qtquick/qtquick-screens.qdoc b/doc/src/qtquick/qtquick-screens.qdoc
index 5758756151..c88035096b 100644
--- a/doc/src/qtquick/qtquick-screens.qdoc
+++ b/doc/src/qtquick/qtquick-screens.qdoc
@@ -62,7 +62,8 @@
 
     \list 1
 
-        \li Drag and drop components from the \uicontrol Library to the editor.
+        \li Drag and drop components from the \uicontrol Library to the
+            \uicontrol Navigator or \uicontrol {Form Editor}.
 
         \li Select components in the \uicontrol Navigator to edit their
             properties in the \uicontrol Properties pane.
@@ -92,8 +93,9 @@
     \l{PathView}{Path View}, the ListModel and the delegate component that
     creates an instance for each item in the model are added automatically.
     You can edit item properties in the \uicontrol Properties pane or
-    in the code editor. You can also replace the default model and
-    delegate with other, more complex models and delegates in the code editor.
+    in the \uicontrol {Text Editor}. You can also replace the default model and
+    delegate with other, more complex models and delegates in the
+    \uicontrol {Text Editor}.
 
     \section1 Positioning Items on Screens
 
@@ -171,7 +173,7 @@
     \image qmldesigner-anchor-buttons.png "Anchor buttons"
 
     Specifying the baseline anchor in \QMLD is not supported. You can specify it
-    using the code editor.
+    in the \uicontrol {Text Editor}.
 
     For performance reasons, you can only anchor an item to its siblings and
     direct parent. By default, an item is anchored to its parent when you
@@ -302,13 +304,13 @@
     example, you can use states to create two screens.
 
     To add states, click the empty slot in the \uicontrol States pane. Then modify the
-    new state in the visual editor.
+    new state in the \uicontrol {Form Editor}.
 
     \image qmldesigner-states.png "States pane"
 
     The properties that you change in a state are highlighted with blue color.
-    In the code editor, you can see the changes recorded as changes to the base
-    state.
+    In the \uicontrol {Text Editor}, you can see the changes recorded as changes
+    to the base state.
 
     To keep the QML code clean, you should create a base state that contains all
     the types you will need in the application. You can then create states,
@@ -355,8 +357,8 @@
             or opacity of the items in the screen.
 
         \li To determine which view opens when the application starts, use the
-            code editor to set the state of the root item of the .qml file, as
-            specified by the following code snippet:
+            \uicontrol {Text Editor} to set the state of the root item of the
+           .qml file, as specified by the following code snippet:
 
             \qml
             Item {
@@ -378,8 +380,8 @@
     the same time. Or use the \c SequentialAnimation type to run them one
     after another.
 
-    You can use the code editor to specify transitions. For more information,
-    see \l{Transition}.
+    You can use the \uicontrol {Text Editor} to specify transitions. For more
+    information, see \l{Transition}.
 
     \section1 Adding User Interaction Methods
 
diff --git a/doc/src/qtquick/qtquick-ui-forms.qdoc b/doc/src/qtquick/qtquick-ui-forms.qdoc
index 386b8773ce..a0a516599f 100644
--- a/doc/src/qtquick/qtquick-ui-forms.qdoc
+++ b/doc/src/qtquick/qtquick-ui-forms.qdoc
@@ -71,8 +71,9 @@
 
     \section1 Using Qt Quick UI Forms
 
-    You can edit the forms in the \uicontrol Design mode. Items that are supposed to
-    be used in QML code have to be exported as properties:
+    You can edit the forms in the \uicontrol {Form Editor} and
+    \uicontrol {Text Editor} tabs in the \uicontrol Design mode. Items that are
+    supposed to be used in QML code have to be exported as properties:
 
     \code
     Item {