aboutsummaryrefslogtreecommitdiffstats
path: root/examples/quickcontrols2/texteditor/doc/src/qtquickcontrols2-texteditor.qdoc
blob: 28cf3f3b3f94e18df71d1a0b5ebd4789af30fe12 (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
/****************************************************************************
**
** Copyright (C) 2017 The Qt Company Ltd.
** Contact: https://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 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.
** $QT_END_LICENSE$
**
****************************************************************************/
/*!
    \example texteditor
    \keyword Qt Quick Controls - Text Editor
    \title Qt Quick Controls - Text Editor
    \keyword Qt Quick Controls 2 - Text Editor
    \ingroup qtquickcontrols2-examples
    \brief A QML app using Qt Quick Controls and a C++ class to
    provide a fully-functional rich-text editor application.

    The \e {Text Editor Example} presents a sample HTML file using the TextArea
    control, preserving the HTML formatting. The application comes with two user
    interfaces; one for traditional desktop platforms with a mouse pointer, and
    another simpler, touch-oriented version.

    \section1 Desktop User Interface

    \image qtquickcontrols2-texteditor-desktop.jpg

    The desktop version is a complete text editor with capabilities for formatting
    text, and opening and saving HTML and plain text files. It demonstrates the
    native-looking dialogs and menus using the \l{Qt Labs Platform} module. These
    types are mostly suitable for desktop platforms with support for multiple
    top-level windows, a mouse pointer, and moderate screen size.

    The desktop UI uses FileDialog for opening and saving files:

    \quotefromfile texteditor/qml/texteditor.qml
    \skipto FileDialog
    \printuntil /\bsaveAs\b/
    \printline }

    It uses FontDialog and ColorDialog for choosing fonts and colors:

    \skipto FontDialog
    \printuntil /.*colorDialog$/
    \printuntil /^\s{4}\}$/

    It also uses \l[QML QtLabsPlatform]{Menu} and
    \l[QML QtLabsPlatform]{MenuItem} that provide a context menu to format text
    within:

    \skipto /\bMenu\b/
    \printuntil /^\s{4}\}$/

    \note There is also a standard menubar with more options than the
    context menu.

    \section1 Touch User Interface

    \image qtquickcontrols2-texteditor-touch.jpg

    The touch user interface is a simplified version of the text editor. It is
    suitable for touch devices with limited screen size. The example uses
    \l{Using File Selectors with Qt Quick Controls}{file selectors} to load
    the appropriate user interface automatically.

    Unlike the desktop version, which uses top-level dialogs, the touch version
    uses the QML \l Dialog type, which is not a top-level window. This type of
    dialog is fully supported on mobile and embedded platforms that do not support
    multiple top-level windows.

    \quotefromfile texteditor/qml/+touch/texteditor.qml
    \skipto /\bDialog\b/
    \printuntil /^\s{4}\}$/

    \section1 C++ Backend

    Both user interfaces use the same C++ backend, which supports opening, formatting,
    and editing a document. The C++ class, \c DocumentHandler, extends QObject and is
    registered as a QML type under the namespace \c {io.qt.examples.texteditor 1.0}.

    The following snippets show how the type is registered under a namespace and later
    imported and instantiated by \e main.qml. For more information about registering C++
    classes as QML types, see \l {Defining QML Types from C++}.

    QML type registration:

    \code
    #include <QtQml/qqml.h>
    ...
    qmlRegisterType<DocumentHandler>("io.qt.examples.texteditor", 1, 0, "DocumentHandler");
    ...
    \endcode

    QML namespace import:

    \code
    import io.qt.examples.texteditor 1.0
    \endcode

    QML instance:

    \quotefromfile texteditor/qml/texteditor.qml
    \skipto DocumentHandler
    \printuntil /^\s{4}\}$/

    \include examples-run.qdocinc
*/