Doc: Fix terms used for Design mode views

The "canvas"/"scene"/"stage"/"working area" is called "Form Editor view".
Library, Navigator, Projects, Properties, States, Text Editor,
and Timeline are also their own views that can be organized as
workspaces and open from the Windows menu.

There are "tabs" only within views, and "panes" refers to
output panes.

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

4 files changed, 46 insertions, 42 deletions

diff --git a/doc/qtdesignstudio/examples/doc/loginui1.qdoc b/doc/qtdesignstudio/examples/doc/loginui1.qdoc
index 3be68658aa..a33f986200 100644
--- a/doc/qtdesignstudio/examples/doc/loginui1.qdoc
+++ b/doc/qtdesignstudio/examples/doc/loginui1.qdoc
@@ -78,9 +78,8 @@
     \section2 Learn Qt Quick - Projects and Files
 
     \QDS creates a set of boilerplate files and folders that you need to create
-    a UI using Qt Quick and QML. The files are listed in the \uicontrol Project
-    tab in the \uicontrol Navigator and in the \uicontrol Projects view. For
-    more information, see \l {Viewing Project Files}.
+    a UI using Qt Quick and QML. The files are listed in the \uicontrol Projects
+    view. For more information, see \l {Viewing Project Files}.
 
     \image loginui1-project-files.png
 
@@ -108,9 +107,8 @@
     QML files define a hierarchy of objects with a highly-readable, structured
     layout. Every QML file consists of two parts: an imports section and an
     object declaration section. The QML types and functionality most common to
-    UIs are provided in the QtQuick import. Select the \uicontrol {Text Editor}
-    tab in the Design mode or press \key F4 to view the QML code of an ui.qml
-    file.
+    UIs are provided in the QtQuick import. You can view the QML code of an
+    ui.qml file in the \uicontrol {Text Editor} view.
 
     For more information about creating a QML file from scratch, see
     \l{First Steps with QML}.
@@ -127,17 +125,21 @@
 
     To preview the changes that you make to the UI while you make
     them, select the \inlineimage live_preview.png
-    (\uicontrol {Show Live Preview}) button on the canvas toolbar
-    or press \key {Alt+P}.
+    (\uicontrol {Show Live Preview}) button on the \uicontrol {Form Editor}
+    view toolbar or press \key {Alt+P}.
 
     The \e Screen01.ui.qml file that the wizard created for you should be
     open in the Design mode. If it is not, you can double-click it in the
-    \uicontrol Project sidebar view to open it.
+    \uicontrol Projects view to open it.
 
-    To modify \e Screen01.ui.qml in the \uicontrol {Form Editor} tab:
+    \note The visibility of views depends on the selected workspace. To open
+    hidden views, select \uicontrol Window > \uicontrol Views in the Design
+    mode. For more information, see \l {Managing Workspaces}.
+
+    To modify \e Screen01.ui.qml in the \uicontrol {Form Editor}:
 
     \list 1
-       \li Select \e Rectangle in the \uicontrol Navigator to display its
+       \li Select \e Rectangle in the \uicontrol Navigator view to display its
             properties in the \uicontrol Properties view.
         \li In the \uicontrol Color field, select the
             \inlineimage icons/action-icon-binding.png
@@ -182,7 +184,7 @@
     \skipto import
     \printuntil loginui1 1.0
 
-    The \uicontrol Library lists the QML types in each Qt module that are
+    The \uicontrol Library view lists the QML types in each Qt module that are
     supported by \QDS. You can use the basic types to create your own QML
     types, and they will be listed in the \uicontrol {My QML Components} tab.
     The tab is only visible if you have created custom QML components.
@@ -196,8 +198,8 @@
     You can use another wizard to create a push button and to add it to the
     project. The wizard creates a reusable button component that appears in
     the \uicontrol {My QML Components} tab in the \uicontrol Library. You can
-    drag and drop it to the canvas and modify its properties to change its
-    appearance and functionality.
+    drag and drop it to the \uicontrol {Form Editor} and modify its properties
+    in the \uicontrol Properties view to change its appearance and functionality.
 
     If you find that you cannot use the wizard to create the kind of push
     button that you want, you can create your button from scratch using basic
@@ -269,8 +271,8 @@
         \li On the toolbar, select \uicontrol Master >
             \uicontrol buttonBackground to move into the button background
             component.
