From 8a3e4758350dd3868353d7a1b0ba9a4b31f7ac3d Mon Sep 17 00:00:00 2001 From: Jerome Pasion Date: Mon, 24 Feb 2014 17:06:43 +0100 Subject: Doc: Re-organized Qt Quick's examples page. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit -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ö --- src/quick/doc/src/examples.qdoc | 209 +++++++++++++++++++++++----------------- 1 file 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 -- cgit v1.2.3