Doc: Edit example documentation

- Add images to the examples.
- Add instructions for running the examples
- Edit for grammar and style
- Add dependencies to Qt WebEngine and Qt WebSockets modules
- Add a workaround for preventing autolinking of WebChannel,
  WebEngine and WebSockets to the wrong targets
- Use explicit linking where necessary

Change-Id: Ia4025284063fa09c9e2a0b2c347ee682bba8a615
Reviewed-by: Topi Reiniö <topi.reinio@theqtcompany.com>
(cherry picked from commit 01ea92c7c8d77d3d3c10ab1cc4bf4f214aa07126)

2 files changed, 19 insertions, 13 deletions

diff --git a/examples/webchannel/chatclient-qml/doc/images/chatclient-qml.png b/examples/webchannel/chatclient-qml/doc/images/chatclient-qml.png
new file mode 100644
index 0000000..7f96e26
--- /dev/null
+++ b/examples/webchannel/chatclient-qml/doc/images/chatclient-qml.png
diff --git a/examples/webchannel/chatclient-qml/doc/src/chatclient-qml.qdoc b/examples/webchannel/chatclient-qml/doc/src/chatclient-qml.qdoc
index cd029e0..c6e0f32 100644
--- a/examples/webchannel/chatclient-qml/doc/src/chatclient-qml.qdoc
+++ b/examples/webchannel/chatclient-qml/doc/src/chatclient-qml.qdoc
@@ -50,32 +50,38 @@
 
 /*!
     \example chatclient-qml
-    \title Qt WebChannel Chatclient QML Example
+    \title Qt WebChannel ChatClient QML Example
     \ingroup qtwebchannel-examples
     \brief A QML client that communicates over a WebSocket with a QWebChannel server.
 
-    The chatclient-html example provides a simple QWebChannel client implemented using JavaScript and QML.
+    \image chatclient-qml.png
 
-    \section1 Overview
+    \e{ChatClient QML} provides a simple QWebChannel client implemented using JavaScript and QML.
 
-    The client initializes a WebSocket connection to the chat server and receives an object
-    containing all neccessarry signals, slots and properties for implementing a chat client.
+    \section1 Running the Example
+
+    To run the example, enter the following command in the client source
+    directory:
+
+    \c {path/to/qmlscene qmlchatclient.qml}
+
+    \section1 Implementing a Web Channel Client
+
+    The client initializes a \l [QML] WebSocket connection to the chat server and receives an object
+    containing all the necessary signals, slots, and properties for implementing a chat client.
 
     After login, the client can invoke the method \c sendMessage and receive the signal \c newMessage
-    to send and receive messages. Furthermore, there is a \c userList property which provides the
+    to send and receive messages. Furthermore, a \c userList property provides the
     names of all other connected clients. It is automatically updated when its contents change.
-    Also, the client responds to the servers keep alive signal which is needed to detect disconnected
+    Also, the client responds to the server's keep alive signal which is needed to detect disconnected
     clients and remove them from the \c userList property.
 
     The example shows how basic elements can be used with the client JavaScript implementation of
-    QWebChannel, like connecting to signals (\c newMessage), calling slots (\c sendMessage) and handle
+    QWebChannel, like connecting to signals (\c newMessage), calling slots (\c sendMessage), and handling
     property changes (\c userList).
 
-    The client is able to work with the chatserver-cpp as server application
-
-
-    The example can be run by invoking \c {path/to/qmlscene qmlchatclient.qml}.
+    The client is able to work with the \l{Qt WebChannel ChatServer Example}.
 
-    \sa {chatserver-cpp}, {chatclient-html}
+    \sa {Qt WebChannel ChatServer Example}, {Qt WebChannel ChatClient HTML Example}
 
 */