Doc: Re-organized Qt Quick's examples page.

-Organized into "Demo", "Tutorials", and "Examples".
-Added Controls, Dialogs, and other Qt Quick examples.
-Added links to Qt Creator tutorials related to Qt Quick.

Task-number: QTBUG-36838
Change-Id: I9ca000a73465217a2c42ebac9288e6462afa4cf5
Reviewed-by: Topi Reiniö <topi.reinio@digia.com>

1 files changed, 119 insertions, 90 deletions

diff --git a/src/quick/doc/src/examples.qdoc b/src/quick/doc/src/examples.qdoc
index ae3f26f9dd..def50ecd60 100644
--- a/src/quick/doc/src/examples.qdoc
+++ b/src/quick/doc/src/examples.qdoc
@@ -34,126 +34,155 @@
 \ingroup qtquick
 \target qtquick-samples
 
-These are code samples that show how to use various aspects of Qt Quick. Larger
-compound interfaces are grouped as applications as they demonstrate more Qt
-Quick features.
+Qt includes several examples to demonstrate a particular usage. The examples
+run as applications or as non-GUI examples in Qt Creator. Qt tutorials show
+the step-by-step information and give insight to particular code snippets.
 
-Here is a list of fully-functional demo applications.
-To run the sample applications, open them in Qt Creator or use the included
-\l {Prototyping with qmlscene}{qmlscene} tool.
+This page lists the \l{Qt QML} and \l{Qt Quick} examples, however, many other
+\l{All Modules}{Qt modules} contain examples related to their QML API.
 
-\annotatedlist{qtquickdemos}
+\section1 Running the Examples and Demos
 
-Some of these code samples below  have a corresponding tutorial.
-The Qt Quick features are covered in the \l {Qt Quick}{main page}.
-This set of code samples are part of the collection of \l{Qt Examples}.
+The examples are packaged with the \l{Getting Started with Qt}{Qt installers}
+and are accessed through Qt Creator. For more information about running
+examples in Qt Creator, visit the
+\l{Qt Creator: Building and Running an Example}{Building and Running an Example}
+page.
 
-\annotatedlist{qtquickexamples}
+Open and run examples within Qt Creator's \gui{Welcome} mode. Most of the
+examples run on various platforms and to search for platform-specific
+examples, type the platform name (or any keywords) in the search field. For
+example, typing \c mobile in the search field lists the examples that are
+fully compatible with the \l{Platform Support}{mobile} platforms.
 
-The following examples show how a QML-based user interface can be combined with C++
-code using the \l{Qt QML} module.
+To view other examples and tutorials, visit the \l{Qt Examples And Tutorials}
+page.
 
-\annotatedlist{qmlextendingexamples}
+\section1 Qt Quick Demos
 
-*/
+Here is a list of fully-functional demo applications. They are full applications
+that show how a deployable Qt application is built and structured. Many of the
+demos are deployable to mobile and desktop platforms.
+
+\annotatedlist{qtquickdemos}
+
+\section1 Developing Qt Quick Applications
 
