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>

doc/src/howto/creator-keyboard-shortcuts.qdoc

@@ -549,7 +549,8 @@
             \li  Open the QML file that defines the selected component
             \li  F2
         \row
-            \li  Move between code editor and visual editor
+            \li  Move between \uicontrol {Text Editor} and
+                 \uicontrol {Form Editor}
             \li  F4
         \row
             \li  Toggle left sidebar

doc/src/overview/creator-design-overview.qdoc

@@ -47,8 +47,9 @@
         \li \l{Developing Qt Quick Applications}
 
             You can use wizards to create Qt Quick projects that contain
-            boiler-plate code. You can use the code editor (Edit mode) or the
-            visual editor (Design mode) to develop Qt Quick applications.
+            boiler-plate code. You can use \QMLD to develop Qt Quick
+            applications in the \uicontrol Design mode.
+
         \li \l{Developing Widget Based Applications}
 
             Widgets and forms created with \QD are integrated seamlessly with

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

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.

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}
 

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 {

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.
 

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
 

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 {