Doc: Update info on using Custom Button wizard template

...to create buttons in Qt Design Studio

Update some of the tutorial source files accordingly.

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

5 files changed, 41 insertions, 77 deletions

diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-breadcrumb-bar.png b/doc/qtdesignstudio/examples/doc/images/loginui1-breadcrumb-bar.png
deleted file mode 100644
index 99898235fe..0000000000
--- a/doc/qtdesignstudio/examples/doc/images/loginui1-breadcrumb-bar.png
+++ /dev/null
diff --git a/doc/qtdesignstudio/examples/doc/images/loginui1-toolbar.png b/doc/qtdesignstudio/examples/doc/images/loginui1-toolbar.png
deleted file mode 100644
index 8968b021a4..0000000000
--- a/doc/qtdesignstudio/examples/doc/images/loginui1-toolbar.png
+++ /dev/null
diff --git a/doc/qtdesignstudio/examples/doc/loginui1.qdoc b/doc/qtdesignstudio/examples/doc/loginui1.qdoc
index d3ce72be5d..1f5ab9aa2c 100644
--- a/doc/qtdesignstudio/examples/doc/loginui1.qdoc
+++ b/doc/qtdesignstudio/examples/doc/loginui1.qdoc
@@ -30,27 +30,27 @@
     \nextpage {Log In UI - Part 2}
 
     \title Log In UI - Part 1
-    \brief Illustrates how to use wizards to create a simple UI that contains a
-    text label, push buttons, and a logo.
+    \brief Illustrates how to use wizard templates to create a simple UI that
+    contains a text label, push buttons, and a logo.
 
     \image loginui1.png
 
     \e{Log In UI - Part 1} is the first in a series of examples that build on
     each other to illustrate how to use \QDS to create a simple UI with some
     basic UI components, such as pages, buttons, and fields. Part 1 describes
-    how to use \QDS wizards to create a Qt Quick project and a button UI
-    control, and how to modify the files generated by the wizards to design
-    your own UI.
+    how to use \QDS wizard templates to create a Qt Quick project and a button
+    UI control, and how to modify the files generated by the wizard templates
+    to design your own UI.
 
     The \e {Learn Qt Quick} sections provide additional information about the
     tasks performed by the wizards and about the basics of QML and Qt Quick.
 
     \section1 Creating the UI Project
 
-    For the purposes of this example, you will use the simplest wizard offered.
-    Wizards are available also for creating UIs that are optimized for mobile
-    platforms and for launcher applications. For more information about the
-    options you have, see \l {Creating Projects}.
+    For the purposes of this example, you will use the empty wizard template.
+    Wizard templates are available also for creating UIs that are optimized for
+    mobile platforms and for launcher applications. For more information about
+    the options you have, see \l {Creating Projects}.
 
     To create a project:
 
