feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

Merge remote-tracking branch 'origin/qds/dev' into HEAD

Browse Source 
Change-Id: I9d13aa050b1c7fb0954e2b63d13da2922d8f7218
This commit is contained in:
Tim Jenssen
2024-03-14 16:13:25 +01:00
parent 71ada2b478 36cdab7f98
commit 9ce7aaccc5
476 changed files with 21237 additions and 10987 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
CMakeLists.txt
View File

@@ -1,5 +1,10 @@
cmake_minimum_required(VERSION 3.16)
option(BUILD_DESIGNSTUDIO "Build and install design studio plugins, examples and settings." OFF)
if (BUILD_DESIGNSTUDIO)
list(APPEND CMAKE_MODULE_PATH "${CMAKE_CURRENT_SOURCE_DIR}/dist/branding/qtdesignstudio")
endif()
## Add paths to check for cmake modules:
list(APPEND CMAKE_MODULE_PATH "${CMAKE_CURRENT_SOURCE_DIR}/cmake")
include(Utils)

1
dist/branding/qtdesignstudio/CMakeLists.txt vendored
View File

@@ -1 +0,0 @@
install(DIRECTORY QtProject DESTINATION "${IDE_DATA_PATH}")

53
dist/branding/qtdesignstudio/QtCreatorIDEBranding.cmake vendored
View File

@@ -1,7 +1,7 @@
set(IDE_VERSION "4.4.0") # The IDE version.
set(IDE_VERSION_COMPAT "4.4.0") # The IDE Compatibility version.
set(IDE_VERSION_DISPLAY "4.4.0") # The IDE display version.
set(IDE_COPYRIGHT_YEAR "2023") # The IDE current copyright year.
set(IDE_VERSION "4.5.0") # The IDE version.
set(IDE_VERSION_COMPAT "4.5.0") # The IDE Compatibility version.
set(IDE_VERSION_DISPLAY "4.5.0") # The IDE display version.
set(IDE_COPYRIGHT_YEAR "2024") # The IDE current copyright year.
set(IDE_SETTINGSVARIANT "QtProject") # The IDE settings variation.
set(IDE_COPY_SETTINGSVARIANT "Nokia") # The IDE settings to initially import.
@@ -16,3 +16,48 @@ set(IDE_DOC_FILE_ONLINE "qtdesignstudio/qtdesignstudio-online.qdocconf")
set(IDE_ICON_PATH "${CMAKE_CURRENT_LIST_DIR}")
set(IDE_LOGO_PATH "${CMAKE_CURRENT_LIST_DIR}")
set(DESIGNSTUDIO_PLUGINS
Android
BareMetal
Boot2Qt
CMakeProjectManager
CodePaster
Core
CppEditor
Debugger
Designer
DiffEditor
EffectComposer
Help
Insight
LanguageClient
McuSupport
ProjectExplorer
QmakeProjectManager
QmlDesigner
QmlDesignerBase
QmlJSEditor
QmlJSTools
QmlPreview
QmlProjectManager
QtSupport
RemoteLinux
ResourceEditor
StudioPlugin
StudioWelcome
Texteditor
UpdateInfo
VcsBase
assetexporterplugin
componentsplugin
qmlpreviewplugin
qtquickplugin)
if(DESIGNSTUDIO_EXTRAPLUGINS)
list(APPEND DESIGNSTUDIO_PLUGINS ${DESIGNSTUDIO_EXTRAPLUGINS})
endif()
if(NOT BUILD_PLUGINS)
set(BUILD_PLUGINS "${DESIGNSTUDIO_PLUGINS}" CACHE STRING "Build plugins" FORCE)
endif()

5
dist/branding/qtdesignstudio/QtProject/QtDesignStudio.ini vendored
View File

@@ -1,6 +1,6 @@
[Plugins]
Ignored=AutoTest, Bazaar, ClangCodeModel, ClangTools, CMakeProjectManager, CVS, ClassView, CodePaster, CppEditor, CtfVisualizer, Designer, FakeVim, GLSLEditor, GenericProjectManager, IncrediBuild, Ios, Macros, Mercurial, ModelEditor, Perforce, PerfProfiler, ScxmlEditor, QbsProjectManager, Qnx, Subversion, Valgrind, VcsBase, Welcome, WinRt, Python
ForceEnabled=Boot2Qt, StudioWelcome, QmlDesigner, ModuleTools, McuSupport
Ignored=
ForceEnabled=Boot2Qt, StudioWelcome, QmlDesigner, ModuleTools, McuSupport, EffectComposer
[Core]
NewDialog\LastCategory=H.StudioProject
@@ -52,6 +52,7 @@ flashActionDisabled=true
OverrideLanguage=C
[General]
HideOptionCategories=C++, Debug, Designer, Kits, BuildAndRun, CPaster, LanguageClient, Version Control
SuppressedWarnings=LinkWithQtInstallation
[Help]
ContextHelpOption=3

1
doc/config/macros.qdocconf
View File

@@ -35,6 +35,7 @@ macro.QMLD = "Qt Quick Designer"
macro.QQV = "Qt QML Viewer"
macro.QSDK = "Qt"
macro.QUL = "Qt Quick Ultralite"
macro.QUV = "Qt UI Viewer"
macro.QOI = "Qt Online Installer"
macro.QMT = "Qt Maintenance Tool"
macro.qtcversion = $QTC_VERSION

BIN
doc/qtcreator/images/icons/save-effect-composer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 314 B

12
doc/qtcreator/src/external-resources/external-resources-qds.qdoc
View File

@@ -22,8 +22,8 @@
\title \QMCU documentation
*/
/*!
\externalpage https://doc.qt.io/QtForMCUs/qtul-qsg-traveoii-designui.html
\title Designing a UI for Infineon Traveo II
\externalpage https://doc.qt.io/QtForMCUs/qtul-qsg-traveot2g-designui.html
\title Designing a UI for Infineon Traveo T2G
*/
/*!
\externalpage https://doc.qt.io/QtForMCUs/qtul-qsg-miimxrt1170-designui.html
@@ -61,3 +61,11 @@
\externalpage https://doc.qt.io/QtForMCUs/qtul-known-issues.html
\title \QMCU Known Issues or Limitations
*/
/*!
\externalpage https://doc.qt.io/qt/qt-edu-for-designers.html
\title Qt Edu for Designers
*/
/*!
\externalpage https://www.qt.io/download
\title Try Qt
*/

137
doc/qtcreator/src/howto/creator-keyboard-preferences.qdoc Normal file
View File

@@ -0,0 +1,137 @@
// 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.
// **********************************************************************
/*!
\page creator-how-to-assign-keyboard-shortcuts.html
\if defined(qtdesignstudio)
\previouspage studio-keyboard-shortcuts.html
\nextpage studio-projects.html
\else
\previouspage creator-how-tos.html
\endif
\ingroup creator-how-to-ui
\title Assign keyboard shortcuts
If your favorite keyboard shortcut is missing, you can add it. Also, you can
assign your own keyboard shortcuts for functions that you can easily perform
with a mouse, and that therefore do not appear in menus or have default
keyboard shortcuts. For example, selecting and deleting words or lines in an
editor.
To change an existing keyboard shortcut or assign a new one:
\list 1
\li Select \preferences > \uicontrol Environment > \uicontrol Keyboard.
\image qtcreator-keyboard-shortcuts.png {Keyboard preferences}
\li Select a command from the list.
\li In the \uicontrol{Key Sequence} field, you have the following
options:
\list
\li Enter the shortcut key you want to associate with the
selected command.
\li Record a key sequence.
\endlist
\li To assign multiple keyboard shortcuts to a function, select
\uicontrol Add, and enter or record an additional key combination.
\li To revert to the default shortcut, select \uicontrol Reset.
\endlist
\section1 Record key sequences
\list 1
\li Select \uicontrol Record.
\li Press the keys to use as the keyboard shortcut.
\li Select \uicontrol {Stop Recording} when you are done.
\endlist
\sa {Keyboard Shortcuts}, {Find keyboard shortcuts},
{Import and export keyboard shortcuts}
*/
/*!
\page creator-how-to-find-keyboard-shortcuts.html
\if defined(qtdesignstudio)
\previouspage studio-keyboard-shortcuts.html
\nextpage studio-projects.html
\else
\previouspage creator-how-tos.html
\endif
\ingroup creator-how-to-ui
\title Find keyboard shortcuts
\QC has many useful keyboard shortcuts. You can see the keyboard shortcut for
a menu command in the menu or the tooltip for a button or in the keyboard
preferences.
To look up keyboard shortcuts:
\list 1
\li Select \preferences > \uicontrol Environment > \uicontrol Keyboard.
\image qtcreator-keyboard-shortcuts.png {Keyboard preferences}
\li Start typing the name of a function or shortcut in the
\uicontrol Filter field.
\endlist
You can change the existing keyboard shortcuts or import and export them.
\sa {Keyboard Shortcuts}, {Assign keyboard shortcuts},
{Import and export keyboard shortcuts}
*/
/*!
\page creator-how-to-change-keyboard-shortcuts.html
\if defined(qtdesignstudio)
\previouspage studio-keyboard-shortcuts.html
\nextpage studio-projects.html
\else
\previouspage creator-how-tos.html
\endif
\title Import and export keyboard shortcuts
You can use different keyboard shortcut mapping schemes that are stored as
.kms files.
To import and export keyboard shortcut mapping schemes:
\list 1
\li Select \preferences > \uicontrol Environment > \uicontrol Keyboard.
\image qtcreator-keyboard-shortcuts.png {Keyboard preferences}
\li To import a keyboard shortcut mapping scheme, click \uicontrol Import
and select the .kms file that has the keyboard shortcut mapping scheme
you want to import.
\li To export the current keyboard shortcut mapping scheme, click
\uicontrol Export and select the location where you want to save the
exported .kms file.
\endlist
\sa {Keyboard Shortcuts}, {Assign keyboard shortcuts},
{Find keyboard shortcuts}
*/

3
doc/qtcreator/src/howto/creator-sessions.qdoc
View File

@@ -11,9 +11,10 @@
\page creator-project-managing-sessions.html
\if defined(qtdesignstudio)
\previouspage creator-project-managing-workspaces.html
\nextpage creator-keyboard-shortcuts.html
\nextpage studio-keyboard-shortcuts.html
\else
\previouspage creator-how-tos.html
\nextpage creator-keyboard-shortcuts.html
\endif
\ingroup creator-how-to-use

