aboutsummaryrefslogtreecommitdiffstats
path: root/examples/quickcontrols/contactlist/doc/src/qtquickcontrols-contactlist.qdoc
blob: bb9e935d6dbde6d2d9392bcaa76685e510a3022f (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
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
    \example contactlist
    \keyword Qt Quick Controls - Contact List
    \title Qt Quick Controls - Contact List
    \keyword Qt Quick Controls 2 - Contact List
    \ingroup qtquickcontrols-examples
    \examplecategory {User Interface Components}
    \examplecategory {Mobile}
    \brief A QML app using Qt Quick Controls and a C++ class that implements
    a simple contact list.

    The \e {Contact List Example} shows how to integrate a C++ backend in a way that
    is compatible with Qt Quick Designer.
    For the declarative parts of the UI, .ui.qml files are used that can be edited
    visually in the Qt Quick Designer.

    \image qtquickcontrols-contactlist.png

    \section1 C++ Backend

    The contact list application allows the user to add, edit, and remove contacts.
    The actual implementation is done in C++ and exposed as a QAbstractListModel.

    The ContactModel C++ class is registered under a namespace and later
    imported and instantiated by \e MainForm.ui.qml. For more information about registering C++
    classes as QML types, see \l {Defining QML Types from C++}.

    \code
    #include <QtQml/qqml.h>
    ...
    qmlRegisterType<ContactModel>("Backend", 1, 0, "ContactModel");
    ...
    \endcode

    \section1 Designer Support

    In the designer subdirectory, we create a plugin that replaces the ContactModel
    in Qt Quick Designer. For this to work we add the following line to \e contactlist.pro.

    \code
    QML_DESIGNER_IMPORT_PATH = $$PWD/designer
    \endcode

    Because Qt Quick Designer cannot instantiate the ContactModel C++ class, we define
    a mockup using a ListModel. This ensures that the ListView using the model shows something
    in Qt Quick Designer.

    \include examples-run.qdocinc
*/