Add demo thumbnails to Examples/Demos index to make it more interesting

10 files changed, 74 insertions, 35 deletions

diff --git a/doc/src/declarative/examples.qdoc b/doc/src/declarative/examples.qdoc
index dcd0362..f127ed1 100644
--- a/doc/src/declarative/examples.qdoc
+++ b/doc/src/declarative/examples.qdoc
@@ -45,29 +45,82 @@
   \brief Building UI's with QML
   \ingroup all-examples
 
-\section1 Running the examples
 
-You can find many simple examples in the \c examples/declarative
-sub-directory that show how to use various aspects of QML. In addition, the
-\c demos/declarative sub-directory contains more sophisticated demos of large
-applications. These demos are intended to show integrated functionality
-rather than being instructive on specific elements.
+Qt includes a set of examples and demos that show how to use various aspects
+of QML. The examples are small demonstrations of particular QML components, 
+while the demos contain more complete and functional applications.
 
 To run the examples and demos, you can use Qt Creator or the included \l {Qt Declarative UI Runtime}{qmlviewer}
-command-line application. It has some useful options, revealed by:
+command-line application. For example, from your build directory, run:
 
 \code
-    bin/qmlviewer -help
+    bin/qmlviewer $QTDIR/demos/declarative/samegame/samegame.qml
 \endcode
 
-For example, from your build directory, run:
 
-\code
-    bin/qmlviewer $QTDIR/demos/declarative/samegame/samegame.qml
-\endcode
+\section1 Demos
+
+The QML demos integrate a variety of features to demonstrate how QML
+can be used to produce sophisticated interfaces and applications:
+
+
+\table
+\row
+
+\o 
+\l{demos/declarative/calculator}{Calculator}
+\image qml-calculator-example-small.png
+
+\o 
+\l{demos/declarative/flickr}{Flickr Mobile}
+\image qml-flickr-demo-small.png
+
+\o 
+\l{demos/declarative/minehunt}{Minehunt}
+\image qml-minehunt-demo-small.png
+
+\row
+
+\o 
+\l{demos/declarative/photoviewer}{Photo Viewer}
+\image qml-photoviewer-demo-small.png
+
+\o 
+\l{demos/declarative/rssnews}{RSS News Reader}
+\image qml-rssnews-demo-small.png
+
+\o 
+\l{demos/declarative/samegame}{Same Game}
+\image qml-samegame-demo-small.png
+
+\row
+
+\o 
+\l{demos/declarative/snake}{Snake}
+\image qml-snake-demo-small.png
+
+\o 
+\l{demos/declarative/twitter}{Twitter}
+\image qml-twitter-demo-small.png
+
+\o 
+\l{demos/declarative/webbrowser}{Web Browser}
+\image qml-webbrowser-demo-small.png
+
+\endtable
+
+The demos can be found in Qt's \c demos/declarative directory.
+
 
 \section1 Examples
 
+The QML examples are small, simple applications that show how to use a particular
+QML component or feature. If you are new
+to QML, you may also find the \l{QML Tutorial}{Hello World} and 
+\l {QML Advanced Tutorial}{Same Game} tutorials useful.
+
+The examples can be found in Qt's \c examples/declarative directory.
+
 \section2 Animation
 \list
 \o \l{declarative/animation/basics}{Basics}
@@ -116,6 +169,15 @@ For example, from your build directory, run:
 \o \l{declarative/ui-components/tabwidget}{Tab widget}
 \endlist
 
+\section2 Toys
+\list
+\o \l{declarative/toys/clocks}{Clocks}
+\o \l{declarative/toys/corkboards}{Corkboards}
+\o \l{declarative/toys/dynamicscene}{Dynamic Scene}
+\o \l{declarative/toys/tic-tac-toe}{Tic Tac Toe}
+\o \l{declarative/toys/tvtennis}{TV Tennis}
+\endlist
+
 \section2 Models and Views
 \list
 \o \l{declarative/modelviews/gridview}{GridView}
