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
|
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
\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
*/
|
