summaryrefslogtreecommitdiff
path: root/src/controls/doc/src/qtquickcontrols-overview.qdoc
blob: 09f5318d0f95cd2201764b38be285a08801cfbe1 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/****************************************************************************
**
** Copyright (C) 2012 Digia Plc and/or its subsidiary(-ies).
** Contact: http://www.qt-project.org/legal
**
** 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 Digia.  For licensing terms and
** conditions see http://qt.digia.com/licensing.  For further information
** use the contact form at http://qt.digia.com/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$
**
****************************************************************************/

/*!
    \page qtquickcontrols-overview.html
    \title Qt Quick Controls Overview
    \brief A set of UI controls to create user interfaces in Qt Quick

    The Qt Quick Controls provide a set of UI controls to create user interfaces
    in Qt Quick.

    \section1 Getting Started

    The QML types can be imported into your application using the following import statement in your \c {.qml} file.

    \code
     import QtQuick.Controls 1.2
    \endcode

    \section1 Creating a basic example

    A basic example of a QML file that makes use of controls is shown here:

    \code
    import QtQuick.Controls 1.2

    ApplicationWindow {
        title: "My Application"

        Button {
            text: "Push Me"
            anchors.centerIn: parent
        }
    }
    \endcode

    For an overview of the controls provided by \l{Qt Quick Controls}, you can look at
    the \l{Qt Quick Controls - Gallery}{Gallery} example.

    \image qtquickcontrols-example-gallery.png

    \section1 Setting Up Controls from C++

    Although we have traditionally used a QQuickView window to display QML files
    in a C++ application, doing this means you can only set window properties from C++.

    With Qt Quick Controls, declare an ApplicationWindow as the root item of your application and launch it by using the
    QQmlApplicationEngine instead. This ensures that you can control top level window properties from QML.

    A basic example of a source file that makes use of controls is shown here:

    \code
    #include <QApplication>
    #include <QQmlApplicationEngine>

    int main(int argc, char *argv[])
    {
        QApplication app(argc, argv);
        QQmlApplicationEngine engine("main.qml");
        return app.exec();
    }
    \endcode

    \note We are using QApplication and not QGuiApplication in this example.
    Though you can use QGuiApplication instead, doing this will eliminate platform-dependent styling.
    This is because it is relying on the widget module to provide the native look and feel.

    \section2 Using C++ Data From QML

    If you need to register a C++ class to use from QML, you can call, for example,
    qmlRegisterType() before declaring your QQmlApplicationEngine. You can find the list
    of all registering functions \l{QQmlEngine}{here}.

    If you need to expose data to QML components, you need to set them
    to the context of the current QML engine. See QQmlContext for more
    information.

    \section2 Deploying Qt Quick Controls

    Since Qt 5.2, the Qt Quick Controls JavaScript and QML files are embedded into the plugin
    using \l{The Qt Resource System}{Qt resources} (.qrc) for the QtQuick.Controls and QtQuick.Controls.Styles imports. It is only
    necessary to deploy the qtquickcontrolsplugin C++ library and its qmldir file found in the plugin directory
    \e{qml/QtQuick/Controls}.

    The .js/.qml files are still placed into the plugin directory though for keeping the development
    tasks convenient, debugging and autocompletion capabilities remain unchanged. For deployment,
    these files can be ignored. In practice, the \e{Styles} and \e{Private} subfolders can be deleted as
    well as all .js and .qml files present under \e{qml/QtQuick/Controls}.

    \note On Windows, the \l{Qt for Windows - Deployment#The Windows Deployment Tool}{Windows Deployment Tool}
    only deploys the Qt Quick Controls plugin and its qmldir file.

    Using resources facilitates the deployment of the Qt Quick Controls though it has limitations
    that still need to be addressed.

    \note On iOS, the qmlimportscanner tool is used to parse the required qml imports so they can
    be deployed accordingly. The files embedded in resources are not scanned by this tool though
    and when linking statically, some required imports used by the Qt Quick Controls can be
    forgotten. This is a known limitation and a workaround is to add potentially missing imports in
    one of the qml files of the application using the controls.

    \section1 Related information

     \list
      \li \l{Qt Quick}
      \li \l{Qt Quick Controls}
      \li \l{Qt Quick Controls Examples}
    \endlist
*/