Doc: Add Qt Design Studio Manual sources

To build the manual, switch to qtcreator\doc\qtdesignstudiodoc,
run qmake, and then "make docs".

The example documentation does not get built with this change.
We need to decide whether to move the examples or fetch their
docs from the other repository.

Task-number: QDS-1487
Change-Id: Ic0a8c15b226eba8ac90686953568f3deaa000fb0
Reviewed-by: Eike Ziller <eike.ziller@qt.io>
Reviewed-by: Tim Jenssen <tim.jenssen@qt.io>

1 files changed, 217 insertions, 0 deletions

diff --git a/doc/qtdesignstudio/examples/doc/loginui2.qdoc b/doc/qtdesignstudio/examples/doc/loginui2.qdoc
new file mode 100644
index 00000000000..908c50ee513
--- /dev/null
+++ b/doc/qtdesignstudio/examples/doc/loginui2.qdoc
@@ -0,0 +1,217 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Design Studio documentation.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU Free Documentation License Usage
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file. Please review the following information to ensure
+** the GNU Free Documentation License version 1.3 requirements
+** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
+**
+****************************************************************************/
+
+/*!
+    \example loginui2
+    \ingroup studioexamples
+    \ingroup gstutorials
+    \previouspage {Log In UI - Part 1}
+    \nextpage {Log In UI - Part 3}
+
+    \title Log In UI - Part 2
+    \brief Illustrates how to position UI components on pages using anchors and
+    positioners.
+
+    \image loginui2.png "Log In UI"
+
+    \e{Log In UI - Part 2} is the second 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 entry fields. Part 2
+    describes how to position the UI components on pages to create a scalable
+    UI.
+
+    To ensure that the layout is responsive and all the UI elements stay in
+    their proper places when you resize the UI on the desktop or on devices
+    with different screen sizes, you will use anchors and positioners.
+
+    These instructions build on \l {Log In UI - Part 1}.
+
+    The \e {Learn Qt Quick} sections provide additional information about the
+    features of QML and Qt Quick that are relevant to the task at hand.
+
+    \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
+    \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
+    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.
+
+    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}.
+
+    To anchor components on a page:
+
+    \list 1
+        \li Open \e {Screen01.ui.qml} for editing in the Design mode
+            \uicontrol {Form Editor} tab.
+        \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
+            (\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
+            \uicontrol Navigator (press the \key Shift key for multiple
+            selection) and drag them to \e loginPage.
+        \li Select \e logo in the \uicontrol Navigator.
+        \li Select the \inlineimage anchor-top.png
+            (\uicontrol Top) and \inlineimage anchor-left.png
+            (\uicontrol Left) anchor buttons to anchor \e logo to the top left
+            corner of its parent (the \e loginPage) with 10-pixel margins.
+        \li Select \e pageTitle in the \uicontrol Navigator.
+        \li Deselect the \inlineimage anchor-vertical-center.png
+            (\uicontrol {Vertical Center}) button to remove the
+            anchor, and then select the \uicontrol Top button to anchor the
+            title to the top of the page with a 70-pixel margin.
+        \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
+            to save your changes.
+    \endlist
+
+    Your page now should look something like this in the Design mode and live
+    preview:
+
+    \image loginui2-loginpage.png "Login page in the Design mode"
+
+    \section2 Learn Qt Quick - Anchors
+
+    In an anchor-based layout, each QML type can be thought of as having a set
+    of invisible \e anchor lines: top, bottom, left, right, fill, horizontal
+    center, vertical center, and baseline.
+
+    Anchors enable placing an object either adjacent to or inside of another
+    object, by attaching one or more of the object's anchor lines to the anchor
+    lines of the other object. If an object changes, the objects that are
+    anchored to it will adjust automatically to maintain the anchoring.
+
+    For more information, see \l{Positioning with Anchors}.
+
+    \section1 Using Column Positioners
+
+    You will now add two entry fields to the page and position them in a column
+    to learn another method of \l{Using Positioners}{positioning items}.
+    Next, you will position the push buttons on the page in another column.
+    Finally, you will anchor the columns to the page to enable their positions
+    to change when the screen size changes.
+
+    To add entry fields to the page:
+
+    \list 1
+        \li In \uicontrol Library > \uicontrol {QML Types}, select the
+            \uicontrol {+ \QtQuick.Controls} button to display the
+            \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.
+        \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
+            width of the field to \e 300 pixels.
+        \li In the \uicontrol Placeholder field, enter \e Username and select
+            \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.
+        \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.
+    \endlist
+
+    You will now position the fields and buttons as columns:
+
+    \list 1
+        \li Select \e usernameField and \e passwordField in the
+            \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.
+        \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
+            fields to 5 pixels.
+            \image loginui2-column-properties.png "Column properties"
+        \li Select \e loginButton and \e registerButton, and then select
+            \uicontrol Position > \uicontrol {Position in Column} to position
+            them in a column.
+        \li Select the button column, change its id to \e buttonColumn, and
+            set the spacing between the buttons to 5 pixels, as above.
+    \endlist
+
+    You will now anchor the field and button columns to the page:
+
+    \list 1
+        \li Select \e fieldColumn in the \uicontrol Navigator.
+        \li In \uicontrol Properties > \uicontrol Layout, select the
+            \uicontrol Top button to anchor the top of the button column to
+            the top of its parent (the \e loginPage) with a 200-pixel margin.
+        \li Select the \inlineimage anchor-horizontal-center.png
+            (\uicontrol {Horizontal Center}) button to center the field
+            column horizontally on the page.
+        \li Select \e buttonColumn in the \uicontrol Navigator.
+        \li In \uicontrol Properties > \uicontrol Layout, select the
+            \inlineimage anchor-bottom.png
+            (\uicontrol Bottom) button to anchor the bottom of the button
+            column to the bottom of its parent (the \e loginPage) with a
+            50-pixel margin.
+        \li Select the \uicontrol {Horizontal Center} button to center
+            the button column horizontally on the page.
+        \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
+            to save your changes.
+    \endlist
+
+    The second iteration of your UI is now ready and should look something like
+    this in the Design mode and live preview:
+
+    \image loginui2-loginpage-ready.png "Login page in the Design mode"
+
+    \section1 Learn Qt Quick - Positioners
+
+    Qt Quick provides built-in positioner items. For many use cases, the best
+    positioner to use is a simple grid, row, or column, and Qt Quick provides
+    items that will position children in these formations in the most efficient
+    manner possible. For more information about using pre-defined positioners,
+    see \l {Item Positioners}.
+
+    For more complicated UI designs, you can use QML types from the
+    \l {Qt Quick Layouts Overview}{Qt Quick Layouts module}.
+
+    \section1 Next Steps
+
+    To learn more about positioning items in \QDS, see
+    \l{Positioning Items in UIs}.
+
+    To learn how to add a second page and move to it from the main page, see
+    the next example in the series, \l {Log In UI - Part 3}.
+*/
+