1/**************************************************************************** 2** 3** Copyright (C) 2017 The Qt Company Ltd. 4** Contact: https://www.qt.io/licensing/ 5** 6** This file is part of the documentation of the Qt Toolkit. 7** 8** $QT_BEGIN_LICENSE:FDL$ 9** Commercial License Usage 10** Licensees holding valid commercial Qt licenses may use this file in 11** accordance with the commercial license agreement provided with the 12** Software or, alternatively, in accordance with the terms contained in 13** a written agreement between you and The Qt Company. For licensing terms 14** and conditions see https://www.qt.io/terms-conditions. For further 15** information use the contact form at https://www.qt.io/contact-us. 16** 17** GNU Free Documentation License Usage 18** Alternatively, this file may be used under the terms of the GNU Free 19** Documentation License version 1.3 as published by the Free Software 20** Foundation and appearing in the file included in the packaging of 21** this file. Please review the following information to ensure 22** the GNU Free Documentation License version 1.3 requirements 23** will be met: https://www.gnu.org/licenses/fdl-1.3.html. 24** $QT_END_LICENSE$ 25** 26****************************************************************************/ 27 28/*! 29 30\page qtquick-codesamples.html 31\title Qt Quick Examples and Tutorials 32\brief Building UIs with QML 33\ingroup all-examples 34\ingroup qtquick 35\keyword qtquick-samples 36 37Qt includes several examples to demonstrate a particular usage. The examples 38run as applications or as non-GUI examples in Qt Creator. Qt tutorials show 39the step-by-step information and give insight to particular code snippets. 40 41This page lists the \l{Qt QML} and \l{Qt Quick} examples, however, many other 42\l{All Modules}{Qt modules} contain examples related to their QML API. 43 44\section1 Running the Examples and Demos 45 46The examples are packaged with the \l{Getting Started with Qt}{Qt installers} 47and are accessed through Qt Creator. For more information about running 48examples in Qt Creator, visit the 49\l{Qt Creator: Building and Running an Example}{Building and Running an Example} 50page. 51 52Open and run examples within Qt Creator's \gui{Welcome} mode. Most of the 53examples run on various platforms and to search for platform-specific 54examples, type the platform name (or any keywords) in the search field. For 55example, typing \c mobile in the search field lists the examples that are 56fully compatible with the \l{Platform Support}{mobile} platforms. 57 58To view other examples and tutorials, visit the \l{Qt Examples And Tutorials} 59page. 60 61\section1 Qt Quick Demos 62 63Here is a list of fully-functional demo applications. They are full applications 64that show how a deployable Qt application is built and structured. Many of the 65demos are deployable to mobile and desktop platforms. 66 67\annotatedlist{qtquickdemos} 68 69\section1 Developing Qt Quick Applications 70 71The following pages show how to develop Qt applications using 72\l{Qt Creator Manual}{Qt Creator} and Qt Quick. The pages demonstrate various 73steps such as use cases and introductory material. For more information about Qt Quick Applications and related modules, visit the \l{QML Applications} page. 74 75\div {class="multi-column"} 76 \div {class="doc-column"} 77 \b{Development Environment} 78 \list 79 \li \l{Qt Creator: Creating Qt Quick Projects}{Creating Qt Quick Projects} 80 \li \l{Qt Creator: Creating Components}{Creating Components} 81 \li \l{Qt Creator: Exporting Designs from Graphics Software}{Exporting Designs from Graphics Software} 82 \li \l{Qt Creator: Using QML Modules with Plugins}{Using QML Modules with Plugins} 83 \endlist 84 \enddiv 85 \div {class="doc-column"} 86 \b{Beginning with QML and Qt Quick} 87 \list 88 \li \l{First Steps with QML} 89 \li \l{Getting Started Programming with Qt Quick}{Qt Quick Text Editor} 90 \li \l{QML Advanced Tutorial}{SameGame} 91 \endlist 92 \enddiv 93 \div {class="doc-column"} 94 \b{Use Cases} 95 \list 96 \li \l{qtquick-usecase-visual.html}{Visual types in QML} 97 \li \l{qtquick-usecase-userinput.html}{Responding to User Input in QML} 98 \li \l{qtquick-usecase-animations.html}{Animations in QML} 99 \li \l{qtquick-usecase-text.html}{Displaying Text in QML} 100 \li \l{qtquick-usecase-layouts.html}{Layouts in QML} 101 \li \l{qtquick-usecase-styling.html}{Style and Theme Support} 102 \li \l{qtquick-usecase-integratingjs.html}{Integrating JavaScript in QML} 103 \endlist 104 \enddiv 105\enddiv 106 107\section2 Extending QML 108 109The following tutorials show how a QML-based application can be combined with 110C++ code using the \l{Qt QML} module. For information about extending QML, visit 111the \l{Integrating QML and C++} page. 112 113\annotatedlist{qmlextendingexamples} 114 115\section1 Examples 116 117Examples are small applications which show how to implement various Qt Quick 118features. The examples run on various platforms and are opened from within Qt 119Creator. 120 121\div {class="multi-column"} 122 \div {class="doc-column"} 123 \b{QML Types and Controls} 124 \list 125 \li \l{Qt Quick Controls - Gallery}{Controls Gallery} 126 \li \l{Qt Quick System Dialog Examples}{Dialog Examples} 127 \li \l{Calendar Example} 128 \li \l{tableview/gameoflife}{TableView} 129 \li \l{Qt Quick Examples - Text}{Text and Fonts} 130 \li \l{Qt Quick Examples - Toggle Switch}{Custom Toggle Switch} 131 \endlist 132 \enddiv 133 \div {class="doc-column"} 134 \b{Layouts and Views} 135 \list 136 \li \l{Qt Quick Layouts - Basic Example} 137 \li \l{Qt Quick Examples - Positioners}{Positioners} 138 \li \l{Qt Quick Examples - Views}{Views} 139 \li \l{Qt Quick Examples - Window and Screen}{Windows and Screen} 140 \li \l{Qt Quick Examples - Right to Left}{Right-to-Left and Text Layout} 141 \endlist 142 \enddiv 143 \div {class="doc-column"} 144 \b{Image and Graphics} 145 \list 146 \li \l{Qt Quick Examples - Image Elements}{Image Elements} 147 \li \l{Qt Quick Examples - Animation}{Animation} 148 \li \l{Qt Quick Examples - Canvas}{Canvas API} 149 \li \l{Qt Quick Examples - Shader Effects}{Shader Effects} 150 \endlist 151 \enddiv 152\enddiv 153 154\div {class="multi-column"} 155 \div {class="doc-column"} 156 \b{Keyboard, Focus, and Touch} 157 \list 158 \li \l{Qt Quick Examples - Key Interaction}{Key Interaction} 159 \li \l{Qt Quick Examples - MouseArea}{MouseArea} 160 \endlist 161 \enddiv 162 \div {class="doc-column"} 163 \b{System and Events} 164 \list 165 \li \l{Qt Quick Examples - Threading}{Threading} 166 \li \l{Qt Quick Examples - Accessibility}{Accessibility} 167 \li \l{Qt Quick Examples - externaldraganddrop}{External Drag and Drop} 168 \li \l{Qt Quick Examples - Drag and Drop}{Drag and Drop} 169 \endlist 170 \enddiv 171 \div {class="doc-column"} 172 \b{Scene Graph} 173 \list 174 \li \l{Scene Graph - Custom Geometry}{Custom Geometry} 175 \li \l{Scene Graph - Metal Under QML}{Metal Under QML} 176 \li \l{Scene Graph - Metal Texture Import}{Metal Texture Import} 177 \li \l{Scene Graph - OpenGL Under QML}{OpenGL Under QML} 178 \li \l{Scene Graph - Direct3D 11 Under QML}{Direct3D 11 Under QML} 179 \li \l{Scene Graph - Vulkan Under QML}{Vulkan Under QML} 180 \li \l{Scene Graph - Vulkan Texture Import}{Vulkan Texture Import} 181 \li \l{Scene Graph - Custom Rendering with QSGRenderNode}{Render Node} 182 \li \l{Scene Graph - Painted Item}{Painted Item} 183 \li \l{Scene Graph - Graph}{Graph} 184 \li \l{Scene Graph - Simple Material}{Simple Material} 185 \li \l{Scene Graph - Rendering FBOs}{Rendering FBOs} 186 \li \l{Scene Graph - Rendering FBOs in a thread}{Rendering FBOs in a thread} 187 \endlist 188 \enddiv 189\enddiv 190*/ 191