-        \li Select the button background on the canvas or in the
-            \uicontrol Navigator to display its properties in the
+        \li Select the button background in the \uicontrol {Form Editor} or
+            in the \uicontrol Navigator to display its properties in the
             \uicontrol Properties view.
         \li In the \uicontrol Color field, select
             \inlineimage icons/action-icon.png
@@ -290,14 +292,15 @@
             to save your changes.
     \endlist
 
-    To move back to the top level PushButton type on the canvas, select
+    To move back to the top level PushButton type in the
+    \uicontrol {Form Editor}, select
     \uicontrol PushButton.ui.qml on the breadcrumb bar (1):
 
     \image loginui1-breadcrumb-bar.png "Breadcrumb bar in the Design mode."
 
     Your button should now look something like this:
 
-    \image loginui1-button-styled.png "Modified button in the Design mode."
+    \image loginui1-button-styled.png "Modified button in the Form Editor"
 
     \section2 Learn Qt Quick - Property Bindings
 
@@ -327,11 +330,11 @@
     You will now add two button instances to the UI and modify their labels.
 
     \list 1
-        \li Double-click \e Screen01.ui.qml in the \uicontrol Project sidebar
-            view to open it on the canvas.
+        \li Double-click \e Screen01.ui.qml in the \uicontrol Projects
+            view to open it in the \uicontrol {Form Editor}.
         \li Drag and drop two instances of the PushButton type from the
-            \uicontrol Library to the canvas.
-            \image loginui1-library.png "Library sidebar view"
+            \uicontrol Library to the \uicontrol {Form Editor}.
+            \image loginui1-library.png "Library view"
         \li Select one of the buttons in the \uicontrol Navigator to modify
             its id and text label in the \uicontrol Properties view.
         \li In the \uicontrol Id field, enter \e loginButton.
@@ -347,9 +350,9 @@
             buttons so that the text fits comfortably on the button background.
             In this example, the button width is set to 120 pixels.
         \li Move the cursor on the selected button to make the selection icon
-            appear. You can now drag the button to another position on the
-            canvas. Use the guidelines to align the buttons below the page
-            title:
+            appear. You can now drag the button to another position in the
+            \uicontrol {Form Editor}. Use the guidelines to align the buttons
+            below the page title:
             \image loginui1-align-buttons.png
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
diff --git a/doc/qtdesignstudio/examples/doc/loginui2.qdoc b/doc/qtdesignstudio/examples/doc/loginui2.qdoc
index 908c50ee51..cbc66af9de 100644
--- a/doc/qtdesignstudio/examples/doc/loginui2.qdoc
+++ b/doc/qtdesignstudio/examples/doc/loginui2.qdoc
@@ -53,8 +53,8 @@
 
     \section1 Anchoring UI Components
 
-    First, you will add a new rectangle to the canvas and move all the
-    current UI components to it to create a new page. Then, you will
+    First, you will add a new rectangle to the \uicontrol {Form Editor} and move
+    all the current UI components to it to create a new page. Then, you will
     \l {Setting Anchors and Margins}{anchor} the static elements on the
     page, that is the logo image (\e logo) and page title (\e pageTitle),
     to the page. When you created the project using the new project wizard
@@ -65,20 +65,20 @@
 
     To preview the changes that you make to the UI while you make
     them, select the \inlineimage live_preview.png
-    (\uicontrol {Show Live Preview}) button on the canvas toolbar
-    or press \key {Alt+P}.
+    (\uicontrol {Show Live Preview}) button on the \uicontrol {Form Editor}
+    toolbar or press \key {Alt+P}.
 
     To anchor components on a page:
 
     \list 1
         \li Open \e {Screen01.ui.qml} for editing in the Design mode
-            \uicontrol {Form Editor} tab.
+            \uicontrol {Form Editor}.
         \li Select the rectangle that forms the UI background in the
             \uicontrol Navigator, and change its id to \e root in the
             \uicontrol Properties view.
         \li Drag and drop a \uicontrol Rectangle from the \uicontrol Library
             to \e root, and change its id to \e loginPage.
-        \li In the \uicontrol Layout tab, select the \inlineimage anchor-fill.png
+        \li In the \uicontrol Layout view, select the \inlineimage anchor-fill.png
             (\uicontrol {Fill Parent Item}) button to anchor the page to the root
             item on all sides.
         \li Select all the other UI elements below \e root in the
