Doc: Add docs for Calculator QML example

- Use a .qdocinc include file for compilation instructions
- Add screenshot
- Fix related issues in the widget version docs

Change-Id: Ia1de27f81a45e23ab37158cb66b537c95810c28b
Reviewed-by: Ulf Hermann <ulf.hermann@theqtcompany.com>

4 files changed, 103 insertions, 25 deletions

diff --git a/examples/scxml/calculator-common/doc/src/calculator-compiling.qdocinc b/examples/scxml/calculator-common/doc/src/calculator-compiling.qdocinc
new file mode 100644
index 0000000..54fe26b
--- /dev/null
+++ b/examples/scxml/calculator-common/doc/src/calculator-compiling.qdocinc
@@ -0,0 +1,19 @@
+    \section1 Compiling the State Machine
+
+    We link against the Qt SCXML module by adding the following line to the
+    \e .pro file:
+
+    \quotefromfile calculator-widgets/calculator-widgets.pro
+    \printuntil scxml
+
+    We then specify the state machine to compile:
+
+    \skipto STATECHARTS
+    \printline calculator
+
+    We also tell qmake to run \c qscxmlc, which generates \e statemachine.h and
+    \e statemachine.cpp, and adds them to the \c HEADERS and \c SOURCES
+    variables for compilation:
+
+    \skipto load
+    \printline qscxmlc
diff --git a/examples/scxml/calculator-qml/doc/images/calculator-qml.png b/examples/scxml/calculator-qml/doc/images/calculator-qml.png
new file mode 100644
index 0000000..021f56d
--- /dev/null
+++ b/examples/scxml/calculator-qml/doc/images/calculator-qml.png
diff --git a/examples/scxml/calculator-qml/doc/src/calculator-qml.qdoc b/examples/scxml/calculator-qml/doc/src/calculator-qml.qdoc
new file mode 100644
index 0000000..e58fcfd
--- /dev/null
+++ b/examples/scxml/calculator-qml/doc/src/calculator-qml.qdoc
@@ -0,0 +1,77 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 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 calculator-qml
+    \title Qt SCXML Calculator QML Example
+    \ingroup examples-qtscxml
+
+    \image calculator-qml.png
+
+    \brief A Qt Quick application that implements the Calculator example
+    presented in the SCXML Specification.
+
+    \e {Calculator} uses Qt SCXML to implement the
+    \l{SCXML Specification - Calculator Example}{Calculator Example}
+    presented in the SCXML Specification.
+
+    The state machine is specified in the \e statemachine.scxml file and
+    compiled into the \c CalculatorStateMachine class. The user interface is
+    created using Qt Quick.
+
+    \include examples-run.qdocinc
+
+    \include calculator-compiling.qdocinc
+
+    \section1 Instantiating the State Machine
+
+    We make the generated \c CalculatorStateMachine class available to QML by
+    registering it as a QML type in the \e calculator-qml.cpp file:
+
+    \quotefromfile calculator-qml/calculator-qml.cpp
+    \skipto statemachine.h
+    \printuntil }
+
+    To use the CalculatorStateMachine type in a QML file, we import it:
+
+    \quotefromfile calculator-qml/calculator-qml.qml
+    \skipto CalculatorStateMachine
+    \printline 1.0
+
+    We instantiate a CalculatorStateMachine and listen to the \c updateDisplay
+    event. When it occurs, we change the text on the calculator display:
+
+    \skipto  CalculatorStateMachine {
+    \printuntil /^ {4}\}/
+
+    When users press the calculator buttons, the buttons submit events to the
+    state machine:
+
+    \skipto DIGIT.
+    \skipto Button
+    \printuntil }
+*/
diff --git a/examples/scxml/calculator-widgets/doc/src/calculator.qdoc b/examples/scxml/calculator-widgets/doc/src/calculator.qdoc
index f92fbbd..5055005 100644
--- a/examples/scxml/calculator-widgets/doc/src/calculator.qdoc
+++ b/examples/scxml/calculator-widgets/doc/src/calculator.qdoc
@@ -32,43 +32,25 @@
 
     \image calculator.png
 
-    \brief Implements the Calculator example presented in the SCXML
-    Specification.
+    \brief A widget-based application that implements the Calculator example
+    presented in the SCXML Specification.
 
     \e {Calculator} uses Qt SCXML to implement the
     \l{SCXML Specification - Calculator Example}{Calculator Example}
     presented in the SCXML Specification.
 
-    The state machine is specified in the \e calculator.scxml file and compiled
-    into the \c Calculator class. The user interface is created using
-    Qt Widgets.
+    The state machine is specified in the \e statemachine.scxml file and
+    compiled into the \c CalculatorStateMachine class. The user interface is
+    created using Qt Widgets.
 
     \include examples-run.qdocinc
 
-    \section1 Compiling the State Machine
-
-    We link against the Qt SCXML module by adding the following line to the
-    \e calculator.pro file:
-
-    \quotefromfile calculator-widgets/calculator-widgets.pro
-    \printuntil scxml
-
-    We then specify the state machine to compile:
-
-    \skipto STATECHARTS
-    \printline calculator
-
-    We also tell qmake to run \c qscxmlc, which generates \e statemachine.h and
-    \e statemachine.cpp, and adds them to the \c HEADERS and \c SOURCES variables
-    for compilation:
-
-    \skipto load
-    \printline qscxmlc
+    \include calculator-compiling.qdocinc
 
     \section1 Instantiating the State Machine
 
     We instantiate the generated \c CalculatorStateMachine class in the
-    \e main.cpp file, as follows:
+    \e calculator-widgets.cpp file, as follows:
 
     \quotefromfile calculator-widgets/calculator-widgets.cpp
     \skipto #include