-/*
-\div {class="threecolumn_area"}
-    \div {class="heading"}
-        QDeclarative Examples
+The following pages show how to develop Qt applications using
+\l{Qt Creator Manual}{Qt Creator} and Qt Quick. The pages demonstrate various
+steps such as use cases and introductory material. For more information about Qt Quick Applications and related modules, visit the \l{QML Applications} page.
+
+\div {class="landingicons"}
+    \div {class="icons1of3"}
+        \bold{Development Environment}
+        \list
+        \li \l{Qt Creator: Creating Qt Quick Projects}{Creating Qt Quick Projects}
+        \li \l{Qt Creator: Using Qt Quick Designer}{Using Qt Quick Designer}
+        \li \l{Qt Creator: Creating Components}{Creating Components}
+        \li \l{Qt Creator: Creating Screens}{Creating Screens}
+        \li \l{Qt Creator: Exporting Designs from Graphics Software}{Exporting Designs from Graphics Software}
+        \li \l{Qt Creator: Using QML Modules with Plugins}{Using QML Modules with Plugins}
+        \endlist
     \enddiv
-    These examples show how a QML based UI could interact with the
-    QDeclarative module.
-    \div {class="threecolumn_piece"}
-        \div {class="heading"}
-        From Qt C++ to QML
-        \enddiv
+    \div {class="icons1of3"}
+        \bold{Beginning with QML and Qt Quick}
         \list
-        \li \l {qml/cppextensions/referenceexamples/adding}{Exporting C++ Classes}
-        \li \l {qml/cppextensions/referenceexamples/properties}{Exporting Qt C++ Properties}
-        \li \l {qml/cppextensions/referenceexamples/coercion}{C++ Inheritance and Coercion}
-        \li \l {qml/cppextensions/referenceexamples/default}{Default Property}
-        \li \l {qml/cppextensions/referenceexamples/grouped}{Grouped Properties}
-        \li \l {qml/cppextensions/referenceexamples/attached}{Attached Properties}
-        \li \l {qml/cppextensions/referenceexamples/signal}{Signal Support}
-        \li \l {qml/cppextensions/referenceexamples/methods}{Methods Support}
-        \li \l {qml/cppextensions/referenceexamples/valuesource}{Property Value Source}
-        \li \l {qml/cppextensions/referenceexamples/binding}{Binding}
+        \li \l{First Steps with QML}
+        \li \l{Getting Started Programming with Qt Quick}{Qt Quick Text Editor}
+        \li \l{QML Advanced Tutorial}{SameGame}
         \endlist
     \enddiv
-    \div {class="threecolumn_piece"}
-        \div {class="heading"}
-        Plugins and Resources
-        \enddiv
+    \div {class="icons1of3"}
+        \bold{Use Cases}
         \list
-        \li \l{qml/cppextensions/plugins}{Plugins}
-        \li \l{qml/cppextensions/imageprovider}{Image Provider}
-        \li \l{qml/cppextensions/networkaccessmanagerfactory}{Network Access Manager}
-        \li \l{src/imports/folderlistmodel}{Folder List Model} - a C++ model plugin
+        \li \l{qtquick-usecase-visual.html}{Visual types in QML}
+        \li \l{qtquick-usecase-userinput.html}{Responding to User Input in QML}
+        \li \l{qtquick-usecase-animations.html}{Animations in QML}
+        \li \l{qtquick-usecase-text.html}{Displaying Text in QML}
+        \li \l{qtquick-usecase-layouts.html}{Layouts in QML}
+        \li \l{qtquick-usecase-styling.html}{Style and Theme Support}
+        \li \l{qtquick-usecase-integratingjs.html}{Integrating JavaScript in QML}
         \endlist
     \enddiv
-    \div {class="threecolumn_piece"}
-        \div {class="heading"}
-        Qt UI and QML Integration
-        \enddiv
+\enddiv
+
+\section2 Extending QML
+
+The following tutorials show how a QML-based application can be combined with
+C++ code using the \l{Qt QML} module. The \l{Running the Examples} section
+has more information about opening the examples from within Qt Creator. For
+information about extending QML, visit the \l{Integrating QML and C++} page.
+
+\annotatedlist{qmlextendingexamples}
+
+\section1 Examples
+
+Examples are small applications which show how to implement various Qt Quick
+features. The examples run on various platforms and are opened from within Qt
+Creator. The \l{Running the Examples} section has more information about opening
+the examples from within Qt Creator.
+
+\div {class="landingicons"}
+    \div {class="icons1of3"}
+        \bold{QML Types and Controls}
         \list
-        \li \l{qml-cppextensions-qgraphicslayouts.html}{QGraphicsLayouts}
-        \li \l{qml/cppextensions/qwidgets}{QWidgets}
+        \li \l{Qt Quick Controls - Gallery}{Controls Gallery}
+        \li \l{Qt Quick System Dialog Examples}{Dialog Examples}
+        \li \l{Qt Quick Controls - Calendar Example}{Calendar Example}
+        \li \l{Qt Quick Controls - Table View Example}{TableView}
+        \li \l{Qt Quick Examples - Text}{Text and Fonts}
+        \li \l{Qt Quick Examples - Toggle Switch}{Custom Toggle Switch}
         \endlist
     \enddiv
-    \div {class="threecolumn_piece"}
-        \div {class="heading"}
-        UI Components
-        \enddiv
+    \div {class="icons1of3"}
+        \bold{Layouts and Views}
         \list
-        \li \l{tutorials/ui-components/dialcontrol}{Dial Control}
-        \li \l{tutorials/ui-components/flipable}{Flipable}
-        \li \l{tutorials/ui-components/progressbar}{Progress Bar}
-        \li \l{tutorials/ui-components/scrollbar}{Scroll Bar}
-        \li \l{tutorials/ui-components/searchbox}{Search Box}
-        \li \l{tutorials/ui-components/slideswitch}{Slide Switch}
-        \li \l{tutorials/ui-components/spinner}{Spinner}
-        \li \l{tutorials/ui-components/tabwidget}{Tab Widget}
+        \li \l{Qt Quick Controls - Basic Layouts Example}{Basic Layouts}
+        \li \l{Qt Quick Examples - Positioners}{Positioners}
+        \li \l{Qt Quick Examples - Views}{Views}
+        \li \l{Qt Quick Examples - Window and Screen}{Windows and Screen}
+        \li \l{Qt Quick Examples - Right to Left}{Right-to-Left and Text Layout}
+        \endlist
+    \enddiv
+    \div {class="icons1of3"}
+        \bold{Image and Graphics}
+        \list
+        \li \l{Qt Quick Examples - Image Elements}{Image Elements}
+        \li \l{Qt Quick Examples - Animation}{Animation}
+        \li \l{Qt Quick Examples - Canvas}{Canvas API}
+        \li \l{Qt Quick Examples - Shader Effects}{Shader Effects}
         \endlist
     \enddiv
 \enddiv
 
-\div {class="threecolumn_area"}
-    \div {class="heading"}
-        Learning and Resources
-    \enddiv
-    The Qt Developer Network contains additional content such as learning
-    videos, a wiki, and a forum for posting questions.
-    \div {class="threecolumn_piece"}
-        \div {class="heading"}
-            Elements and Components
-        \enddiv
+\div {class="landingicons"}
+    \div {class="icons1of3"}
+        \bold{Keyboard, Focus, and Touch}
         \list
-        \li \l{Qt Quick QML Types}
-        \li \l{external: Qt Mobility QML Plugins}{QML Plugins}
-        \li \l{external: Qt Quick Components for Symbian}{Symbian Components}
-        \li MeeGo Components
-        \li \l{Qt WebKit QML Types}
+        \li \l{Qt Quick Examples - Key Interaction}{Key Interaction}
+        \li \l{Qt Quick Examples - MouseArea}{MouseArea}
+        \li \l{Qt Quick Controls - Touch Gallery}{Touch Gallery}
         \endlist
     \enddiv
-    \div {class="threecolumn_piece"}
-        \div {class="heading"}
-            Qt Developer Network
-        \enddiv
+    \div {class="icons1of3"}
+        \bold{System and Events}
         \list
-        \li \l{Qt eLearning}{Training Materials}
-        \li \l{Forums on Qt Developer Network}{Forums}
-        \li \l{Wiki on Qt Developer Network}{Wiki}
+        \li \l{Qt Quick Examples - Threading}{Threading}
+        \li \l{Qt Quick Examples - Accessibility}{Accessibility}
+        \li \l{Qt Quick Examples - externaldraganddrop}{External Drag and Drop}
+        \li \l{Qt Quick Examples - Drag and Drop}{Drag and Drop}
         \endlist
     \enddiv
-    \div {class="threecolumn_piece"}
-        \div {class="heading"}
-            Reference
-        \enddiv
+    \div {class="icons1of3"}
+        \bold{Scene Graph}
         \list
-        \li \l{All Classes}{Qt API}
-        \li \l{external: Qt Creator Manual}{Qt Creator Manual}
-        \li \l{Develop with Qt}
+        \li \l{Scene Graph - OpenGL Under QML}{OpenGL Under QML}
+        \li \l{Scene Graph - Painted Item}{Painted Item}
+        \li \l{Scene Graph - Custom Geometry}{Custom Geometry}
+        \li \l{Scene Graph - Graph}{Graph}
+        \li \l{Scene Graph - Simple Material}{Simple Material}
+        \li \l{Scene Graph - Rendering FBOs}{Rendering FBOs}
+        \li \l{Scene Graph - Rendering FBOs in a thread}{Rendering FBOs in a thread}
         \endlist
     \enddiv
 \enddiv