doc/src/examples.qdoc

/****************************************************************************
**
** Copyright (C) 2017 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$
**
****************************************************************************/

/*!

\page qtquick-codesamples.html
\title Qt Quick Examples and Tutorials
\brief Building UIs with QML
\ingroup all-examples
\ingroup qtquick
\keyword qtquick-samples

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.

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.

\section1 Running the Examples and Demos

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.

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.

To view other examples and tutorials, visit the \l{Qt Examples And Tutorials}
page.

\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

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="multi-column"}
    \div {class="doc-column"}
        \b{Development Environment}
        \list
        \li \l{Qt Creator: Creating Qt Quick Projects}{Creating Qt Quick Projects}
        \li \l{Qt Creator: Creating Components}{Creating Components}
        \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
    \div {class="doc-column"}
        \b{Beginning with QML and Qt Quick}
        \list
        \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="doc-column"}
        \b{Use Cases}
        \list
        \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
\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. 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.

\div {class="multi-column"}
    \div {class="doc-column"}
        \b{QML Types and Controls}
        \list
        \li \l{Qt Quick Controls - Gallery}{Controls Gallery}
        \li \l{Qt Quick System Dialog Examples}{Dialog Examples}
        \li \l{Calendar Example}
        \li \l{tableview/gameoflife}{TableView}
        \li \l{Qt Quick Examples - Text}{Text and Fonts}
        \li \l{Qt Quick Examples - Toggle Switch}{Custom Toggle Switch}
        \endlist
    \enddiv
    \div {class="doc-column"}
        \b{Layouts and Views}
        \list
        \li \l{Qt Quick Layouts - Basic Example}
        \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="doc-column"}
        \b{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="multi-column"}
    \div {class="doc-column"}
        \b{Keyboard, Focus, and Touch}
        \list
        \li \l{Qt Quick Examples - Key Interaction}{Key Interaction}
        \li \l{Qt Quick Examples - MouseArea}{MouseArea}
        \endlist
    \enddiv
    \div {class="doc-column"}
        \b{System and Events}
        \list
        \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="doc-column"}
        \b{Scene Graph}
        \list
        \li \l{Scene Graph - Custom Geometry}{Custom Geometry}
        \li \l{Scene Graph - Metal Under QML}{Metal Under QML}
        \li \l{Scene Graph - Metal Texture Import}{Metal Texture Import}
        \li \l{Scene Graph - OpenGL Under QML}{OpenGL Under QML}
        \li \l{Scene Graph - Direct3D 11 Under QML}{Direct3D 11 Under QML}
        \li \l{Scene Graph - Vulkan Under QML}{Vulkan Under QML}
        \li \l{Scene Graph - Vulkan Texture Import}{Vulkan Texture Import}
        \li \l{Scene Graph - Custom Rendering with QSGRenderNode}{Render Node}
        \li \l{Scene Graph - Painted Item}{Painted Item}
        \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
*/