Doc: Update the image and example's description

Replaced the png image with two jpeg images, one for desktop and touch.

Change-Id: I5073244fdf82c70309e4412a51af02bbe0469c36
Reviewed-by: J-P Nurmi <jpnurmi@qt.io>

4 files changed, 67 insertions, 12 deletions

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 00000000..259e0e8b
--- /dev/null
+++ b/examples/quickcontrols2/texteditor/doc/images/qtquickcontrols2-texteditor-desktop.jpg
diff --git a/examples/quickcontrols2/texteditor/doc/images/qtquickcontrols2-texteditor-desktop.png b/examples/quickcontrols2/texteditor/doc/images/qtquickcontrols2-texteditor-desktop.png
deleted file mode 100644
index 4b4d7f79..00000000
--- a/examples/quickcontrols2/texteditor/doc/images/qtquickcontrols2-texteditor-desktop.png
+++ /dev/null
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 00000000..6a924cdf
--- /dev/null
+++ b/examples/quickcontrols2/texteditor/doc/images/qtquickcontrols2-texteditor-touch.jpg
diff --git a/examples/quickcontrols2/texteditor/doc/src/qtquickcontrols2-texteditor.qdoc b/examples/quickcontrols2/texteditor/doc/src/qtquickcontrols2-texteditor.qdoc
index 60ff0567..1fee54ce 100644
--- a/examples/quickcontrols2/texteditor/doc/src/qtquickcontrols2-texteditor.qdoc
+++ b/examples/quickcontrols2/texteditor/doc/src/qtquickcontrols2-texteditor.qdoc
@@ -24,7 +24,6 @@
 ** $QT_END_LICENSE$
 **
 ****************************************************************************/
-
 /*!
     \example texteditor
     \title Qt Quick Controls 2 - Text Editor
@@ -32,18 +31,71 @@
     \brief A QML app using Qt Quick Controls 2 and a C++ class to
     provide a fully-functional rich-text editor application.
 
-    \image qtquickcontrols2-texteditor-desktop.png
-
     The \e {Text Editor Example} presents a sample HTML file using the TextArea
-    control, preserving the HTML formatting. It uses a C++ class to handle the
-    document by providing options to open, format, and edit. The application
-    also lets you open and edit plain text files.
+    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:
 
-    The C++ class, DocumentHandler, extends QObject and is registered
-    as a QML type under the namespace \c {io.qt.examples.texteditor 1.0}.
+    \skipto /\bMenu\b/
+    \printuntil /^\s{4}\}$/
 
-    The following snippets show how the type is registered under
-    a namespace and later imported by \e main.qml.
+    \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 2}{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:
 
@@ -60,8 +112,11 @@
     import io.qt.examples.texteditor 1.0
     \endcode
 
-    For more information about registering C++ classes as QML types, see
-    \l {Defining QML Types from C++}.
+    QML instance:
+
+    \quotefromfile texteditor/qml/texteditor.qml
+    \skipto DocumentHandler
+    \printuntil /^\s{4}\}$/
 
     \include examples-run.qdocinc
 */