forked from qt-creator/qt-creator
Doc: Update tutorials
- Use \ingroup creator-tutorials to group tutorials - Use \annotatedlist to automatically generate tables that list tutorials - Add \brief commands to add descriptions to the tables - Remove some leftover descriptions from the Qt Quick Application wizard template docs - Fix references to UI text - Write "you" instead of "we" - Use curly braces to define alt text for images - Some language fixes Task-number: QTCREATORBUG-28996 Change-Id: I4b611319b6867cae11d613e0a4d075923cdb037e Reviewed-by: Eike Ziller <eike.ziller@qt.io> Reviewed-by: <github-actions-qt-creator@cristianadam.eu>
This commit is contained in:
Leena Miettinen
@@ -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
|
||||
*/
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 )
|
||||
|
||||
@@ -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}\}/
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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.
|
||||
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user