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>

doc/qtdesignstudio/README.md

@@ -0,0 +1,156 @@
+# Writing Qt Design Studio Documentation
+
+The Qt Design Studio Manual is based on the Qt Creator Manual, with additional
+topics. When building the Qt Design Studio Manual, parts of the Qt Creator
+Manual are pulled in from Qt Creator sources. This is enabled by creating
+separate table of contents files for each Manual and by using defines
+to hide and show information depending on which Manual is being built.
+
+This readme file describes how to build the Qt Design Studio Manual and how to
+edit or add source files when necessary.
+
+## Building the Qt Design Studio Manual
+
+1. Edit qtcreator\qtcreator.pri as follows:
+   `isEmpty(IDE_DISPLAY_NAME):  IDE_DISPLAY_NAME = Qt Design Studio`
+   `isEmpty(IDE_ID):            IDE_ID = qtdesignstudio`
+   `isEmpty(IDE_CASED_ID):      IDE_CASED_ID = QtDesignStudio`
+2. Switch to the `qtcreator\doc\qtdesignstudio` directory.
+4. Run `qmake` from Qt 5.14.0, or later
+  (because you need the Qt Timeline and Qt Quick 3D module docs)
+5. Run `make docs` on Linux and macOS or `nmake docs` on Windows.
+
+The docs are generated in `qtcreator\doc\qtdesignstudio\doc\qtdesignstudio`
+
+## Showing and Hiding Information
+
+Qt Design Studio uses only a subset of Qt Creator plugins and it has its
+own special plugins. This means that their manuals have somewhat different
+structures. Which, in turn breaks the navigation links to previous and next
+pages.
+
+This also means that some of the Qt Creator doc source files are not needed at
+all and some contain information that does not apply to the Qt Design Studio
+Manual. If QDoc parses all the Qt Creator doc sources, it would generate
+HTML files for each topic and include those files and all the images that they
+refer to in the help compilation files. This would unnecessarily increase the
+size of the help database and pollute the help index with references to files
+that are not actually listed in the table of contents of the manual. To avoid
+this, the files that are not needed are excluded from doc builds in the doc
+build configuration file.
+
+### Fixing the Navigation Links
+
+The navigation order of the topics in the Qt Design Studio Manual is specified
+in `qtcreator\doc\qtdesignstudio\src\qtdesignstudio-toc.qdoc`. The
+order of the topics in the Qt Creator Manual is specified in
+`qtcreator\doc\src\qtcreator-toc.qdoc`. If you add topics to or move them
+around in the TOC file, you must adjust the navigation links accordingly.
+
+The `qtdesignstudio` define is specified as a value of the `defines` option in
+the Qt Design Studio doc configuration file,
+`qtcreator\doc\qtdesignstudio\config\qtdesignstudio.qdocconf`. It is
+mostly used in the Qt Creator doc sources to specify values for the
+\previouspage and \nextpage commands depending on whether the Qt Design Studio
+Manual or Qt Creator Manual is being built. For example, the following if-else
+statement is needed, because the `quick-buttons.html` is excluded from the
+Qt Design Studio Manual:
+
+`\page quick-components.html`
+`\previouspage creator-using-qt-quick-designer.html`
+`\if defined(qtdesignstudio)`
+`\nextpage qtquick-navigator.html`
+`\else`
+`\nextpage quick-buttons.html`
+`\endif`
+
+### Excluding Souce Files from Builds
+
+The directories to exclude from Qt Design Studio Manual builds are listed as
+values of the `excludedirs` option in `\config\qtdesignstudio.qdocconf`.
+
+You only need to edit the values of the option if you want to show or hide all
+the contents of a directory. For example, if you add support for a Qt Creator
+plugin that was previously not supported by Qt Design Studio, you should remove
+the directory that contains the documentation for the plugin from the values.
+
+To hide or show individual topics within individual `.qdoc` files, you need to
+move the files in the Qt Creator doc source (`qtcreator\doc\src`) to or from
+excluded directories.
+
+For example, if support for iOS were added, you would need to check whether the
+information about iOS support is applicable to Qt Design Studio Manual. If yes,
+you would need to remove the following line from the `excludedirs` value:
+
+`../../src/ios \`
+
+You would then use defines to hide any Qt Creator specific information from the
+source file in the directory.
+
+If a directory contains some files that are needed in both manuals and some that
+are only needed in the Qt Creator Manual, the latter are located in a
+subdirectory called `creator-only`, which is excluded from the Qt Design Studio
+doc builds.
+
+### Hiding Text in Qt Creator Doc Sources
+
+The `qtcreator` define is specified as a value of the `defines` option in the
+Qt Creator doc configuration file,
+`qtcreator\doc\src\config\qtcreator-project.qdocconf`. It is mostly used in the
+Qt Creator doc sources to hide Qt Creator specific information when the Qt
+Design Studio Manual is built.
+
+The `\else` command is sometimes used to replace some Qt Creator specific text
+with text that applies to Qt Design Studio. For example, the following if-else
+statement is needed in the Qt Creator doc sources, because the project wizards
+in Qt Design Studio are different from those in Qt Creator, and are therefore
+described in a new topic that is located in the Qt Design Studio doc sources:
+
+`For more information, see`
+`\if defined(qtcreator)`
+`\l{Creating Qt Quick Projects}.`
+`\else`
+`\l{Creating UI Prototype Projects}.`
+`\endif`
+
+Note that titles in the two manuals can be identical only if the page is
+excluded from the Qt Design Studio Manual. In this case, QDoc can correctly
+determine the link target. If you add a link to a section title that appears
+twice in the doc source files, QDoc uses the first reference to that title
+in the `.index` file.
+
+## Writing About Qt Design Studio Specific Features
+
+Qt Design Studio specific plugins and features are described in a set of doc
+source files located in the `qtcreator\doc\qtdesignstudio\src` directory. Some
+files are used to include subsections in topics in the Qt Creator doc sources.
+
+Screenshots and other illustrations are stored in the `\qtdesignstudio\images`
+directory.
+
+### Adding Topics
+
+If you add new topics to the Qt Design Studio Manual, add links to them to the
+table of contents in `qtdesignstudio-toc.qdoc` and check the values of the
+navigation links around them.
+
+### Including Sections in Qt Creator Doc Sources
+
+Qt Quick Designer is an integral part of both Qt Creator and Qt Design Studio.
+Therefore, most topics that describe it are needed in the manuals of both tools.
+You can use the `\include` command in the Qt Creator doc sources to include
+`.qdocinc` files from the Qt Design Studio doc sources when building the
+Qt Design Studio Manual.
+
+For example, the following lines in the
+`qtcreator\doc\src\qtquick\qtquick-components.qdoc` file add information about
+creating and using Qt Design Studio Components to the `Creating Components`
+topic that is pulled from the Qt Creator doc sources:
+
+`\if defined(qtdesignstudio)`
+`\include qtdesignstudio-components.qdocinc creating studio components`
+`\include qtdesignstudio-components.qdocinc studio components`
+`\endif`
+
+Similarly, you can use include files to include subsections in different main
+level topics in the two manuals.

doc/qtdesignstudio/config/html-online.qdocconf

@@ -0,0 +1,2 @@
+HTML.prologue = \
+    "<div class=\"context qt_commercial\">\n"

doc/qtdesignstudio/config/license.qdocconf

@@ -0,0 +1,4 @@
+# Start of footer - the rest is defined in the default template
+HTML.footer = \
+    "  <p class=\"qt_commercial\">Available under certain Qt licenses.<br/><a href=\"http://www.qt.io/download/\">Find out more.</a></p>\n" \
+    "  </div>\n"

doc/qtdesignstudio/config/qtdesignstudio.qdocconf

@@ -0,0 +1,120 @@
+project     = "$IDE_DISPLAY_NAME"
+description = "$IDE_DISPLAY_NAME Manual"
+url         = https://doc.qt.io/qtdesignstudio
+
+moduleheader =
+
+headerdirs =
+sourcedirs = ../src \
+             ../examples/doc \
+             ../../src
+# The image folders also need to added by packaging scripts, so inform your
+# local release team about any changes you make.
+imagedirs = ../images \
+            ../examples/doc/images \
+            ../../images \
+            ../../../plugins/qmldesigner/qmlpreviewplugin/images \
+            ../../../share/qtcreator/qml/qmlpuppet/mockfiles/images \
+            ../../../share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/images \
+            ../../../src/libs/qmleditorwidgets/images \
+            ../../../src/libs/utils/images \
+            ../../../src/plugins/debugger/images \
+            ../../../src/plugins/diffeditor/images \
+            ../../../src/plugins/help/images \
+            ../../../src/plugins/projectexplorer/images \
+            ../../../src/plugins/qmldesigner/components/componentcore/images \
+            ../../../src/plugins/qmldesigner/components/formeditor \
+            ../../../src/plugins/qmldesigner/components/navigator \
+            ../../../src/plugins/qmldesigner/components/timelineeditor/images \
+            ../../../src/plugins/qmldesigner/qmlpreviewplugin/images \
+            ../../../src/plugins/texteditor/images
+
+excludefiles += ../../src/qtcreator.qdoc \
+                ../../src/qtcreator-toc.qdoc
+
+excludedirs  += ../../examples/accelbubble \
+                ../../examples/textfinder \
+                ../../examples/transitions \
+                ../../src/analyze \
+                ../../src/android \
+                ../../src/baremetal \
+                ../../src/cmake \
+                ../../src/debugger/creator-only \
+                ../../src/editors/creator-only \
+                ../../src/howto/creator-only \
+                ../../src/ios \
+                ../../src/linux-mobile \
+                ../../src/mcu \
+                ../../src/overview/creator-only \
+                ../../src/projects \
+                ../../src/qnx \
+                ../../src/qtquick/creator-only \
+                ../../src/vcs/creator-only \
+                ../../src/widgets \
+                ../../src/webassembly
+
+exampledirs = ../examples/ \
+              ../../examples
+examples.fileextensions += *.qml *.svg *.ts *.qm
+
+HTML.extraimages         = ../../config/images/commercial.png
+qhp.QtCreator.extraFiles = ../../config/images/commercial.png
+
+depends +=    qtwidgets \
+              qtcore \
+              qtqml \
+              qtqmlmodels \
+              qtquick \
+              qmake \
+              qtdoc \
+              qtgraphicaleffects \
+              qtgui \
+              qthelp \
+              qtquick3d \
+              qtquickcontrols \
+              qtquickextras \
+              qtquicktimeline \
+              qtlinguist \
+              qtscxml \
+              qtsensors \
+              qttestlib \
+              qtuitools \
+              qtxml
+
+include(../../config/macros.qdocconf)
+include(../../config/qt-cpp-ignore.qdocconf)
+include(../../config/qt-defines.qdocconf)
+
+defines += qtdesignstudio
+
+sources.fileextensions = "*.qdoc" "*.qdocinc"
+
+#depends += qtcreator \
+#           qmake
+
+qhp.projects = qtdesignstudio
+qhp.qtdesignstudio.file = qtdesignstudio.qhp
+qhp.qtdesignstudio.namespace = org.qt-project.$IDE_ID.$QTC_VERSION_TAG
+qhp.qtdesignstudio.virtualFolder = doc
+qhp.qtdesignstudio.indexTitle       = $IDE_DISPLAY_NAME Manual $QTC_VERSION
+qhp.qtdesignstudio.filterAttributes = $IDE_ID $QTC_VERSION
+qhp.qtdesignstudio.customFilters.qtdesignstudio.name = $IDE_DISPLAY_NAME $QTC_VERSION
+qhp.qtdesignstudio.customFilters.qtdesignstudio.filterAttributes = $IDE_ID $QTC_VERSION
+qhp.qtdesignstudio.indexRoot =
+
+qhp.qtdesignstudio.subprojects = manual
+qhp.qtdesignstudio.subprojects.manual.title = $IDE_DISPLAY_NAME Manual
+qhp.qtdesignstudio.subprojects.manual.indexTitle = All Topics
+qhp.qtdesignstudio.subprojects.manual.type = manual
+
+
+# Doxygen compatibility commands
+macro.see                       = "\\sa"
+macro.function                  = "\\fn"
+macro.QB                        = "Qt Bridge"
+macro.QBPS                      = "Qt Bridge for Adobe Photoshop"
+macro.QBSK                      = "Qt Bridge for Sketch"
+macro.QDS                       = "Qt Design Studio"
+
+navigation.landingpage = "$IDE_DISPLAY_NAME Manual"
+buildversion = "$IDE_DISPLAY_NAME Manual $QTC_VERSION"

doc/qtdesignstudio/config/style/qt5-sidebar.html

@@ -0,0 +1,18 @@
+<div class="sectionlist normallist">
+    <div class="heading">
+        <a name="reference"></a>
+        <h2 id="reference">Qt Design Studio Manual</h2>
+    </div>
+    <div class="indexboxcont indexboxbar">
+        <ul>
+            <li><a href="studio-getting-started.html">Getting Started</a></li>
+            <li><a href="studio-projects-managing.html">Managing Projects</a></li>
+            <li><a href="studio-prototyping.html">Creating UIs</a></li>
+            <li><a href="studio-adding-dynamics.html">Adding Dynamics</a></li>
+            <li><a href="studio-3d.html">Editing 3D Scenes</a></li>
+            <li><a href="creator-live-preview.html">Previewing</a></li>
+            <li><a href="studio-advanced.html">Advanced Topics</a></li>
+            <li><a href="studio-help.html">Help</a></li>
+            <li><a href="qtdesignstudio-toc.html">All Topics</a></li>
+        </ul>
+    </div>

doc/qtdesignstudio/examples/doc/loginui1.qdoc

@@ -0,0 +1,381 @@
+/****************************************************************************
+**
+** 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 loginui1
+    \ingroup studioexamples
+    \ingroup gstutorials
+    \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.
+
+    \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.
+
+    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}.
+
+    To create a project:
+
+    \list 1
+        \li Select \uicontrol File > \uicontrol {New File or Project} >
+            \uicontrol General > \uicontrol {Qt Quick Application - Empty} >
+            \uicontrol Choose.
+        \li In the \uicontrol Name field, enter \e {loginui1}.
+        \li In the \uicontrol {Create in} field, enter the path for the project
+            files
+        \li Select \uicontrol Next (or \uicontrol Continue on \macos) to
+            continue to the \uicontrol {Define Project Details} page.
+        \li In the \uicontrol {Screen resolution} field, select \e {640 x 480}.
+        \li Select \uicontrol Finish (or \uicontrol Done on \macos) to create
+            the project.
+    \endlist
+
+    Your project should now look something like this in the Design mode:
+
+    \image loginui1-project.png "Log In UI project in the Design mode"
+
+    The UI is built using a \l Rectangle QML type that forms the background and
+    a \l Text type that displays some text.
+
+    \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 pane. For
+    more information, see \l {Viewing Project Files}.
+
+    \image loginui1-project-files.png
+
+    \list
+        \li The \e {loginui1.qmlproject} project file defines that all
+            QML, JavaScript, and image files in the project folder belong to
+            the project. Therefore, you do not need to individually list new
+            files when you add them to the project.
+        \li The \e {loginui1.qml} file defines the functionality of
+            the UI. For the time being, it does not do anything.
+        \li The \e {Screen01.ui.qml} file defines the appearance of the
+            UI. For more information, see \l {Qt Quick UI Forms}.
+        \li The \e {qtquickcontrols2.conf} file specifies the selected
+            \l {Styling Qt Quick Controls}{UI style} and some style-specific
+            arguments.
+        \li The \e imports folder contains a \e {Constants.qml} file that
+            specifies a font loader for the Arial font and a \e qmldir module
+            definition file that declares the Constant QML type. For more
+            information, see \l {Module Definition qmldir Files}. In addition,
+            the \e QtQuick subfolder contains the Studio components and effects
+            QML types. You can ignore the subfolder for now, because it is not
+            used in this example.
+    \endlist
+
+    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.
+
+    For more information about creating a QML file from scratch, see
+    \l{First Steps with QML}.
+
+    Next, you will edit the properties of the UI elements to create the main
+    page of the UI.
+
+    \section1 Creating the Main Page
+
+    You will now change the properties of the \l Rectangle type to turn the UI
+    background white and those of the \l Text type to change the text and to use
+    a larger font size. In addition, you will use the \l Image type to add the
+    Qt logo to 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}.
+
+    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.
+
+    To modify \e Screen01.ui.qml in the \uicontrol {Form Editor} tab:
+
+    \list 1
+       \li Select \e Rectangle in the \uicontrol Navigator to display its
+            properties in the \uicontrol Properties view.
+        \li In the \uicontrol Color field, select the
+            \inlineimage icons/action-icon-binding.png
+            (\uicontrol Actions) menu, and then select \uicontrol Reset to
+            reset the rectangle background to the default color, white.
+        \li Select \e Text in the \uicontrol Navigator.
+        \li In the \uicontrol id field, change its id to \e pageTitle.
+        \li In the \uicontrol Text field, enter \e {Qt Account}.
+        \li In the \uicontrol Font group, \uicontrol Size field, set the font
+            size to \e 24 pixels.
+        \li Drag and drop an \l Image type from \uicontrol Library >
+            \uicontrol {QML Types} > \uicontrol {Qt Quick Basic} to the
+            top-left corner of the rectangle.
+        \li In the \uicontrol id field, change its id to \e logo.
+        \li In the \uicontrol Source field, select the \inlineimage browse-button.png
+            (\uicontrol Browse) button to locate the Qt logo image file. Click
+            \l {https://doc.qt.io/qtdesignstudio/images/used-in-examples/loginui1/qt_logo_green_64x64px.png}
+            {here} to open the Qt logo in a browser and save it as a file in the
+            folder where you created the project. The image is only used for
+            decoration, so you can also use any other image or just leave it
+            out.
+        \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
+            to save your changes.
+    \endlist
+
+    Your UI should now look something like this in the Design mode and live
+    preview:
+
+    \image loginui1-main-page.png "Modified UI in the Design mode"
+
+    \section2 Learn Qt Quick - QML Types
+
+    The \l {Qt Quick} module provides all the basic types necessary for creating
+    UIs. It provides a visual canvas and includes types for creating and
+    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:
+
+    \quotefromfile loginui1/Screen01.ui.qml
+    \skipto import
+    \printuntil loginui1 1.0
+
+    The \uicontrol Library 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.
+
+    For more information about the \l Rectangle and \l Image types used in this
+    example, see \l{Use Case - Visual Elements In QML}. For descriptions of all
+    QML types, see \l{All QML Types} in the Qt reference documentation.
+
+    \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 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.
+
+    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
+    \l {Creating Scalable Buttons and Borders}.
+
+    To create a push button:
+
+    \list 1
+        \li Select \uicontrol File > \uicontrol {New File or Project} >
+            \uicontrol {Files and Classes} > \uicontrol {Qt Quick Controls} >
+            \uicontrol {Custom Button} > \uicontrol Choose.
+        \li In the \uicontrol {Component name} field, enter \e {PushButton}.
+        \li Select \uicontrol Finish (or \uicontrol Done on \macos) to create
+            the button.
+    \endlist
+
+    Your button should now look something like this in the Design mode:
+
+    \image loginui1-button.png "Button in the Design mode."
+
+    \section2 Learn Qt Quick - Qt Quick Controls
+
+    The \e {Custom Button} wizard 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:
+
+    \quotefromfile loginui1/PushButton.ui.qml
+    \skipto import
+    \printuntil loginui1
+
+    The \l {Qt Quick Templates 2} module provides the functionality of the
+    Button type. The module is imported as \e T, and the alias is added to
+    the Button type definition to indicate that the Button type from the
+    Qt Quick Controls 2 module is used, instead of some other type with the
+    same name.
+
+    \printuntil text
+    \dots
+    \skipto Rectangle {
+    \printuntil }
+    \dots
+
+    Next, you will change the appearance of the button by modifying its
+    properties.
+
+    \section1 Styling the Button
+
+    You can now modify the properties of the PushButton type to your liking. To
+    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
+
+    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 on the canvas 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
+            (\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.
+            \image loginui1-binding-editor.png "Binding Editor"
+        \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).
+        \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 on the canvas, 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."
+
+    \section2 Learn Qt Quick - Property Bindings
+
+    An object's property can be assigned a static value which stays constant
+    until it is explicitly assigned a new value. In this example, the color
+    values you set in the \uicontrol {Binding Editor} are static.
+
+    However, to make the fullest use of QML and its built-in support for dynamic
+    object behavior, you can use property bindings that specify relationships
+    between different object properties. When a property's dependencies change
+    in value, the property is automatically updated according to the specified
+    relationship.
+
+    Behind the scenes, the QML engine monitors the property's dependencies
+    (that is, the variables in the binding expression). When it detects a
+    change, it re-evaluates the binding expression and applies the new result
+    to the property.
+
+    For more information, see \l {Property Binding}.
+
+    Next, you will use the \e PushButton type in the main UI QML file,
+    \e Screen01.ui.qml to add two instances of the button to the UI
+    and to modify their text labels.
+
+    \section1 Adding Buttons to the UI
+
+    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 Drag and drop two instances of the PushButton type from the
+            \uicontrol Library to the canvas.
+            \image loginui1-library.png "Library sidebar 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.
+        \li In the \uicontrol Text field, enter \e {Log In} and select
+            \uicontrol tr to mark the text
+            \l {Internationalization and Localization with Qt Quick}
+            {translatable}.
+        \li Select the other button, and change its id to \e registerButton
+            and text label to \e {Create Account}. Again, mark the text
+            translatable.
+        \li When an element is selected, selection handles are displayed in its
+            corners and on its sides. Use the selection handles to resize the
+            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:
+            \image loginui1-align-buttons.png
+        \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
+            to save your changes.
+    \endlist
+
+    The first iteration of your UI is now ready and should now look something
+    like this in the Design mode and live preview:
+
+    \image loginui1-ready.png "The finished UI in the Design mode"
+
+    \section2 Learn Qt Quick - QML Ids
+
+    Each QML type and each instance of a QML type has an \e id that uniquely
+    identifies it and enables other objects' properties to be bound to it. An
+    id must be unique, it must begin with a lower-case letter or an underscore
+    character, and it can contain only letters, numbers, and underscore
+    characters.
+
+    For more information, see \l{The id Attribute}.
+
+    \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
+    the series, \l {Log In UI - Part 2}.
+
+    For a more advanced example of creating a menu button and using it to
+    construct a button bar, see \l {Side Menu}.
+*/

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}.
+*/
+

doc/qtdesignstudio/examples/doc/loginui3.qdoc

@@ -0,0 +1,274 @@
+/****************************************************************************
+**
+** 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 loginui3
+    \ingroup studioexamples
+    \ingroup gstutorials
+
+    \title Log In UI - Part 3
+    \brief Illustrates how to use states to create a second UI page.
+    \previouspage {Log In UI - Part 2}
+    \nextpage {Log In UI - Part 4}
+
+    \image loginui3.gif "Log In UI"
+
+    \e{Log In UI - Part 3} is the third 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 3
+    describes how to use states to add a second page to the UI.
+
+    Because the second page will contain most of the same UI elements as the
+    login page, you will use \e states to show and hide UI elements as necessary
+    when a user selects the \uicontrol {Create Account} button.
+
+    These instructions build on:
+
+    \list
+        \li \l {Log In UI - Part 1}
+        \li \l {Log In UI - Part 2}
+    \endlist
+
+    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 Adding UI Components
+
+    You will add another text field for verifying the password that users
+    enter to create an account and a back button for returning to the login
+    page. You are already familiar with the tasks in this section from Part 1
+    of this example.
+
+    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 add the text field and a back button needed on the registration page:
+
+    \list 1
+        \li Open \e {Screen01.ui.qml} in the Design mode
+            \uicontrol {Form Editor} for editing.
+        \li Drag and drop a \uicontrol {Text Field} from \uicontrol Library
+            > \uicontrol {QML Types} > \uicontrol {Qt Quick Controls 2} to
+            \e fieldColumn in the \uicontrol Navigator.
+        \li In \uicontrol Properties, change the id of the text field to
+            \e verifyPasswordField.
+        \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, 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.
+        \li Drag and drop a PushButton type from the \uicontrol Library,
+            \uicontrol {My QML Components} tab, to \e loginPage in the
+            \uicontrol Navigator.
+        \li Select the button in the \uicontrol Navigator and change its id to
+            \e backButton in \uicontrol Properties.
+        \li In the \uicontrol Geometry group, \uicontrol Size field, set the
+            button width to \e 40 pixels.
+        \li In the \uicontrol Text field, enter \e <.
+        \li In the \uicontrol Font group, \uicontrol Size field, set the font
+            size to \e 24 pixels.
+        \li In the \uicontrol Layout tab, select the \inlineimage anchor-top.png
+            (\uicontrol Top) and \inlineimage anchor-right.png
+            (\uicontrol Right) anchor buttons to anchor \e backButton to
+            the top right corner of its parent (the \e loginPage) with 20-
+            and 10-pixel margins, respectively.
+        \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 loginui3-base-state.png "Login page with new UI components"
+
+    Next, you will add states for the login page and the registration page,
+    where you use the visibility property to hide the password verification
+    field and the back button on the login page and the login button on the
+    registration page.
+
+    \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:
+
+    \list 1
+        \li In the \uicontrol States pane, select the \inlineimage plus.png
+            button.
+            \image loginui3-login-state.png "States pane"
+        \li Enter \e loginState as the state name.
+        \li Select \e verifyPasswordField in the \uicontrol Navigator,
+            and deselect the \uicontrol Visibility check box in
+            \uicontrol Properties to hide the verify password field in
+            the login state.
+            \image loginui3-visibility.png
+        \li Repeat the above step for \e backButton.
+        \li In the \uicontrol {Text Editor}, add the following line to the
+            definition of \e root to specify that the application should start
+            in \e loginState:
+                \quotefromfile loginui3/Screen01.ui.qml
+                \skipto Rectangle {
+                \printuntil state: "loginState"
+        \li Add another state and name it \e registerState.
+        \li In this state, reselect the \uicontrol Visibility check box in
+            \e verifyPasswordField and \e backButton properties to show them
+            again.
+        \li Select \e loginButton in the \uicontrol Navigator, and deselect
+            the \uicontrol Visibility check box to hide the login button in
+            the registration state.
+        \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
+            to save your changes.
+    \endlist
+
+    You can now see all the states in the \uicontrol States view. The live
+    preview displays the default state, \e loginState:
+
+    \image loginui3-states.png "States view"
+
+    \section2 Learn Qt Quick - States
+
+    In Qt Quick, the \e state of a particular visual item is the set of
+    information which describes how and where the individual component
+    parts of the visual item are displayed within it, and all the data
+    associated with that state. Most visual items in a UI will have a
+    limited number of states, each with well-defined properties.
+
+    For example, an element in a list may be either selected or not, and if
+    selected, it may either be the currently active single selection or it
+    may be part of a selection group. Each of those states may have certain
+    associated visual appearance (neutral, highlighted, expanded, and so on).
+
+    Qt Quick provides a \l State type with properties which define its
+    semantics and can be used to trigger behavior or animations. UI components
+    typically have a state property and a default state. The default state
+    contains all of an item's initial property values, and is therefore useful
+    for managing property values before state changes.
+
+    UI components can specify additional states by adding new State objects to
+    the state property. Each state within a component has a unique name. To
+    change the current state of an item, the state property is set to the name
+    of the state. State changes can be bound to conditions by using the \c when
+    property.
+
+    For more information, see \l{Qt Quick States}.
+
+    Next, you will create connections to specify that clicking the
+    \uicontrol {Create Account} button on the login page triggers a
+    transition to the registration page and that clicking the back
+    button on the registration page triggers a transition to the login
+    page.
+
+    \section1 Connecting Buttons to States
+
+    QML types have predefined signals that are emitted when users interact
+    with the UI. The \e PushButton QML type contains a \l{MouseArea} type
+    that has a \e clicked signal. The signal is emitted whenever the mouse
+    is clicked within the area.
+
+    You will now use the \uicontrol Connections view to
+    \l{Connecting Objects to Signals}{connect} the clicked signal of
+    \e registerButton to \e registerState and that of \e backButton
+    to \e loginState:
+
+    \list 1
+        \li Select \e registerButton in the \uicontrol Navigator.
+        \li In the \uicontrol Connections view, select the \inlineimage plus.png
+            button to add the action that the \c onClicked signal handler of
+            \e registerButton should apply.
+        \li Double-click the value \uicontrol Action column and select
+            \uicontrol {Change state to registerState} in the drop-down menu.
+        \li Repeat the steps above to connect \e backButton to \e loginState
+            by selecting \uicontrol {Change state to loginState} in the last
+            step.
+        \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
+            to save your changes.
+    \endlist
+
+    You can now see the following connections in the Design mode:
+
+    \image loginui3-connections.png "Connections view"
+
+    In the live preview, you can now click the \uicontrol {Create Account}
+    button to go to the registration page and the back button to return to
+    the login page.
+
+    \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
+
+    UI components need to communicate with each other. For example, a button
+    needs to know that the user has clicked on it. The button may change color
+    to indicate its state and perform an action.
+
+    QML has a signal and handler mechanism, where the signal is the event that
+    is responded to through a signal handler. When a signal is emitted, the
+    corresponding signal handler is invoked. Placing logic such as a script or
+    other operations in the handler allows the component to respond to the
+    event.
+
+    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} tab.
+        \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
+    a view of items provided by a model, such as a \l ListView or \l StackView.
+    For more information, see \l{Using Data Models}.
+
+    To learn how to use a timeline to animate the transition between the login
+    and registration pages, see the next example in the series,
+    \l {Log In UI - Part 4}.
+*/

doc/qtdesignstudio/examples/doc/loginui4.qdoc

@@ -0,0 +1,322 @@
+/****************************************************************************
+**
+** 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 loginui4
+    \ingroup studioexamples
+    \ingroup gstutorials
+
+    \title Log In UI - Part 4
+    \brief Illustrates how to use the timeline and states to animate UI
+    components.
+    \previouspage {Log In UI - Part 3}
+    \nextpage {Log In UI - Part 5}
+
+    \image loginui4.gif "Log In UI"
+
+    \e{Log In UI - Part 4} is the fourth 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 4
+    describes how to use the timeline and states to animate UI components.
+
+    In Part 3, you learned how to use states to simulate page changes in a UI
+    and connections to provide user interaction with it. In Part 4, you will now
+    learn another way of animating the UI by using timeline animations that you
+    bind to states.
+
+    These instructions build on:
+
+    \list
+        \li \l {Log In UI - Part 1}
+        \li \l {Log In UI - Part 2}
+        \li \l {Log In UI - Part 3}
+    \endlist
+
+    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 Animating UI Components
+
+    In Part 3, you changed the visibility property in different states to
+    simulate changing pages. To make sure that those changes won't interfere
+    with the changes to the opacity property you will make in Part 4, you will
+    first remove the states.
+    In addition, you will need to remove the line that sets the default state
+    from the \e Screen01.ui.qml file in the \uicontrol {Text Editor}.
+
+    Then, you will add a timeline and insert keyframes for the opacity property
+    to hide the password verification field and back button on the login page
+    and the login button on the registration page. Because we want the password
+    verification field to appear to slide down from the password field, you will
+    also need to insert a keyframe for its anchor margin property. To be able to
+    animate the anchor, you also need to pull out the fields from the fields
+    column and anchor them to the page and to each other instead.
+
+    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}.
+
+    \section2 Replacing Columns with Anchors
+
+    First, you will prepare the page for adding animation:
+
+    \list 1
+        \li Open \e {Screen01.ui.qml} in the Design mode for editing.
+        \li In the \uicontrol States pane, select the \inlineimage close.png
+            (\uicontrol Close) button in \e loginState and \e registerState
+            to remove the states.
+        \li In the \uicontrol {Text Editor}, remove the following line:
+            \code
+            {state: "loginState"}
+            \endcode
+        \li Select the fields in \e fieldColumn in the \uicontrol Navigator
+            and drag and drop them to \e loginPage.
+        \li Select \e fieldColumn in the \uicontrol Navigator and press
+            \key Delete to delete it.
+        \li Select \e usernameField in the \uicontrol Navigator.
+        \li In \uicontrol Properties > \uicontrol Layout, select the
+            \inlineimage anchor-top.png
+            (\uicontrol Top) button to anchor the top of the field to the top
+            of its parent (the \e loginPage). \QDS will suggest an appropriate
+            margin based on the current Y-position of the field.
+        \li Select the \inlineimage anchor-horizontal-center.png
+            (\uicontrol {Horizontal Center}) button to anchor
+            the horizontal center of the field to that of its parent.
+        \li Select \e passwordField, and then select the \uicontrol Top
+            button in \uicontrol Properties > \uicontrol Layout.
+        \li In the \uicontrol Target field, select \e usernameField to anchor
+            the top of \e passwordField to the bottom of \e usernameField
+            with a 5-pixel margin.
+        \li Select the \uicontrol {Horizontal Center} button to anchor the
+            horizontal center of \e passwordField to that of \e usernameField.
+        \li Repeat the above steps to anchor the top of \e verifyPasswordField
+            to the bottom of the \e passwordField with a 5-pixel margin and to
+            anchor its horizontal center to that of \e passwordField.
+        \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
+            to save your changes.
+    \endlist
+
+    You could also animate the Y-position property of the verify password
+    field for a similar effect. In that case, you would need to use absolute
+    positioning for the field. This is less flexible if you export your
+    design from a design tool, such as Adobe Photoshop, and decide to change
+    your design and export it again at some point. In that case, the margins
+    would probably stay the same, even if the positions of the fields on the
+    page would change.
+
+    Your page now should look something like this in the Design mode and live preview:
+
+    \image loginui4-page.png "UI with all the buttons and fields in the Design mode"
+
+    \section2 Adding a Timeline and Animation Settings
+
+    You are now ready to add the \l{Creating Animations}{timeline}. You will
+    need two animations, one for moving into the registration page and another
+    for returning to the login page. You can use the same animation for both
+    cases, by running it either from the beginning to the end or from the
+    end to the beginning.
+
+    To add a timeline with settings for running the animation:
+
+    \image loginui4-timeline-settings.png
+
+    \list 1
+        \li In the \uicontrol Timeline view, select \inlineimage plus.png
+            to add a 1000-frame timeline and settings for running the animation.
+        \li In the \uicontrol {Animation ID} field, enter \e toLoginState.
+        \li Deselect the \uicontrol {Running in base state} check box, because
+            you want the animation to run only after the user clicks the
+            \uicontrol {Create Account} button. You can use the default settings
+            for the other fields.
+        \li Select \inlineimage plus.png
+            next to the \uicontrol {Animation Settings} group to add settings
+            for running the animation when the user clicks the back button.
+        \li In the \uicontrol {Animation ID} field, enter \e toRegisterState.
+        \li To run the animation backwards when the user clicks the back button,
+            enter \e 1000 in the \uicontrol {Start frame} field and \e 0 in the
+            \uicontrol {End frame} field.
+        \li Select \uicontrol Close in the \uicontrol {Timeline Settings} view
+            to save the timeline and the animation settings.
+    \endlist
+
+    Next, you will record the animation in the \uicontrol Timeline view.
+
+    \section2 Inserting Keyframes
+
+    You will now insert keyframes and record property changes in the
+    \uicontrol Timeline view:
+
+    \list 1
+        \li Select \e backButton in the \uicontrol Navigator.
+        \li In \uicontrol Properties > \uicontrol Opacity > \uicontrol Settings,
+            select \uicontrol {Insert Keyframe} to insert a keyframe for the
+            opacity property of the button.
+        \li Check that the playhead is in frame 0, and select the
+            \inlineimage recordfill.png
+            (Per Property Recording) button for the \uicontrol opacity property
+            of \e backButton to start recording property changes.
+            \image loginui4-timeline-opacity.png "Record button for the opacity property"
+        \li In the field next to the opacity property name on that same line,
+            type 0 to hide the button, and press \key Enter to save the value.
+        \li Move the playhead to frame 1000 and change the opacity value to 1
+            to show the button.
+        \li Select the record button again to stop recording property changes.
+            If you forget this, all the following changes will be recorded, and
+            the results will be unpredictable.
+        \li Select \e verifyPasswordField in the \uicontrol Navigator,
+            and repeat the above steps to insert a keyframe for the
+            \uicontrol opacity property of the field and to record
+            changes for it.
+        \li Select the \e loginButton in the \uicontrol Navigator, and repeat
+            the above steps to insert a keyframe for the \uicontrol opacity
+            property of the button and to record changes for it. However, this
+            time the opacity value needs to be 1 in frame 0 and 0 in frame 1000.
+        \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
+            to save your changes.
+    \endlist
+
+    When you move the playhead along the timeline, you can see how the login
+    button fades out while the verify password field and back button fade in.
+
+    You will now animate the top anchor margin of the verify password field
+    to make it appear to slide down from the password field.
+
+    \section2 Animating Anchors
+
+    To animate the top anchor margin of the verify password field:
+
+    \list 1
+        \li Select \e verifyPasswordField in the \uicontrol Navigator.
+        \li Select \uicontrol Properties > \uicontrol Layout > \uicontrol Margin
+            > \uicontrol {Insert Keyframe} to insert a keyframe for the top
+            anchor margin of \e verifyPasswordField.
+        \li In the \uicontrol Timeline view, check that the playhead is in
+            frame 0, and select the record button for the \e anchors.topMargin
+            property of \e verifyPasswordField.
+        \li In the field next to the property, set a negative value for the
+            top anchor margin, -40, to place \e verifyPasswordField on top of
+            \e passwordField.
+        \li Move the playhead to frame 1000 and change the top anchor margin to
+            5, so that \e verifyPasswordField appears to slide down and settle
+            below \e passwordField.
+        \li Select the record button again to stop recording property changes.
+        \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
+            to save your changes.
+    \endlist
+
+    \section2 Adding Easing Curves
+
+    You will now add an \l{Editing Easing Curves}{easing curve} to the anchor
+    margin animation that will make the transition seem smoother:
+
+    \list 1
+        \li Click the keyframe marker \inlineimage keyframe_linear_inactive.png
+            for the \e anchors.topMargin property at frame 1000 on the
+            timeline to select it.
+        \li Right-click the keyframe marker to open a context menu, and
+            select \uicontrol {Edit Easing Curve} to add an easing curve
+            to the animation.
+        \li In the \uicontrol {Easing Curve Editor}, select \e easeOutSine.
+            \image loginui4-easing-curve.png
+        \li Select \uicontrol OK to close the editor.
+    \endlist
+
+    When you attach easing curves to keyframes, the shape of the keyframe
+    marker changes from \inlineimage keyframe_linear_inactive.png
+    to \inlineimage keyframe_manualbezier_inactive.png
+    .
+
+    Your timeline now should look something like this:
+
+    \image loginui4-timeline.png "Timeline view with the recorded property changes"
+
+    Next, you create states for the login and registration pages and bind them
+    to the animation settings.
+
+    \section1 Binding Animation to States
+
+    You will now bring back the \l{Adding States}{states} in the
+    \uicontrol States pane and bind them to the animation settings
+    in the \uicontrol Timeline view:
+
+    \list 1
+        \li In the \uicontrol States pane, select the \inlineimage plus.png
+            button twice to add two states called \e loginState and
+            \e registerState. You don't need to make any property changes this
+            time, because you'll bind the states to property animations.
+        \li In the \uicontrol Timeline view, select the \inlineimage animation.png
+            (\uicontrol {Timeline Settings (S)}) button on the toolbar (or press
+            \key S to open the \uicontrol {Timeline Settings} dialog.
+            \image loginui4-timeline-settings-states.png
+        \li Double-click the cell in the \uicontrol Timeline column on the
+            \e loginState row, and select \e timeline in the list.
+        \li Double-click the cell in the \uicontrol Animation column on the
+            \e loginState row, and select \e toRegisterState.
+        \li Repeat these steps for \e registerState row, but select
+            \e toLoginState in the \uicontrol Animation column.
+        \li Click \uicontrol Close to save the timeline settings.
+    \endlist
+
+    In the live preview, you can now click the \uicontrol {Create Account}
+    button to go to the registration page and the back button to return to
+    the login page.
+
+    \image loginui4.gif "Moving between login page and registration page"
+
+    \section2 Learn Qt Quick - Timeline
+
+    The Qt Quick Timeline module provides QML types to use timelines and
+    keyframes to animate component properties in UIs. Animating properties
+    enables their values to move through intermediate values instead of
+    immediately changing to the target value.
+
+    The Keyframe type specifies the value of a keyframe on a timeline. \QDS
+    automatically adds keyframes between two keyframes, and sets their values
+    evenly to create an appearance of movement or transformation.
+
+    An easing curve can be attached to the keyframe to change the appearance
+    of the animation. For more information about easing curve types, see the
+    documentation for \l [QML] {PropertyAnimation}{easing curves}.
+
+    To be able to use the functionality of Qt Quick Timeline types, \QDS adds
+    the following \e import statement to the QML files where it uses the types:
+
+    \quotefromfile loginui4/Screen01.ui.qml
+    \skipto QtQuick.Timeline
+    \printuntil 1.0
+
+    All the properties and functions of the QML types from this module are
+    available in the Design mode, and therefore it is enough to learn how to
+    use the \uicontrol Timeline view, as described in \l {Creating Animations}.
+
+    \section1 Next Steps
+
+    For more examples about using timelines, see \l{Examples and Tutorials}.
+
+    To watch a video tutorial about creating timelines and adding keyframes,
+    select \e {Learn to use Qt Design Studio Part 2} in the \uicontrol Tutorials
+    tab in the \uicontrol Welcome mode.
+*/

doc/qtdesignstudio/examples/loginui1/PushButton.ui.qml

@@ -0,0 +1,117 @@
+
+
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.10
+import QtQuick.Templates 2.1 as T
+import loginui1 1.0
+
+T.Button {
+    id: control
+
+    text: qsTr("MyButton")
+
+    font: Constants.font
+    implicitWidth: Math.max(
+                       background ? background.implicitWidth : 0,
+                       contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(
+                        background ? background.implicitHeight : 0,
+                        contentItem.implicitHeight + topPadding + bottomPadding)
+    leftPadding: 4
+    rightPadding: 4
+
+    background: Rectangle {
+        id: buttonBackground
+        color: "#41cd52"
+        radius: 6
+        implicitWidth: 100
+        implicitHeight: 40
+        opacity: enabled ? 1 : 0.3
+        border.width: 1
+        border.color: "#21be2b"
+    }
+
+    contentItem: Text {
+        id: textItem
+        text: control.text
+
+        font: control.font
+        opacity: enabled ? 1.0 : 0.3
+        color: "white"
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    states: [
+        State {
+            name: "normal"
+            when: !control.down
+            PropertyChanges {
+                target: buttonBackground
+            }
+        },
+        State {
+            name: "down"
+            when: control.down
+            PropertyChanges {
+                target: textItem
+                color: "black"
+            }
+            PropertyChanges {
+                target: buttonBackground
+                color: "#a2a2a2"
+                border.color: "black"
+            }
+        }
+    ]
+}
+

doc/qtdesignstudio/examples/loginui1/Screen01.ui.qml

@@ -0,0 +1,96 @@
+
+
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.10
+import loginui1 1.0
+
+Rectangle {
+    width: Constants.width
+    height: Constants.height
+
+    Text {
+        id: pageTitle
+        x: 259
+        y: 155
+        width: 123
+        height: 40
+        text: qsTr("Qt Account")
+        font.pixelSize: 24
+    }
+
+    Image {
+        id: logo
+        x: 8
+        y: 8
+        width: 100
+        height: 100
+        source: "qt_logo_green_64x64px.png"
+        fillMode: Image.PreserveAspectFit
+    }
+
+    PushButton {
+        id: registerButton
+        x: 259
+        y: 277
+        width: 120
+        height: 40
+        text: qsTr("Create Account")
+    }
+
+    PushButton {
+        id: loginButton
+        x: 259
+        y: 231
+        width: 120
+        height: 40
+        text: qsTr("Log In")
+    }
+}

doc/qtdesignstudio/examples/loginui1/imports/loginui1/Constants.qml

@@ -0,0 +1,69 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+pragma Singleton
+import QtQuick 2.10
+
+QtObject {
+    readonly property int width: 640
+    readonly property int height: 480
+    readonly property FontLoader mySystemFont: FontLoader { name: "Arial" }
+    /* Edit this comment to add your custom font */
+    /* readonly property FontLoader myCustomFont: FontLoader { source: "MyCustomFont.ttf" } */
+    readonly property font font: Qt.font({
+                                             family: mySystemFont.name,
+                                             pointSize: Qt.application.font.pixelSize
+                                         })
+    readonly property font largeFont: Qt.font({
+                                                  family: mySystemFont.name,
+                                                  pointSize: Qt.application.font.pixelSize * 1.6
+                                              })
+    readonly property color backgroundColor: "#c2c2c2"
+}

doc/qtdesignstudio/examples/loginui1/imports/loginui1/qmldir

@@ -0,0 +1 @@
+singleton Constants 1.0 Constants.qml

doc/qtdesignstudio/examples/loginui1/loginui1.qml

@@ -0,0 +1,60 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.10
+import loginui1 1.0
+
+Item {
+    width: Constants.width
+    height: Constants.height
+
+    Screen01 {
+    }
+}

doc/qtdesignstudio/examples/loginui1/loginui1.qmlproject

@@ -0,0 +1,41 @@
+/* File generated by Qt Creator */
+
+import QmlProject 1.1
+
+Project {
+    mainFile: "loginui1.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+
+    JavaScriptFiles {
+        directory: "."
+    }
+
+    ImageFiles {
+        directory: "."
+    }
+
+    Files {
+        filter: "*.conf"
+        files: ["qtquickcontrols2.conf"]
+    }
+
+    Files {
+        filter: "qmldir"
+        directory: "."
+    }
+
+    Environment {
+        QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf"
+        QT_AUTO_SCREEN_SCALE_FACTOR: "1"
+    }
+
+    /* List of plugin directories passed to QML runtime */
+    importPaths: [ "imports" ]
+
+    /* Required for deployment */
+    targetDirectory: "/opt/loginui1"
+}

doc/qtdesignstudio/examples/loginui1/loginui1.qmlproject.qtds

@@ -0,0 +1,118 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE QtCreatorProject>
+<!-- Written by QtDesignStudio 1.3.0, 2019-10-24T11:06:25. -->
+<qtcreator>
+ <data>
+  <variable>EnvironmentId</variable>
+  <value type="QByteArray">{595d361f-de69-4ff2-b1f6-d89b95edfd27}</value>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.ActiveTarget</variable>
+  <value type="int">0</value>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.EditorSettings</variable>
+  <valuemap type="QVariantMap">
+   <value type="bool" key="EditorConfiguration.AutoIndent">true</value>
+   <value type="bool" key="EditorConfiguration.AutoSpacesForTabs">false</value>
+   <value type="bool" key="EditorConfiguration.CamelCaseNavigation">true</value>
+   <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.0">
+    <value type="QString" key="language">Cpp</value>
+    <valuemap type="QVariantMap" key="value">
+     <value type="QByteArray" key="CurrentPreferences">CppGlobal</value>
+    </valuemap>
+   </valuemap>
+   <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.1">
+    <value type="QString" key="language">QmlJS</value>
+    <valuemap type="QVariantMap" key="value">
+     <value type="QByteArray" key="CurrentPreferences">QmlJSGlobal</value>
+    </valuemap>
+   </valuemap>
+   <value type="int" key="EditorConfiguration.CodeStyle.Count">2</value>
+   <value type="QByteArray" key="EditorConfiguration.Codec">UTF-8</value>
+   <value type="bool" key="EditorConfiguration.ConstrainTooltips">false</value>
+   <value type="int" key="EditorConfiguration.IndentSize">4</value>
+   <value type="bool" key="EditorConfiguration.KeyboardTooltips">false</value>
+   <value type="int" key="EditorConfiguration.MarginColumn">80</value>
+   <value type="bool" key="EditorConfiguration.MouseHiding">true</value>
+   <value type="bool" key="EditorConfiguration.MouseNavigation">true</value>
+   <value type="int" key="EditorConfiguration.PaddingMode">1</value>
+   <value type="bool" key="EditorConfiguration.ScrollWheelZooming">true</value>
+   <value type="bool" key="EditorConfiguration.ShowMargin">false</value>
+   <value type="int" key="EditorConfiguration.SmartBackspaceBehavior">0</value>
+   <value type="bool" key="EditorConfiguration.SmartSelectionChanging">true</value>
+   <value type="bool" key="EditorConfiguration.SpacesForTabs">true</value>
+   <value type="int" key="EditorConfiguration.TabKeyBehavior">0</value>
+   <value type="int" key="EditorConfiguration.TabSize">8</value>
+   <value type="bool" key="EditorConfiguration.UseGlobal">true</value>
+   <value type="int" key="EditorConfiguration.Utf8BomBehavior">1</value>
+   <value type="bool" key="EditorConfiguration.addFinalNewLine">true</value>
+   <value type="bool" key="EditorConfiguration.cleanIndentation">true</value>
+   <value type="bool" key="EditorConfiguration.cleanWhitespace">true</value>
+   <value type="bool" key="EditorConfiguration.inEntireDocument">false</value>
+  </valuemap>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.PluginSettings</variable>
+  <valuemap type="QVariantMap"/>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.Target.0</variable>
+  <valuemap type="QVariantMap">
+   <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Desktop</value>
+   <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">Desktop</value>
+   <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">{8994bd34-5ed9-4c45-8c0a-94c8f33eca4a}</value>
+   <value type="int" key="ProjectExplorer.Target.ActiveBuildConfiguration">-1</value>
+   <value type="int" key="ProjectExplorer.Target.ActiveDeployConfiguration">0</value>
+   <value type="int" key="ProjectExplorer.Target.ActiveRunConfiguration">0</value>
+   <value type="int" key="ProjectExplorer.Target.BuildConfigurationCount">0</value>
+   <valuemap type="QVariantMap" key="ProjectExplorer.Target.DeployConfiguration.0">
+    <valuemap type="QVariantMap" key="ProjectExplorer.BuildConfiguration.BuildStepList.0">
+     <value type="int" key="ProjectExplorer.BuildStepList.StepsCount">0</value>
+     <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy</value>
+     <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value>
+     <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.BuildSteps.Deploy</value>
+    </valuemap>
+    <value type="int" key="ProjectExplorer.BuildConfiguration.BuildStepListCount">1</value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy Configuration</value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.DefaultDeployConfiguration</value>
+   </valuemap>
+   <value type="int" key="ProjectExplorer.Target.DeployConfigurationCount">1</value>
+   <valuemap type="QVariantMap" key="ProjectExplorer.Target.PluginSettings"/>
+   <valuemap type="QVariantMap" key="ProjectExplorer.Target.RunConfiguration.0">
+    <value type="bool" key="Analyzer.QmlProfiler.AggregateTraces">false</value>
+    <value type="bool" key="Analyzer.QmlProfiler.FlushEnabled">false</value>
+    <value type="uint" key="Analyzer.QmlProfiler.FlushInterval">1000</value>
+    <value type="QString" key="Analyzer.QmlProfiler.LastTraceFile"></value>
+    <value type="bool" key="Analyzer.QmlProfiler.Settings.UseGlobalSettings">true</value>
+    <value type="int" key="PE.EnvironmentAspect.Base">0</value>
+    <valuelist type="QVariantList" key="PE.EnvironmentAspect.Changes"/>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName"></value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">QML Scene</value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">QmlProjectManager.QmlRunConfiguration.QmlScene</value>
+    <value type="QString" key="QmlProjectManager.QmlRunConfiguration.MainScript">CurrentFile</value>
+    <value type="QString" key="QmlProjectManager.QmlRunConfiguration.QDeclarativeViewerArguments"></value>
+    <value type="uint" key="RunConfiguration.QmlDebugServerPort">3768</value>
+    <value type="bool" key="RunConfiguration.UseCppDebugger">false</value>
+    <value type="bool" key="RunConfiguration.UseCppDebuggerAuto">true</value>
+    <value type="bool" key="RunConfiguration.UseMultiProcess">false</value>
+    <value type="bool" key="RunConfiguration.UseQmlDebugger">false</value>
+    <value type="bool" key="RunConfiguration.UseQmlDebuggerAuto">true</value>
+   </valuemap>
+   <value type="int" key="ProjectExplorer.Target.RunConfigurationCount">1</value>
+  </valuemap>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.TargetCount</variable>
+  <value type="int">1</value>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.Updater.FileVersion</variable>
+  <value type="int">22</value>
+ </data>
+ <data>
+  <variable>Version</variable>
+  <value type="int">22</value>
+ </data>
+</qtcreator>

doc/qtdesignstudio/examples/loginui1/loginui1.qmlproject.qtds.4.10-pre1

@@ -0,0 +1,118 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE QtCreatorProject>
+<!-- Written by QtDesignStudio 1.2.0, 2019-05-28T14:45:23. -->
+<qtcreator>
+ <data>
+  <variable>EnvironmentId</variable>
+  <value type="QByteArray">{595d361f-de69-4ff2-b1f6-d89b95edfd27}</value>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.ActiveTarget</variable>
+  <value type="int">0</value>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.EditorSettings</variable>
+  <valuemap type="QVariantMap">
+   <value type="bool" key="EditorConfiguration.AutoIndent">true</value>
+   <value type="bool" key="EditorConfiguration.AutoSpacesForTabs">false</value>
+   <value type="bool" key="EditorConfiguration.CamelCaseNavigation">true</value>
+   <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.0">
+    <value type="QString" key="language">Cpp</value>
+    <valuemap type="QVariantMap" key="value">
+     <value type="QByteArray" key="CurrentPreferences">CppGlobal</value>
+    </valuemap>
+   </valuemap>
+   <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.1">
+    <value type="QString" key="language">QmlJS</value>
+    <valuemap type="QVariantMap" key="value">
+     <value type="QByteArray" key="CurrentPreferences">QmlJSGlobal</value>
+    </valuemap>
+   </valuemap>
+   <value type="int" key="EditorConfiguration.CodeStyle.Count">2</value>
+   <value type="QByteArray" key="EditorConfiguration.Codec">UTF-8</value>
+   <value type="bool" key="EditorConfiguration.ConstrainTooltips">false</value>
+   <value type="int" key="EditorConfiguration.IndentSize">4</value>
+   <value type="bool" key="EditorConfiguration.KeyboardTooltips">false</value>
+   <value type="int" key="EditorConfiguration.MarginColumn">80</value>
+   <value type="bool" key="EditorConfiguration.MouseHiding">true</value>
+   <value type="bool" key="EditorConfiguration.MouseNavigation">true</value>
+   <value type="int" key="EditorConfiguration.PaddingMode">1</value>
+   <value type="bool" key="EditorConfiguration.ScrollWheelZooming">true</value>
+   <value type="bool" key="EditorConfiguration.ShowMargin">false</value>
+   <value type="int" key="EditorConfiguration.SmartBackspaceBehavior">0</value>
+   <value type="bool" key="EditorConfiguration.SmartSelectionChanging">true</value>
+   <value type="bool" key="EditorConfiguration.SpacesForTabs">true</value>
+   <value type="int" key="EditorConfiguration.TabKeyBehavior">0</value>
+   <value type="int" key="EditorConfiguration.TabSize">8</value>
+   <value type="bool" key="EditorConfiguration.UseGlobal">true</value>
+   <value type="int" key="EditorConfiguration.Utf8BomBehavior">1</value>
+   <value type="bool" key="EditorConfiguration.addFinalNewLine">true</value>
+   <value type="bool" key="EditorConfiguration.cleanIndentation">true</value>
+   <value type="bool" key="EditorConfiguration.cleanWhitespace">true</value>
+   <value type="bool" key="EditorConfiguration.inEntireDocument">false</value>
+  </valuemap>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.PluginSettings</variable>
+  <valuemap type="QVariantMap"/>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.Target.0</variable>
+  <valuemap type="QVariantMap">
+   <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Desktop</value>
+   <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">Desktop</value>
+   <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">{8994bd34-5ed9-4c45-8c0a-94c8f33eca4a}</value>
+   <value type="int" key="ProjectExplorer.Target.ActiveBuildConfiguration">-1</value>
+   <value type="int" key="ProjectExplorer.Target.ActiveDeployConfiguration">0</value>
+   <value type="int" key="ProjectExplorer.Target.ActiveRunConfiguration">0</value>
+   <value type="int" key="ProjectExplorer.Target.BuildConfigurationCount">0</value>
+   <valuemap type="QVariantMap" key="ProjectExplorer.Target.DeployConfiguration.0">
+    <valuemap type="QVariantMap" key="ProjectExplorer.BuildConfiguration.BuildStepList.0">
+     <value type="int" key="ProjectExplorer.BuildStepList.StepsCount">0</value>
+     <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy</value>
+     <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value>
+     <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.BuildSteps.Deploy</value>
+    </valuemap>
+    <value type="int" key="ProjectExplorer.BuildConfiguration.BuildStepListCount">1</value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy Configuration</value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.DefaultDeployConfiguration</value>
+   </valuemap>
+   <value type="int" key="ProjectExplorer.Target.DeployConfigurationCount">1</value>
+   <valuemap type="QVariantMap" key="ProjectExplorer.Target.PluginSettings"/>
+   <valuemap type="QVariantMap" key="ProjectExplorer.Target.RunConfiguration.0">
+    <value type="bool" key="Analyzer.QmlProfiler.AggregateTraces">false</value>
+    <value type="bool" key="Analyzer.QmlProfiler.FlushEnabled">false</value>
+    <value type="uint" key="Analyzer.QmlProfiler.FlushInterval">1000</value>
+    <value type="QString" key="Analyzer.QmlProfiler.LastTraceFile"></value>
+    <value type="bool" key="Analyzer.QmlProfiler.Settings.UseGlobalSettings">true</value>
+    <value type="int" key="PE.EnvironmentAspect.Base">0</value>
+    <valuelist type="QVariantList" key="PE.EnvironmentAspect.Changes"/>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName"></value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">QML Scene</value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">QmlProjectManager.QmlRunConfiguration.QmlScene</value>
+    <value type="QString" key="QmlProjectManager.QmlRunConfiguration.MainScript">CurrentFile</value>
+    <value type="QString" key="QmlProjectManager.QmlRunConfiguration.QDeclarativeViewerArguments"></value>
+    <value type="uint" key="RunConfiguration.QmlDebugServerPort">3768</value>
+    <value type="bool" key="RunConfiguration.UseCppDebugger">false</value>
+    <value type="bool" key="RunConfiguration.UseCppDebuggerAuto">true</value>
+    <value type="bool" key="RunConfiguration.UseMultiProcess">false</value>
+    <value type="bool" key="RunConfiguration.UseQmlDebugger">false</value>
+    <value type="bool" key="RunConfiguration.UseQmlDebuggerAuto">true</value>
+   </valuemap>
+   <value type="int" key="ProjectExplorer.Target.RunConfigurationCount">1</value>
+  </valuemap>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.TargetCount</variable>
+  <value type="int">1</value>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.Updater.FileVersion</variable>
+  <value type="int">21</value>
+ </data>
+ <data>
+  <variable>Version</variable>
+  <value type="int">21</value>
+ </data>
+</qtcreator>

doc/qtdesignstudio/examples/loginui1/qtquickcontrols2.conf

@@ -0,0 +1,6 @@
+; This file can be edited to change the style of the application
+; Read "Qt Quick Controls 2 Configuration File" for details:
+; http://doc.qt.io/qt-5/qtquickcontrols2-configuration.html
+
+[Controls]
+Style=Default

doc/qtdesignstudio/examples/loginui2/PushButton.ui.qml

@@ -0,0 +1,117 @@
+
+
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.10
+import QtQuick.Templates 2.1 as T
+import loginui2 1.0
+
+T.Button {
+    id: control
+
+    text: qsTr("MyButton")
+
+    font: Constants.font
+    implicitWidth: Math.max(
+                       background ? background.implicitWidth : 0,
+                       contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(
+                        background ? background.implicitHeight : 0,
+                        contentItem.implicitHeight + topPadding + bottomPadding)
+    leftPadding: 4
+    rightPadding: 4
+
+    background: Rectangle {
+        id: buttonBackground
+        color: "#41cd52"
+        radius: 6
+        implicitWidth: 100
+        implicitHeight: 40
+        opacity: enabled ? 1 : 0.3
+        border.width: 1
+        border.color: "#21be2b"
+    }
+
+    contentItem: Text {
+        id: textItem
+        text: control.text
+
+        font: control.font
+        opacity: enabled ? 1.0 : 0.3
+        color: "white"
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    states: [
+        State {
+            name: "normal"
+            when: !control.down
+            PropertyChanges {
+                target: buttonBackground
+            }
+        },
+        State {
+            name: "down"
+            when: control.down
+            PropertyChanges {
+                target: textItem
+                color: "black"
+            }
+            PropertyChanges {
+                target: buttonBackground
+                color: "#a2a2a2"
+                border.color: "black"
+            }
+        }
+    ]
+}
+

doc/qtdesignstudio/examples/loginui2/Screen01.ui.qml

@@ -0,0 +1,133 @@
+
+
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.10
+import loginui2 1.0
+import QtQuick.Controls 2.3
+
+Rectangle {
+    id: root
+    width: Constants.width
+    height: Constants.height
+
+    Rectangle {
+        id: loginPage
+        color: "#ffffff"
+        anchors.fill: parent
+
+        Image {
+            id: logo
+            width: 100
+            height: 100
+            anchors.topMargin: 10
+            anchors.left: parent.left
+            anchors.leftMargin: 10
+            anchors.top: parent.top
+            source: "qt_logo_green_64x64px.png"
+            fillMode: Image.PreserveAspectFit
+        }
+
+        Text {
+            id: pageTitle
+            width: 123
+            height: 40
+            text: qsTr("Qt Account")
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.top
+            anchors.topMargin: 70
+            font.pixelSize: 24
+        }
+
+        Column {
+            id: fieldColumn
+            width: 300
+            height: 85
+            spacing: 5
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.top
+            anchors.topMargin: 200
+
+            TextField {
+                id: usernameField
+                width: 300
+                placeholderText: qsTr("Username")
+                font.pointSize: 10
+            }
+
+            TextField {
+                id: passwordField
+                width: 300
+                placeholderText: qsTr("Password")
+                font.pointSize: 10
+            }
+        }
+
+        Column {
+            id: buttonColumn
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 50
+            spacing: 5
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            PushButton {
+                id: loginButton
+                width: 120
+                text: qsTr("Log In")
+            }
+
+            PushButton {
+                id: registerButton
+                width: 120
+                text: qsTr("Create Account")
+            }
+        }
+    }
+}

doc/qtdesignstudio/examples/loginui2/imports/loginui2/Constants.qml

@@ -0,0 +1,76 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+pragma Singleton
+import QtQuick 2.10
+
+QtObject {
+    readonly property int width: 640
+    readonly property int height: 480
+    readonly property FontLoader mySystemFont: FontLoader { name: "Arial" }
+    /* Edit this comment to add your custom font */
+    /* readonly property FontLoader myCustomFont: FontLoader { source: "MyCustomFont.ttf" } */
+    readonly property font font: Qt.font({
+                                             family: mySystemFont.name,
+                                             pointSize: Qt.application.font.pixelSize
+                                         })
+    readonly property font largeFont: Qt.font({
+                                                  family: mySystemFont.name,
+                                                  pointSize: Qt.application.font.pixelSize * 1.6
+                                              })
+    readonly property color backgroundColor: "#c2c2c2"
+}
+
+
+
+/*##^## Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+ ##^##*/

doc/qtdesignstudio/examples/loginui2/imports/loginui2/qmldir

@@ -0,0 +1 @@
+singleton Constants 1.0 Constants.qml

doc/qtdesignstudio/examples/loginui2/loginui2.qml

@@ -0,0 +1,62 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.10
+import loginui2 1.0
+
+Item {
+    width: Constants.width
+    height: Constants.height
+
+    Screen01 {
+    }
+}
+
+

doc/qtdesignstudio/examples/loginui2/loginui2.qmlproject

@@ -0,0 +1,41 @@
+/* File generated by Qt Creator */
+
+import QmlProject 1.1
+
+Project {
+    mainFile: "loginui2.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+
+    JavaScriptFiles {
+        directory: "."
+    }
+
+    ImageFiles {
+        directory: "."
+    }
+
+    Files {
+        filter: "*.conf"
+        files: ["qtquickcontrols2.conf"]
+    }
+
+    Files {
+        filter: "qmldir"
+        directory: "."
+    }
+
+    Environment {
+        QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf"
+        QT_AUTO_SCREEN_SCALE_FACTOR: "1"
+    }
+
+    /* List of plugin directories passed to QML runtime */
+    importPaths: [ "imports" ]
+
+    /* Required for deployment */
+    targetDirectory: "/opt/loginui2"
+}

doc/qtdesignstudio/examples/loginui2/loginui2.qmlproject.qtds

@@ -0,0 +1,118 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE QtCreatorProject>
+<!-- Written by QtDesignStudio 1.2.0, 2019-05-28T16:13:26. -->
+<qtcreator>
+ <data>
+  <variable>EnvironmentId</variable>
+  <value type="QByteArray">{595d361f-de69-4ff2-b1f6-d89b95edfd27}</value>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.ActiveTarget</variable>
+  <value type="int">0</value>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.EditorSettings</variable>
+  <valuemap type="QVariantMap">
+   <value type="bool" key="EditorConfiguration.AutoIndent">true</value>
+   <value type="bool" key="EditorConfiguration.AutoSpacesForTabs">false</value>
+   <value type="bool" key="EditorConfiguration.CamelCaseNavigation">true</value>
+   <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.0">
+    <value type="QString" key="language">Cpp</value>
+    <valuemap type="QVariantMap" key="value">
+     <value type="QByteArray" key="CurrentPreferences">CppGlobal</value>
+    </valuemap>
+   </valuemap>
+   <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.1">
+    <value type="QString" key="language">QmlJS</value>
+    <valuemap type="QVariantMap" key="value">
+     <value type="QByteArray" key="CurrentPreferences">QmlJSGlobal</value>
+    </valuemap>
+   </valuemap>
+   <value type="int" key="EditorConfiguration.CodeStyle.Count">2</value>
+   <value type="QByteArray" key="EditorConfiguration.Codec">UTF-8</value>
+   <value type="bool" key="EditorConfiguration.ConstrainTooltips">false</value>
+   <value type="int" key="EditorConfiguration.IndentSize">4</value>
+   <value type="bool" key="EditorConfiguration.KeyboardTooltips">false</value>
+   <value type="int" key="EditorConfiguration.MarginColumn">80</value>
+   <value type="bool" key="EditorConfiguration.MouseHiding">true</value>
+   <value type="bool" key="EditorConfiguration.MouseNavigation">true</value>
+   <value type="int" key="EditorConfiguration.PaddingMode">1</value>
+   <value type="bool" key="EditorConfiguration.ScrollWheelZooming">true</value>
+   <value type="bool" key="EditorConfiguration.ShowMargin">false</value>
+   <value type="int" key="EditorConfiguration.SmartBackspaceBehavior">0</value>
+   <value type="bool" key="EditorConfiguration.SmartSelectionChanging">true</value>
+   <value type="bool" key="EditorConfiguration.SpacesForTabs">true</value>
+   <value type="int" key="EditorConfiguration.TabKeyBehavior">0</value>
+   <value type="int" key="EditorConfiguration.TabSize">8</value>
+   <value type="bool" key="EditorConfiguration.UseGlobal">true</value>
+   <value type="int" key="EditorConfiguration.Utf8BomBehavior">1</value>
+   <value type="bool" key="EditorConfiguration.addFinalNewLine">true</value>
+   <value type="bool" key="EditorConfiguration.cleanIndentation">true</value>
+   <value type="bool" key="EditorConfiguration.cleanWhitespace">true</value>
+   <value type="bool" key="EditorConfiguration.inEntireDocument">false</value>
+  </valuemap>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.PluginSettings</variable>
+  <valuemap type="QVariantMap"/>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.Target.0</variable>
+  <valuemap type="QVariantMap">
+   <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Desktop</value>
+   <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">Desktop</value>
+   <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">{8994bd34-5ed9-4c45-8c0a-94c8f33eca4a}</value>
+   <value type="int" key="ProjectExplorer.Target.ActiveBuildConfiguration">-1</value>
+   <value type="int" key="ProjectExplorer.Target.ActiveDeployConfiguration">0</value>
+   <value type="int" key="ProjectExplorer.Target.ActiveRunConfiguration">0</value>
+   <value type="int" key="ProjectExplorer.Target.BuildConfigurationCount">0</value>
+   <valuemap type="QVariantMap" key="ProjectExplorer.Target.DeployConfiguration.0">
+    <valuemap type="QVariantMap" key="ProjectExplorer.BuildConfiguration.BuildStepList.0">
+     <value type="int" key="ProjectExplorer.BuildStepList.StepsCount">0</value>
+     <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy</value>
+     <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value>
+     <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.BuildSteps.Deploy</value>
+    </valuemap>
+    <value type="int" key="ProjectExplorer.BuildConfiguration.BuildStepListCount">1</value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy Configuration</value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.DefaultDeployConfiguration</value>
+   </valuemap>
+   <value type="int" key="ProjectExplorer.Target.DeployConfigurationCount">1</value>
+   <valuemap type="QVariantMap" key="ProjectExplorer.Target.PluginSettings"/>
+   <valuemap type="QVariantMap" key="ProjectExplorer.Target.RunConfiguration.0">
+    <value type="bool" key="Analyzer.QmlProfiler.AggregateTraces">false</value>
+    <value type="bool" key="Analyzer.QmlProfiler.FlushEnabled">false</value>
+    <value type="uint" key="Analyzer.QmlProfiler.FlushInterval">1000</value>
+    <value type="QString" key="Analyzer.QmlProfiler.LastTraceFile"></value>
+    <value type="bool" key="Analyzer.QmlProfiler.Settings.UseGlobalSettings">true</value>
+    <value type="int" key="PE.EnvironmentAspect.Base">0</value>
+    <valuelist type="QVariantList" key="PE.EnvironmentAspect.Changes"/>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName"></value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">QML Scene</value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">QmlProjectManager.QmlRunConfiguration.QmlScene</value>
+    <value type="QString" key="QmlProjectManager.QmlRunConfiguration.MainScript">CurrentFile</value>
+    <value type="QString" key="QmlProjectManager.QmlRunConfiguration.QDeclarativeViewerArguments"></value>
+    <value type="uint" key="RunConfiguration.QmlDebugServerPort">3768</value>
+    <value type="bool" key="RunConfiguration.UseCppDebugger">false</value>
+    <value type="bool" key="RunConfiguration.UseCppDebuggerAuto">true</value>
+    <value type="bool" key="RunConfiguration.UseMultiProcess">false</value>
+    <value type="bool" key="RunConfiguration.UseQmlDebugger">false</value>
+    <value type="bool" key="RunConfiguration.UseQmlDebuggerAuto">true</value>
+   </valuemap>
+   <value type="int" key="ProjectExplorer.Target.RunConfigurationCount">1</value>
+  </valuemap>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.TargetCount</variable>
+  <value type="int">1</value>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.Updater.FileVersion</variable>
+  <value type="int">21</value>
+ </data>
+ <data>
+  <variable>Version</variable>
+  <value type="int">21</value>
+ </data>
+</qtcreator>

doc/qtdesignstudio/examples/loginui2/qtquickcontrols2.conf

@@ -0,0 +1,6 @@
+; This file can be edited to change the style of the application
+; Read "Qt Quick Controls 2 Configuration File" for details:
+; http://doc.qt.io/qt-5/qtquickcontrols2-configuration.html
+
+[Controls]
+Style=Default

doc/qtdesignstudio/examples/loginui3/PushButton.ui.qml

@@ -0,0 +1,115 @@
+
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.10
+import QtQuick.Templates 2.1 as T
+import loginui3 1.0
+
+T.Button {
+    id: control
+
+    text: qsTr("MyButton")
+
+    font: Constants.font
+    implicitWidth: Math.max(
+                       background ? background.implicitWidth : 0,
+                       contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(
+                        background ? background.implicitHeight : 0,
+                        contentItem.implicitHeight + topPadding + bottomPadding)
+    leftPadding: 4
+    rightPadding: 4
+
+    background: Rectangle {
+        id: buttonBackground
+        color: "#41cd52"
+        radius: 6
+        implicitWidth: 100
+        implicitHeight: 40
+        opacity: enabled ? 1 : 0.3
+        border.width: 1
+        border.color: "#21be2b"
+    }
+
+    contentItem: Text {
+        id: textItem
+        text: control.text
+
+        font: control.font
+        opacity: enabled ? 1.0 : 0.3
+        color: "white"
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    states: [
+        State {
+            name: "normal"
+            when: !control.down
+            PropertyChanges {
+                target: buttonBackground
+            }
+        },
+        State {
+            name: "down"
+            when: control.down
+            PropertyChanges {
+                target: textItem
+                color: "white"
+            }
+            PropertyChanges {
+                target: buttonBackground
+                color: Qt.darker("#41cd52", 1.2)
+                border.color: Qt.darker("#21be2b", 1.2)
+            }
+        }
+    ]
+}

doc/qtdesignstudio/examples/loginui3/Screen01.ui.qml

@@ -0,0 +1,193 @@
+
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.10
+import loginui3 1.0
+import QtQuick.Controls 2.3
+
+Rectangle {
+    id: root
+    state: "loginState"
+    width: Constants.width
+    height: Constants.height
+
+    Rectangle {
+        id: loginPage
+        color: "#ffffff"
+        anchors.fill: parent
+
+        Image {
+            id: logo
+            width: 100
+            height: 100
+            anchors.topMargin: 10
+            anchors.left: parent.left
+            anchors.leftMargin: 10
+            anchors.top: parent.top
+            source: "qt_logo_green_64x64px.png"
+            fillMode: Image.PreserveAspectFit
+        }
+
+        Text {
+            id: pageTitle
+            width: 123
+            height: 40
+            text: qsTr("Qt Account")
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.top
+            anchors.topMargin: 70
+            font.pixelSize: 24
+        }
+
+        PushButton {
+            id: backButton
+            width: 40
+            text: "<"
+            font.pixelSize: 24
+            anchors.right: parent.right
+            anchors.rightMargin: 10
+            anchors.top: parent.top
+            anchors.topMargin: 20
+        }
+
+        Column {
+            id: fieldColumn
+            width: 300
+            height: 130
+            spacing: 5
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.top
+            anchors.topMargin: 200
+
+            TextField {
+                id: usernameField
+                width: 300
+                placeholderText: qsTr("Username")
+                font.pointSize: 10
+            }
+
+            TextField {
+                id: passwordField
+                width: 300
+                placeholderText: qsTr("Password")
+                font.pointSize: 10
+            }
+
+            TextField {
+                id: verifyPasswordField
+                width: 300
+                visible: true
+                font.pointSize: 10
+                placeholderText: qsTr("Verify password")
+            }
+        }
+
+        Column {
+            id: buttonColumn
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 50
+            spacing: 5
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            PushButton {
+                id: loginButton
+                width: 120
+                text: qsTr("Log In")
+            }
+
+            PushButton {
+                id: registerButton
+                width: 120
+                text: qsTr("Create Account")
+            }
+        }
+    }
+
+    Connections {
+        target: registerButton
+        onClicked: {
+            root.state = "registerState"
+        }
+    }
+
+    Connections {
+        target: backButton
+        onClicked: {
+            root.state = "loginState"
+        }
+    }
+    states: [
+        State {
+            name: "loginState"
+
+            PropertyChanges {
+                target: verifyPasswordField
+                visible: false
+            }
+
+            PropertyChanges {
+                target: backButton
+                visible: false
+            }
+        },
+        State {
+            name: "registerState"
+            PropertyChanges {
+                target: verifyPasswordField
+                visible: true
+            }
+
+            PropertyChanges {
+                target: loginButton
+                visible: false
+            }
+        }
+    ]
+}

doc/qtdesignstudio/examples/loginui3/imports/loginui3/Constants.qml

@@ -0,0 +1,76 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+pragma Singleton
+import QtQuick 2.10
+
+QtObject {
+    readonly property int width: 640
+    readonly property int height: 480
+    readonly property FontLoader mySystemFont: FontLoader { name: "Arial" }
+    /* Edit this comment to add your custom font */
+    /* readonly property FontLoader myCustomFont: FontLoader { source: "MyCustomFont.ttf" } */
+    readonly property font font: Qt.font({
+                                             family: mySystemFont.name,
+                                             pointSize: Qt.application.font.pixelSize
+                                         })
+    readonly property font largeFont: Qt.font({
+                                                  family: mySystemFont.name,
+                                                  pointSize: Qt.application.font.pixelSize * 1.6
+                                              })
+    readonly property color backgroundColor: "#c2c2c2"
+}
+
+
+
+/*##^## Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+ ##^##*/

doc/qtdesignstudio/examples/loginui3/imports/loginui3/qmldir

@@ -0,0 +1 @@
+singleton Constants 1.0 Constants.qml

doc/qtdesignstudio/examples/loginui3/loginui3.qml

@@ -0,0 +1,67 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.10
+import loginui3 1.0
+
+Item {
+    width: Constants.width
+    height: Constants.height
+
+    Screen01 {
+    }
+}
+
+
+
+/*##^## Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+ ##^##*/

doc/qtdesignstudio/examples/loginui3/loginui3.qmlproject

@@ -0,0 +1,41 @@
+/* File generated by Qt Creator */
+
+import QmlProject 1.1
+
+Project {
+    mainFile: "loginui3.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+
+    JavaScriptFiles {
+        directory: "."
+    }
+
+    ImageFiles {
+        directory: "."
+    }
+
+    Files {
+        filter: "*.conf"
+        files: ["qtquickcontrols2.conf"]
+    }
+
+    Files {
+        filter: "qmldir"
+        directory: "."
+    }
+
+    Environment {
+        QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf"
+        QT_AUTO_SCREEN_SCALE_FACTOR: "1"
+    }
+
+    /* List of plugin directories passed to QML runtime */
+    importPaths: [ "imports" ]
+
+    /* Required for deployment */
+    targetDirectory: "/opt/loginui3"
+}

doc/qtdesignstudio/examples/loginui3/loginui3.qmlproject.qtds

@@ -0,0 +1,118 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE QtCreatorProject>
+<!-- Written by QtDesignStudio 1.2.0, 2019-05-29T13:03:13. -->
+<qtcreator>
+ <data>
+  <variable>EnvironmentId</variable>
+  <value type="QByteArray">{595d361f-de69-4ff2-b1f6-d89b95edfd27}</value>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.ActiveTarget</variable>
+  <value type="int">0</value>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.EditorSettings</variable>
+  <valuemap type="QVariantMap">
+   <value type="bool" key="EditorConfiguration.AutoIndent">true</value>
+   <value type="bool" key="EditorConfiguration.AutoSpacesForTabs">false</value>
+   <value type="bool" key="EditorConfiguration.CamelCaseNavigation">true</value>
+   <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.0">
+    <value type="QString" key="language">Cpp</value>
+    <valuemap type="QVariantMap" key="value">
+     <value type="QByteArray" key="CurrentPreferences">CppGlobal</value>
+    </valuemap>
+   </valuemap>
+   <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.1">
+    <value type="QString" key="language">QmlJS</value>
+    <valuemap type="QVariantMap" key="value">
+     <value type="QByteArray" key="CurrentPreferences">QmlJSGlobal</value>
+    </valuemap>
+   </valuemap>
+   <value type="int" key="EditorConfiguration.CodeStyle.Count">2</value>
+   <value type="QByteArray" key="EditorConfiguration.Codec">UTF-8</value>
+   <value type="bool" key="EditorConfiguration.ConstrainTooltips">false</value>
+   <value type="int" key="EditorConfiguration.IndentSize">4</value>
+   <value type="bool" key="EditorConfiguration.KeyboardTooltips">false</value>
+   <value type="int" key="EditorConfiguration.MarginColumn">80</value>
+   <value type="bool" key="EditorConfiguration.MouseHiding">true</value>
+   <value type="bool" key="EditorConfiguration.MouseNavigation">true</value>
+   <value type="int" key="EditorConfiguration.PaddingMode">1</value>
+   <value type="bool" key="EditorConfiguration.ScrollWheelZooming">true</value>
+   <value type="bool" key="EditorConfiguration.ShowMargin">false</value>
+   <value type="int" key="EditorConfiguration.SmartBackspaceBehavior">0</value>
+   <value type="bool" key="EditorConfiguration.SmartSelectionChanging">true</value>
+   <value type="bool" key="EditorConfiguration.SpacesForTabs">true</value>
+   <value type="int" key="EditorConfiguration.TabKeyBehavior">0</value>
+   <value type="int" key="EditorConfiguration.TabSize">8</value>
+   <value type="bool" key="EditorConfiguration.UseGlobal">true</value>
+   <value type="int" key="EditorConfiguration.Utf8BomBehavior">1</value>
+   <value type="bool" key="EditorConfiguration.addFinalNewLine">true</value>
+   <value type="bool" key="EditorConfiguration.cleanIndentation">true</value>
+   <value type="bool" key="EditorConfiguration.cleanWhitespace">true</value>
+   <value type="bool" key="EditorConfiguration.inEntireDocument">false</value>
+  </valuemap>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.PluginSettings</variable>
+  <valuemap type="QVariantMap"/>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.Target.0</variable>
+  <valuemap type="QVariantMap">
+   <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Desktop</value>
+   <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">Desktop</value>
+   <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">{8994bd34-5ed9-4c45-8c0a-94c8f33eca4a}</value>
+   <value type="int" key="ProjectExplorer.Target.ActiveBuildConfiguration">-1</value>
+   <value type="int" key="ProjectExplorer.Target.ActiveDeployConfiguration">0</value>
+   <value type="int" key="ProjectExplorer.Target.ActiveRunConfiguration">0</value>
+   <value type="int" key="ProjectExplorer.Target.BuildConfigurationCount">0</value>
+   <valuemap type="QVariantMap" key="ProjectExplorer.Target.DeployConfiguration.0">
+    <valuemap type="QVariantMap" key="ProjectExplorer.BuildConfiguration.BuildStepList.0">
+     <value type="int" key="ProjectExplorer.BuildStepList.StepsCount">0</value>
+     <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy</value>
+     <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value>
+     <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.BuildSteps.Deploy</value>
+    </valuemap>
+    <value type="int" key="ProjectExplorer.BuildConfiguration.BuildStepListCount">1</value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy Configuration</value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.DefaultDeployConfiguration</value>
+   </valuemap>
+   <value type="int" key="ProjectExplorer.Target.DeployConfigurationCount">1</value>
+   <valuemap type="QVariantMap" key="ProjectExplorer.Target.PluginSettings"/>
+   <valuemap type="QVariantMap" key="ProjectExplorer.Target.RunConfiguration.0">
+    <value type="bool" key="Analyzer.QmlProfiler.AggregateTraces">false</value>
+    <value type="bool" key="Analyzer.QmlProfiler.FlushEnabled">false</value>
+    <value type="uint" key="Analyzer.QmlProfiler.FlushInterval">1000</value>
+    <value type="QString" key="Analyzer.QmlProfiler.LastTraceFile"></value>
+    <value type="bool" key="Analyzer.QmlProfiler.Settings.UseGlobalSettings">true</value>
+    <value type="int" key="PE.EnvironmentAspect.Base">0</value>
+    <valuelist type="QVariantList" key="PE.EnvironmentAspect.Changes"/>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName"></value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">QML Scene</value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">QmlProjectManager.QmlRunConfiguration.QmlScene</value>
+    <value type="QString" key="QmlProjectManager.QmlRunConfiguration.MainScript">CurrentFile</value>
+    <value type="QString" key="QmlProjectManager.QmlRunConfiguration.QDeclarativeViewerArguments"></value>
+    <value type="uint" key="RunConfiguration.QmlDebugServerPort">3768</value>
+    <value type="bool" key="RunConfiguration.UseCppDebugger">false</value>
+    <value type="bool" key="RunConfiguration.UseCppDebuggerAuto">true</value>
+    <value type="bool" key="RunConfiguration.UseMultiProcess">false</value>
+    <value type="bool" key="RunConfiguration.UseQmlDebugger">false</value>
+    <value type="bool" key="RunConfiguration.UseQmlDebuggerAuto">true</value>
+   </valuemap>
+   <value type="int" key="ProjectExplorer.Target.RunConfigurationCount">1</value>
+  </valuemap>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.TargetCount</variable>
+  <value type="int">1</value>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.Updater.FileVersion</variable>
+  <value type="int">21</value>
+ </data>
+ <data>
+  <variable>Version</variable>
+  <value type="int">21</value>
+ </data>
+</qtcreator>

doc/qtdesignstudio/examples/loginui3/qtquickcontrols2.conf

@@ -0,0 +1,6 @@
+; This file can be edited to change the style of the application
+; Read "Qt Quick Controls 2 Configuration File" for details:
+; http://doc.qt.io/qt-5/qtquickcontrols2-configuration.html
+
+[Controls]
+Style=Default

doc/qtdesignstudio/examples/loginui4/PushButton.ui.qml

@@ -0,0 +1,123 @@
+
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.10
+import QtQuick.Templates 2.1 as T
+import loginui4 1.0
+
+T.Button {
+    id: control
+
+    text: qsTr("MyButton")
+
+    font: Constants.font
+    implicitWidth: Math.max(
+                       background ? background.implicitWidth : 0,
+                       contentItem.implicitWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(
+                        background ? background.implicitHeight : 0,
+                        contentItem.implicitHeight + topPadding + bottomPadding)
+    leftPadding: 4
+    rightPadding: 4
+
+    background: Rectangle {
+        id: buttonBackground
+        color: "#41cd52"
+        radius: 6
+        implicitWidth: 100
+        implicitHeight: 40
+        opacity: enabled ? 1 : 0.3
+        border.width: 1
+        border.color: "#21be2b"
+    }
+
+    contentItem: Text {
+        id: textItem
+        text: control.text
+
+        font: control.font
+        opacity: enabled ? 1.0 : 0.3
+        color: "white"
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        elide: Text.ElideRight
+    }
+
+    states: [
+        State {
+            name: "normal"
+            when: !control.down
+            PropertyChanges {
+                target: buttonBackground
+            }
+        },
+        State {
+            name: "down"
+            when: control.down
+            PropertyChanges {
+                target: textItem
+                color: "white"
+            }
+            PropertyChanges {
+                target: buttonBackground
+                color: Qt.darker("#41cd52", 1.2)
+                border.color: Qt.darker("#21be2b", 1.2)
+            }
+        }
+    ]
+}
+
+
+
+
+/*##^## Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+ ##^##*/

doc/qtdesignstudio/examples/loginui4/Screen01.ui.qml

@@ -0,0 +1,287 @@
+
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.10
+import loginui4 1.0
+import QtQuick.Controls 2.3
+import QtQuick.Timeline 1.0
+
+Rectangle {
+    id: root
+    width: Constants.width
+    height: Constants.height
+
+    Rectangle {
+        id: loginPage
+        color: "#ffffff"
+        anchors.fill: parent
+
+        Image {
+            id: logo
+            width: 100
+            height: 100
+            anchors.topMargin: 10
+            anchors.left: parent.left
+            anchors.leftMargin: 10
+            anchors.top: parent.top
+            source: "qt_logo_green_64x64px.png"
+            fillMode: Image.PreserveAspectFit
+        }
+
+        Text {
+            id: pageTitle
+            width: 123
+            height: 40
+            text: qsTr("Qt Account")
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.top
+            anchors.topMargin: 70
+            font.pixelSize: 24
+        }
+
+        PushButton {
+            id: backButton
+            x: 507
+            width: 40
+            text: "<"
+            opacity: 1
+            anchors.right: parent.right
+            anchors.rightMargin: 10
+            anchors.top: parent.top
+            anchors.topMargin: 20
+            font.pixelSize: 24
+        }
+
+        Column {
+            id: buttonColumn
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 50
+            spacing: 5
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            PushButton {
+                id: loginButton
+                width: 120
+                text: qsTr("Log In")
+            }
+
+            PushButton {
+                id: registerButton
+                width: 120
+                text: qsTr("Create Account")
+            }
+        }
+
+        TextField {
+            id: usernameField
+            width: 300
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.top: parent.top
+            anchors.topMargin: 200
+            placeholderText: qsTr("Username")
+            font.pointSize: 10
+        }
+
+        TextField {
+            id: passwordField
+            width: 300
+            anchors.horizontalCenter: usernameField.horizontalCenter
+            anchors.top: usernameField.bottom
+            anchors.topMargin: 5
+            placeholderText: qsTr("Password")
+            font.pointSize: 10
+        }
+
+        TextField {
+            id: verifyPasswordField
+            width: 300
+            anchors.horizontalCenter: passwordField.horizontalCenter
+            anchors.top: passwordField.bottom
+            anchors.topMargin: 5
+            visible: true
+            font.pointSize: 10
+            placeholderText: qsTr("Verify password")
+        }
+    }
+
+    Timeline {
+        id: timeline
+        animations: [
+            TimelineAnimation {
+                id: toRegisterState
+                running: false
+                loops: 1
+                duration: 1000
+                to: 1000
+                from: 0
+            },
+            TimelineAnimation {
+                id: toLoginState
+                loops: 1
+                from: 1000
+                running: false
+                to: 0
+                duration: 1000
+            }
+        ]
+        enabled: true
+        startFrame: 0
+        endFrame: 1000
+
+        KeyframeGroup {
+            target: verifyPasswordField
+            property: "opacity"
+            Keyframe {
+                frame: 0
+                value: 0
+            }
+
+            Keyframe {
+                value: 1
+                frame: 1001
+            }
+        }
+
+        KeyframeGroup {
+            target: loginButton
+            property: "opacity"
+            Keyframe {
+                frame: 0
+                value: 1
+            }
+
+            Keyframe {
+                frame: 1000
+                value: "0"
+            }
+        }
+
+        KeyframeGroup {
+            target: verifyPasswordField
+            property: "anchors.topMargin"
+
+            Keyframe {
+                easing.bezierCurve: [0.39, 0.575, 0.565, 1, 1, 1]
+                value: 5
+                frame: 1001
+            }
+
+            Keyframe {
+                value: "-40"
+                frame: 0
+            }
+        }
+
+        KeyframeGroup {
+            target: backButton
+            property: "opacity"
+            Keyframe {
+                frame: 0
+                value: 0
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 1
+            }
+        }
+    }
+
+    Connections {
+        target: registerButton
+        onClicked: {
+            root.state = "registerState"
+        }
+    }
+
+    Connections {
+        target: backButton
+        onClicked: {
+            root.state = "loginState"
+        }
+    }
+    states: [
+        State {
+            name: "registerState"
+
+            PropertyChanges {
+                target: timeline
+                enabled: true
+            }
+
+            PropertyChanges {
+                target: toRegisterState
+                running: true
+            }
+        },
+        State {
+            name: "loginState"
+
+            PropertyChanges {
+                target: timeline
+                enabled: true
+            }
+
+            PropertyChanges {
+                target: toLoginState
+                running: true
+            }
+        }
+    ]
+}
+
+
+
+
+/*##^## Designer {
+    D{i:4;anchors_y:28;timeline_expanded:true}D{i:6;timeline_expanded:true}D{i:7;timeline_expanded:true}
+D{i:8;anchors_y:200;timeline_expanded:true}D{i:9;anchors_x:170;anchors_y:245}D{i:10;anchors_y:245;timeline_expanded:true}
+}
+ ##^##*/

doc/qtdesignstudio/examples/loginui4/imports/loginui4/Constants.qml

@@ -0,0 +1,76 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+pragma Singleton
+import QtQuick 2.10
+
+QtObject {
+    readonly property int width: 640
+    readonly property int height: 480
+    readonly property FontLoader mySystemFont: FontLoader { name: "Arial" }
+    /* Edit this comment to add your custom font */
+    /* readonly property FontLoader myCustomFont: FontLoader { source: "MyCustomFont.ttf" } */
+    readonly property font font: Qt.font({
+                                             family: mySystemFont.name,
+                                             pointSize: Qt.application.font.pixelSize
+                                         })
+    readonly property font largeFont: Qt.font({
+                                                  family: mySystemFont.name,
+                                                  pointSize: Qt.application.font.pixelSize * 1.6
+                                              })
+    readonly property color backgroundColor: "#c2c2c2"
+}
+
+
+
+/*##^## Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+ ##^##*/

doc/qtdesignstudio/examples/loginui4/imports/loginui4/qmldir

@@ -0,0 +1 @@
+singleton Constants 1.0 Constants.qml

doc/qtdesignstudio/examples/loginui4/loginui4.qml

@@ -0,0 +1,67 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the examples of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** 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.
+**
+** BSD License Usage
+** Alternatively, you may use this file under the terms of the BSD license
+** as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of The Qt Company Ltd nor the names of its
+**     contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.10
+import loginui4 1.0
+
+Item {
+    width: Constants.width
+    height: Constants.height
+
+    Screen01 {
+    }
+}
+
+
+
+/*##^## Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+ ##^##*/

doc/qtdesignstudio/examples/loginui4/loginui4.qmlproject

@@ -0,0 +1,41 @@
+/* File generated by Qt Creator */
+
+import QmlProject 1.1
+
+Project {
+    mainFile: "loginui4.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+
+    JavaScriptFiles {
+        directory: "."
+    }
+
+    ImageFiles {
+        directory: "."
+    }
+
+    Files {
+        filter: "*.conf"
+        files: ["qtquickcontrols2.conf"]
+    }
+
+    Files {
+        filter: "qmldir"
+        directory: "."
+    }
+
+    Environment {
+        QT_QUICK_CONTROLS_CONF: "qtquickcontrols2.conf"
+        QT_AUTO_SCREEN_SCALE_FACTOR: "1"
+    }
+
+    /* List of plugin directories passed to QML runtime */
+    importPaths: [ "imports" ]
+
+    /* Required for deployment */
+    targetDirectory: "/opt/loginui3"
+}

doc/qtdesignstudio/examples/loginui4/loginui4.qmlproject.qtds

@@ -0,0 +1,118 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE QtCreatorProject>
+<!-- Written by QtDesignStudio 1.3.0, 2019-09-04T14:46:00. -->
+<qtcreator>
+ <data>
+  <variable>EnvironmentId</variable>
+  <value type="QByteArray">{595d361f-de69-4ff2-b1f6-d89b95edfd27}</value>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.ActiveTarget</variable>
+  <value type="int">0</value>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.EditorSettings</variable>
+  <valuemap type="QVariantMap">
+   <value type="bool" key="EditorConfiguration.AutoIndent">true</value>
+   <value type="bool" key="EditorConfiguration.AutoSpacesForTabs">false</value>
+   <value type="bool" key="EditorConfiguration.CamelCaseNavigation">true</value>
+   <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.0">
+    <value type="QString" key="language">Cpp</value>
+    <valuemap type="QVariantMap" key="value">
+     <value type="QByteArray" key="CurrentPreferences">CppGlobal</value>
+    </valuemap>
+   </valuemap>
+   <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.1">
+    <value type="QString" key="language">QmlJS</value>
+    <valuemap type="QVariantMap" key="value">
+     <value type="QByteArray" key="CurrentPreferences">QmlJSGlobal</value>
+    </valuemap>
+   </valuemap>
+   <value type="int" key="EditorConfiguration.CodeStyle.Count">2</value>
+   <value type="QByteArray" key="EditorConfiguration.Codec">UTF-8</value>
+   <value type="bool" key="EditorConfiguration.ConstrainTooltips">false</value>
+   <value type="int" key="EditorConfiguration.IndentSize">4</value>
+   <value type="bool" key="EditorConfiguration.KeyboardTooltips">false</value>
+   <value type="int" key="EditorConfiguration.MarginColumn">80</value>
+   <value type="bool" key="EditorConfiguration.MouseHiding">true</value>
+   <value type="bool" key="EditorConfiguration.MouseNavigation">true</value>
+   <value type="int" key="EditorConfiguration.PaddingMode">1</value>
+   <value type="bool" key="EditorConfiguration.ScrollWheelZooming">true</value>
+   <value type="bool" key="EditorConfiguration.ShowMargin">false</value>
+   <value type="int" key="EditorConfiguration.SmartBackspaceBehavior">0</value>
+   <value type="bool" key="EditorConfiguration.SmartSelectionChanging">true</value>
+   <value type="bool" key="EditorConfiguration.SpacesForTabs">true</value>
+   <value type="int" key="EditorConfiguration.TabKeyBehavior">0</value>
+   <value type="int" key="EditorConfiguration.TabSize">8</value>
+   <value type="bool" key="EditorConfiguration.UseGlobal">true</value>
+   <value type="int" key="EditorConfiguration.Utf8BomBehavior">1</value>
+   <value type="bool" key="EditorConfiguration.addFinalNewLine">true</value>
+   <value type="bool" key="EditorConfiguration.cleanIndentation">true</value>
+   <value type="bool" key="EditorConfiguration.cleanWhitespace">true</value>
+   <value type="bool" key="EditorConfiguration.inEntireDocument">false</value>
+  </valuemap>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.PluginSettings</variable>
+  <valuemap type="QVariantMap"/>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.Target.0</variable>
+  <valuemap type="QVariantMap">
+   <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Desktop</value>
+   <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">Desktop</value>
+   <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">{8994bd34-5ed9-4c45-8c0a-94c8f33eca4a}</value>
+   <value type="int" key="ProjectExplorer.Target.ActiveBuildConfiguration">-1</value>
+   <value type="int" key="ProjectExplorer.Target.ActiveDeployConfiguration">0</value>
+   <value type="int" key="ProjectExplorer.Target.ActiveRunConfiguration">0</value>
+   <value type="int" key="ProjectExplorer.Target.BuildConfigurationCount">0</value>
+   <valuemap type="QVariantMap" key="ProjectExplorer.Target.DeployConfiguration.0">
+    <valuemap type="QVariantMap" key="ProjectExplorer.BuildConfiguration.BuildStepList.0">
+     <value type="int" key="ProjectExplorer.BuildStepList.StepsCount">0</value>
+     <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy</value>
+     <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value>
+     <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.BuildSteps.Deploy</value>
+    </valuemap>
+    <value type="int" key="ProjectExplorer.BuildConfiguration.BuildStepListCount">1</value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy Configuration</value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.DefaultDeployConfiguration</value>
+   </valuemap>
+   <value type="int" key="ProjectExplorer.Target.DeployConfigurationCount">1</value>
+   <valuemap type="QVariantMap" key="ProjectExplorer.Target.PluginSettings"/>
+   <valuemap type="QVariantMap" key="ProjectExplorer.Target.RunConfiguration.0">
+    <value type="bool" key="Analyzer.QmlProfiler.AggregateTraces">false</value>
+    <value type="bool" key="Analyzer.QmlProfiler.FlushEnabled">false</value>
+    <value type="uint" key="Analyzer.QmlProfiler.FlushInterval">1000</value>
+    <value type="QString" key="Analyzer.QmlProfiler.LastTraceFile"></value>
+    <value type="bool" key="Analyzer.QmlProfiler.Settings.UseGlobalSettings">true</value>
+    <value type="int" key="PE.EnvironmentAspect.Base">0</value>
+    <valuelist type="QVariantList" key="PE.EnvironmentAspect.Changes"/>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName"></value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">QML Scene</value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">QmlProjectManager.QmlRunConfiguration.QmlScene</value>
+    <value type="QString" key="QmlProjectManager.QmlRunConfiguration.MainScript">CurrentFile</value>
+    <value type="QString" key="QmlProjectManager.QmlRunConfiguration.QDeclarativeViewerArguments"></value>
+    <value type="uint" key="RunConfiguration.QmlDebugServerPort">3768</value>
+    <value type="bool" key="RunConfiguration.UseCppDebugger">false</value>
+    <value type="bool" key="RunConfiguration.UseCppDebuggerAuto">true</value>
+    <value type="bool" key="RunConfiguration.UseMultiProcess">false</value>
+    <value type="bool" key="RunConfiguration.UseQmlDebugger">false</value>
+    <value type="bool" key="RunConfiguration.UseQmlDebuggerAuto">true</value>
+   </valuemap>
+   <value type="int" key="ProjectExplorer.Target.RunConfigurationCount">1</value>
+  </valuemap>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.TargetCount</variable>
+  <value type="int">1</value>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.Updater.FileVersion</variable>
+  <value type="int">22</value>
+ </data>
+ <data>
+  <variable>Version</variable>
+  <value type="int">22</value>
+ </data>
+</qtcreator>

doc/qtdesignstudio/examples/loginui4/loginui4.qmlproject.qtds.4.10-pre1

@@ -0,0 +1,118 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE QtCreatorProject>
+<!-- Written by QtDesignStudio 1.2.0, 2019-05-29T15:11:35. -->
+<qtcreator>
+ <data>
+  <variable>EnvironmentId</variable>
+  <value type="QByteArray">{595d361f-de69-4ff2-b1f6-d89b95edfd27}</value>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.ActiveTarget</variable>
+  <value type="int">0</value>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.EditorSettings</variable>
+  <valuemap type="QVariantMap">
+   <value type="bool" key="EditorConfiguration.AutoIndent">true</value>
+   <value type="bool" key="EditorConfiguration.AutoSpacesForTabs">false</value>
+   <value type="bool" key="EditorConfiguration.CamelCaseNavigation">true</value>
+   <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.0">
+    <value type="QString" key="language">Cpp</value>
+    <valuemap type="QVariantMap" key="value">
+     <value type="QByteArray" key="CurrentPreferences">CppGlobal</value>
+    </valuemap>
+   </valuemap>
+   <valuemap type="QVariantMap" key="EditorConfiguration.CodeStyle.1">
+    <value type="QString" key="language">QmlJS</value>
+    <valuemap type="QVariantMap" key="value">
+     <value type="QByteArray" key="CurrentPreferences">QmlJSGlobal</value>
+    </valuemap>
+   </valuemap>
+   <value type="int" key="EditorConfiguration.CodeStyle.Count">2</value>
+   <value type="QByteArray" key="EditorConfiguration.Codec">UTF-8</value>
+   <value type="bool" key="EditorConfiguration.ConstrainTooltips">false</value>
+   <value type="int" key="EditorConfiguration.IndentSize">4</value>
+   <value type="bool" key="EditorConfiguration.KeyboardTooltips">false</value>
+   <value type="int" key="EditorConfiguration.MarginColumn">80</value>
+   <value type="bool" key="EditorConfiguration.MouseHiding">true</value>
+   <value type="bool" key="EditorConfiguration.MouseNavigation">true</value>
+   <value type="int" key="EditorConfiguration.PaddingMode">1</value>
+   <value type="bool" key="EditorConfiguration.ScrollWheelZooming">true</value>
+   <value type="bool" key="EditorConfiguration.ShowMargin">false</value>
+   <value type="int" key="EditorConfiguration.SmartBackspaceBehavior">0</value>
+   <value type="bool" key="EditorConfiguration.SmartSelectionChanging">true</value>
+   <value type="bool" key="EditorConfiguration.SpacesForTabs">true</value>
+   <value type="int" key="EditorConfiguration.TabKeyBehavior">0</value>
+   <value type="int" key="EditorConfiguration.TabSize">8</value>
+   <value type="bool" key="EditorConfiguration.UseGlobal">true</value>
+   <value type="int" key="EditorConfiguration.Utf8BomBehavior">1</value>
+   <value type="bool" key="EditorConfiguration.addFinalNewLine">true</value>
+   <value type="bool" key="EditorConfiguration.cleanIndentation">true</value>
+   <value type="bool" key="EditorConfiguration.cleanWhitespace">true</value>
+   <value type="bool" key="EditorConfiguration.inEntireDocument">false</value>
+  </valuemap>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.PluginSettings</variable>
+  <valuemap type="QVariantMap"/>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.Target.0</variable>
+  <valuemap type="QVariantMap">
+   <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Desktop</value>
+   <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">Desktop</value>
+   <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">{8994bd34-5ed9-4c45-8c0a-94c8f33eca4a}</value>
+   <value type="int" key="ProjectExplorer.Target.ActiveBuildConfiguration">-1</value>
+   <value type="int" key="ProjectExplorer.Target.ActiveDeployConfiguration">0</value>
+   <value type="int" key="ProjectExplorer.Target.ActiveRunConfiguration">0</value>
+   <value type="int" key="ProjectExplorer.Target.BuildConfigurationCount">0</value>
+   <valuemap type="QVariantMap" key="ProjectExplorer.Target.DeployConfiguration.0">
+    <valuemap type="QVariantMap" key="ProjectExplorer.BuildConfiguration.BuildStepList.0">
+     <value type="int" key="ProjectExplorer.BuildStepList.StepsCount">0</value>
+     <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy</value>
+     <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value>
+     <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.BuildSteps.Deploy</value>
+    </valuemap>
+    <value type="int" key="ProjectExplorer.BuildConfiguration.BuildStepListCount">1</value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName">Deploy Configuration</value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName"></value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">ProjectExplorer.DefaultDeployConfiguration</value>
+   </valuemap>
+   <value type="int" key="ProjectExplorer.Target.DeployConfigurationCount">1</value>
+   <valuemap type="QVariantMap" key="ProjectExplorer.Target.PluginSettings"/>
+   <valuemap type="QVariantMap" key="ProjectExplorer.Target.RunConfiguration.0">
+    <value type="bool" key="Analyzer.QmlProfiler.AggregateTraces">false</value>
+    <value type="bool" key="Analyzer.QmlProfiler.FlushEnabled">false</value>
+    <value type="uint" key="Analyzer.QmlProfiler.FlushInterval">1000</value>
+    <value type="QString" key="Analyzer.QmlProfiler.LastTraceFile"></value>
+    <value type="bool" key="Analyzer.QmlProfiler.Settings.UseGlobalSettings">true</value>
+    <value type="int" key="PE.EnvironmentAspect.Base">0</value>
+    <valuelist type="QVariantList" key="PE.EnvironmentAspect.Changes"/>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DefaultDisplayName"></value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.DisplayName">QML Scene</value>
+    <value type="QString" key="ProjectExplorer.ProjectConfiguration.Id">QmlProjectManager.QmlRunConfiguration.QmlScene</value>
+    <value type="QString" key="QmlProjectManager.QmlRunConfiguration.MainScript">CurrentFile</value>
+    <value type="QString" key="QmlProjectManager.QmlRunConfiguration.QDeclarativeViewerArguments"></value>
+    <value type="uint" key="RunConfiguration.QmlDebugServerPort">3768</value>
+    <value type="bool" key="RunConfiguration.UseCppDebugger">false</value>
+    <value type="bool" key="RunConfiguration.UseCppDebuggerAuto">true</value>
+    <value type="bool" key="RunConfiguration.UseMultiProcess">false</value>
+    <value type="bool" key="RunConfiguration.UseQmlDebugger">false</value>
+    <value type="bool" key="RunConfiguration.UseQmlDebuggerAuto">true</value>
+   </valuemap>
+   <value type="int" key="ProjectExplorer.Target.RunConfigurationCount">1</value>
+  </valuemap>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.TargetCount</variable>
+  <value type="int">1</value>
+ </data>
+ <data>
+  <variable>ProjectExplorer.Project.Updater.FileVersion</variable>
+  <value type="int">21</value>
+ </data>
+ <data>
+  <variable>Version</variable>
+  <value type="int">21</value>
+ </data>
+</qtcreator>

doc/qtdesignstudio/examples/loginui4/qtquickcontrols2.conf

@@ -0,0 +1,6 @@
+; This file can be edited to change the style of the application
+; Read "Qt Quick Controls 2 Configuration File" for details:
+; http://doc.qt.io/qt-5/qtquickcontrols2-configuration.html
+
+[Controls]
+Style=Default