/****************************************************************************
**
** 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 \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 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.

    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 \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
            \uicontrol {Form Editor} view.
        \li Select the rectangle that forms the UI background in the
            \uicontrol Navigator view, and change its id to \e root in the
            \uicontrol Properties view.
        \li Drag and drop a \uicontrol Rectangle from the \uicontrol Library
            view to \e root in \uicontrol Navigator, and change its id to
            \e loginPage in \uicontrol Properties.
        \li Under \uicontrol Layout, 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
            \uicontrol Navigator (press the \key Shift key for multiple
            selection) and drag them to \e loginPage.
        \li Select \e logo in \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 (\e loginPage) with 10-pixel margins.
        \li Select \e pageTitle in \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 \uicontrol {Form Editor}.
        \li Select one of the text fields in \uicontrol Navigator, and
            change its id to \e usernameField in \uicontrol Properties.
        \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 Select the other text field, and change its id to
            \e passwordField, placeholder text to \e Password,
            and width to \e 300 pixels.
    \endlist

    You will now position the fields and buttons as columns:

    \list 1
        \li Select \e usernameField and \e passwordField in
            \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 in
            \uicontrol {Form Editor}.
        \li Select the column in \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 \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 \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}.
*/