diff options
Diffstat (limited to 'examples/quickcontrols/chattutorial/doc/src/qtquickcontrols-chattutorial.qdoc')
| -rw-r--r-- | examples/quickcontrols/chattutorial/doc/src/qtquickcontrols-chattutorial.qdoc | 111 |
1 files changed, 29 insertions, 82 deletions
diff --git a/examples/quickcontrols/chattutorial/doc/src/qtquickcontrols-chattutorial.qdoc b/examples/quickcontrols/chattutorial/doc/src/qtquickcontrols-chattutorial.qdoc index c34c20d508..a42ef81575 100644 --- a/examples/quickcontrols/chattutorial/doc/src/qtquickcontrols-chattutorial.qdoc +++ b/examples/quickcontrols/chattutorial/doc/src/qtquickcontrols-chattutorial.qdoc @@ -2,7 +2,7 @@ // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only /*! -\example chattutorial +\page qtquickcontrols-chattutorial-example.html \keyword Qt Quick Controls - Chat Tutorial \title Qt Quick Controls - Chat Tutorial \keyword Qt Quick Controls 2 - Chat Tutorial @@ -21,16 +21,12 @@ When setting up a new project, it's easiest to use basic "Hello World" application with the following files: \list -\li \c MainForm.ui.qml - Defines the default UI -\li \c main.qml - Embeds the default UI in a Window -\li \c qml.qrc - Lists the \c .qml files that are built into the binary +\li \c CMakeLists.txt - Instructs CMake how our project should be built +\li \c Main.qml - Provides a default UI containing an empty Window \li \c main.cpp - Loads \c main.qml -\li \c chattutorial.pro - Provides the qmake configuration +\li \c qtquickcontrols2.conf - Tells the application which style it should use \endlist -\note Delete the \c MainForm.ui.qml and \c qml.qrc files from the project, as -we will not use them in this tutorial. - \section2 main.cpp The default code in \c main.cpp has two includes: @@ -46,42 +42,35 @@ does. QCoreApplication is sufficient for non-graphical applications. QGuiApplication is sufficient for graphical applications that do not use \l {Qt Widgets}, while QApplication is required for those that do. -The second include makes QQmlApplicationEngine available, along with -some useful functions required for making C++ types accessible from QML. +The second include makes QQmlApplicationEngine available, allowing us to +load our QML. Within \c main(), we set up the application object and QML engine: \skipto main \printuntil } -It begins with enabling \l {High DPI}{high DPI scaling}, which is not -part of the default code. It is necessary to do so before the application -object is constructed. - -After that's done, we construct the application object, passing any application -arguments provided by the user. - -Next, the QML engine is created. \l QQmlApplicationEngine is a convenient -wrapper over QQmlEngine, providing the \l {QQmlApplicationEngine::load}{load()} -function to easily load QML for an application. It also adds some convenience -for using \l {Using File Selectors with Qt Quick Controls}{file selectors}. +\l QQmlApplicationEngine is a convenient wrapper over QQmlEngine, providing the +\l {QQmlApplicationEngine::}{loadFromModule} function to easily load QML for an +application. It also adds some convenience for using \l {Using File Selectors +with Qt Quick Controls}{file selectors}. Once we've set up things in C++, we can move on to the user interface in QML. -\section2 main.qml +\section2 Main.qml Let's modify the default QML code to suit our needs. -\quotefromfile chattutorial/chapter1/main.qml +\quotefromfile chattutorial/chapter1/Main.qml \skipto import \printuntil import QtQuick.Controls -First, import the \l {Qt Quick} module. This gives us -access to graphical primitives such as \l Item, \l Rectangle, \l Text, and so -on. -For the full list of types, see the \l {Qt Quick QML Types} documentation. +You'll notice that the \l {Qt Quick} module has already been imported. This +gives us access to graphical primitives such as \l Item, \l Rectangle, \l Text, +and so on. For the full list of types, see the \l {Qt Quick QML Types} +documentation. -Next, import the Qt Quick Controls module. Amongst other things, this +Add an import of the Qt Quick Controls module. Amongst other things, this provides access to \l ApplicationWindow, which will replace the existing root type, \c Window: @@ -90,6 +79,7 @@ root type, \c Window: \dots \skipto } \skipuntil } +\skipuntil } \printuntil } ApplicationWindow is a \l Window with some added convenience for creating a @@ -121,14 +111,13 @@ which screen the user is viewing, it is much easier to use \l Page. For now, we'll just add one page, but in the next chapter, we'll demonstrate how to navigate between several pages. -\quotefromfile chattutorial/chapter1/main.qml +\quotefromfile chattutorial/chapter1/Main.qml \skipto Page \printuntil } \printuntil } -We replace the default \c{MainForm {...}} code block with a Page, which is -sized to occupy all the space on the window using the \l {Item::}{anchors.fill} -property. +First, we add a Page, which is sized to occupy all the space on the window +using the \l {Item::}{anchors.fill} property. Then, we assign a \l Label to its \l {Page::}{header} property. Label extends the primitive \l Text item from the Qt Quick module by adding @@ -155,49 +144,15 @@ bounds, both horizontally and vertically. \section2 The Project File -The \c .pro or \l {Creating Project Files}{project} file contains all of the -information needed by \l {qmake Manual}{qmake} to generate a Makefile, which is -then used to compile and link the application. - -\quotefromfile chattutorial/chapter1/chapter1.pro -\printline TEMPLATE - -The first line tells \c qmake which kind of project this is. We're building an -application, so we use the \c app template. - -\printline QT - -The next line declares the Qt libraries that we want to use from C++. +The \c CMakeLists.txt file contains all of the information needed by \l {Build +with CMake}{CMake} to build our project into an executable that we can run. -\printline CONFIG +For an in-depth explanation of this file, see \l {Building a QML application}. -This line states that a C++11 compatible compiler is required to build the -project. - -\printline SOURCES - -The \c SOURCES variable lists all of the source files that should be compiled. -A similar variable, \c HEADERS, is available for header files. - -\printuntil qtquickcontrols2 - -The next line tells \c qmake that we have a collection of -\l {The Qt Resource System}{resources} that should be built into the -executable. - -\skipto target -\printline - -This line replaces deployment settings that come with the default project file. -It determines where the example is copied, on running "\c{make install}". - -Now we can build and run the application: +Here is what our application currently looks like when run: \borderedimage qtquickcontrols-chattutorial-chapter1.png -\noautolist -\generatelist examplefiles .*chapter1.* - \section1 Chapter 2: Lists In this chapter, we'll explain how to create a list of interactive items using @@ -211,7 +166,7 @@ can display text, be checked on and off, and react to mouse clicks. Here is our ListView: -\quotefromfile chattutorial/chapter2/main.qml +\quotefromfile chattutorial/chapter2/Main.qml \dots 8 \codeline \skipto ListView @@ -272,15 +227,13 @@ vertical space. \borderedimage qtquickcontrols-chattutorial-chapter2.png -\generatelist examplefiles .*(chapter2|shared).* -\generatelist exampleimages .*shared.*(Einstein|Hemingway|Gude)\.png \section1 Chapter 3: Navigation In this chapter, you'll learn how to use \l StackView to navigate between pages in an application. Here's the revised \c main.qml: -\quotefromfile chattutorial/chapter3/main.qml +\quotefromfile chattutorial/chapter3/Main.qml \skipto import \printuntil } \printuntil } @@ -499,8 +452,6 @@ Finally, the button is only enabled when there is actually a message to send. \borderedimage qtquickcontrols-chattutorial-chapter3.gif -\generatelist examplefiles .*(chapter3|shared).* -\generatelist exampleimages .*shared.*(Einstein|Hemingway|Gude)\.png \section1 Chapter 4: Models @@ -644,8 +595,8 @@ changes to be done to \c ContactPage.qml. To be able to use the types, we must first import them using the URI we set in \c main.cpp: \quotefromfile chattutorial/chapter4/ContactPage.qml -\skipto import io.qt.examples.chattutorial -\printline import io.qt.examples.chattutorial +\skipto import chattutorial +\printline import chattutorial We then replace the dummy model with the proper one: @@ -718,8 +669,6 @@ text field to make way for future input. \borderedimage qtquickcontrols-chattutorial-chapter4.gif -\generatelist examplefiles .*(chapter4|shared).* -\generatelist exampleimages \section1 Chapter 5: Styling @@ -848,8 +797,6 @@ After building and running the application, you should see these results: \borderedimage qtquickcontrols-chattutorial-chapter5-contacts-universal-dark.png \borderedimage qtquickcontrols-chattutorial-chapter5-conversations-universal-dark.png -\generatelist examplefiles .*(chapter5|shared).* -\generatelist exampleimages \section1 Summary |