| + \endraw + \image qtquickcontrols2-gallery-welcome.png + \caption Welcome Screen + \raw HTML + | + \endraw + \image qtquickcontrols2-gallery-drawer.png + \caption Side Drawer + \raw HTML + | + \endraw + \image qtquickcontrols2-gallery-menu.png + \caption Options Menu + \raw HTML + |
| + \endraw + \image qtquickcontrols2-sidepanel-portrait.png + \caption An interactive Drawer in portrait mode + \raw HTML + | + \endraw + \image qtquickcontrols2-sidepanel-landscape.png + \caption A non-interactive Drawer in landscape mode + \raw HTML + |
+ 
+
+ Qt Quick Controls 2 +
++ This example demonstrates a modern rich text editor. +
+ + diff --git a/examples/quickcontrols2/texteditor/CMakeLists.txt b/examples/quickcontrols2/texteditor/CMakeLists.txt new file mode 100644 index 00000000000..6c3de0891f5 --- /dev/null +++ b/examples/quickcontrols2/texteditor/CMakeLists.txt @@ -0,0 +1,66 @@ +# Generated from texteditor.pro. + +cmake_minimum_required(VERSION 3.16) +project(texteditor LANGUAGES CXX) + +set(CMAKE_INCLUDE_CURRENT_DIR ON) + +set(CMAKE_AUTOMOC ON) +set(CMAKE_AUTORCC ON) + +if(NOT DEFINED INSTALL_EXAMPLESDIR) + set(INSTALL_EXAMPLESDIR "examples") +endif() + +set(INSTALL_EXAMPLEDIR "${INSTALL_EXAMPLESDIR}/quickcontrols2/texteditor") + +find_package(Qt6 COMPONENTS Core Gui Quick QuickControls2) +find_package(Qt6 COMPONENTS Widgets) + +qt_add_executable(texteditor WIN32 MACOSX_BUNDLE + documenthandler.cpp + texteditor.cpp +) + +target_link_libraries(texteditor PUBLIC + Qt::Core + Qt::Gui + Qt::Quick + Qt::QuickControls2 +) + + +# Resources: +set(texteditor_resource_files + "+touch/texteditor.html" + "fonts/fontello.ttf" + "images/qt-logo.png" + "qml/+touch/texteditor.qml" + "qml/texteditor.qml" + "texteditor.html" +) + +qt6_add_resources(texteditor "texteditor" + PREFIX + "/" + FILES + ${texteditor_resource_files} +) + +if(TARGET Qt::Widgets) + target_link_libraries(texteditor PUBLIC + Qt::Widgets + ) +endif() + +if(CMAKE_CROSSCOMPILING) + target_compile_definitions(texteditor PUBLIC + QT_EXTRA_FILE_SELECTOR="touch" # special case + ) +endif() + +install(TARGETS texteditor + RUNTIME DESTINATION "${INSTALL_EXAMPLEDIR}" + BUNDLE DESTINATION "${INSTALL_EXAMPLEDIR}" + LIBRARY DESTINATION "${INSTALL_EXAMPLEDIR}" +) diff --git a/examples/quickcontrols2/texteditor/creatorKateHighlighter.png b/examples/quickcontrols2/texteditor/creatorKateHighlighter.png new file mode 100644 index 00000000000..7dd819507ff Binary files /dev/null and b/examples/quickcontrols2/texteditor/creatorKateHighlighter.png differ diff --git a/examples/quickcontrols2/texteditor/doc/images/qtquickcontrols2-texteditor-desktop.jpg b/examples/quickcontrols2/texteditor/doc/images/qtquickcontrols2-texteditor-desktop.jpg new file mode 100644 index 00000000000..259e0e8b071 Binary files /dev/null and b/examples/quickcontrols2/texteditor/doc/images/qtquickcontrols2-texteditor-desktop.jpg differ diff --git a/examples/quickcontrols2/texteditor/doc/images/qtquickcontrols2-texteditor-touch.jpg b/examples/quickcontrols2/texteditor/doc/images/qtquickcontrols2-texteditor-touch.jpg new file mode 100644 index 00000000000..6a924cdf52e Binary files /dev/null and b/examples/quickcontrols2/texteditor/doc/images/qtquickcontrols2-texteditor-touch.jpg differ diff --git a/examples/quickcontrols2/texteditor/doc/src/qtquickcontrols2-texteditor.qdoc b/examples/quickcontrols2/texteditor/doc/src/qtquickcontrols2-texteditor.qdoc new file mode 100644 index 00000000000..28cf3f3b3f9 --- /dev/null +++ b/examples/quickcontrols2/texteditor/doc/src/qtquickcontrols2-texteditor.qdoc @@ -0,0 +1,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
+
+
+ Qt Quick Controls 2 +
++ This example demonstrates a modern rich text editor. The UI uses Qt Labs Platforms to provide native menus and dialogs. +
++
+
+ +
+ Below you'll find a list of the native controls used in this application. +
+ +-
+
- Menu - provides a QML API for native platform menu popups. +
- MenuBar - provides a QML API for native platform menubars. +
- MenuItem - provides a QML API for native platform menu items. +
- FileDialog - provides a QML API for native platform file dialogs. +
- FontDialog - provides a QML API for native platform font dialogs. +
- ColorDialog - provides a QML API for native platform color dialogs. +
- MessageDialog - provides a QML API for native platform message dialogs. +