diff --git a/doc/qtcreator/src/overview/creator-only/creator-tutorials.qdoc b/doc/qtcreator/src/overview/creator-only/creator-tutorials.qdoc index e75d8fb4a5d..40b0ffc1d0a 100644 --- a/doc/qtcreator/src/overview/creator-only/creator-tutorials.qdoc +++ b/doc/qtcreator/src/overview/creator-only/creator-tutorials.qdoc @@ -1,40 +1,18 @@ -// Copyright (C) 2020 The Qt Company Ltd. +// Copyright (C) 2023 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only -// ********************************************************************** -// NOTE: the sections are not ordered by their logical order to avoid -// reshuffling the file each time the index order changes (i.e., often). -// Run the fixnavi.pl script to adjust the links to the index order. -// ********************************************************************** - /*! \previouspage creator-build-example-application.html \page creator-tutorials.html - \nextpage {Creating a Qt Quick Application} + \nextpage creator-project-managing.html \title Tutorials \image front-help.png - You can use \QC to create applications for several platforms by using - several technologies. The tutorials in this manual explain how to create - some basic applications. - - \list - - \li \l{Creating a Qt Quick Application} - - Learn how to create a Qt Quick application. - - \li \l{Creating a Qt Widget Based Application} - - Learn how to create a Qt widget based application for the desktop. - - \li \l{Creating a Mobile Application} - - Learn how to create a Qt Quick application using Qt Quick Controls - for Android and iOS devices. - - \endlist + You can use \QC to create applications for several \l{Supported Platforms} + {platforms} by using several \l{User Interfaces}{UI technologies}. Follow + the tutorials to learn how to create some basic Qt applications. + \annotatedlist creator-tutorials */ diff --git a/doc/qtcreator/src/qtcreator-toc.qdoc b/doc/qtcreator/src/qtcreator-toc.qdoc index fafc9841779..3a6e5c2ccc3 100644 --- a/doc/qtcreator/src/qtcreator-toc.qdoc +++ b/doc/qtcreator/src/qtcreator-toc.qdoc @@ -24,11 +24,6 @@ \li \l{Configuring Qt Creator} \li \l{Building and Running an Example} \li \l{Tutorials} - \list - \li \l{Creating a Qt Quick Application} - \li \l{Creating a Qt Widget Based Application} - \li \l{Creating a Mobile Application} - \endlist \endlist \li \l{Managing Projects} \list diff --git a/doc/qtcreator/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc b/doc/qtcreator/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc index 7ca4ea2a017..6d617292b76 100644 --- a/doc/qtcreator/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc +++ b/doc/qtcreator/src/qtquick/creator-only/creator-mobile-app-tutorial.qdoc @@ -1,25 +1,23 @@ -// Copyright (C) 2022 The Qt Company Ltd. +// Copyright (C) 2023 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only -// ********************************************************************** -// NOTE: the sections are not ordered by their logical order to avoid -// reshuffling the file each time the index order changes (i.e., often). -// Run the fixnavi.pl script to adjust the links to the index order. -// ********************************************************************** - /*! - \previouspage creator-writing-program.html \example accelbubble + \previouspage creator-tutorials.html \nextpage creator-project-managing.html + \ingroup creator-tutorials \title Creating a Mobile Application + \brief How to create a Qt Quick application that uses Qt Quick Controls and + runs on Android and iOS devices. + This tutorial describes how to use \QC to develop Qt Quick applications for Android and iOS devices when using Qt 6 as the minimum Qt version and CMake as the build system. - We implement a Qt Quick application that accelerates an SVG (Scalable Vector - Graphics) image based on the changing accelerometer values. + You will develop a Qt Quick application that accelerates an SVG + (Scalable Vector Graphics) image based on changing accelerometer values. \note You must have the \l{Qt Sensors} module from Qt 6.2 or later installed to be able to follow this tutorial. @@ -48,9 +46,6 @@ The main view of the application displays an SVG bubble image that moves around the screen when you tilt the device. - We use \e {Bluebubble.svg} in this tutorial, but you can use any other - image or component instead. - For the image to appear when you run the application, you must specify it as a resource in the \c RESOURCES section of \e CMakeLists.txt file that the wizard created for you: @@ -61,31 +56,33 @@ \section1 Creating the Accelbubble Main View - We create the main view in the \e main.qml file by adding an \l Image + Create the main view in the \e main.qml file by adding an \l Image component with \e Bluebubble.svg as the source: \quotefromfile accelbubble/main.qml \skipto Image \printuntil smooth - Next, we add custom properties to position the image in respect to the width + You can use any other image or component instead. + + Add custom properties to position the image in respect to the width and height of the main window: \printuntil y: - We now want to add code to move the bubble based on Accelerometer sensor - values. First, we add the following import statement: + Add code to move the bubble based on Accelerometer sensor + values. First, add the following import statement: \quotefromfile accelbubble/main.qml \skipto QtSensors \printline QtSensors - Next, we add the \l{Accelerometer} component with the necessary properties: + Add the \l{Accelerometer} component with the necessary properties: \skipto Accelerometer \printuntil active - Then, we add the following JavaScript functions that calculate the + Add the following JavaScript functions that calculate the x and y position of the bubble based on the current Accelerometer values: @@ -94,7 +91,7 @@ \printuntil } \printuntil } - We add the following JavaScript code for \c onReadingChanged signal of + Add the following JavaScript code for \c onReadingChanged signal of Accelerometer component to make the bubble move when the Accelerometer values change: @@ -102,12 +99,12 @@ \skipto onReadingChanged \printuntil } - We want to ensure that the position of the bubble is always + You need to ensure that the position of the bubble is always within the bounds of the screen. If the Accelerometer returns \e {not a number} (NaN), the value is ignored and the bubble position is not updated. - We add \l SmoothedAnimation behavior on the \c x and \c y properties of + Add \l SmoothedAnimation behavior on the \c x and \c y properties of the bubble to make its movement look smoother. \quotefromfile accelbubble/main.qml @@ -126,7 +123,7 @@ an \e AndroidManifest.xml that you can generate in \QC. For more information, see \l{Editing Manifest Files}. - \image qtquick-mobile-tutorial-manifest.png "Accelbubble manifest file" + \image qtquick-mobile-tutorial-manifest.png {Accelbubble manifest file} To generate and use a manifest file, you must specify the Android package source directory, \c QT_ANDROID_PACKAGE_SOURCE_DIR in the \e CMakeLists.txt @@ -136,14 +133,14 @@ \skipto set_property \printuntil ) - Because our CMake version is older than 3.19, we must add a manual + Because the CMake version is older than 3.19, add a manual finalization step to the \c qt_add_executable function: \quotefromfile accelbubble/CMakeLists.txt \skipto qt_add_executable \printuntil ) - We also need to add the \c qt_finalize_executable function: + Then, add the \c qt_finalize_executable function: \skipto qt_finalize_executable \printuntil ) diff --git a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc index 4aca5466c39..e80eeca778c 100644 --- a/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc +++ b/doc/qtcreator/src/qtquick/creator-only/qtquick-app-tutorial.qdoc @@ -1,13 +1,16 @@ -// Copyright (C) 2021 The Qt Company Ltd. +// Copyright (C) 2023 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only /*! - \previouspage creator-tutorials.html \example transitions - \nextpage creator-writing-program.html + \previouspage creator-tutorials.html + \nextpage creator-project-managing.html + \ingroup creator-tutorials \title Creating a Qt Quick Application + \brief How to create a Qt Quick Application in the \uicontrol Edit mode. + This tutorial illustrates basic concepts of \l{Qt Quick}. For more information about the UI choices you have, see \l{User Interfaces}. @@ -15,10 +18,10 @@ {states} and \l{Animation and Transitions in Qt Quick}{transitions} when using Qt 6 as the minimum Qt version and CMake as the build system. - We use the \l{Working in Edit Mode}{Edit mode} to create an application + You will use the \l{Working in Edit Mode}{Edit mode} to create an application that moves a Qt logo between three rectangles when you click them. - \image qtquick-tutorial.gif "Transitions example" + \image qtquick-tutorial.gif {Transitions example} For more examples, see \l{Qt Quick Examples and Tutorials}. @@ -35,9 +38,6 @@ The main view of the application displays a Qt logo inside a rectangle in the top left corner of the view and two empty rectangles. - We use the \e qt-logo.png image in this tutorial, but you can also use - any other image or a component, instead. - For the image to appear when you run the application, you must specify it as a resource in the \c RESOURCES section of \e CMakeLists.txt file that the wizard created for you: @@ -49,8 +49,8 @@ \section1 Creating Custom QML Types Because the \l Window QML type requires that you add states into child - components, we use the wizard to create a custom QML type called - \e Page that we will refer to from \e main.qml. + components, use the wizard to create a custom QML type called + \e Page that you refer to from \e Main.qml. To create a custom QML type: @@ -60,14 +60,14 @@ \uicontrol {QML File (Qt Quick 2)}. \li Select \uicontrol Choose to open the \uicontrol Location dialog. \li In the \uicontrol {File name} field, enter a name for the custom - QML type. In this example, we call the type \e Page. + QML type: \e Page. \li Select \uicontrol Next to open the \uicontrol {Project Management} dialog. \li Select \uicontrol Finish to create \e Page.qml. \endlist \QC opens \e Page.qml in the \uicontrol Edit mode. It has a root item - of the type \l Item that we replace with a \l Rectangle type. We give the + of the type \l Item. Replace it with a \l Rectangle type. Give the type the ID \e page, anchor it to the parent item on all sides, and set its color to white: @@ -75,9 +75,6 @@ \skipto import \printuntil color - Because we develop with Qt 6, where version numbers are not used with - modules, we remove the version number from the import statement. - When you start typing the QML type name, \QC suggests available types and properties to \l{Completing Code}{complete the code}. @@ -86,66 +83,67 @@ {Qt Quick Toolbar for rectangles}. You can use it to specify rectangle properties, such as color, transparency, and gradients. - \image qml-toolbar-rectangle.png "Qt Quick Toolbar for rectangles" + \image qml-toolbar-rectangle.png {Qt Quick Toolbar for rectangles} - Next, we add an \l Image type with \e qt-logo.png as the source. We - position the image in the top-left corner of the rectangle: + Next, add an \l Image type with \e qt-logo.png as the source. You can also + use any other image or a component. Position the image in the top-left + corner of the rectangle: \printuntil } You can use the \l{Previewing Images}{Qt Quick Toolbar for images} to specify image properties, such as source file and fill mode. - \image qml-toolbar-image.png "Logo visible in Qt Quick Toolbar for images" + \image qml-toolbar-image.png {Logo visible in Qt Quick Toolbar for images} - We now create the rectangles that the image will move between. Their size + Now, create the rectangles that the image will move between. Their size should match the image size and they should be transparent, so that the - image is visible. We set the border color to light gray to make the + image is visible. Set the border color to light gray to make the rectangles visible: \printuntil border.color - We anchor the rectangles to their parent to position them in its + Anchor the rectangles to their parent to position them in its top-left and bottom-left corners, as well as the vertical center of its right edge. The following code snippet anchors a rectangle to the top-left corner of its parent: \printuntil anchors.topMargin - We add a \l MouseArea type to make the rectangle clickable by users: + Add a \l MouseArea type to make the rectangle clickable by users: \printuntil anchors.fill To check your code, you can compare it with the \e {Page.qml} example file. - Next, we will make the image move between the rectangles when users click - them, by adding states and by connecting mouse clicks to state changes. + Next, make the image move between the rectangles when users click + them by adding states and by connecting mouse clicks to state changes. \section1 Connecting Mouse Clicks to State Changes - To make the image move between the rectangles when users click them, we add - states to the Page component, where we change the values of the \c x and + To make the image move between the rectangles when users click them, add + states to the Page component where you change the values of the \c x and \c y properties of \e icon to match those of the middle right and top left rectangles. To make sure that the image stays within the rectangle - when the view is scaled on different sizes of screens, we \e bind the values + when the view is scaled on different sizes of screens, \e bind the values of the \c x and \c y properties of \e icon to those of the rectangles: \dots \skipto states: \printuntil ] - Then, we connect the \c onClicked signals of the mouse areas to the state + Then, connect the \c onClicked signals of the mouse areas to the state changes: \quotefromfile transitions/Page.qml \skipto Connections { \printuntil } - Because we develop with Qt 6, we must specify the connections as functions. + Because you develop with Qt 6, you must specify the connections as functions. \section1 Adding Page to the Main View - We now open \e main.qml for editing and add an instance of the Page custom + Open \e Main.qml for editing and add an instance of the Page custom component to it: \quotefromfile transitions/main.qml @@ -157,18 +155,18 @@ \section1 Animating Transitions - We will now create transitions to apply animation to the image. For example, + Create transitions to apply animation to the image. For example, the image bounces back when it moves to \e middleRightRect and eases into \e bottomLeftRect. - We specify transitions for switching from each state to the other two + Specify transitions for switching from each state to the other two states: \quotefromfile transitions/Page.qml \skipto transitions: \printuntil }, - We change the easing curve type for transitions to \e State2 from linear to + Change the easing curve type for transitions to \e State2 from linear to \c Easing.OutBounce to create the bounce effect: \printuntil }, @@ -177,9 +175,9 @@ {Qt Quick Toolbar for animation} to specify the easing curve type and animation duration. - \image qml-toolbar-animation.png "Qt Quick Toolbar for animation" + \image qml-toolbar-animation.png {Qt Quick Toolbar for animation} - Then, we change the easing curve type for transitions to \e State2 from + Then, change the easing curve type for transitions to \e State2 from linear to \c Easing.InOutQuad to create the easing effect: \printuntil /^\ {0}\}/ diff --git a/doc/qtcreator/src/qtquick/creator-only/qtquick-tutorial-create-empty-project.qdocinc b/doc/qtcreator/src/qtquick/creator-only/qtquick-tutorial-create-empty-project.qdocinc index d0a5b94cc07..8e439c3ce27 100644 --- a/doc/qtcreator/src/qtquick/creator-only/qtquick-tutorial-create-empty-project.qdocinc +++ b/doc/qtcreator/src/qtquick/creator-only/qtquick-tutorial-create-empty-project.qdocinc @@ -1,4 +1,4 @@ -// Copyright (C) 2022 The Qt Company Ltd. +// Copyright (C) 2023 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only /*! @@ -17,37 +17,25 @@ \uicontrol {Project Location} dialog. \li In the \uicontrol Name field, enter a name for the application. - When naming your own projects, keep in mind that they cannot be - easily renamed later. + When naming your own projects, keep in mind that you cannot + easily rename them later. \li In the \uicontrol {Create in} field, enter the path for the project files. You can move project folders later without problems. - \li Select \uicontrol Next (or \uicontrol Continue on \macos) to open - the \uicontrol {Define Build System} dialog. - - \li In the \uicontrol {Build system} field, select \l {Setting Up CMake} - {CMake} as the build system to use for building and running the - project. - - \note If you select \l {Setting Up Qbs}{Qbs}, the instructions for - configuring the project won't apply. - \li Select \uicontrol Next to open the \uicontrol {Define Project Details} dialog. \image qtcreator-project-qt-quick-details.webp {Define Project Details dialog} - \li In the \uicontrol {Minimum required Qt version} field, select - Qt 6.4. + \li Deselect the \uicontrol {Create a project that you can open in \QDS} + check box. - \note This tutorial shows you how to create the application in the - \uicontrol Edit mode. If you select - \uicontrol {Create a project that you can open in \QDS}, the + \note This tutorial shows how to create the application in the + \uicontrol Edit mode. If you leave the check box selected, the following instructions won't apply. - \li Select \uicontrol Next to use the default settings and to open - the \uicontrol {Kit Selection} dialog. + \li Select \uicontrol Next to open the \uicontrol {Kit Selection} dialog. \li Select Qt 6.4 or later \l{glossary-buildandrun-kit}{kits} for the platforms that you want to build the application for. To build diff --git a/doc/qtcreator/src/widgets/qtdesigner-app-tutorial.qdoc b/doc/qtcreator/src/widgets/qtdesigner-app-tutorial.qdoc index ad38116dffb..d7cdd609455 100644 --- a/doc/qtcreator/src/widgets/qtdesigner-app-tutorial.qdoc +++ b/doc/qtcreator/src/widgets/qtdesigner-app-tutorial.qdoc @@ -1,19 +1,17 @@ // Copyright (C) 2023 The Qt Company Ltd. // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only -// ********************************************************************** -// NOTE: the sections are not ordered by their logical order to avoid -// reshuffling the file each time the index order changes (i.e., often). -// Run the fixnavi.pl script to adjust the links to the index order. -// ********************************************************************** - /*! - \previouspage {Creating a Qt Quick Application} \page creator-writing-program.html - \nextpage {Creating a Mobile Application} + \previouspage creator-tutorials.html + \nextpage creator-project-managing.html + \ingroup creator-tutorials \title Creating a Qt Widget Based Application + \brief How to use the integrated \QD to create a Qt widget based application + for the desktop. + This tutorial describes how to use \QC to create a small Qt application, Text Finder. It is a simplified version of the Qt UI Tools \l{Text Finder} example. You'll use \QD to construct the application user interface from @@ -29,11 +27,11 @@ \uicontrol {Application (Qt)} > \uicontrol {Qt Widgets Application} > \uicontrol Choose. - \image qtcreator-new-qt-gui-application.png "New Project dialog" + \image qtcreator-new-qt-gui-application.png {New Project dialog} - The \uicontrol{Introduction and Project Location} dialog opens. + The \uicontrol{Project Location} dialog opens. - \image qtcreator-intro-and-location-qt-gui.png "Introduction and Project Location dialog" + \image qtcreator-intro-and-location-qt-gui.png {Project Location dialog} \li In the \uicontrol{Name} field, type \b {TextFinder}. @@ -44,7 +42,7 @@ \uicontrol Continue (on \macos) to open the \uicontrol {Define Build System} dialog. - \image qtcreator-new-project-build-system-qt-gui.png "Define Build System dialog" + \image qtcreator-new-project-build-system-qt-gui.png {Define Build System dialog} \li In the \uicontrol {Build system} field, select \l {Setting Up CMake} {CMake} as the build system to use for building the project. @@ -52,7 +50,7 @@ \li Select \uicontrol Next or \uicontrol Continue to open the \uicontrol{Class Information} dialog. - \image qtcreator-class-info-qt-gui.png "Class Information dialog" + \image qtcreator-class-info-qt-gui.png {Class Information dialog} \li In the \uicontrol{Class name} field, type \b {TextFinder} as the class name. @@ -66,7 +64,7 @@ \li Select \uicontrol Next or \uicontrol Continue to open the \uicontrol {Translation File} dialog. - \image qtcreator-new-qt-gui-application-translationfile.png "Translation File dialog" + \image qtcreator-new-qt-gui-application-translationfile.png {Translation File dialog} \li In the \uicontrol Language field, you can select a language that you plan to \l {Using Qt Linguist}{translate} the application to. This @@ -76,7 +74,7 @@ \li Select \uicontrol Next or \uicontrol Continue to open the \uicontrol {Kit Selection} dialog. - \image qtcreator-new-project-qt-versions-qt-gui.png "Kit Selection dialog" + \image qtcreator-new-project-qt-versions-qt-gui.png {Kit Selection dialog} \li Select build and run \l{glossary-buildandrun-kit}{kits} for your project. @@ -84,7 +82,7 @@ \li Select \uicontrol Next or \uicontrol Continue to open the \uicontrol {Project Management} dialog. - \image qtcreator-new-project-summary-qt-gui.png "Project Management dialog" + \image qtcreator-new-project-summary-qt-gui.png {Project Management dialog} \li Review the project settings, and select \uicontrol{Finish} (on Windows and Linux) or \uicontrol Done (on \macos) to create the project. @@ -106,7 +104,7 @@ \endlist - \image qtcreator-textfinder-contents.png "TextFinder project contents" + \image qtcreator-textfinder-contents.png {TextFinder project contents} The .h and .cpp files come with the necessary boiler plate code. @@ -120,14 +118,14 @@ \section2 Designing the User Interface - \image qtcreator-textfinder-ui.png "Text Finder UI" + \image qtcreator-textfinder-ui.png {Text Finder UI} \list 1 \li In the \uicontrol{Editor} mode, double-click the textfinder.ui file in the \uicontrol{Projects} view to launch the integrated \QD. - \li Drag and drop the following widgets to the form: + \li Drag the following widgets to the form: \list @@ -137,13 +135,13 @@ \endlist - \image qtcreator-textfinder-ui-widgets.png "Adding widgets to Text Finder UI" + \image qtcreator-textfinder-ui-widgets.png {Adding widgets to Text Finder UI} \note To easily locate the widgets, use the search box at the top of the \uicontrol Sidebar. For example, to find the \uicontrol Label widget, start typing the word \b label. - \image qtcreator-textfinder-filter.png "Filter field" + \image qtcreator-textfinder-filter.png {Filter field} \li Double-click the \uicontrol{Label} widget and enter the text \b{Keyword}. @@ -154,21 +152,21 @@ \li In the \uicontrol Properties view, change the \uicontrol objectName to \b findButton. - \image qtcreator-textfinder-objectname.png "Changing object names" + \image qtcreator-textfinder-objectname.png {Changing object names} \li Press \key {Ctrl+A} (or \key {Cmd+A}) to select the widgets and select \uicontrol{Lay out Horizontally} (or press \key {Ctrl+H} on Linux or Windows or \key {Ctrl+Shift+H} on \macos) to apply a horizontal layout (QHBoxLayout). - \image qtcreator-textfinder-ui-horizontal-layout.png "Applying horizontal layout" + \image qtcreator-textfinder-ui-horizontal-layout.png {Applying horizontal layout} - \li Drag and drop a \uicontrol{Text Edit} widget (QTextEdit) to the form. + \li Drag a \uicontrol{Text Edit} widget (QTextEdit) to the form. \li Select the screen area, and then select \uicontrol{Lay out Vertically} (or press \key {Ctrl+L}) to apply a vertical layout (QVBoxLayout). - \image qtcreator-textfinder-ui.png "Text Finder UI" + \image qtcreator-textfinder-ui.png {Text Finder UI} Applying the horizontal and vertical layouts ensures that the application UI scales to different screen sizes. @@ -274,11 +272,11 @@ \li Select \uicontrol File > \uicontrol {New File} > \uicontrol Qt > \uicontrol {Qt Resource File} > \uicontrol Choose. - \image qtcreator-add-resource-wizard.png "New File dialog" + \image qtcreator-add-resource-wizard.png {New File dialog} The \uicontrol {Choose the Location} dialog opens. - \image qtcreator-add-resource-wizard2.png "Choose the Location dialog" + \image qtcreator-add-resource-wizard2.png {Choose the Location dialog} \li In the \uicontrol{Name} field, enter \b{textfinder}. @@ -287,7 +285,7 @@ The \uicontrol{Project Management} dialog opens. - \image qtcreator-add-resource-wizard3.png "Project Management dialog" + \image qtcreator-add-resource-wizard3.png {Project Management dialog} \li In the \uicontrol{Add to project} field, select \b{TextFinder} @@ -302,7 +300,7 @@ \li Select \uicontrol Add > \uicontrol {Add Files}, to locate and add input.txt. - \image qtcreator-add-resource.png "Editing resource files" + \image qtcreator-add-resource.png {Editing resource files} \endlist @@ -320,6 +318,6 @@ Now that you have all the necessary files, select the \inlineimage icons/run_small.png - button to compile and run your Application. + button to compile and run your application. */