@@ -128,8 +128,8 @@
     (\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
+    The \e Screen01.ui.qml file that the wizard template created for you should
+    be open in the Design mode. If it is not, you can double-click it in the
     \uicontrol Projects view to open it.
 
     \note The visibility of views depends on the selected workspace. To open
@@ -177,8 +177,8 @@
     animating visual components, receiving user input, and creating data models
     and views.
 
-    To be able to use the functionality of Qt Quick types, the wizard adds the
-    following \e import statements to the QML files that it creates:
+    To be able to use the functionality of Qt Quick types, the wizard template
+    adds the following \e import statements to the QML files that it creates:
 
     \quotefromfile loginui1/Screen01.ui.qml
     \skipto import
@@ -195,15 +195,15 @@
 
     \section1 Creating a Push Button
 
-    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 under
-    \uicontrol {My QML Components} in \uicontrol Library. You can
+    You can use another wizard template to create a push button and to add it to
+    the project. The wizard template creates a reusable button component that
+    appears under \uicontrol {My QML Components} in \uicontrol Library. You can
     drag and drop it to \uicontrol {Form Editor} and modify its properties
     in \uicontrol Properties 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
-    QML types. For more information, see \l {Creating Buttons} and
+    If you find that you cannot use the wizard template to create the kind of
+    push button that you want, you can create your button from scratch using
+    basic QML types. For more information, see \l {Creating Buttons} and
     \l {Creating Scalable Buttons and Borders}.
 
     To create a push button:
@@ -223,15 +223,15 @@
 
     \section2 Learn Qt Quick - Qt Quick Controls
 
-    The \e {Custom Button} wizard creates a \l [Qt Quick Controls 2] {Button}
+    The \e {Custom Button} wizard template creates a \l [Qt Quick Controls 2] {Button}
     QML type that belongs to the \l {Qt Quick Controls 2} module. It is a
     push-button control that can be pushed or clicked by the user. Buttons
     are normally used to perform an action or to answer a question. The Button
     type inherits properties and functionality from another QML type. These
     enable you to set text, display an icon, react to mouse clicks, and so on.
 
-    To be able to use the functionality of the Button type, the wizard adds the
-    following \e import statements to the \e PushButton.ui.qml file:
+    To be able to use the functionality of the Button type, the wizard template
+    adds the following \e import statements to the \e PushButton.ui.qml file:
 
     \quotefromfile loginui1/PushButton.ui.qml
     \skipto import
@@ -258,46 +258,39 @@
     make the changes apply to all the button instances, you must make them in
     the \e PushButton.ui.qml file.
 
-    Because the wizard already set a master style for all the UI files in the
-    project, the button background properties are not displayed in the
-    \uicontrol Properties view. You can access them by selecting them in the
-    \uicontrol Master menu (1) on the toolbar.
-
-    \image loginui1-toolbar.png
+    The Custom Button wizard template adds a \e down state to change the button
+    background and text color when the button is clicked. You will now change
+    the colors in both states.
 
     To change the button properties:
 
     \list 1
-        \li On the toolbar, select \uicontrol Master >
-            \uicontrol buttonBackground to move into the button background
-            component.
-        \li Select the button background in \uicontrol {Form Editor} or
-            \uicontrol Navigator to display its properties in the
-            \uicontrol Properties view.
+        \li Select the button background in \uicontrol Navigator to display its
+            properties in the \uicontrol Properties view.
         \li In the \uicontrol Color field, select
             \inlineimage icons/action-icon.png
             (\uicontrol Actions) > \uicontrol {Set Binding} and set the
             button background color to \e #41cd52.
-        \li Press \key Enter or select the tick button at the bottom of
-            the editor to save the new value.
+        \li Press \key Enter or select \uicontrol OK to save the new value.
             \image loginui1-binding-editor.png "Binding Editor"
+        \omit
         \li In the \uicontrol {Border Color} field, set the button
             border color to \e #21be2b. You could also use the color picker
             to change the button color.
         \li In the \uicontrol Radius field, enter 6 to give the button
             rounded corners.
-        \li Select \uicontrol Master > \uicontrol textItem, and set the
-            button text color to white (\e #ffffff).
+        \endomit
+        \li Select the text item in \uicontrol Navigator to display its
+            properties in \uicontrol Properties.
+        \li In the \uicontrol {Text color} field, set the button text
+            color to white (\e #ffffff).
+        \li In the \uicontrol States view, select the \e down state to set the
+            button text color to white and the background color to a darker
+            shade of green (\e #21be2b).
         \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
             to save your changes.
     \endlist
 
-    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 Form Editor"
@@ -376,7 +369,7 @@
     \section1 Next Steps
 
     To learn how to add more UI controls and position them on the page using
-    anchors and layouts so that the UI is scalable, see the next example in
+    anchors and layouts so that the UI is scalable, see the next tutorial in
     the series, \l {Log In UI - Part 2}.
 
     For a more advanced example of creating a menu button and using it to
diff --git a/doc/qtdesignstudio/examples/doc/loginui2.qdoc b/doc/qtdesignstudio/examples/doc/loginui2.qdoc
index 97ca6a2cdd..b1ed1e5602 100644
--- a/doc/qtdesignstudio/examples/doc/loginui2.qdoc
+++ b/doc/qtdesignstudio/examples/doc/loginui2.qdoc
@@ -56,9 +56,9 @@
     First, you will add a new rectangle to \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
-    in Part 1 of this example, the wizard anchored \e pageTitle to 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 template
+    in Part 1 of this example, the wizard template anchored \e pageTitle to the
     vertical and horizontal center of the page. Therefore, you will only
     need to replace the vertical anchor of \e pageTitle with a top anchor
     to align it with \e logo on the page.
diff --git a/doc/qtdesignstudio/examples/doc/loginui3.qdoc b/doc/qtdesignstudio/examples/doc/loginui3.qdoc
index a49d211a1d..d618223243 100644
--- a/doc/qtdesignstudio/examples/doc/loginui3.qdoc
+++ b/doc/qtdesignstudio/examples/doc/loginui3.qdoc
@@ -214,11 +214,6 @@
 
     \image loginui3.gif "Moving between login page and registration page"
 
-    The \e PushButton type also uses states to change the button background and
-    text color when the button is clicked. Now that clicking buttons performs
-    actions, you will change the background color for the button down state
-    from grey to green to match the color in the normal state that you changed
-    to green in Part 1.
 
     \section2 Learn Qt Quick - Signal and Event Handlers
 
@@ -234,30 +229,6 @@
 
     For more information, see \l{Signal and Handler Event System}.
 
-    Next, you will modify the properties of the \e PushButton type in the text
-    editor.
-
-    \section1 Changing Button Background Color
-
-    You will modify the button background color for the \e down state of the
-    \e PushButton type in the \e PushButton.ui.qml file.
-
-    \list 1
-        \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}.
-        \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:
-            \quotefromfile loginui3/PushButton.ui.qml
-            \skipto states:
-            \printuntil ]
-            You could also specify all the colors here as fixed values.
-        \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
-            to save your changes.
-    \endlist
-
     \section1 Next Steps
 
     For a more complicated UI, you would typically use QML types that specify