227
doc/qtcreator/src/howto/creator-keyboard-shortcuts.qdoc → doc/qtcreator/src/overview/creator-only/creator-keyboard-shortcuts.qdoc
View File

@@ -9,12 +9,7 @@
/*!
\page creator-keyboard-shortcuts.html
\if defined(qtdesignstudio)
\previouspage creator-project-managing-sessions.html
\nextpage studio-projects.html
\else
\previouspage creator-reference.html
\endif
\ingroup creator-reference
@@ -33,15 +28,14 @@
context. If several functions are available for the same shortcut at a
time, there is a conflict and \QC cannot execute any function.
A keyboard shortcut might also conflict with a shortcut that a Window
A keyboard shortcut might also conflict with a shortcut that a window
manager uses for its own purposes. In that case, \QC shortcuts do not work.
Typically, you can configure the shortcuts in the window manager, but if
that is not allowed, you can change the \QC shortcuts.
\if defined(qtcreator)
For example, Unity on
Ubuntu 11.10 uses \key F10 in its window manager, and therefore the default
\QC keyboard shortcut \key F10 (Step Over) does not work on that system.
\endif
To override the platform default value that determines whether
@@ -128,11 +122,9 @@
\row
\li Previous open document in history
\li Ctrl+Tab
\if defined(qtcreator)
\row
\li Activate \uicontrol Locator
\li Ctrl+K
\endif
\row
\li Switch to \uicontrol Welcome mode
\li Ctrl+1
@@ -168,11 +160,9 @@
\li Alt+number (Cmd+number on \macos)
Where the number is the number of the view.
\if defined(qtcreator)
\row
\li Activate \uicontrol Bookmarks view
\li Alt+M
\endif
\row
\li Activate \uicontrol{File System} view
\li Alt+Y
@@ -200,7 +190,6 @@
\row
\li Undo
\li Ctrl+Z
\if defined(qtcreator)
\row
\li Move to \uicontrol Edit mode
@@ -210,7 +199,6 @@
\li The second press closes secondary windows
\endlist
\li Esc
\endif
\row
\li Exit \QC
@@ -343,7 +331,6 @@
\row
\li Visualize whitespace
\li Ctrl+E, Ctrl+V
\if defined(qtcreator)
\row
\li Toggle bookmark
\li Ctrl+M
@@ -359,24 +346,19 @@
\row
\li Paste snippet
\li Alt+C, Alt+P
\endif
\row
\li Find references to symbol under cursor
\li Ctrl+Shift+U
\if defined(qtcreator)
\note If this keyboard shortcut does not work on Linux, see
\l {Editing Issues}.
\endif
\row
\li Follow symbol under cursor
Works with namespaces, classes, functions, variables, include
statements, and macros, as well as CMake functions, macros,
targets, and packages. Also, opens URLs in the default browser
\if defined(qtcreator)
and Qt resource files (.qrc) in the \l{Resource Files}
{resource editor}
\endif
\li F2
\row
\li Rename symbol under cursor
@@ -387,11 +369,9 @@
\row
\li Open type hierarchy
\li Ctrl+Shift+T
\if defined(qtcreator)
\row
\li Switch between header and source file
\li F4
\endif
\row
\li Add a cursor at the next occurrence of selected text for
multi-cursor editing
@@ -429,7 +409,6 @@
\row
\li Open advanced find
\li Ctrl+Shift+F
\if defined(qtcreator)
\row
\li Record a text-editing macro
\li Alt+[
@@ -445,10 +424,8 @@
\row
\li Execute user actions in FakeVim mode
\li Alt+Y, n, where n is the number of the user action, from 1 to 9
\endif
\endtable
\if defined(qtcreator)
\section1 Emacs Shortcuts
You can specify shortcuts for executing actions in a way that is familiar to
@@ -535,35 +512,7 @@
\li Original size
\li Ctrl+0
\endtable
\endif
\if defined(qtdesignstudio)
\section1 Design Mode Keyboard Shortcuts
You can use the following keyboard shortcuts when editing QML files in the
\uicontrol Design mode.
\table
\header
\li Action
\li Keyboard shortcut
\row
\li Open the QML file that defines the selected component
\li F2
\row
\li Move between \uicontrol the {Code} and
\uicontrol {2D} views
\li F4
\row
\li Toggle left sidebar
\li Ctrl+Alt+0
\row
\li Toggle right sidebar
\li Ctrl+Alt+Shift+0
\endtable
\endif
\if defined(qtcreator)
\section1 Debugging Keyboard Shortcuts
\table
@@ -601,7 +550,6 @@
\li Reverse direction
\li F12
\endtable
\endif
\section1 Project Keyboard Shortcuts
@@ -609,25 +557,21 @@
\header
\li Action
\li Keyboard shortcut
\if defined(qtcreator)
\row
\li Build project
\li Ctrl+B
\row
\li Build all
\li Ctrl+Shift+B
\endif
\row
\li New project
\li Ctrl+Shift+N
\row
\li Open project
\li Ctrl+Shift+O
\if defined(qtcreator)
\row
\li Select the \l{glossary-buildandrun-kit}{kit} to build and run your project with
\li Ctrl+T
\endif
\row
\li Run
\li Ctrl+R
@@ -661,7 +605,6 @@
\section1 Version Control Keyboard Shortcuts
\if defined(qtcreator)
\table
\header
\li {1,2} Action
@@ -762,171 +705,7 @@
\li Alt+P, Alt+O
\li
\endtable
\else
\table
\header
\li Action
\li Keyboard shortcut
\row
\li Stage file for commit
\li Alt+G, Alt+A
\row
\li Commit
\li Alt+G, Alt+C
\row
\li Diff current file
\li Alt+G, Alt+D
\row
\li Diff project
\li Alt+G, Alt+Shift+D
\row
\li Blame
\li Alt+G, Alt+B
\row
\li Log current file
\li Alt+G, Alt+L
\row
\li Log project
\li Alt+G, Alt+K
\row
\li Reset
\li Alt+G, Alt+U
\endtable
\endif
\sa {Assign keyboard shortcuts}, {Find keyboard shortcuts},
{Import and export keyboard shortcuts}
\if defined(qtcreator)
\sa {Enable and disable plugins}
\endif
*/
/*!
\page creator-how-to-assign-keyboard-shortcuts.html
\if defined(qtdesignstudio)
\previouspage creator-keyboard-shortcuts.html
\nextpage studio-projects.html
\else
\previouspage creator-how-tos.html
\endif
\ingroup creator-how-to-ui
\title Assign keyboard shortcuts
If your favorite keyboard shortcut is missing, you can add it. Also, you can
assign your own keyboard shortcuts for functions that you can easily perform
with a mouse, and that therefore do not appear in menus or have default
keyboard shortcuts. For example, selecting and deleting words or lines in an
editor.
To change an existing keyboard shortcut or assign a new one:
\list 1
\li Select \preferences > \uicontrol Environment > \uicontrol Keyboard.
\image qtcreator-keyboard-shortcuts.png {Keyboard preferences}
\li Select a command from the list.
\li In the \uicontrol{Key Sequence} field, you have the following
options:
\list
\li Enter the shortcut key you want to associate with the
selected command.
\li Record a key sequence.
\endlist
\li To assign multiple keyboard shortcuts to a function, select
\uicontrol Add, and enter or record an additional key combination.
\li To revert to the default shortcut, select \uicontrol Reset.
\endlist
\section1 Record key sequences
\list 1
\li Select \uicontrol Record.
\li Press the keys to use as the keyboard shortcut.
\li Select \uicontrol {Stop Recording} when you are done.
\endlist
\sa {Keyboard Shortcuts}, {Find keyboard shortcuts},
{Import and export keyboard shortcuts}
*/
/*!
\page creator-how-to-find-keyboard-shortcuts.html
\if defined(qtdesignstudio)
\previouspage creator-keyboard-shortcuts.html
\nextpage studio-projects.html
\else
\previouspage creator-how-tos.html
\endif
\ingroup creator-how-to-ui
\title Find keyboard shortcuts
\QC has many useful keyboard shortcuts. You can see the keyboard shortcut for
a menu command in the menu or the tooltip for a button or in the keyboard
preferences.
To look up keyboard shortcuts:
\list 1
\li Select \preferences > \uicontrol Environment > \uicontrol Keyboard.
\image qtcreator-keyboard-shortcuts.png {Keyboard preferences}
\li Start typing the name of a function or shortcut in the
\uicontrol Filter field.
\endlist
You can change the existing keyboard shortcuts or import and export them.
\sa {Keyboard Shortcuts}, {Assign keyboard shortcuts},
{Import and export keyboard shortcuts}
*/
/*!
\page creator-how-to-change-keyboard-shortcuts.html
\if defined(qtdesignstudio)
\previouspage creator-keyboard-shortcuts.html
\nextpage studio-projects.html
\else
\previouspage creator-how-tos.html
\endif
\title Import and export keyboard shortcuts
You can use different keyboard shortcut mapping schemes that are stored as
.kms files.
To import and export keyboard shortcut mapping schemes:
\list 1
\li Select \preferences > \uicontrol Environment > \uicontrol Keyboard.
\image qtcreator-keyboard-shortcuts.png {Keyboard preferences}
\li To import a keyboard shortcut mapping scheme, click \uicontrol Import
and select the .kms file that has the keyboard shortcut mapping scheme
you want to import.
\li To export the current keyboard shortcut mapping scheme, click
\uicontrol Export and select the location where you want to save the
exported .kms file.
\endlist
\sa {Keyboard Shortcuts}, {Assign keyboard shortcuts},
{Find keyboard shortcuts}
{Import and export keyboard shortcuts}, {Enable and disable plugins}
*/

12
doc/qtcreator/src/qtquick/qtquick-live-preview-devices.qdoc
View File

