1 files changed, 93 insertions, 0 deletions
diff --git a/examples/quickcontrols2/flatstyle/doc/src/qtquickcontrols2-flatstyle.qdoc b/examples/quickcontrols2/flatstyle/doc/src/qtquickcontrols2-flatstyle.qdoc
new file mode 100644
index 00000000..44fc704a
--- /dev/null
+++ b/examples/quickcontrols2/flatstyle/doc/src/qtquickcontrols2-flatstyle.qdoc
@@ -0,0 +1,93 @@
+/****************************************************************************
+**
+** Copyright (C) 2017 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the documentation of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:FDL$
+** 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 http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://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: http://www.gnu.org/copyleft/fdl.html.
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+/*!
+    \example flatstyle
+    \title Qt Quick Controls 2 - Flat Style
+    \ingroup qtquickcontrols2-examples
+    \brief A QML app using Qt Quick Controls 2 and a QML plugin
+    with customized controls.
+
+    \e Flat Style shows how to integrate customized controls into Qt Quick Designer.
+    The example uses a pure QML plugin to define constants in a singleton. For the
+    declarative parts of the UI, \c .ui.qml files are used. These can be edited
+    visually in Qt Quick Designer.
+
+    \borderedimage qtquickcontrols2-flatstyle.png
+
+    \section1 QML Plugin
+
+    The example contains a plugin called Theme. The plugin consists of a QML file
+    \c Theme.qml and a \c qmldir file. The plugin is located in the imports subdirectory
+    and added as a resource.
+    To ensure the plugin is found by QML, we add the import directory to the import
+    paths of the engine in \c main.cpp.
+
+    \code
+    ...
+    engine.addImportPath(":/imports");
+    ...
+    \endcode
+
+    To ensure the code model and Qt Quick Designer can find the plugin, we add the following
+    line to \e flatstyle.pro.
+
+    \code
+    QML_IMPORT_PATH = $$PWD/imports
+    \endcode
+
+    All colors, font parameters, and size constants that are used in this example
+    are defined as properties in the singleton called \e Theme.qml.
+    Usually such attribute values are defined as constants as they are not suppose to change at run time.
+    In this example, we allow the user to change some attributes like the main color, the size parameter,
+    and some font parameters while the application is running.
+
+    Defining these attribute values in a singleton makes it easy to maintain and change them.
+    This pattern makes it easy to implement theming.
+
+    \section1 Implementing Custom Controls
+
+    The plugin also contains a style for a couple of controls that implement a custom look and feel.
+    This style is located in \c Flat and is set as the style for the application in \c qtquickcontrols2.conf.
+
+    The example uses the states of a Qt Quick Item to implement the different states of a control.
+    This has the advantage that we can define the custom look in Qt Quick Designer and we can easily
+    verify the different states of a control.
+    To edit the indicator of a switch in Qt Quick Designer we can open Switch.qml and then enter the implementation
+    of the indicator called \c switchHandle using the combo box on the top next to the combo box for the open documents.
+
+    \borderedimage qtquickcontrols2-flatstyle-creator.png
+
+    The application itself is just a simple form that allows the user to adjust a couple of parameters of the custom controls.
+    The user can choose another main color, set the font to bold or underline, and increase the size of the controls by
+    toggling a switch.
+
+    \e MainForm.ui.qml is just the pure declarative definition of the form, while \e flatstyle.qml instantiates the form
+    and implements the logic.
+
+    \include examples-run.qdocinc
+*/