@@ -128,15 +190,6 @@ For example, from your build directory, run:
 \o \l{declarative/modelviews/webview}{WebView}
 \endlist
 
-\section2 Toys
-\list
-\o \l{declarative/toys/clocks}{Clocks}
-\o \l{declarative/toys/corkboards}{Corkboards}
-\o \l{declarative/toys/dynamicscene}{Dynamic Scene}
-\o \l{declarative/toys/tic-tac-toe}{Tic Tac Toe}
-\o \l{declarative/toys/tvtennis}{TV Tennis}
-\endlist
-
 \section2 XML
 \list
 \o \l{declarative/xml/xmlhttprequest}{XmlHttpRequest}
@@ -169,20 +222,6 @@ For example, from your build directory, run:
 \endlist
 
 
-\section1 Demos
-
-\list
-\o \l{demos/declarative/calculator}{Calculator}
-\o \l{demos/declarative/flickr}{Flickr Mobile}
-\o \l{demos/declarative/minehunt}{Minehunt}
-\o \l{demos/declarative/photoviewer}{Photo Viewer}
-\o \l{demos/declarative/rssnews}{RSS News Reader}
-\o \l{demos/declarative/samegame}{Same Game}
-\o \l{demos/declarative/snake}{Snake}
-\o \l{demos/declarative/twitter}{Twitter}
-\o \l{demos/declarative/webbrowser}{Web Browser}
-\endlist
-
 \section1 Labs
 
 \list
diff --git a/doc/src/images/qml-calculator-example-small.png b/doc/src/images/qml-calculator-example-small.png
new file mode 100644
index 0000000..9e0370f
--- /dev/null
+++ b/doc/src/images/qml-calculator-example-small.png
diff --git a/doc/src/images/qml-flickr-demo-small.png b/doc/src/images/qml-flickr-demo-small.png
new file mode 100644
index 0000000..370ffcf
--- /dev/null
+++ b/doc/src/images/qml-flickr-demo-small.png
diff --git a/doc/src/images/qml-minehunt-demo-small.png b/doc/src/images/qml-minehunt-demo-small.png
new file mode 100644
index 0000000..e5badac
--- /dev/null
+++ b/doc/src/images/qml-minehunt-demo-small.png
diff --git a/doc/src/images/qml-photoviewer-demo-small.png b/doc/src/images/qml-photoviewer-demo-small.png
new file mode 100644
index 0000000..b16fb4e
--- /dev/null
+++ b/doc/src/images/qml-photoviewer-demo-small.png
diff --git a/doc/src/images/qml-rssnews-demo-small.png b/doc/src/images/qml-rssnews-demo-small.png
new file mode 100644
index 0000000..451a420
--- /dev/null
+++ b/doc/src/images/qml-rssnews-demo-small.png
diff --git a/doc/src/images/qml-samegame-demo-small.png b/doc/src/images/qml-samegame-demo-small.png
new file mode 100644
index 0000000..ec9ad76
--- /dev/null
+++ b/doc/src/images/qml-samegame-demo-small.png
diff --git a/doc/src/images/qml-snake-demo-small.png b/doc/src/images/qml-snake-demo-small.png
new file mode 100644
index 0000000..23a7b3b
--- /dev/null
+++ b/doc/src/images/qml-snake-demo-small.png
diff --git a/doc/src/images/qml-twitter-demo-small.png b/doc/src/images/qml-twitter-demo-small.png
new file mode 100644
index 0000000..b55ceba
--- /dev/null
+++ b/doc/src/images/qml-twitter-demo-small.png
diff --git a/doc/src/images/qml-webbrowser-demo-small.png b/doc/src/images/qml-webbrowser-demo-small.png
new file mode 100644
index 0000000..6c5d57d
--- /dev/null
+++ b/doc/src/images/qml-webbrowser-demo-small.png