@@ -4,11 +4,8 @@
/*!
\previouspage creator-live-preview-desktop.html
\page creator-live-preview-devices.html
\if defined(qtdesignstudio)
\nextpage creator-live-preview-android.html
\else
\nextpage qt-design-viewer.html
\endif
\title Previewing on Devices
To preview UIs on Android devices, you need to enable USB debugging on them
@@ -47,6 +44,7 @@
\section2 Previewing on Android Devices
\if defined(qtcreator)
The USB debugging feature on Android devices enables creating connections
to the devices from \QDS and running the preview utility on them.
@@ -63,6 +61,12 @@
is copied to them. This might take some time. Thereafter, previewing will
get faster because only the UI files need to be copied to the
device.
\else
Preview your \QDS projects with \QUV. It is an application
that runs on your Android device.
Learn more about \l{Viewing Applications on Android}.
\endif
\section2 Previewing on Boot2Qt Devices

8
doc/qtcreator/src/qtquick/qtquick-live-preview.qdoc
View File

@@ -49,14 +49,14 @@
\endif
\if defined(qtdesignstudio)
\li \l{Previewing Android applications}
Preview Android applications live using an Android emulator.
\li \l{Sharing Applications Online}
Share applications online and view them in a web browser.
\li \l{Viewing Applications on Android}
Preview your \QDS projects with \QUV. It is an application
that runs on your Android device.
\else
\li \l{Previewing in Browsers}

17
doc/qtcreator/src/qtquick/qtquick-modules-with-plugins.qdoc
View File

@@ -120,27 +120,12 @@
the emulation layer must be built with the same Qt version and compiler
as the QML modules.
On Windows, select \uicontrol Help > \uicontrol {About Qt Design Studio} to
check the Qt version and compiler that you need to use to build your plugin.
For example: \c {Based on Qt 5.15.2 (MSVC 2019, 64 bit)}.
On macOS, select \uicontrol {Qt Design Studio} >
\uicontrol {About Qt Design Studio} to see something like:
\c {Based on Qt 5.15.2 (Clang 10.0 (Apple), 64 bit)}.
\include qtdesignstudio-qt-runtime-version.qdocinc qt-runtime-version
A plugin should behave differently depending on whether it is run by the
emulation layer or an application. For example, animations should not be run
in the \uicontrol Design mode. You can use the value of the \c QML_PUPPET_MODE
environment variable to check whether the plugin is currently being run
by an application or edited in the \uicontrol Design mode.
If you want to use a different module in the \uicontrol Design mode
than in your actual application for example to mockup C++ items,
you can use \c{QML_DESIGNER_IMPORT_PATH}
in the \c{.pro} file (for qmake projects), or declare and set the property
\c qmlDesignerImportPaths in your product (for Qbs projects).
Modules in the import paths defined in \c{QML_DESIGNER_IMPORT_PATH} will be
used only in the \uicontrol Design mode.
For an example, see \l {Qt Quick Controls - Contact List}.
\endif
*/

2
doc/qtcreator/src/vcs/creator-vcs-git.qdoc
View File