@@ -132,7 +132,7 @@
             \l {Qt Quick Controls 2} types in the tab:
             \image loginui2-imports.png
         \li Drag and drop two instances of the \uicontrol {Text Field} type
-            to the canvas.
+            to the \uicontrol {Form Editor}.
         \li Select one of the text fields in the \uicontrol Navigator, and
             change its id to \e usernameField in the \uicontrol Properties view.
         \li In the \uicontrol Geometry group, \uicontrol Size field, set the
@@ -141,8 +141,8 @@
             \uicontrol tr to mark the text translatable.
             \image loginui2-field-properties.png "Text field properties"
         \li In the \uicontrol Text field, delete the default text to make the
-            placeholder text visible on the canvas. The text value always takes
-            precedence over the placeholder text value.
+            placeholder text visible on the \uicontrol {Form Editor}. The text
+            value always takes precedence over the placeholder text value.
         \li Select the other text field, and change its id to
             \e passwordField, placeholder text to \e Password,
             and width to \e 300 pixels. Also remove the default text.
@@ -155,7 +155,8 @@
             \uicontrol Navigator, and right-click on either item
             to open a context menu.
         \li Select \uicontrol Position > \uicontrol {Position in Column}
-            to position the fields on top of each other on the canvas.
+            to position the fields on top of each other in the
+            \uicontrol {Form Editor}.
         \li Select the column in the \uicontrol Navigator and change its id
             to \e fieldColumn in \uicontrol Properties.
         \li In the \uicontrol Spacing field, set the spacing between the
diff --git a/doc/qtdesignstudio/examples/doc/loginui3.qdoc b/doc/qtdesignstudio/examples/doc/loginui3.qdoc
index e4b143a7a6..b09e9d9a0a 100644
--- a/doc/qtdesignstudio/examples/doc/loginui3.qdoc
+++ b/doc/qtdesignstudio/examples/doc/loginui3.qdoc
@@ -63,8 +63,8 @@
 
     To preview the changes that you make to the UI while you make
     them, select the \inlineimage live_preview.png
-    (\uicontrol {Show Live Preview}) button on the canvas toolbar
-    or press \key {Alt+P}.
+    (\uicontrol {Show Live Preview}) button on the \uicontrol {Form Editor}
+    toolbar or press \key {Alt+P}.
 
     To add the text field and a back button needed on the registration page:
 
@@ -81,7 +81,7 @@
         \li In the \uicontrol Placeholder field, set the placeholder text to
             \e {Verify password}.
         \li In the \uicontrol Text field, delete the default text to make the
-            placeholder text visible on the canvas.
+            placeholder text visible in the \uicontrol {Form Editor}.
         \li Drag and drop a PushButton type from the \uicontrol Library,
             \uicontrol {My QML Components} tab, to \e loginPage in the
             \uicontrol Navigator.
@@ -114,7 +114,7 @@
     \section1 Using States to Simulate Page Changes
 
     You will now add \l{Adding States}{states} to the UI to show and hide UI
-    components on the canvas:
+    components in the \uicontrol {Form Editor}:
 
     \list 1
         \li In the \uicontrol States view, select the \inlineimage plus.png
@@ -250,7 +250,7 @@
         \li Right-click \e loginButton in the \uicontrol Navigator and select
             \uicontrol {Go into Component} to open \e PushButton.ui.qml for
             editing in the Design mode.
-        \li Open the \uicontrol {Text Editor} tab.
+        \li Open the \uicontrol {Text Editor}.
         \li Edit the property values for the \e down state, to set the button
             text color to white and the background and border colors to
             darker shades of green by using the \c {Qt.darker()} function:
diff --git a/doc/qtdesignstudio/examples/doc/loginui4.qdoc b/doc/qtdesignstudio/examples/doc/loginui4.qdoc
index 93204d05f3..e9e19eaeb9 100644
--- a/doc/qtdesignstudio/examples/doc/loginui4.qdoc
+++ b/doc/qtdesignstudio/examples/doc/loginui4.qdoc
@@ -76,8 +76,8 @@
 
     To preview the changes that you make to the UI while you make
     them, select the \inlineimage live_preview.png
-    (\uicontrol {Show Live Preview}) button on the canvas toolbar
-    or press \key {Alt+P}.
+    (\uicontrol {Show Live Preview}) button on the \uicontrol {Form Editor}
+    toolbar or press \key {Alt+P}.
 
     \section2 Replacing Columns with Anchors