@@ -10,7 +10,7 @@
/*!
\page creator-vcs-git.html
\if defined(qtdesignstudio)
\previouspage studio-developer-topics.html
\previouspage studio-finding-the-qt-runtime-version.html
\nextpage studio-porting-projects.html
\title Using Git

9
doc/qtcreatordev/src/qtcreator-documentation.qdoc
View File

@@ -387,8 +387,7 @@
separate doc build folder, not in the project folder.
To get the correct product name and version when building \QDS Manual, you
must run CMake with the branding option. The branding data is located in
the \QDS (private) repository, \c tqtc-plugin-qtquickdesigner.
must run CMake with the BUILD_DESIGNSTUDIO option.
To build docs with CMake in a separate doc build folder:
@@ -408,12 +407,12 @@
\li To also build Extending \QC Manual, add the following option:
\c {-DBUILD_DEVELOPER_DOCS=ON}
\li To also build the \QDS Manual, add the following option:
\c {"-DCMAKE_MODULE_PATH=<absolute_path_to_qtquickdesignerrepo>/studiodata/branding/"}
\c {-DBUILD_DESIGNSTUDIO=ON}
For example:
\badcode
C:\dev\qtc-doc-build>cmake -DWITH_DOCS=ON -DBUILD_DEVELOPER_DOCS=ON
"-DCMAKE_MODULE_PATH=C:\dev\tqtc-plugin-qtquickdesigner\studiodata\branding"
-DBUILD_DESIGNSTUDIO=ON
"-DCMAKE_PREFIX_PATH=C:\Qt\6.4.0\msvc2019_64"
C:\dev\qtc-super\qtcreator
\endcode
@@ -425,7 +424,7 @@
\badcode
C:\dev\qtc-doc-build>cmake -DWITH_ONLINE_DOCS=ON
-DBUILD_DEVELOPER_DOCS=ON
"-DCMAKE_MODULE_PATH=C:\dev\tqtc-plugin-qtquickdesigner\studiodata\branding"
-DBUILD_DESIGNSTUDIO=ON
"-DCMAKE_PREFIX_PATH=C:\Qt\6.4.0\msvc2019_64"
C:\dev\qtc-super\qtcreator
\endcode

20
doc/qtdesignstudio/README.md
View File

@@ -7,22 +7,4 @@ separate table of contents files for each Manual and by using defines
to hide and show information depending on which Manual is being built.
Because branding information is needed to use the correct product name and
version, you must run `qmake -r` on `qtcreator.pro` with the `IDE_BRANDING_PRI`
option set to the absolute path of `ide_branding.pri` in the Qt Design Studio
repository.
For example, on Windows enter (all on one line):
`C:\dev\qtc-super\qtcreator>..\..\..\Qt\5.14.1\msvc2017_64\bin\qmake.exe
qtcreator.pro -r
IDE_BRANDING_PRI=C:\dev\tqtc-plugin-qtquickdesigner\studiodata\branding\ide_branding.pri`
## Building the Qt Design Studio Manual
1. Run `qmake` from Qt 5.14.0, or later with the path to the branding
information as a parameter:
`<relative_path_to>\qmake.exe qtcreator.pro -r IDE_BRANDING_PRI=<absolute_path_to>\tqtc-plugin-qtquickdesigner\studiodata\branding\ide_branding.pri`
5. Run `make docs` on Linux and macOS or `nmake docs` on Windows.
The docs are generated in `qtcreator\doc\html\qtdesignstudio` with the
Qt Design Studio branding.
version.

26
doc/qtdesignstudio/examples/doc/3DsceneTutorial.qdoc
View File

@@ -22,7 +22,7 @@
\li Background images
\endlist
The assets you use in this tutorial are available in \uicontrol {Content Library}.
The assets you use in this tutorial are available in the \uicontrol {Content Library} view.
To follow this tutorial, you need to first download the starting project from
\l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/3Dscene%20tutorial/Start}{here}.
@@ -45,14 +45,14 @@
\section1 Adding Materials to the 3D Models
First, use materials from \uicontrol {Content Library} on the ball bearing.
First, use materials from the \uicontrol {Content Library} view on the ball bearing.
\list 1
\li In the \uicontrol 3D view, right-click the ball bearing and select
\uicontrol {Edit Component}.
\image 3d-scene-edit-component-menu.png
\li From \uicontrol {Content Library}, drag materials to the different parts of the ball
bearing in the \uicontrol Navigator view.
\li From the \uicontrol {Content Library} view, drag materials to the different parts of
the ball bearing in the \uicontrol Navigator view.
Drag the following materials to the following parts:
\list
\li Chrome to \e inner_race and \e outer_race.
@@ -60,8 +60,8 @@
\li Gold to \e retainer.
\li Carbon Fiber to \e shield_left and \e shield_right.
\endlist
\note The first time you use an asset from \uicontrol {Content Library}, you need to
download it.
\note The first time you use an asset from the \uicontrol {Content Library} view, you
need to download it.
\image 3d-scene-drag-material.png
\li Select \e {Screen01.ui.qml} in the breadcrumb in the top menu bar to return to the 3D
scene.
@@ -75,7 +75,7 @@
Environmental lighting is a good way to create a realistic light for your scene.
\list 1
\li In \uicontrol {Content Library}, go to the \uicontrol Environments tab.
\li In the \uicontrol {Content Library} view, go to the \uicontrol Environments tab.
\li Right-click the image \e BasicLights3_4k.hdr and select \uicontrol {Add Light Probe}.
\image 3d-scene-add-light-probe.webp
Setting an image as a light probe for a scene adds the image as the source for the image-based
@@ -89,20 +89,20 @@
you don't want to use the skybox.
\list 1
\li In the \uicontrol Navigator view, select \e sceneEnvironment.
\li In the \uicontrol Properties view, set \uicontrol {Background Mode} to
\uicontrol Transparent.
\li Go to the \uicontrol {Scene Environment} tab in \uicontrol Properties and set \uicontrol
{Background Mode} to \uicontrol Transparent.
\endlist
You also want to increase the brightness of the light a bit. In the \uicontrol Properties view,
set \uicontrol Exposure to 10.
You also want to increase the brightness of the light a bit. Go to the \uicontrol {Image Based
Lighting} tab in \uicontrol Properties and set \uicontrol Exposure to \e 10.
\section2 Adding a Background Image to the Scene
In the final step of this tutorial, you add a background image to your scene.
\list 1
\li Go to the \uicontrol Textures tab in \uicontrol {Content Library}.
\li Right-click the image \e 4kScratchySurface.png and select \uicontrol {Add Texture}
\li Go to the \uicontrol Textures tab in the \uicontrol {Content Library} view.
\li Right-click the image \e 4kScratchySurface.png and select \uicontrol {Add Texture}.
\image 3d-scene-add-texture.webp
This adds the image as a texture to the project. It is now available in the \uicontrol Assets
view.

BIN
doc/qtdesignstudio/examples/doc/images/3d-scene-add-light-probe.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
doc/qtdesignstudio/examples/doc/images/3d-scene-add-texture.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 14 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-add-assets.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-add-entry-fields.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-add-image.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-add-push-buttons.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-align-buttons.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 37 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-align-entry-fields.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-align-push-buttons.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-button-background-properties-rectangle.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-button-control-properties.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-button-styled.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-button-text-properties.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-button.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 36 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-button.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-button2-background-properties-character.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-button2-background-properties-rectangle.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-entry-field-properties.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.2 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-entry-field-styled.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 45 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-entry-field-styled.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-image-properties.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 24 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-library-assets.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 67 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-library.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 75 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-main-page.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 59 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-new-button.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-new-project.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-project-main-page.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-project.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 34 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-project.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-properties-image.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-properties-text.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-push-button-properties.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-ready.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 87 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1-ready.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui2-buttons-properties.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui2-column-properties.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui2-column-properties.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui2-field-properties.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 22 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui2-fields-properties.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 83 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui2-loginpage-ready.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 86 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui2-loginpage.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui2-logo-properties.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui2.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui3-base-state.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui3-login-state-preview.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 45 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui3-login-state-preview.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui3-login-state.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 30 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui3-login-state.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui3-new-entryfield-properties.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui3-states.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 35 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui3-states.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui4-base-state.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve-top-anchor-margin.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui4-easing-curve-top-anchor-margin.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui4-hierarchy.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui4-password-layout.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui4-states.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui4-timeline-all.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui4-timeline-final.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.9 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui4-timeline-opacity.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui4-timeline.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.7 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui4-timeline.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
doc/qtdesignstudio/examples/doc/images/loginui4-username-layout.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
doc/qtdesignstudio/examples/doc/images/studio-qt-development-kit.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

220
doc/qtdesignstudio/examples/doc/loginui1.qdoc
View File

@@ -1,4 +1,4 @@
// Copyright (C) 2021 The Qt Company Ltd.
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
@@ -10,14 +10,14 @@
\brief Illustrates how to use wizard templates to create a simple UI
that contains a text label, images, and push buttons.
\image loginui1.jpg
\image loginui1.webp
\e{Log In UI - Components} is the first tutorial in a series of tutorials
that describes how to use the \QDS wizard templates to create a project and
a button UI control, and how to modify the files generated by the wizard
templates to design the UI.
You can donwnload the completed project from
You can download the completed project from
\l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui1}{here}.
\section1 Creating the UI Project
@@ -32,52 +32,50 @@
\list 1
\li Select \uicontrol File > \uicontrol {New Project}.
\li In the \uicontrol Presets tab, select \uicontrol General >
\uicontrol {Empty}.
\uicontrol {Empty} (1).
\li In the \uicontrol Details tab:
\list
\li Enter \e Loginui1 as the name for the project. Keep in mind
\li Enter \e Loginui1 as the name (2) for the project. Keep in mind
that projects cannot be easily renamed later.
\li Select the path for the project files. You can move project
\li Select the path (3) for the project files. You can move project
folders later.
\li Set \uicontrol Width to 720 and \uicontrol Height to 1280.
\li Set \uicontrol Width (4) to 720 and \uicontrol Height (5) to 1280.
You can change the screen size later in \l Properties.
\endlist
\li Select \uicontrol Create to create the project.
\li Select \uicontrol Create (6) to create the project.
\image loginui1-new-project.webp "New Project window in Qt Design Studio."
\endlist
Your project should now look something like this in the \uicontrol Design
mode:
Your project should now look something like this in the \uicontrol Projects view:
\image loginui1-project.png "Log In UI project in the Design mode"
\image loginui1-project.webp "A new project."
The wizard constructs the \e Screen01 \l{glossary-component}{component}
using instances of a \l{basic-rectangle}{Rectangle} component that forms
using instances of a \l{basic-rectangle}{rectangle} component that forms
the background, a \l Button, and a \l Text component that displays some text.
\note The visibility of views depends on the selected workspace,
so your \QDS might look somewhat different from the above image.
To open hidden views, select \uicontrol View > \uicontrol Views
in the \uicontrol Design mode. For more information about moving
views around, see \l {Managing Workspaces}.
To open hidden views, select \uicontrol View > \uicontrol Views. For more
information about moving views around, see \l {Managing Workspaces}.
You should remove this \l Button for now from the UI
to have a clean workspace. You'll add this later in the course of the tutorial.
Then you shall know how to modify and adjust it as you need.
Remove the button and the text component from the UI to have a clean workspace. Later
in this tutorial, you will add and modify them as you need.
To remove this Button, just select it and press \key {Backspace}.
To remove this button, select it and press \key {Backspace}. Repeat for the
text component.
Next, you will edit the values of the properties of the component instances
to create the main page of the UI.
\section1 Creating the Main Page
You will now change the values of the properties of the \l Text component
instance to create a tag line using a custom font. You will add the font
as an asset and set it to be used in the properties of the component.
You will now add a text component instance to create a tag line using a custom font.
You will add the font as an asset and set it to be used in the properties of the component.
In addition, you will import a background image and logo as assets and
add them to the page as instances of the \l{Images}{Image} component.
You can download the logo and the background image from here:
Download the logo and the background image from here:
\list
\li \l{https://git.qt.io/public-demos/qtdesign-studio/-/blob/master/tutorial%20projects/Loginui1/content/images/qt_logo_green_128x128px.png}
@@ -89,70 +87,68 @@
{Benjamin DeYoung} on \l{https://unsplash.com}{Unsplash}.
\endlist
You can download the font from
Download the Titillium Web ExtraLight font from
\l{https://fonts.google.com/specimen/Titillium+Web#standard-styles}
{Titillium Web ExtraLight font} or use Arial as a substitute.
{here} or use Arial as a substitute.
To add the assets:
\list 1
\li Select \uicontrol Assets > \inlineimage icons/plus.png
(Select \uicontrol View > \uicontrol Views > \uicontrol Assets to enable it,
if you can't find it).
\image loginui1-add-assets.webp "The Assets view."
\li Select the asset files, and then select \uicontrol Open.
\li Select the location where the files will be saved in the
\uicontrol {Add Resources} dialog.
\li Select \uicontrol OK.
\endlist
To preview the changes that you make to the UI while you make
them, select the \inlineimage icons/live_preview.png
(\uicontrol {Show Live Preview}) button on the \uicontrol {2D}
view toolbar or press \key {Alt+P}.
To preview the changes that you make, select the \uicontrol {Live Preview} button
or press \key {Alt+P}.
The \e Screen01.ui.qml file that the wizard template created for you should
be open in the \uicontrol Design mode. If it is not, you can double-click it
in the \uicontrol Projects view to open it.
be open. If it is not, you can double-click it in the \uicontrol Projects view
to open it.
To modify the \e Screen01 component in the \uicontrol {2D} view:
\list 1
\li Drag-and-drop the background image (1) from \uicontrol Assets to the
\l{basic-rectangle}{Rectangle} (2) in \l Navigator.
\image loginui1-library-assets.jpg "Assets view"
\li \QDS automatically creates an instance of the \l{Images}{Image}
\li Drag the background image (1) from \uicontrol Assets to the rectangle (2)
in \l Navigator.
\image loginui1-add-image.webp "The project with the new background image."
\QDS automatically creates an instance of the \l{Images}{Image}
component for you with the path to the image file set as the
value of \l Properties > \uicontrol Image > \uicontrol Source.
\image loginui1-image-properties.png "Image properties"
\li Drag-and-drop the Qt logo from \uicontrol Assets to the rectangle
in \uicontrol Navigator and move it to the top-center of the
background image in the \uicontrol {2D} view.
\li Select \e Text in \uicontrol Navigator and drag it below the logo
in the \uicontrol {2D} view. If the text is hidden behind the
background, select \inlineimage icons/navigator-arrowdown.png
in \uicontrol Navigator to move the text as the last item in the
component tree structure. The text should then appear on top
of the background.
\li Edit text properties in \uicontrol Properties:
\list a
value of \uicontrol Properties > \uicontrol Image > \uicontrol Source.
\image loginui1-properties-image.webp "Image properties."
\li Drag the Qt logo from \uicontrol Assets to the rectangle
in \uicontrol Navigator in the same way as in the previous step and
move it to the top-center of the background image in the \uicontrol {2D} view.
\li Drag a \uicontrol Text component from \uicontrol Components >
\uicontrol {Default Components} > \uicontrol Basic to the rectangle and move it
below the logo image in the \uicontrol {2D} view.
\li Select the instance of the text component to edit the text properties in the
\uicontrol Properties view:
\list
\li In \uicontrol Component > \uicontrol ID, enter the ID
\e tagLine.
\li In \uicontrol Character > \uicontrol Text, enter the tag
line: \e {Are you ready to explore?}.
\image loginui1-text-properties.png "Text properties"
\li In \uicontrol Font, select \e {Titillium Web ExtraLight}.
\li In \uicontrol Size, first select the scale to pixels (\uicontrol px),
then set font size of the tag line to \e 50 (\uicontrol px).
\li In \uicontrol {Text color}, set the text color to white
(\e #ffffff).
\li In \uicontrol Character > \uicontrol Font, select
\e {Titillium Web ExtraLight}.
\li In \uicontrol Character > \uicontrol Size, first select the scale to pixels
(\uicontrol px), and then set font size of the tag line to \e 50 (\uicontrol px).
\li In \uicontrol Character > \uicontrol {Text color}, set the text color to
white (\e #ffffff).
\image loginui1-properties-text.webp "Text properties."
\endlist
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\endlist
Your UI should now look something like this in the \uicontrol {2D} view
and live preview:
and \uicontrol {Live Preview}:
\image loginui1-main-page.jpg "Modified UI in the Design mode"
\image loginui1-project-main-page.webp "Modified UI with background image, logo, and text."
You can resize the preview dialog to display the whole screen.
\section1 Creating a Push Button
@@ -160,7 +156,7 @@
You can use another wizard template to create a push button and to add it to
the project. The wizard template creates a reusable button component that
appears in \uicontrol Components > \uicontrol {My Components}.
You can drag-and-drop it to \l Navigator to create button instances and
You can drag it to \uicontrol Navigator to create button instances and
modify their properties in the \uicontrol Properties view to change their
appearance and functionality.
@@ -177,20 +173,16 @@
\li Select \uicontrol File > \uicontrol {New File} >
\uicontrol {Qt Quick Controls} >
\uicontrol {Custom Button} > \uicontrol Choose.
\image loginui1-new-button.webp "New File window."
\li In the \uicontrol {Component name} field, enter a name for your
button component: \e {EntryField}.
\li Select \uicontrol Finish (or \uicontrol Done on \macos) to create
the button UI file, \e EntryField.ui.qml.
\endlist
Your button should now look something like this in the \uicontrol Design
mode:
Your button should now look something like this:
\image loginui1-button.png "Button in the Design mode."
\note To open the \uicontrol States view, select it from
\uicontrol View > \uicontrol Views > \uicontrol States, if
it is not available by default.
\image loginui1-button.webp "A new button."
Next, you will change the appearance of the EntryField component by
modifying its properties.
@@ -217,30 +209,33 @@
\li In \uicontrol {Geometry - 2D} > \uicontrol Size, set button
width (\uicontrol W) to \e 500 and height (\uicontrol H)
to \e 100, to match the width of the tag line.
\li In the \uicontrol Control section, deselect the \uicontrol Hover
check box because we don't want the hover effect for the button.
\li In the \uicontrol Control section, clear the \uicontrol Hover
checkbox because we don't want the hover effect for the button.
\image loginui1-button-control-properties.webp "Control properties."
\li Select \e buttonBackground in \uicontrol Navigator to display its
properties in \uicontrol Properties.
\li In \uicontrol Rectangle > \uicontrol {Fill color}, set the color to
transparent light gray (\e #28e7e7e7) in \uicontrol Hex. You can
also use the \l{Picking Colors}{color picker} to set the color.
\li In \uicontrol {Border Color}, select white (\e #ffffff).
\li In \uicontrol Radius, enter \e 50 to give the button
rounded corners.
\li Select \e textItem in \uicontrol Navigator to display its
properties in \uicontrol Properties.
\li In \uicontrol Character > \uicontrol Font, select
\e {Titillium Web ExtraLight}.
\li In \uicontrol Size, first select the scale to pixels (\uicontrol px),
then set font size to \e 34 (\uicontrol px).
\li In \uicontrol {Text color}, set the text color to white
(\e #ffffff).
\li In \uicontrol {Alignment H}, select the \uicontrol Left button to
align the text horizontally to the left.
\li In \uicontrol Padding > \uicontrol Horizontal >
\li In \uicontrol Properties > \uicontrol Rectangle, set:
\list
\li \uicontrol {Fill color} to transparent light gray (\e #28e7e7e7).
You can also use the \l{Picking Colors}{color picker} to set the color.
\li \uicontrol {Border color} to white (\e #ffffff).
\li \uicontrol Radius to \e 50 to give the button rounded corners.
\endlist
\image loginui1-button-background-properties-rectangle.webp "Background properties."
\li Select \e textItem in \uicontrol Navigator to display its properties
in \uicontrol Properties.
\li In \uicontrol Properties > \uicontrol Character, set:
\list
\li \uicontrol Font to \e {Titillium Web ExtraLight}.
\li \uicontrol Size to \e 34 pixels (\uicontrol px).
\li \uicontrol {Text color} to white (\e #ffffff).
\li \uicontrol {Alignment H} to left to align the text horizontally to the left.
\li \uicontrol {Alignment V} to center to align the text vertically to the center.
\endlist
\li In \uicontrol Properties > \uicontrol Padding > \uicontrol Horizontal >
\uicontrol Left, set the padding in the field between background
border and text to \e 50.
\image loginui1-text-properties-button.png "Text properties"
\image loginui1-button-text-properties.webp "Text properties."
\li In the \uicontrol States view, select the \e normal state and
repeat the changes in the background color and text properties,
as necessary. Repeat for the \e down state.
@@ -250,10 +245,10 @@
Your button should now look something like this:
\image loginui1-entry-field-styled.jpg "Modified button in the 2D view"
\image loginui1-entry-field-styled.webp "Modified button in the 2D view."
\note Do not edit the value of \uicontrol Text in the \uicontrol Character
property, because this will break the connection, and later you won't be able
property because this will break the connection, and later you won't be able
to change the text in \uicontrol {Button Content} > \uicontrol Text.
Next, you will add instances of the \e EntryField component to the
@@ -266,16 +261,17 @@
\list 1
\li Double-click \e Screen01.ui.qml in \uicontrol Projects
to open it in the \uicontrol {2D} view.
\li Drag-and-drop two instances of the EntryField component from
\uicontrol Components > \uicontrol {My Components} to the rectangle
\li Drag two instances of the EntryField component (1) from
\uicontrol Components > \uicontrol {My Components} to the rectangle (2)
in \uicontrol Navigator.
\image loginui1-library.jpg "My Components tab of Components view"
\image loginui1-add-entry-fields.webp "Adding entry fields from the Components view."
\li Select the first EntryField instance in \uicontrol Navigator
to modify its ID and text in \uicontrol Properties.
\li In \uicontrol Component > \uicontrol ID, enter \e username.
\li In \uicontrol {Button Content} > \uicontrol Text, enter
\e {Username or Email} and select \uicontrol tr to mark the text
\l {Mark Strings for Translation}{translatable}.
\image loginui1-entry-field-properties.webp "Entry field properties."
\li Select the second EntryField instance, and change its ID to
\e password and text to \e Password. Again, mark the text
translatable.
@@ -283,7 +279,7 @@
selection icon appear. You can now drag the button instance
to another position in the \uicontrol {2D} view. Use the
guidelines to align the button instances below the tag line:
\image loginui1-align-buttons.jpg
\image loginui1-align-entry-fields.webp "Aligned entry fields."
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\endlist
@@ -306,21 +302,26 @@
\li In \uicontrol {Geometry - 2D} > \uicontrol Size, set button
width (\uicontrol W) to \e 500 and height (\uicontrol H)
to \e 100.
\li In the \uicontrol Control section, deselect the \uicontrol Hover
check box because we don't want the hover effect for the button.
\li In the \uicontrol Control section, clear the \uicontrol Hover
checkbox because we don't want the hover effect for the button.
\image loginui1-button-control-properties.webp "Control properties."
\li Select \e buttonBackground in \uicontrol Navigator to display its
properties in \uicontrol Properties.
\li In \uicontrol Rectangle > \uicontrol {Border color}, select the
green used in the logo (\e #41cd52).
\li In \uicontrol Radius, enter \e 50 to give the button rounded
corners.
\li In \uicontrol Properties > \uicontrol Rectangle, set:
\list
\li \uicontrol {Border color} to the green used in the logo (\e #41cd52).
\li \uicontrol Radius to \e 50 to give the button rounded corners.
\endlist
\image loginui1-button2-background-properties-rectangle.webp "Background properties."
\li Select \e textItem in \uicontrol Navigator to display
its properties in \uicontrol Properties.
\li In \uicontrol Character > \uicontrol Font, select
\e {Titillium Web ExtraLight}.
\li In \uicontrol Size, first select the scale to pixels (\uicontrol px),
then set font size to \e 34 (\uicontrol px).
\li In \uicontrol {Text color}, set the text color to \e #41cd52.
\li In \uicontrol Properties > \uicontrol Character, set:
\list
\li \uicontrol Font to \e {Titillium Web ExtraLight}.
\li \uicontrol Size to \e 34 pixels (\uicontrol px).
\li \uicontrol {Text color} to (\e #41cd52).
\endlist
\image loginui1-button2-background-properties-character.webp "Text properties."
\li In the \uicontrol States view, select the \e normal state and repeat
the changes, as necessary.
\li Repeat for the \e down state. However, in \uicontrol Rectangle >
@@ -332,6 +333,10 @@
to save your changes.
\endlist
Your button should now look something like this:
\image loginui1-button-styled.webp "Modified push button in the 2D view."
\section1 Adding Push Buttons to the UI
You will now add PushButton instances to the UI and modify their properties.
@@ -339,18 +344,21 @@
\list 1
\li Double-click \e Screen01.ui.qml in \uicontrol Projects
to open it in the \uicontrol {2D} view.
\li Drag-and-drop two instances of the PushButton component from
\uicontrol Components > \uicontrol {My Components} to the rectangle
\li Drag two instances of the PushButton component (1) from
\uicontrol Components > \uicontrol {My Components} to the rectangle (2)
in \uicontrol Navigator.
\image loginui1-add-push-buttons.webp "Adding push buttons from the Components view."
\li Drag the button instances to the bottom of the background image in
the \uicontrol {2D} view. Use the guidelines to align the button
instances horizontally with the entry fields.
\image loginui1-align-push-buttons.webp "Aligned push buttons."
\li Select the first PushButton instance in \uicontrol Navigator
to modify its ID and text label in \uicontrol Properties.
\li In \uicontrol Component > \uicontrol ID, enter \e login.
\li In \uicontrol {Button Content} > \uicontrol Text, enter
\e Continue and select \uicontrol tr to mark the text
translatable.
\image loginui1-push-button-properties.webp "Push button properties."
\li Select the second PushButton instance, and change its ID to
\e createAccount and text label to \e {Create Account}. Again,
mark the text translatable.
@@ -359,9 +367,9 @@
\endlist
The first iteration of your UI is now ready and should now look something
like this in the \uicontrol {2D} view and live preview:
like this in the \uicontrol {2D} view and \uicontrol {Live Preview}:
\image loginui1-ready.jpg "The finished UI in the 2D view"
\image loginui1-ready.webp "The finished UI in the 2D view and live preview."
\section1 Learn More
The \e {Learn More} sections provide additional information about the
@@ -462,7 +470,7 @@
weight, style, and spacing.
If you want to create a label with a background, use the \l Label component
from the \uicontrol {Qt Quick Controls} module instead of the Text component.
from the \uicontrol {Qt Quick Controls} module instead of the text component.
\section3 Image Properties

127
doc/qtdesignstudio/examples/doc/loginui2.qdoc
View File

@@ -1,4 +1,4 @@
// Copyright (C) 2021 The Qt Company Ltd.
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
@@ -11,7 +11,7 @@
\brief Illustrates how to position UI components on pages using anchors and
positioners.
\image loginui1.jpg "Log In UI"
\image loginui2.webp "Log In UI"
\e{Log In UI - Positioning} is the second in a series of tutorials that build
on each other to illustrate how to use \QDS to create a simple UI with
@@ -24,10 +24,10 @@
with different screen sizes, you will use anchors and positioners.
The starting point for this tutorial is the completed
\l{Log In UI - Components} project. You can download the project from
\l{Log In UI - Components} project. You can download the project
\l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui1}{here}.
Additionally, you can download the completed project of this tutorial from
Additionally, you can download the completed project of this tutorial
\l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui2}{here}.
The \e {Learn More} sections provide additional information about the
@@ -39,22 +39,14 @@
static page elements, background image (\e adventurePage), logo
(\e qt_logo_green_128x128px), and tag line (\e tagLine), to the page.
When you created the project using the project wizard template
in \l {Log In UI - Components}, the wizard template anchored \e tagLine to
the vertical and horizontal center of the page. Therefore, you will only
need to replace the vertical anchor of \e tagLine with a top anchor and
adjust the margins to align it with \e qt_logo_green_128x128px on the page.
To preview the changes that you make to the UI while you make
them, select the \inlineimage icons/live_preview.png
(\uicontrol {Show Live Preview}) button on the \l {2D} view
toolbar or press \key {Alt+P}.
To preview the changes that you make, select the \uicontrol {Live Preview} button
or press \key {Alt+P}.
To anchor component instances on a page:
\list 1
\li Open \e {Screen01.ui.qml} for editing in the
\uicontrol {2D} view.
\l {2D} view.
\li Select \e adventurePage in the \l Navigator view to display its
properties in the \l Properties view.
\li In \uicontrol Properties > \uicontrol Layout, select
@@ -62,27 +54,38 @@
anchor button to anchor \e adventurePage to its
parent in the \uicontrol Target field. This attaches the background
image to the rectangle on all sides.
Note: Selecting the anchor button should automatically select the
four buttons on the left side of it. If it doesn't, refresh the
\note Selecting the anchor button should automatically select the
four buttons on the left side of it. If it doesn't, select
\inlineimage icons/reset.png on the \uicontrol {2D} view toolbar to refresh the
\uicontrol{2D} view.
\image loginui2-layout.png "Layout properties"
\li Select \e qt_logo_green_128x128px in \l Navigator.
\li In \uicontrol Properties > \uicontrol Layout, select the
\inlineimage icons/anchor-top.png
and \inlineimage icons/anchor-center-horizontal.png
anchor buttons to anchor \e qt_logo_green_128x128px to the top of
its parent in the \uicontrol Target field with a 40-pixel margin
and to center it horizontally. This attaches the logo to the
rectangle at the top, while keeping its horizontal center aligned
with that of the rectangle.
\li Select \e qt_logo_green_128x128px in \uicontrol Navigator.
\li In \uicontrol Properties > \uicontrol Layout, set:
\list
\li \uicontrol Anchors to \inlineimage icons/anchor-top.png and
\inlineimage icons/anchor-center-horizontal.png.
\li \uicontrol Target \inlineimage icons/anchor-top.png to \e parent to anchor
the logo to its parent.
\li \uicontrol Margin \inlineimage icons/anchor-top.png to \e 40 and
select \inlineimage icons/anchor-top.png to anchor the logo to the top of
the target.
\endlist
This attaches the logo to the rectangle at the top while keeping its horizontal
center aligned with that of the rectangle.
\image loginui2-logo-properties.webp "Logo Layout properties"
\li Select \e tagLine in \uicontrol Navigator.
\li In \uicontrol Properties > \uicontrol Layout,
select the \inlineimage icons/anchor-top.png
button and then select \e qt_logo_green_128x128px
as \uicontrol Target to anchor \e tagLine with a 40-pixel margin.
This attaches the top of the tag line to the
bottom of the logo, while keeping its horizontal center aligned
with that of the rectangle.
\li In \uicontrol Properties > \uicontrol Layout, set:
\list
\li \uicontrol Anchors to \inlineimage icons/anchor-top.png and
\inlineimage icons/anchor-center-horizontal.png.
\li \uicontrol Target \inlineimage icons/anchor-top.png to
\e qt_logo_green_128x128px to anchor the tag line to the logo.
\li \uicontrol Margin \inlineimage icons/anchor-top.png to \e 40 and
select \inlineimage icons/anchor-bottom.png to anchor the tag line to the
bottom of the target.
\endlist
This attaches the tag line to the bottom of the logo while keeping its horizontal
center aligned with that of the rectangle.
\image loginui2-layout-text.png "Text Layout properties"
\note You can anchor component instances to their parent and sibling
components. If a component instance is not listed in the
@@ -94,10 +97,10 @@
to save your changes.
\endlist
Your page now should look something like this in the \uicontrol Design mode
and live preview:
Your page should now look something like this in the \uicontrol {2D} view
and \uicontrol {Live Preview}:
\image loginui2-loginpage.jpg "Login page in the Design mode and live preview"
\image loginui2-loginpage.webp "Login page in the 2D view and live preview"
\section1 Using Column Positioners
@@ -113,46 +116,60 @@
(press and hold the \key Shift or \key Ctrl key for
\l {Multiselection}{multiple selection}), and right-click
either of them to open a context menu.
\li Select \uicontrol Position > \uicontrol {Position in Column}
\li Select \uicontrol Positioner > \uicontrol {Column Positioner}
to position the fields on top of each other in the
\uicontrol {2D} view.
\li Select the column in \uicontrol Navigator and change its ID
to \e fields in \uicontrol Properties.
\li In \uicontrol Column > \uicontrol Spacing, set the spacing between
the fields to 20 pixels.
\image loginui2-column-properties.png "Column properties"
the fields to \e 20.
\image loginui2-column-properties.webp "Column properties"
\li Select \e login and \e createAccount, and then select
\uicontrol Position > \uicontrol {Position in Column} to position
\uicontrol Positioner > \uicontrol {Column Positioner} to position
them in a column.
\li Select the button column, change its ID to \e buttons, and
set the spacing between the buttons to 20 pixels, as above.
set the spacing between the buttons to \e 20, as above.
\endlist
You will now anchor the field and button columns to the page:
\list 1
\li Select \e fields in \uicontrol Navigator.
\li In \uicontrol Properties > \uicontrol Layout, select the
\inlineimage icons/anchor-top.png
button to anchor the top of the fields column to
the bottom of \e tagLine with a 170-pixel margin.
\li Select the \inlineimage icons/anchor-center-horizontal.png
button to anchor the column horizontally to its parent.
\li In \uicontrol Properties > \uicontrol Layout, set:
\list
\li \uicontrol Anchors to \inlineimage icons/anchor-top.png and
\inlineimage icons/anchor-center-horizontal.png.
\li \uicontrol Target \inlineimage icons/anchor-top.png to
\e tagLine to anchor the entry fields to the tag line.
\li \uicontrol Margin \inlineimage icons/anchor-top.png to \e 170 and
select \inlineimage icons/anchor-bottom.png to anchor the entry fields to the
bottom of the target.
\endlist
This attaches the entry fields to the bottom of the tag line while keeping its
horizontal center aligned with that of the rectangle.
\image loginui2-fields-properties.webp "Properties of fields"
\li Select \e buttons in \uicontrol Navigator.
\li In \uicontrol Properties > \uicontrol Layout, select the
\inlineimage icons/anchor-bottom.png
button to anchor the button column to the bottom of its parent
with a 50-pixel margin.
\li Select the \inlineimage icons/anchor-center-horizontal.png
button to anchor the column horizontally to its parent.
\li In \uicontrol Properties > \uicontrol Layout, set:
\list
\li \uicontrol Anchors to \inlineimage icons/anchor-bottom.png and
\inlineimage icons/anchor-center-horizontal.png.
\li \uicontrol Target \inlineimage icons/anchor-bottom.png to
\e parent to anchor the entry fields to the rectangle.
\li \uicontrol Margin \inlineimage icons/anchor-bottom.png to \e 50 and
select \inlineimage icons/anchor-bottom.png to anchor the entry fields to the
bottom of the target.
\endlist
This attaches the buttons to the bottom of the rectangle while keeping its
horizontal center aligned with that of the rectangle.
\image loginui2-buttons-properties.webp "Properties of buttons"
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\endlist
The second iteration of your UI is now ready and should look something like
this in the \uicontrol Design mode and live preview:
this in the \uicontrol {2D} view and \uicontrol {Live Preview}:
\image loginui2-loginpage-ready.jpg "Login page in the Design mode and live preview"
\image loginui2-loginpage-ready.webp "Login page in the 2D view and live preview"
\section1 Learn More
\section2 Anchors

106
doc/qtdesignstudio/examples/doc/loginui3.qdoc
View File

@@ -1,4 +1,4 @@
// Copyright (C) 2021 The Qt Company Ltd.
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
@@ -17,7 +17,7 @@
some basic UI components, such as pages, buttons, and entry fields. The
third tutorial in the series describes how to use \e states to add a
second page to the UI. On the first page, users can enter a username
and password to log in. On the second page, they can register if they
and password to log in. On the second page, they can register as users if they
do not already have an account.
Because the second page will contain most of the same UI components as the
@@ -25,25 +25,22 @@
when a user selects the \e {Create Account} button.
The starting point for this tutorial is the completed
\l{Log In UI - Positioning} project. You can download the project from
\l{Log In UI - Positioning} project. You can download the project
\l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui2}{here}.
Additionally, you can download the completed project of this tutorial from
Additionally, you can download the completed project of this tutorial
\l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui3}{here}.
The \e {Learn More} sections provide additional information relevant to the
task at hand.
For more information, see \l{Working with states} and \l{Signal and Handler Event System}.
\section1 Adding UI Components
You will add another entry field for verifying the password that users
enter to create an account. You are already familiar with the tasks in
this section from previous parts of the tutorial.
this section from the previous \e {Login UI} tutorials.
To preview the changes that you make to the UI while you make
them, select the \inlineimage icons/live_preview.png
(\uicontrol {Show Live Preview}) button on the \l {2D} view
toolbar or press \key {Alt+P}.
To preview the changes that you make, select the \uicontrol {Live Preview} button
or press \key {Alt+P}.
To add the entry field needed on the second page to the \e Screen01
component:
@@ -51,16 +48,17 @@
\list 1
\li Double-click \e Screen01.ui.qml in \uicontrol Projects to open it
in the \uicontrol {2D} view.
\li Drag-and-drop an instance of the EntryField component from
\li Drag an instance of the EntryField component from
\uicontrol Components > \uicontrol {My Components} to \e fields in
\l Navigator.
\li Select the EntryField instance in \uicontrol Navigator to modify
its ID and text in \uicontrol Properties.
\li In \uicontrol Component > \uicontrol ID, enter
\e repeatPassword.
\li In \uicontrol {Button Content} > \uicontrol Text, enter
\e {Repeat Password} and select \uicontrol tr to mark the text
\li In \uicontrol {EntryField} > \uicontrol {Button Content} > \uicontrol Text,
enter \e {Repeat Password} and select \uicontrol tr to mark the text
translatable.
\image loginui3-new-entryfield-properties.webp "Entryfield properties"
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\endlist
@@ -68,10 +66,10 @@
\e Screen01 should now look something like this in the
\uicontrol {2D} view:
\image loginui3-base-state.jpg "Login page with a Repeat Password field"
\image loginui3-base-state.webp "Login page with a Repeat Password field"
Next, you will add states for the login page and the account creation page,
where you use the visibility property to hide the repeat password field on
where you use the visibility property to hide the \e {Repeat Password} field on
the login page and the \e {Create Account} button on the account creation
page.
@@ -84,23 +82,20 @@
\li In the \l States view, select \inlineimage icons/plus.png
.
\li Enter \e login as the state name.
\image loginui3-login-state.jpg "States view"
\image loginui3-login-state.webp "States view"
\li Select \e repeatPassword in \uicontrol Navigator to display its
properties in \uicontrol Properties.
\li In the \uicontrol Visibility section, deselect the
\uicontrol Visible check box to hide the repeat
password field in the login state.
\li In the \uicontrol Visibility section, clear the
\uicontrol Visible checkbox to hide the \e {Repeat Password} field in the login state.
\image loginui3-visibility.png
\li In \uicontrol States, select \inlineimage icons/action-icon.png
for \e login to open the \uicontrol Actions menu, and then
select \uicontrol {Set as Default} to determine that the \e login
state is applied when the application starts.
\li In \uicontrol States, select \uicontrol Default for \e login to determine that the
\e login state is applied when the application starts.
\li With the base state selected, add another state and name it
\e createAccount. This state should now look identical to the base
state.
\li Select \e createAccount in the \uicontrol Navigator to display its
\li Select the \e createAccount button in \uicontrol Navigator to display its
properties in \uicontrol Properties.
\li In \uicontrol Visibility, deselect the \uicontrol Visible check box
\li In \uicontrol Visibility, clear the \uicontrol Visible checkbox
to hide the \e {Create Account} button in the account creation
state.
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
@@ -109,14 +104,14 @@
You can now see all the states in the \uicontrol States view:
\image loginui3-states.jpg "All states in the States view"
\image loginui3-states.webp "All states in the States view"
The live preview displays the default state, \e login:
\image loginui3-login-state-preview.jpg "Preview of the login state"
\image loginui3-login-state-preview.webp "Preview of the login state"
Next, you will create connections to specify that clicking the
\uicontrol {Create Account} button on the login page triggers a
\e {Create Account} button on the login page triggers a
transition to the account creation page.
\section1 Connecting Buttons to States
@@ -137,7 +132,7 @@
\li In the \uicontrol Connections tab, select the \inlineimage icons/plus.png
button to open the connection setup options.
\li Set \uicontrol Signal to \c clicked, \uicontrol Action to
\c {Change State}, \uicontrol {State Group} to \c rectangle and
\c {Change State}, \uicontrol {State Group} to \c rectangle, and
\uicontrol State to \c createAccount in the respective
drop-down menus.
\li Select the \inlineimage icons/close.png
@@ -148,60 +143,19 @@
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\note Or, you can right-click the \e createAccount button in \l Navigator.
Then select \uicontrol {Connections} > \uicontrol {Add signal handler} >
\uicontrol {clicked} > \uicontrol {Change State to createAccount}.
\note Alternatively, right-click the \e createAccount button in
\uicontrol Navigator. Then select \uicontrol {Connections} >
\uicontrol {Add new Connection} > \uicontrol {clicked} >
\uicontrol {Change State to createAccount}.
\endlist
In the live preview, you can now click the \uicontrol {Create Account}
In the live preview, you can now click the \e {Create Account}
button to go to the account creation page.
\image loginui3.gif "Moving between login page and account creation page"
\section1 Learn More
\section2 States
The \l{Working with States}{state} of a particular visual component is the set of
information which describes how and where the individual parts of the visual
component are displayed within it, and all the data associated with that
state. Most visual components in a UI will have a limited number of states,
each with well-defined properties.
For example, a list item may be either selected or not, and if
selected, it may either be the currently active single selection or it
may be part of a selection group. Each of those states may have certain
associated visual appearance (neutral, highlighted, expanded, and so on).
Youn can apply states to trigger behavior or animations. UI components
typically have a default state that contains all of a component's initial
property values and is therefore useful for managing property values before
state changes.
You can specify additional states by adding new states. Each state within a
component has a unique name. To change the current state of an component,
the state property is set to the name of the state. State changes can be
bound to conditions by using the \c when property.
\section2 Signal and Event Handlers
UI components need to communicate with each other. For example, a button
needs to know that the user has clicked on it. In response, the button may
change color to indicate its state and perform an action.
To accomplish this, a \e {signal-and-handler} mechanism is used, where the
\e signal is the event that is responded to through a \e {signal handler}.
When a signal is emitted, the corresponding signal handler is invoked.
Placing logic, such as a script or other operations, in the handler allows
the component to respond to the event.
For more information, see \l{Signal and Handler Event System}.
\section1 Next Steps
For a more complicated UI, you would typically use components that specify
a view of items provided by a model, such as a \l{List and Grid Views}
{List View} or \l StackView. For more information, see
\l{Lists and Other Data Models}.
To learn how to use a timeline to animate the transition between the login
and account creation pages, see the next tutorial in the series,
\l {Log In UI - Timeline}.

226
doc/qtdesignstudio/examples/doc/loginui4.qdoc
View File

@@ -1,4 +1,4 @@
// Copyright (C) 2021 The Qt Company Ltd.
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
@@ -16,7 +16,9 @@
on each other to illustrate how to use \QDS to create a simple UI with
some basic UI components, such as pages, buttons, and entry fields. The
fourth part of the tutorial describes how to use the timeline and states
to animate UI components.
to animate UI components. The result of this final tutorial is a UI similar
to the preceding animation, where you can navigate to the account creation
page by clicking the \e {Create Account} button.
In \l {Log In UI - States}, you learned how to use states to simulate page
changes in a UI and connections to provide user interaction with it. In
@@ -25,15 +27,14 @@
to states.
The starting point for this tutorial is the completed
\l{Log In UI - States} project. You can download the project from
\l{Log In UI - States} project. You can download the project
\l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui3}{here}.
Additionally, you can download the completed project of this tutorial from
Additionally, you can download the completed project of this tutorial
\l{https://git.qt.io/public-demos/qtdesign-studio/-/tree/master/tutorial%20projects/Loginui4}{here}.
The \e {Learn More} sections provide additional information relevant to the
task at hand.
For more information, see \l {Creating Timeline Animations}.
\section1 Animating UI Components
@@ -43,76 +44,80 @@
will first remove the states.
Then, you will add a timeline and insert keyframes for the opacity property
to hide the \e {Retype Password} field on the login page and the
to hide the \e {Repeat Password} field on the login page and the
\e {Create Account} button on the account creation page. Because we want the
retype password field to appear to slide down from the password field, you
\e {Repeat Password} field to appear to slide down from the \e Password field, you
will also need to insert a keyframe for its anchor margin property. To be
able to animate the anchor, you also need to pull out the fields from the
column component and anchor them to the rectangle and to each other instead.
To preview the changes that you make to the UI while you make
them, select the \inlineimage icons/live_preview.png
(\uicontrol {Show Live Preview}) button on the \uicontrol Design
mode \l {Summary of Main Toolbar Actions}{toolbar} or press \key {Alt+P}.
To preview the changes that you make, select the \uicontrol {Live Preview} button
or press \key {Alt+P}.
\section2 Replacing Columns with Anchors
First, you will prepare the \e Screen01 component for adding animation:
First, prepare the \e Screen01 component for adding animation:
\list 1
\li Double-click \e Screen01.ui.qml in \l Projects to open it
in the \l {2D} view.
\li In the \l States view, select \e login, and then select
\inlineimage icons/close.png
to remove the state. Repeat for the \e createAccount state.
\li Select \e username in \l Navigator, and then select
\inlineimage icons/arrowleft.png
to move it into the parent rectangle to prepare for
deleting the \e fields column component instance.
\li Select \inlineimage icons/navigator-arrowup.png
to move \e username below \e tagLine in \uicontrol Navigator
to preserve the \l{Arranging Components}{component hierarchy}.
\li Repeat step 3 and 4 for \e password and \e repeatPassword.
\li In the \l States view, select \e login > \inlineimage icons/more-button.png
> \uicontrol Delete to remove the state. Repeat for the \e createAccount state.
\li Select \e username in \l Navigator, and then select:
\list
\li \inlineimage icons/arrowleft.png to move \e username into the parent
rectangle.
\li \inlineimage icons/navigator-arrowup.png to move \e username below
\e tagLine in \uicontrol Navigator to preserve the
\l{Arranging Components}{component hierarchy}.
\endlist
\li Repeat the previous step for \e password and \e repeatPassword.
\li Select \e fields in \uicontrol Navigator and press \key Delete to
delete it.
\li Select \e username in \uicontrol Navigator to display its properties
in \l Properties.
\li Select \uicontrol Layout > \inlineimage icons/anchor-top.png
to anchor the top of \e username to the bottom of \e tagLine in the
\uicontrol Target field. \QDS will suggest an appropriate margin
based on the current position of the field on the y axis, 170
pixels.
\li Select \inlineimage icons/anchor-center-horizontal.png
to anchor \e username horizontally to its parent in the
\uicontrol Target field.
\li Select \e password in \uicontrol Navigator to display its properties
in \uicontrol Properties.
\li Select \uicontrol Layout > \inlineimage icons/anchor-top.png
to anchor the top of \e password to the bottom of \e username in
the \uicontrol Target field with a 20-pixel margin.
\li Select \inlineimage icons/anchor-center-horizontal.png
to anchor \e password horizontally to its parent in the
\uicontrol Target field.
\li Repeat the above steps to anchor the top of \e repeatPassword
to the bottom of \e password with a 20-pixel margin and to
\image loginui4-hierarchy.webp "The hierarchy of the components."
\li Select \e username in \uicontrol Navigator.
\li In \uicontrol Properties > \uicontrol Layout, set:
\list
\li \uicontrol Anchors to \inlineimage icons/anchor-top.png and
\inlineimage icons/anchor-center-horizontal.png.
\li \uicontrol Target \inlineimage icons/anchor-top.png to
\e tagLine to anchor \e username to the tag line.
\li \uicontrol Margin \inlineimage icons/anchor-top.png to \e 170 and
select \inlineimage icons/anchor-bottom.png to anchor \e username to the
bottom of the target.
\note Selecting the anchor button should automatically update the
\uicontrol {2D} view. If it doesn't, select \inlineimage icons/reset.png
on the \uicontrol {2D} view toolbar to refresh the \uicontrol{2D} view.
\endlist
This attaches \e username to the bottom of the tag line while keeping its
horizontal center aligned with that of the rectangle.
\image loginui4-username-layout.webp "The layout of username entry field."
\li Select \e password in \uicontrol Navigator.
\li In \uicontrol Properties > \uicontrol Layout, set:
\list
\li \uicontrol Anchors to \inlineimage icons/anchor-top.png and
\inlineimage icons/anchor-center-horizontal.png.
\li \uicontrol Target \inlineimage icons/anchor-top.png to
\e username to anchor \e password to \e username.
\li \uicontrol Margin \inlineimage icons/anchor-top.png to \e 20 and
select \inlineimage icons/anchor-bottom.png to anchor \e password to the
bottom of the target.
\endlist
This attaches \e password to the bottom of \e username while keeping its
horizontal center aligned with that of the rectangle.
\image loginui4-password-layout.webp "The layout of password entry field."
\li Repeat the previous step to anchor the top of \e repeatPassword
to the bottom of \e password with a margin of \e 20 and to
anchor it horizontally to its parent.
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\endlist
You could also animate the y-position property of the repeat password
field for a similar effect. In that case, you would need to use absolute
positioning for the field. This is less flexible if you export your
design from a design tool, such as Adobe Photoshop, and decide to change
your design and export it again at some point. In that case, the margins
would probably stay the same, even if the positions of the fields on the
page would change.
\e Screen01 should not display visible changes in the \uicontrol {2D} view:
\image loginui3-base-state.jpg "UI with all the buttons and fields in the Design mode"
\image loginui4-base-state.webp "UI with all the buttons and fields"
\section2 Adding a Timeline and Animation Settings
\section2 Adding a Timeline
You are now ready to add the \l{Creating Timeline Animations}{timeline}.
@@ -122,24 +127,23 @@
\li Select \uicontrol View > \uicontrol Views >
\uicontrol Timeline to open the \l Timeline view.
\li In \uicontrol Timeline, select \inlineimage icons/plus.png
to add a 1000-frame timeline and settings for running the animation.
\image loginui4-timeline-settings.png
to add a 1000-frame timeline and define settings for running the animation.
\li In the \uicontrol {Animation ID} field, enter
\e toCreateAccountState.
\li Deselect the \uicontrol {Running in base state} check box because
\li Clear the \uicontrol {Running in base state} checkbox because
you want the animation to run only after the user clicks the
\uicontrol {Create Account} button. You can use the default settings
\e {Create Account} button. Use the default settings
for the other fields.
\li Select \uicontrol Close in the \uicontrol {Timeline Settings} view
to save the timeline and the animation settings.
\image loginui4-timeline-settings.png
\endlist
Next, you will record the animation in \uicontrol Timeline.
\section2 Inserting Keyframes
You will now insert keyframes and record property changes in
\uicontrol Timeline:
To insert keyframes and record property changes in \uicontrol Timeline:
\list 1
\li Select \e repeatPassword in \uicontrol Navigator to display its
@@ -150,39 +154,41 @@
opacity property of the component.
\image loginui4-keyframe-opacity.png "Inserting keyframe for opacity property"
\li In \uicontrol Timeline, check that the playhead is in
frame 0, and select the \inlineimage icons/recordfill.png
frame \e 0, select the small arrow next to \e repeatPassword
keyframe to expand it, and then select the \inlineimage icons/recordfill.png
(\uicontrol {Per Property Recording}) button for the
\uicontrol opacity property of \e repeatPassword to start
recording property changes.
\image loginui4-timeline-opacity.png "Record button for the opacity property"
\li In the field next to the opacity property name on that same line,
type 0 to hide the button, and press \key Enter to save the value.
\li Move the playhead to frame 1000 and change the opacity value to 1
\li In \uicontrol Visibility > \uicontrol Opacity, type \e 0 to hide the button, and press
\key Enter to save the value.
\li Move the playhead to frame \e 1000 and change the opacity value to \e 1
to show the button.
To fine-tune the value of a keyframe, you can also right-click the
Alternatively, you can fine-tune the value of a keyframe by right-clicking the
keyframe marker \inlineimage icons/keyframe_linear_active.png
, and select \uicontrol {Edit Keyframe}.
, and selecting \uicontrol {Edit Keyframe}.
\image loginui4-timeline.webp "Recording the opacity property"
\li Select the record button again to stop recording property changes.
If you forget this, all the following changes will be recorded, and
the results will be unpredictable.
\li Select \e createAccount in \uicontrol Navigator, and repeat
the above steps to insert a keyframe for the \uicontrol Opacity
property of the button and to record changes for it. However, this
time the opacity value needs to be 1 in frame 0 and 0 in frame 1000.
time the opacity value needs to be \e 1 in frame \e 0 and \e 0 in frame \e 1000.
\image loginui4-timeline-opacity.webp "Recorded timeline for the opacity properties"
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\endlist
When you move the playhead along the timeline, you can see how the create
account button fades out while the repeat password field fades in.
When you move the playhead along the timeline, you can see how the \e {Create Account}
button fades out while the \e {Repeat Password} field fades in.
You will now animate the top anchor margin of the repeat password field
to make it appear to slide down from the password field.
You will now animate the top anchor margin of the \e {Repeat Password} field
to make it appear to slide down from the \e Password field.
\section2 Animating Anchors
To animate the top anchor margin of the repeat password field:
To animate the top anchor margin of the \e {Repeat Password} field:
\list 1
\li Select \e repeatPassword in \uicontrol Navigator to display its
@@ -194,16 +200,17 @@
anchor margin of \e repeatPassword.
\image loginui4-keyframe-top-anchor-margin.png "Inserting keyframe for top anchor margin"
\li In \uicontrol Timeline, check that the playhead is in
frame 0, and select the record button for the \e anchors.topMargin
frame \e 0, and select the record button for the \e anchors.topMargin
property of \e repeatPassword.
\li In the field next to the property, set a negative value for the
top anchor margin, -100, to place \e repeatPassword on top of
\e password.
\li Move the playhead to frame 1000 and change the top anchor margin
to 20, so that, combined with the change in the \uicontrol Opacity
\li In \uicontrol Layout > \uicontrol Margin (under \inlineimage icons/anchor-top.png),
set a negative value for the top anchor margin, \e -100, to place \e repeatPassword
on top of \e password.
\li Move the playhead to frame \e 1000 and change the top anchor margin
to \e 20, so that, combined with the change in the \uicontrol Opacity
value, \e repeatPassword appears to slide down and settle below
\e password.
\li Select the record button again to stop recording property changes.
\image loginui4-timeline-all.webp "Recorded timeline for repeatPassword and createAccount."
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\endlist
@@ -215,9 +222,9 @@
\list 1
\li Click the keyframe marker \inlineimage icons/keyframe_linear_active.png
for the \e anchors.topMargin property at frame 1000 on the
for the \e anchors.topMargin property at frame \e 1000 on the
timeline to select it.
\image loginui4-easing-curve-top-anchor-margin.png "Top anchor margin keyframe marker"
\image loginui4-easing-curve-top-anchor-margin.webp "Top anchor margin keyframe marker"
\li Right-click the keyframe marker to open a context menu, and
select \uicontrol {Edit Easing Curve} to add an easing curve
to the animation.
@@ -233,73 +240,46 @@
Your timeline should now look something like this:
\image loginui4-timeline.png "Timeline view with the recorded property changes"
\image loginui4-timeline-final.webp "Timeline view with the recorded property changes"
Next, you'll create states for the login and account creation pages and bind
Next, you will create states for the login and account creation pages and bind
them to the animation settings.
\section1 Binding Animation to States
You will now bring back the \l{Working with States}{states} in the
To bring back the \l{Working with States}{states} in the
\uicontrol States view and bind them to the animation settings
in \uicontrol Timeline:
\list 1
\li In \uicontrol States, select \inlineimage icons/plus.png
twice to add two states called \e login and \e createAccount. You
twice to add two states and name them \e login and \e createAccount. You
don't need to make any property changes this time because you'll
bind the states to property animations.
\li In \uicontrol States, select \inlineimage icons/action-icon.png
for \e login to open the \uicontrol Actions menu, and then
select \uicontrol {Set as Default} to determine that the \e login
state is applied when the application starts.
\li In \uicontrol Timeline, select the \inlineimage icons/animation.png
(\uicontrol {Timeline Settings (S)}) button on the toolbar (or press
\key S) to open the \uicontrol {Timeline Settings} dialog.
\image loginui4-timeline-settings-states.png
\li In \uicontrol States, select \uicontrol Default for \e login to determine that
the \e login state is applied when the application starts.
\image loginui4-states.webp "Created states in the States view."
\li With the base state selected, select \uicontrol Timeline >
\inlineimage icons/settings.png (\uicontrol {Timeline Settings (S)}) on the toolbar
(or press \key S) to open the \uicontrol {Timeline Settings} dialog.
\li Double-click the cell in the \uicontrol Timeline column on the
\e login row, and select \e timeline in the list.
\li Double-click the cell in the \uicontrol Timeline column on the
\e createAccount row, and select \e timeline in the list.
\li Double-click the cell in the \uicontrol Animation column on the
\e createAccount row, and select \e toCreateAccountState.
\image loginui4-timeline-settings-states.png
\li Click \uicontrol Close to save the timeline settings.
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
to save your changes.
\endlist
In the live preview, you can now click the \uicontrol {Create Account}
In the live preview, you can now click the \e {Create Account}
button to go to the account creation page.
\image loginui4.gif "Moving between login page and account creation page"
\section2 Learn More - Timeline
The Qt Quick Timeline module provides components to use timelines and
keyframes to animate component properties in UIs. Animating properties
enables their values to move through intermediate values instead of
immediately changing to the target value.
The Keyframe component specifies the value of a keyframe on a timeline. \QDS
automatically adds keyframes between two keyframes, and sets their values
evenly to create an appearance of movement or transformation.
An easing curve can be attached to the keyframe to change the appearance
of the animation. For more information about easing curve types, see the
documentation for \l [QML] {PropertyAnimation}{easing curves}.
To be able to use the functionality of Timeline components, \QDS adds
the following \e import statement to the UI files where it uses the
components:
\quotefromfile Loginui4/content/Screen01.ui.qml
\skipto QtQuick.Timeline
\printuntil 1.0
All the properties and functions of the components from this module are
available in the \uicontrol Design mode, and therefore it is enough to
learn how to use \uicontrol Timeline, as described in
\l {Creating Timeline Animations}.
\section1 Next Steps
For more examples about using timelines, see \l{Examples}.
To continue learning about \QDS, see \l{Examples} and other \l{Tutorials}.
*/

BIN
doc/qtdesignstudio/images/android-studio-avd-manager.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 32 KiB

BIN
doc/qtdesignstudio/images/android-studio-sdk-manager.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 32 KiB

BIN
doc/qtdesignstudio/images/android-studio-sdk-tools.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 85 KiB

BIN
doc/qtdesignstudio/images/icons/assign-effect-composer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
doc/qtdesignstudio/images/icons/dragmarks-effect-composer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
doc/qtdesignstudio/images/icons/more-button.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
doc/qtdesignstudio/images/icons/save-as-effect-composer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
doc/qtdesignstudio/images/icons/save-effect-composer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 314 B

BIN
doc/qtdesignstudio/images/icons/studio-clear-effect-stack.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
doc/qtdesignstudio/images/json-new-property.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

BIN
doc/qtdesignstudio/images/json-text-binding.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

Some files were not shown because too many files have changed in this diff Show More