Doc: Convert the docs to sentence case

Fixes: QDS-14226

-\titles, \section1, \section2 etc.
- some minor grammar fixes, \uicontrols etc.

Change-Id: Ifc0c7af5f5c7374377d818da7a0a5c147005da49
Reviewed-by: Mats Honkamaa <mats.honkamaa@qt.io>
This commit is contained in:
Johanna Vanhatapio
2024-12-03 19:28:20 +02:00
parent 9bf7e8e2f6
commit 141c59edaa
189 changed files with 1227 additions and 1182 deletions
+3 -3
View File
@@ -15,7 +15,7 @@
<div class="indexboxcont indexboxbar">
<ul>
<li><a href="creator-overview.html">Overview</a></li>
<li><a href="creator-quick-tour.html">User Interface</a></li>
<li><a href="creator-quick-tour.html">User interface</a></li>
<li><a href="creator-configuring.html">Configuring Qt Creator</a></li>
<li><a href="creator-project-creating.html">Creating Projects</a></li>
<li><a href="creator-configuring-projects.html">Configuring Projects</a></li>
@@ -70,7 +70,7 @@
<h2>Reference</h2>
</div>
<ul>
<li><a href="creator-acknowledgements.html">Licenses and Acknowledgments</a></li>
<li><a href="creator-acknowledgements.html">Licenses and acknowledgments</a></li>
<li><a href="creator-cli.html">Command-Line Options</a></li>
<li><a href="creator-project-wizards.html">Custom Wizards</a></li>
<li><a href="creator-faq.html">FAQ</a></li>
@@ -78,7 +78,7 @@
<li><a href="creator-keyboard-shortcuts.html">Keyboard Shortcuts</a></li>
<li><a href="creator-known-issues.html">Known Issues</a></li>
<li><a href="creator-sdk-tool.html">SDK Tool</a></li>
<li><a href="technical-support.html">Technical Support</a></li>
<li><a href="technical-support.html">Technical support</a></li>
<li><a href="creator-version-control.html">Version Control Systems</a></li>
<li><a href="creator-reference.html#analyzers">Analyzers</a></li>
<li><a href="creator-reference.html#build-systems">Build Systems</a></li>
@@ -30,7 +30,7 @@
\section1 Improving QML Performance
\QC comes with the \l{Profiling QML Applications}{QML Profiler} for
\QC comes with the \l{Profiling QML applications}{QML Profiler} for
inspecting binding evaluations and signal handling when running QML code.
This is useful for identifying potential bottlenecks, especially in the
evaluation of bindings.
@@ -26,7 +26,7 @@
how the hardware is utilized and what the kernel and application are doing.
Tracing information can tell you more about the data that
\l{Profiling QML Applications}{QML Profiler} collects. For example, you
\l{Profiling QML applications}{QML Profiler} collects. For example, you
can check why a trivial binding evaluation is taking so long. This might
be caused by C++ being executed or the disk I/O being slow.
@@ -143,7 +143,7 @@
\section1 Analyze the applications
Use the \l{Profiling QML Applications}{QML Profiler} to find causes
Use the \l{Profiling QML applications}{QML Profiler} to find causes
for typical performance problems in Qt Quick applications, such as
slowness and unresponsive, stuttering user interfaces. You cannot profile an
in-process runtime as an individual process.
@@ -156,5 +156,5 @@
{Remote Linux}{How To: Develop for remote Linux},
{Run on many platforms}, {Debugging}, {Debuggers}, {Debugger},
{Developing for \B2Q Devices}, {Developing for Remote Linux Devices},
{Profiling QML Applications}, {Kits}
{Profiling QML applications}, {Kits}
*/
@@ -12,7 +12,7 @@
\ingroup creator-reference-debugger-views
\ingroup studio-debugger-views
\title Viewing Call Stack Trace
\title Viewing call stack trace
\brief View the nested function calls leading to the current position as a
call stack trace.
@@ -33,11 +33,11 @@
If you click a frame with a known source location, the text editor jumps to
the corresponding location and updates the
\l {Local Variables and Function Parameters}{Locals} and
\l {Evaluating Expressions}{Expressions} views, making it seem like the
\l {Local variables and function parameters}{Locals} and
\l {Evaluating expressions}{Expressions} views, making it seem like the
application was interrupted before entering the function.
\section1 Loading QML Stack
\section1 Loading QML stack
To find out which QML file is causing a Qt Quick application to crash,
select \uicontrol {Load QML Stack} in the context menu in the
@@ -62,7 +62,7 @@
\ingroup creator-reference-debugger-views
\ingroup studio-debugger-views
\title Setting Breakpoints
\title Setting breakpoints
\brief Set breakpoints to interrupt the application.
@@ -96,7 +96,7 @@
evaluates the expression each time the application passes it, and the
application stops only if the condition evaluates to \c true.
\section1 Unclaimed and Claimed Breakpoints
\section1 Unclaimed and claimed breakpoints
Breakpoints come in two varieties: \c unclaimed and \c claimed.
An unclaimed breakpoint represents a task to interrupt the debugged
@@ -391,7 +391,7 @@
\ingroup creator-reference-debugger-views
\ingroup studio-debugger-views
\title Local Variables and Function Parameters
\title Local variables and function parameters
\brief Inspect local variables and function parameters.
@@ -412,7 +412,7 @@
local value correctly.
\if defined(qtcreator)
\section1 Locals View Actions
\section1 Locals view actions
Right-click the \uicontrol Locals view to select the following actions:
@@ -435,7 +435,7 @@
//! [0]
\endif
\section1 Selecting Object Type for Display
\section1 Selecting object type for display
When using GDB, you can specify whether the dynamic or the static type of
objects will be displayed. Select \uicontrol {Use dynamic object type for
@@ -458,12 +458,12 @@
\ingroup creator-reference-debugger-views
\ingroup studio-debugger-views
\title Evaluating Expressions
\title Evaluating expressions
\brief Compute values of arithmetic expressions or function calls.
To access global data that is not visible in the
\l {Local Variables and Function Parameters}{Locals} view or to compute
\l {Local variables and function parameters}{Locals} view or to compute
values of arithmetic expressions or function calls, use
expression evaluators in the \uicontrol Expressions view.
@@ -477,7 +477,7 @@
\image qtcreator-debugger-expressions.webp {Expressions view}
\section1 Adding Expression Evaluators
\section1 Adding expression evaluators
To add expression evaluators, drag an expression from the code editor
to the \uicontrol Expressions view.
@@ -513,13 +513,13 @@
\note Evaluating expressions is slow, so remove expression evaluators after
use.
\section1 JavaScript Expressions
\section1 JavaScript expressions
The QML debugger can evaluate JavaScript expressions.
\if defined(qtcreator)
\section1 C and C++ Expressions
\section1 C and C++ expressions
CDB, GDB, and LLDB support the evaluation of simple C and C++ expressions,
such as arithmetic expressions made of simple values and pointers.
@@ -527,7 +527,7 @@
Depending on the backend and concrete location, some function calls
can be evaluated. CDB is the most limited backend in this respect.
\section2 Function Calls
\section2 Function calls
Functions can be called only if they are actually compiled into the debugged
executable or a library used by the executable. Inlined
@@ -538,20 +538,20 @@
corruption of the application's state, or using the application's permission
to perform arbitrary actions.
\section2 Ranged Syntax
\section2 Ranged syntax
When using GDB or LLDB as backend, you can use a special ranged syntax to
display multiple values with one expression. A sub-expression of form
\c{foo[a..b]} is split into a sequence of individually evaluated expressions
\c{foo[a], ..., foo[b]}.
\section2 Compound Variables
\section2 Compound variables
You can expand compound variables of struct or class type to show their
members. As you also see the variable value and type, you can examine and
traverse the low-level layout of object data.
\section2 Optimized Builds
\section2 Optimized builds
GDB and LLDB, and therefore \QC's debugger, also work for optimized
builds on Linux and \macos. Optimization can lead to re-ordering
@@ -569,7 +569,7 @@
\uicontrol {not in scope}. Not all uninitialized objects,
however, can be recognized as such.
\section1 Expressions View Actions
\section1 Expressions view actions
Right-click the \uicontrol Expressions view to select the following actions:
@@ -262,7 +262,7 @@
shifted to the next source code line for which the code was actually
generated. To reflect such temporary changes by moving the breakpoint
markers in the source code editor, select this checkbox. For more
information, see \l{Setting Breakpoints}.
information, see \l{Setting breakpoints}.
\row
\li \uicontrol {Use Python dumper}
\li Uses the abstraction layer of Python Dumper classes to create a
@@ -118,19 +118,19 @@
To interrupt a running C++ application, go to \uicontrol Debug >
\uicontrol Interrupt. The debugger automatically interrupts
the application when it hits a \l {Setting Breakpoints}{breakpoint}.
the application when it hits a \l {Setting breakpoints}{breakpoint}.
Once the application stops, \QC:
\list
\li Retrieves data representing the \l{Viewing Call Stack Trace}
\li Retrieves data representing the \l{Viewing call stack trace}
{call stack} at the application's current position.
\li Retrieves the contents of \l{Local Variables and Function Parameters}
\li Retrieves the contents of \l{Local variables and function parameters}
{local variables}.
\li Examines \l{Evaluating Expressions}{expressions}.
\li Examines \l{Evaluating expressions}{expressions}.
\li Updates the \l{Viewing and Editing Register State}{Registers},
\l{Viewing Modules}{Modules}, and \l{Viewing Disassembled Code}
@@ -206,7 +206,7 @@
objects and user interfaces, as well as execute JavaScript
expressions.
For more information, see \l{Debugging Qt Quick Projects} and
For more information, see \l{Debugging Qt Quick projects} and
\l{Tutorial: Qt Quick debugging}.
\sa {Tutorial: C++ debugging}, {Debug}{How To: Debug}, {Debuggers},
@@ -245,7 +245,7 @@
parameters.
You can specify breakpoints before or after launching the debugger.
For more information, see \l{Setting Breakpoints}.
For more information, see \l{Setting breakpoints}.
\section1 Execute GDB or CDB commands
@@ -373,7 +373,7 @@
opening it makes setting breakpoints and stepping through the code easier.
You can specify breakpoints before or after attaching the debugger to the
application. For more information, see \l{Setting Breakpoints}.
application. For more information, see \l{Setting breakpoints}.
\sa {Debug}{How To: Debug}, {Debugging}, {Debuggers}, {Debugger}
*/
@@ -750,7 +750,7 @@
\li Stack
\li Examine the nested function calls leading to the current position
as a call stack trace.
\li \l {Viewing Call Stack Trace}
\li \l {Viewing call stack trace}
\row
\li Breakpoint Preset
@@ -758,7 +758,7 @@
\li Set \e {breakpoints} with conditions to make the application stop in
a controlled way. A \e {watchpoint} stops the application when the
value of an expression changes.
\li \l {Setting Breakpoints}
\li \l {Setting breakpoints}
\row
\li Threads
\li Switch between threads.
@@ -775,11 +775,11 @@
\li Locals
\li View information about the parameters of the function in the topmost
stack frame and local variables.
\li \l {Local Variables and Function Parameters}
\li \l {Local variables and function parameters}
\row
\li Expressions
\li Compute values of arithmetic expressions or function calls.
\li \l {Evaluating Expressions}
\li \l {Evaluating expressions}
\row
\li Registers
\li View the current state of the CPU registers to examine the
@@ -898,8 +898,8 @@
\image qtcreator-locals.png {Locals view}
The \l {Local Variables and Function Parameters}{Locals} and
\l {Evaluating Expressions}{Expressions} views show structured
The \l {Local variables and function parameters}{Locals} and
\l {Evaluating expressions}{Expressions} views show structured
data, such as objects of \c class, \c struct, or \c union types, as a tree.
To access sub-structures of the objects, expand the tree nodes.
The tree shows the sub-structures in their in-memory order. To show them
@@ -924,7 +924,7 @@
\l{Debugging Helpers}{debugging helpers}.
In addition to the generic IDE functionality of the
\l {Viewing Call Stack Trace}{Stack}, \uicontrol {Locals},
\l {Viewing call stack trace}{Stack}, \uicontrol {Locals},
\uicontrol {Expressions}, \l {Viewing and Editing Register State}{Registers},
and other views, \QC makes debugging Qt-based applications easy. The debugger
plugin understands the internal layout of several Qt classes, for example,
@@ -1161,7 +1161,7 @@
This allows you to select the thread that is in the focus of the debugger.
The \l {Viewing Call Stack Trace}{Stack} view adjusts its contents
The \l {Viewing call stack trace}{Stack} view adjusts its contents
accordingly.
\sa {Debug}{How To: Debug}, {Debugging}, {Debuggers}, {Debugger}
@@ -1429,7 +1429,7 @@
\note Usually, you do not need this feature because \QC offers better ways to
handle the task. For example, instead of using the GDB
\c print command from the command line, you can evaluate an expression in
the \l {Evaluating Expressions}{Expressions} view.
the \l {Evaluating expressions}{Expressions} view.
\sa {Debug}{How To: Debug}, {Debugging}, {Debuggers}, {Debugger}
*/
@@ -1493,8 +1493,8 @@
\QC uses Python scripts to translate raw memory contents and type information
data from debugger backends (GDB, LLDB, and CDB are currently supported)
into the form presented to the user in the
\l {Local Variables and Function Parameters}{Locals}
and \l {Evaluating Expressions}{Expressions} views.
\l {Local variables and function parameters}{Locals}
and \l {Evaluating expressions}{Expressions} views.
Unlike GDB's
\l{https://sourceware.org/gdb/onlinedocs/gdb/Pretty-Printing.html#Pretty-Printing}
@@ -29,7 +29,7 @@
\uicontrol Debug mode.
For more information about all the options you have, see
\l{Debugging Qt Quick Projects}.
\l{Debugging Qt Quick projects}.
\if defined(qtdesignstudio)
\note In this tutorial, you are using advanced menu items. These are not
@@ -111,5 +111,5 @@
\endlist
\sa {Debugging Qt Quick Projects}
\sa {Debugging Qt Quick projects}
*/
@@ -19,7 +19,7 @@
\ingroup creator-reference-debugger
\ingroup studio-debugger
\title Debugging Qt Quick Projects
\title Debugging Qt Quick projects
\brief Debug JavaScript functions, execute JavaScript expressions to get
information about the state of the UI, and inspect QML properties and
@@ -34,14 +34,14 @@
\l{Customizing the Menu Bar}.
\endif
\section1 Setting Up QML Debugging
\section1 Setting up QML debugging
\if defined(qtcreator)
The process of setting up debugging for Qt Quick projects depends on the
\e type of the project: \uicontrol {Qt Quick UI Prototype} or
\uicontrol {Qt Quick Application}, and the Qt version.
\section2 Debugging Qt Quick UI Projects
\section2 Debugging Qt Quick UI projects
\endif
To debug Qt Quick UI projects (.qmlproject), select \uicontrol Automatic
@@ -51,7 +51,7 @@
\image qtquick-debugger-settings.webp {Debugger settings section in Run Settings}
\if defined(qtcreator)
\section2 Debugging Qt Quick Applications
\section2 Debugging Qt Quick applications
To debug Qt Quick Applications:
@@ -92,7 +92,7 @@
automatically installed during \QC and Qt installation. Do not delete
them if you plan to debug QML applications.
\section2 Using Default Values
\section2 Using default values
You can enable or disable QML debugging globally in \preferences >
\uicontrol {Build & Run} > \uicontrol {Default Build Properties}.
@@ -129,7 +129,7 @@
global setting.
\endif
\section1 Starting QML Debugging
\section1 Starting QML debugging
To start the application, choose \uicontrol Debug > \uicontrol {Start Debugging}
> \uicontrol {Start Debugging of Startup Project} or press \key F5. Once the
@@ -191,25 +191,25 @@
\endlist
\section1 Debugging JavaScript Functions
\section1 Debugging JavaScript functions
You can use the \QC \uicontrol Debug mode to inspect the state of your
application while debugging. You can interact with the debugger by:
\list
\li \l{Viewing Call Stack Trace}{Viewing call stack trace}
\li \l{Viewing call stack trace}{Viewing call stack trace}
\li \l{Setting Breakpoints}{Setting breakpoints}
\li \l{Setting breakpoints}{Setting breakpoints}
\li \l{Local Variables and Function Parameters}
\li \l{Local variables and function parameters}
{Viewing local variables and function parameters}
\li \l{Evaluating Expressions}
\li \l{Evaluating expressions}
\endlist
\section1 Inspecting Items
\section1 Inspecting items
While the application is running, you can use the \uicontrol {Locals}
view to explore the QML item structure.
@@ -237,7 +237,7 @@
double-click them and enter the new values. You can view the results in the
running application.
\section1 Inspecting User Interfaces
\section1 Inspecting user interfaces
When you debug complex applications, you can jump to the position in code
where an item is defined.
@@ -256,7 +256,7 @@
To move the application running in \QQV to the front, select
\uicontrol Debug > \uicontrol {Show Application on Top}.
\section1 Executing JavaScript Expressions
\section1 Executing JavaScript expressions
When the application is interrupted by a breakpoint, you can use the
\uicontrol {QML Debugger Console} to execute JavaScript expressions in the
@@ -274,7 +274,7 @@
the \l Properties view.
\endif
\section1 Applying QML Changes at Runtime
\section1 Applying QML changes at runtime
When you change property values in the \uicontrol {QML Debugger Console} or
in the \uicontrol Locals or \uicontrol Expression view, they are immediately
@@ -503,13 +503,13 @@
\li Error
\li This type (type name) is not supported as a root element of a
UI file (.ui.qml)
\li For more information about supported QML types, see \l{UI Files}.
\li For more information about supported QML types, see \l{UI files}.
\row
\li M221
\li Error
\li This type (type name) is not supported in a UI file (.ui.qml)
\li For more information about supported QML types, see \l{UI Files}.
\li For more information about supported QML types, see \l{UI files}.
\row
\li M222
@@ -522,26 +522,26 @@
\li M223
\li Error
\li JavaScript blocks are not supported in a UI file (.ui.qml)
\li For more information about supported features, see \l{UI Files}.
\li For more information about supported features, see \l{UI files}.
\row
\li M224
\li Error
\li Behavior type is not supported in a UI file (.ui.qml)
\li For more information about supported QML types, see \l{UI Files}.
\li For more information about supported QML types, see \l{UI files}.
\row
\li M225
\li Error
\li States are only supported in the root item in a UI file (.ui.qml)
\li For more information about supported features, see \l{UI Files}.
\li For more information about supported features, see \l{UI files}.
\row
\li M226
\li Error
\li Referencing the parent of the root item is not supported in a
UI file (.ui.qml)
\li For more information about supported features, see \l{UI Files}.
\li For more information about supported features, see \l{UI files}.
\row
\li M227
@@ -766,7 +766,7 @@
To reset the code model, select \uicontrol Tools > \uicontrol {QML/JS} >
\uicontrol {Reset Code Model}.
\sa {Check code syntax}, {Using QML Modules with Plugins}
\sa {Check code syntax}, {Using QML modules with plugins}
\if defined(qtcreator)
\sa {Analyzing Code}
@@ -3,19 +3,15 @@
/*!
\externalpage https://doc.qt.io/qtdesignstudio/index.html
\title Qt Design Studio Manual
\title Qt Design Studio documentation
*/
/*!
\externalpage https://doc.qt.io/qtdesignstudio/studio-optimized-3d-scenes.html
\title Creating Optimized 3D Scenes
\title Creating optimized 3D scenes
*/
/*!
\externalpage https://doc.qt.io/qtdesignstudio/qtquick-optimizing-designs.html
\title Optimizing Designs
*/
/*!
\externalpage https://doc.qt.io/qtdesignstudio/studio-optimized-3d-scenes.html
\title Creating Optimized 3D Scenes
\title Optimizing designs
*/
/*!
\externalpage https://doc.qt.io/QtForMCUs/
@@ -45,6 +45,5 @@
{#qt-creator} channel on Libera.Chat IRC, go to \uicontrol Help >
\uicontrol Contact.
\sa {Paste and fetch code snippets}, {Technical Support},
{Turn on crash reports}
\sa {Paste and fetch code snippets}, {Technical support}
*/
@@ -89,5 +89,5 @@
{Building Qt Creator from Git}.
\sa {Manage Kits}{How To: Manage Kits}, {Register installed Qt versions},
{Install plugins}, {Licenses and Acknowledgments}
{Install plugins}, {Licenses and acknowledgments}
*/
@@ -17,7 +17,7 @@
\ingroup creator-reference
\title Licenses and Acknowledgments
\title Licenses and acknowledgments
\brief Licenses and third-party components in \QC.
@@ -22,10 +22,10 @@
If you have not used an integrated development environment (IDE)
before, or want to know what kind of IDE \QC is, go to
\l{Overview}.
\li \b {\l{User Interface}}
\li \b {\l{User interface}}
If you have not used \QC before, and want to become familiar
with the parts of the user interface, go to \l{User Interface}.
with the parts of the user interface, go to \l{User interface}.
\li \b {\l{Configuring Qt Creator}}
To make \QC behave more like your favorite code editor or IDE,
@@ -68,12 +68,12 @@
\image heartgame-start.webp {Heart Rate Game}
To create intuitive, modern-looking, fluid user interfaces (UI), use
\l{Qt Quick} and \l{Qt Design Studio Manual}{\QDS}:
\l{Qt Quick} and \l{Qt Design Studio documentation}{\QDS}:
\list
\li \l {\QMLD}
Or, enable the \QMLD plugin to visually edit \l{UI Files}{UI files}
Or, enable the \QMLD plugin to visually edit \l{UI files}
(.ui.qml).
\li \l {Converting UI Projects to Applications}
@@ -82,14 +82,14 @@
development, you have to convert them to Qt Quick
Application projects that have project configuration
files (CMakeLists.txt or .pro), .cpp, and .qrc files.
\li \l {UI Files}
\li \l {UI files}
If you switch between \QC and \QDS or cooperate with
designers on a project, you might encounter .ui.qml files.
They are intended to be edited in \QDS only, so you need
to be careful not to break the code. To visually edit the
files in \QC, enable the \QMLD plugin.
\li \l{Using QML Modules with Plugins}
\li \l{Using QML modules with plugins}
Load C++ plugins for QML to simulate data.
\endlist
@@ -19,7 +19,7 @@
\ingroup creator-reference
\title Technical Support
\title Technical support
\brief Qt support sites and other useful sites.
@@ -31,7 +31,7 @@
between the host and devices. For more information, see
\l{\B2Q: Documentation}.
If you have \l{Qt Design Studio Manual}{\QDS} installed, you can open
If you have \l{Qt Design Studio documentation}{\QDS} installed, you can open
\QDS examples from \QC in \QDS.
\list 1
@@ -88,5 +88,5 @@
\sa {Manage Kits}{How To: Manage Kits}, {Open projects},
{Developing for Android}, {Developing for iOS},
{Compile Output}, {\B2Q: Documentation}, {Qt Design Studio Manual}
{Compile Output}, {\B2Q: Documentation}, {Qt Design Studio documentation}
*/
@@ -56,7 +56,7 @@
If you selected CMake as the build system for the project, a
\e {Release with Debug Information} build configuration is also available.
It is similar to a \e profile configuration, but with
\l{Debugging Qt Quick Projects}{QML debugging and profiling} explicitly turned off.
\l{Debugging Qt Quick projects}{QML debugging and profiling} explicitly turned off.
You can also use a \e {Minimum Size Release} build configuration to create the
final installation binary package. It is a release build that makes the size
of the binary package as small as possible, even if this makes the
@@ -38,7 +38,7 @@
However, you can usually leave this field empty.
\note To create a build configuration that supports debugging for a
Qt Quick application project, you also need to \l {Using Default Values}
Qt Quick application project, you also need to \l {Using default values}
{enable QML debugging} either globally or in the \uicontrol {Build Settings}
of the project.
@@ -190,7 +190,7 @@
}
\endcode
You can also use \l{Qt Design Studio Manual}{\QDS} to design Qt Quick UIs.
You can also use \l{Qt Design Studio documentation}{\QDS} to design Qt Quick UIs.
\section1 Run the application
+1 -1
View File
@@ -17,7 +17,7 @@
\li \l{Getting Started}
\list
\li \l{Overview}
\li \l{User Interface}
\li \l{User interface}
\li \l{Configuring Qt Creator}
\endlist
\li \l{Creating Projects}
@@ -27,7 +27,7 @@
For more examples, see \l{Qt Quick Examples and Tutorials}.
You can use a visual editor to develop Qt Quick applications in \QDS. For
more information, see \l{Qt Design Studio Manual}.
more information, see \l{Qt Design Studio documentation}.
\include qtquick-tutorial-create-empty-project.qdocinc qtquick empty application
@@ -13,7 +13,7 @@
Use wizards to create Qt Quick projects that have boiler-plate code. Change
the code in the \uicontrol Edit mode or use a separate visual editor,
\l{Qt Design Studio Manual}{\QDS} to open and edit \l{UI Files}{UI files}
\l{Qt Design Studio documentation}{\QDS} to open and edit \l{UI files}
(.ui.qml).
Don't edit UI files in the \uicontrol Edit mode because it is easy
@@ -43,7 +43,7 @@
{QML types}, see the Qt reference documentation available online and
in the \uicontrol Help mode.
For more information about using \QMLD, see \l{Qt Design Studio Manual}.
For more information about using \QMLD, see \l{Qt Design Studio documentation}.
\sa {Create Qt Quick Applications}, {Create Qt Quick UI Prototypes},
{Enable and disable plugins}
@@ -32,7 +32,7 @@
\if defined(qtcreator)
For more information about using \QDS to create projects, see
\l{Qt Design Studio Manual}.
\l{Qt Design Studio documentation}.
\endif
To use qmake as the build system, use a Qt Creator
@@ -135,8 +135,8 @@
asset files, such as 100-MB 3D models or 64-MB textures, into the \c .qrc
file for compiling them into the binary.
First try to optimize your assets, as described in \l{Optimizing Designs}
and \l {Creating Optimized 3D Scenes}.
First try to optimize your assets, as described in
\l{Optimizing designs} and \l {Creating optimized 3D scenes}.
Large assets should either be loaded directly from the file system or by
using the Qt resource system dynamically. For more information, see
@@ -7,7 +7,7 @@
\previouspage studio-live-preview-desktop.html
\nextpage qt-design-viewer.html
\title Previewing on Devices
\title Previewing on devices
\else
\previouspage creator-how-tos.html
@@ -18,7 +18,7 @@
\ingroup creator-reference-ui-design
\title Using QML Modules with Plugins
\title Using QML modules with plugins
\brief Using C++ plugins to expose custom components to Qt Quick
applications.
@@ -153,7 +153,7 @@
\ingroup creator-reference-analyzer
\title Profiling QML Applications
\title Profiling QML applications
\brief Improve the performance of QML applications.
@@ -18,7 +18,7 @@
\ingroup creator-reference-ui-design
\title UI Files
\title UI files
\brief Limitations of \QDS UI files (.ui.qml).
@@ -156,7 +156,7 @@
\l{https://doc.qt.io/qt/qml-qtqml-qt.html}{Qt QML Methods}.
\if defined(qtdesignstudio)
\section1 Using UI Files
\section1 Using UI files
You can edit the UI files in the \l {2D} and
\uicontrol {Code} views. Components that are
@@ -32,7 +32,7 @@
\li \uicontrol Welcome
\li \key Ctrl+1
\li Open projects, tutorials, and examples.
\li \l{User Interface}
\li \l{User interface}
\row
\li \uicontrol Edit
\li \key Ctrl+2
@@ -11,7 +11,7 @@
\nextpage creator-configuring.html
\endif
\title User Interface
\title User interface
\if defined(qtcreator)
When you start \QC, it opens to the \uicontrol Welcome mode.
@@ -85,7 +85,7 @@
<li><a>Code</a>
<ul>
<li><a href="qtquick-text-editor.html">Code</a></li>
<li><a href="creator-jump-to-the-code.html">Jump to Code</a></li>
<li><a href="creator-jump-to-the-code.html">Jump to the Code</a></li>
</ul>
</li>
</ul>
@@ -185,7 +185,7 @@
<ul>
<li><a href="studio-material-editor.html">Materials</a></li>
<li><a href="studio-3d-materials.html">Materials and shaders</a></li>
<li><a href="studio-content-library.html#adding-a-material-to-your-project">Using Content Library Materials</a></li>
<li><a href="studio-content-library.html#adding-a-material-to-your-project">Using the Content Library materials</a></li>
<li><a href="studio-3d-custom-effects-materials.html">Custom materials in Qt 5</a></li>
</ul>
</li>
@@ -240,7 +240,7 @@
<li><a>States</a>
<ul>
<li><a href="quick-states.html">States</li>
<li><a href="qtquick-transition-editor.html#animating-transitions-between-states">Transition between states</a></li>
<li><a href="qtquick-transition-editor.html#animating-transitions-between-states">Transitions between states</a></li>
</ul>
</li>
</ul>
@@ -258,7 +258,7 @@
<ul>
<li><a href="quick-shapes.html">Shapes</a></li>
<li><a href="quick-text.html">Text</a></li>
<li><a href="quick-controls.html">UI Controls</a></li>
<li><a href="quick-controls.html">UI controls</a></li>
</ul>
</li>
</ul>
@@ -349,7 +349,7 @@
<h2>Reference</h2>
</div>
<ul>
<li><a>2D components</a>
<li><a>The 2D components</a>
<ul>
<li><a href="quick-preset-components.html#2d-components">Overview</a></li>
<li><a href="quick-animations.html">Animations</a></li>
@@ -401,7 +401,7 @@
<ul>
<li><a>Help</a>
<ul>
<li><a href="studio-terms.html">Concept and terms</a></li>
<li><a href="studio-terms.html">Concepts and terms</a></li>
<li><a href="studio-keyboard-shortcuts.html">Keyboard shortcuts</a></li>
<li><a href="creator-how-to-get-help.html">Getting help</a></li>
<li><a href="studio-platforms.html">Supported platforms</a></li>
@@ -95,7 +95,7 @@
You now have the particle system in place. To preview it, select
\key Alt + \key{P}. You can also preview the particle system in
the \uicontrol{3D} view by using the \l {Particle Editor} tools.
the \uicontrol{3D} view by using the \l {Particle editor} tools.
\section2 Adding Sprites and Sprite Animations
@@ -4,7 +4,7 @@
/*!
\page state-transition-animations.html
\ingroup gstutorials
\sa States, {Transitions}, {Working with States}
\sa States, {Transitions}, {Working with states}
\title Animated state transitions
\brief Illustrates how to create animated state transitions.
@@ -26,7 +26,7 @@
/*!
\page animation-tutorial.html
\ingroup gstutorials
\sa {Creating Timeline Animations}
\sa {Creating timeline animations}
\title Timeline animation
\brief Illustrates how to create timeline animations and bind them to
@@ -92,7 +92,7 @@
The Coffee Machine application screens for choosing coffee, empty cup, and
brewing each use custom components specified in separate \l{UI files}
{UI files} (ui.qml).
(ui.qml).
We use the \l Timeline view to animate the transitions between the screens
during the application flow in \e {ApplicationFlowForm.ui.qml}.
@@ -69,7 +69,7 @@
speedometer grow and shrink in size depending on its current position.
For more information about using the timeline, see
\l {Creating Timeline Animations}.
\l {Creating timeline animations}.
\section1 Using states to move between screens
@@ -5,7 +5,7 @@
\page effect-composer-example.html
\ingroup studioexamples
\title The Effect Composer example
\title Effect Composer example
\brief Illustrates how to work with the Effect Composer effects.
\image effect-composer-example.webp {The Effect Composer example project}
@@ -69,6 +69,6 @@
\endlist
The example project also uses \uicontrol States and \uicontrol Transitions. To learn more, see
\l {Working with States} and \l {Transitions}.
\l {Working with states} and \l {Transitions}.
*/
@@ -24,7 +24,7 @@
For the purposes of this tutorial, you will use the empty wizard template.
Wizard templates are available also for creating UIs that are optimized for
mobile platforms and for launcher applications. For more information about
the options you have, see \l {Creating Projects}.
the options you have, see \l {Creating projects}.
To create a project:
@@ -387,7 +387,7 @@
\li The \e {loginui1.qml} file defines the functionality of
the UI. For the time being, it does not do anything.
\li The \e {Screen01.ui.qml} file is a custom component created by
the wizard template. For more information, see \l {UI Files}.
the wizard template. For more information, see \l {UI files}.
By default, this is the main file in the project, but you can
change that in the .qmlproject file. While the custom component
@@ -409,11 +409,11 @@
\e EventListSimulator.qml files are not used in this example, so
you can ignore them for now.
\endlist
\l{UI files}{UI files} define a hierarchy of components with a
highly-readable, structured layout. Every UI file consists of two parts:
an imports section and an component declaration section. The components and
functionality most common to UIs are provided in the \c QtQuick import. You
can view the code of a \e .ui.qml file in the \l{Code} view.
\l{UI files} define a hierarchy of components with a highly-readable,
structured layout. Every UI file consists of two parts: an imports section
and a component declaration section. The components and functionality most
common to UIs are provided in the \c QtQuick import. You can view the code
of a \e .ui.qml file in the \l{Code} view.
\section2 Components
@@ -35,7 +35,7 @@
\section1 Anchoring UI components
First, you will \l {Setting Anchors and Margins}{anchor} the
First, you will \l {Setting anchors and margins}{anchor} the
static page elements, background image (\e adventurePage), logo
(\e qt_logo_green_128x128px), and tag line (\e tagLine), to the page.
@@ -190,10 +190,10 @@
For many use cases, the best positioner to use is a simple grid, row, or
column, and \QDS provides components that will position children in these
formations in the most efficient manner possible. For more information
about using preset positioners, see \l {Using Positioners}.
about using preset positioners, see \l {Using positioners}.
For more complicated UI designs, you can use components from the
\l {Using Layouts}{Qt Quick Layouts module}.
\l {Using layouts}{Qt Quick Layouts module}.
\section1 Next steps
@@ -23,7 +23,7 @@
In \l {Login UI: States}, you learned how to use states to simulate page
changes in a UI and connections to provide user interaction with it. In
this part, you will now learn another way of animating the UI by creating
\l{Creating Timeline Animations}{timeline animations} that you bind
\l{Creating timeline animations}{timeline animations} that you bind
to states.
The starting point for this tutorial is the completed
@@ -33,7 +33,7 @@
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}.
For more information, see \l {Creating Timeline Animations}.
For more information, see \l {Creating timeline animations}.
\section1 Animating UI components
@@ -14,7 +14,7 @@
\section1 Creating the progress bar
First, we create an empty project, as described in \l {Creating Projects}.
First, we create an empty project, as described in \l {Creating projects}.
For the purposes of this example, we call the project \e progressbar.
In this example, we use two overlapping instances of the preset
@@ -63,7 +63,7 @@
in the \l Timeline view.
For more information about using the timeline, see
\l {Creating Timeline Animations}.
\l {Creating timeline animations}.
\section2 Adding color animation
@@ -201,7 +201,7 @@
by specifying easing curves for them.
For more information about previewing UIs, see
\l {Validating with Target Hardware}.
\l {Validating with target hardware}.
\section1 Specifying easing curves
@@ -172,7 +172,7 @@
dialog, we bind the states that don't have animations to fixed frames.
For more information about using the timeline, see
\l {Creating Timeline Animations}.
\l {Creating timeline animations}.
\section1 Connecting the burger menu to actions
@@ -192,8 +192,8 @@
The side menu is fully visible and accepts input only in the \e open state.
For more information about Connecting Components to Signals, see
\l {Connecting Components to Signals}.
For more information about connecting components to signals, see
\l {Connecting components to signals}.
\section1 Applying effects
@@ -24,7 +24,7 @@
\section1 Using a virtual keyboard
First, we create an empty project, as described in \l {Creating Projects}.
First, we create an empty project, as described in \l {Creating projects}.
For the purposes of this example, we call the project \e SimpleKeyboard.
We can use the default settings for other options, but we need to select
the \uicontrol {Use Qt Virtual Keyboard} check box on the
@@ -228,7 +228,7 @@
We create similar connections between button components and signals in the
other screens to apply other actions that move users to other screens.
For more information, see \l {Connecting Components to Signals}.
For more information, see \l {Connecting components to signals}.
\section1 Showing the current time
@@ -178,5 +178,5 @@
\image webinardemo-timeline.png "Popup animations in the Timeline view"
For more information about using the timeline, see
\l {Creating Timeline Animations}.
\l {Creating timeline animations}.
*/
@@ -6,9 +6,9 @@
\page best-practices-glow.html
\nextpage {Examples}
\title Creating Glow and Bloom Effects
\title Creating the glow and the bloom effects
In \QDS, you can add a glow and bloom effect to your 3D scene using the
In \QDS, you can add a glow and a bloom effect to your 3D scene using the
\uicontrol ExtendedSceneEnvironment component (available in Qt 6.5 and later). With this effect,
you can, for example, create glow around illuminated areas (such as material or skyboxes when
using image-based lighting) or add ambient light. Using the glow effect is one way to make your
@@ -16,12 +16,12 @@
\image glow-example.webp
\section1 Creating a Project with ExtendedSceneEnvironment
\section1 Creating a project with ExtendedSceneEnvironment
To create a project with \uicontrol ExtendedSceneEnvironment as the default
scene environment, use the \uicontrol {3D Extended} project preset.
For more information about creating projects, see \l{Creating Projects}.
For more information about creating projects, see \l{Creating projects}.
\section1 Adding ExtendedSceneEnvironment to an Existing Project
@@ -31,7 +31,7 @@
\image ext-scene-env-navigator.webp
\section1 Enabling the Glow Effect
\section1 Enabling the Glow effect
To enable the glow effect, select \e SceneEnvironment in the \uicontrol Navigator view and
then, in the \uicontrol Properties view, select \uicontrol Enabled in the
@@ -42,7 +42,7 @@
\note When setting up or experimenting with the glow effect, use the \l {Blend Modes}{Replace}
blend mode to see the effect more clearly.
\section1 The Flashlight Example Project
\section1 The Flashlight Example project
The flashlight example used in this documentation is available from the \uicontrol Examples
section of the \QDS \uicontrol Welcome page.
@@ -54,7 +54,7 @@
\image glow-example-project.webp
\section1 Basic Properties
\section1 Basic properties
Usually, the best way to achieve a realistic glow effect in your 3D scene is to adjust
the \uicontrol {Strength}, \uicontrol {Intensity}, and \uicontrol {Bloom}
@@ -131,7 +131,7 @@
\li \image glow_all_blur_levels.webp
\endtable
\section2 Blend Modes
\section2 Blend modes
The following blend modes are available:
@@ -160,7 +160,7 @@
\li \image glow-replace-blend.webp
\endtable
\section1 Improvement Properties
\section1 Improvement properties
The \uicontrol{High Quality} and \uicontrol{Bicubical Upsampling}
properties improve the quality of the glow blur by upsampling. Using these properties
+8 -8
View File
@@ -6,32 +6,32 @@
\page best-practices.html
\nextpage best-practices-glow.html
\title Best Practices
\title Best practices
\section1 Graphics
\list
\li \l {Creating Glow and Bloom Effects}
\li \l {Creating the glow and the bloom effects}
\endlist
\section1 Performance
\list
\li \l {Optimizing Designs}
\li \l {QML Performance Considerations And Suggestions}
\li \l {Creating Optimized 3D Scenes}
\li \l {Using Components Economically}
\li \l {Optimizing designs}
\li \l {QML Performance Considerations And Suggestions}{QML performance considerations and suggestions}
\li \l {Creating optimized 3D scenes}
\li \l {Using components economically}
\endlist
\section1 Projects
\list
\li \l {Converting Qt Design Studio Projects to Applications}
\li \l {Converting \QDS projects to applications}
\endlist
\section1 Workflow
\list
\li \l {Designer-Developer Workflow}
\li \l {Designer-developer workflow}
\endlist
*/
@@ -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
/*!
@@ -19,16 +19,16 @@
create instances of them.
You can achieve similar results by using different animation techniques.
For more information, see \l{Introduction to Animation Techniques}.
For more information, see \l{Introduction to animation techniques}.
\section1 Applying Animation
\section1 Applying animations
A property animation is applied when the value of a property changes.
Color and number animations are property animation types for specific
purposes. Specify settings for animations in \l Properties >
\uicontrol {Animation Targets}.
\section2 Animating Color Changes
\section2 Animating color changes
For example, you can apply animation to the value of the \uicontrol Color
property of an instance of a \l Rectangle component to change its value
@@ -49,7 +49,7 @@
color in the \uicontrol {To color} field. Specify the duration of the
animation in the \uicontrol Duration field.
\section2 Animating Changes in Numerical Values
\section2 Animating changes in numerical values
Similarly, to apply animation when a numerical value of a property changes,
create an instance of the \uicontrol {Number Animation} component.
@@ -72,7 +72,7 @@
For an example of using property animation to animate the scale and opacity
of components, see the \l{Coffee Machine} example.
\section2 Setting Non-Animated Properties
\section2 Setting non-animated properties
To immediately change a property value during an animation
without animating the property change, create an instance
@@ -92,7 +92,7 @@
\image qtquick-property-action.gif "Sequential property actions and number animation"
\section1 Playing Animations
\section1 Playing animations
Specify settings for playing animations in the \uicontrol Animation group.
@@ -104,7 +104,7 @@
You can connect the running property of an animation to a signal emitted
by a component to play the animation when users click a button, for
example. For more information, see \l{Connecting Components to Signals}.
example. For more information, see \l{Connecting components to signals}.
To run animations several times in a loop, set the number of times they
should play in the \uicontrol Loops field. Set the value to -1 to have
@@ -123,12 +123,12 @@
To pause animations, select the \inlineimage icons/pause-icon.png
(\uicontrol Paused) check box.
To attach an \l{Editing Easing Curves}{easing curve} to
To attach an \l{Editing easing curves}{easing curve} to
the animation, select the \inlineimage icons/curve_editor.png
(\uicontrol {Easing Curve Editor}) button in the
\uicontrol {Easing Curve} field.
\section2 Playing Groups of Animations
\section2 Playing groups of animations
You can create several animations that can run in parallel or in sequence.
To manage a group of animations that will play at the same time, create an
@@ -155,7 +155,7 @@
check box and specify the duration of the pause in the
\uicontrol Duration field.
\section1 Performance Considerations
\section1 Performance considerations
\QDS enables you to use fluidity and dynamic transitions as well as visual
effects to great effect in a UI. However, you need to take some care when
@@ -176,7 +176,7 @@
component because script animations are run in the main thread and can
therefore cause frames to be skipped if they take too long to complete.
\section1 Summary of Animation Components
\section1 Summary of the animation components
The following table lists the components that you can use to animate
component properties programmatically. They are available in
@@ -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
// **********************************************************************
@@ -12,7 +12,7 @@
\previouspage quick-components-creating.html
\nextpage quick-scalable-image.html
\title Creating Buttons
\title Creating buttons
To create a button component:
@@ -20,7 +20,7 @@
\li Select \uicontrol File > \uicontrol {New File} >
\uicontrol {Qt Quick Files} > \uicontrol {Qt Quick UI File} >
\uicontrol Choose to create a \l{UI Files}{UI file} called
\uicontrol Choose to create a \l{UI files}{UI file} called
Button.ui.qml (for example).
\note Components are listed in \uicontrol Components >
@@ -95,7 +95,7 @@
To create a graphical button that scales beautifully without using
vector graphics, use the \l {Border Image} component. For more
information, see \l{Creating Scalable Buttons and Borders}.
information, see \l{Creating scalable buttons and borders}.
*/
/*!
@@ -103,13 +103,13 @@
\page quick-scalable-image.html
\nextpage qtquick-properties.html
\title Creating Scalable Buttons and Borders
\title Creating scalable buttons and borders
You can use the \l {Border Image} component to display an image, such as a
PNG file, as a border and a background.
Use two border images and suitable graphics to change the appearance of
a button when it is clicked. You can use use \l{Working with States}{states}
a button when it is clicked. You can use use \l{Working with states}{states}
to determine which image is visible depending on whether the mouse
button is pressed down. You could add more images and states to
change the appearance of the button depending on other mouse events,
@@ -124,20 +124,20 @@
\image qmldesigner-borderimage-type.png "Button component in the 2D and States views"
\section1 Creating the Button Component
\section1 Creating the Button component
To create a button component, select \uicontrol File >
\uicontrol {New File} >
\uicontrol {Qt Quick Files} > \uicontrol {Qt Quick UI File} >
\uicontrol Choose to create a \l{UI Files}{UI file} called Button.ui.qml
\uicontrol Choose to create a \l{UI files}{UI file} called Button.ui.qml
(for example).
\note Components are listed in \uicontrol Components >
\uicontrol {My Components} only if the filename begins with a
capital letter.
\section1 Constructing the Button Component
\section1 Constructing the Button component
To construct the button component:
@@ -198,7 +198,7 @@
\endlist
\endlist
\section1 Using States to Change Component Property Values
\section1 Using States to change component property values
\list 1
\li In the \l States view, select \inlineimage icons/plus.png
@@ -244,7 +244,7 @@
and set the button text for each button instance, for example.
For more information about positioning buttons on screens, see
\l{Scalable Layouts}.
\l{Scalable layouts}.
\image qmldesigner-borderimage.png "Button preview as part of a screen"
*/
@@ -3,64 +3,64 @@
/*!
//! [context-menu]
\section1 Context Menu
\section1 Context menu
The following table summarizes the \uicontrol Navigator and
\uicontrol {2D} views context menu items and provides links
\uicontrol {2D} view context menu items and provides links
to more information about them.
\table
\header
\li To Learn About
\li Go To
\li To learn about
\li Go to
\row
\li Arrange
\li \l{Arranging Components}
\li \l{Arranging components}
\row
\li Edit
\li \l{Showing and Hiding Components}
\li \l{Showing and hiding components}
\row
\li Anchors
\li \l{Setting Anchors and Margins}
\li \l{Setting anchors and margins}
\row
\li Group
\li \l{Organizing Components}
\li \l{Organizing components}
\row
\li Positioner
\li \l{Using Positioners}
\li \l{Using positioners}
\row
\li Layout
\li \l{Using Layouts}
\li \l{Using layouts}
\row
\li Stacked Container
\li \l{Lists and Other Data Models}
\li \l{Lists and other data models}
\row
\li Timeline
\li \l{Creating a Timeline}
\row
\li Event List
\li \l{Simulating Events}
\li \l{Simulating events}
\row
\li Edit Color
\li \l{Editing Properties Inline}
\li \l{Editing properties inline}
\row
\li Edit Annotation
\li \l{Annotating Designs}
\li \l{Annotating designs}
\row
\li Merge File with Template
\li \l{Merging Files with Templates}
\li \l{Merging files with templates}
\row
\li Move Component Instances into Separate Files
\li \l{Turning Component Instances into Custom Components}
\li \l{Turning component instances into custom components}
\row
\li Connecting Components to Signals
\li \l{Connecting Components to Signals in the Connection View}
\li Connecting components to signals
\li \l{Connecting components to signals in the Connection view}
\row
\li Go to Implementation
\li \l{Using UI Files}
\li \l{Using UI files}
\row
\li Edit Component
\li \l{Moving Within Components}
\li \l{Moving within components}
\endtable
//! [context-menu]
*/
@@ -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
/*!
@@ -6,12 +6,12 @@
\previouspage studio-3d-loader-3d.html
\nextpage quick-components-creating.html
\title Creating Component Instances
\title Creating component instances
\QDS comes with \e {preset components} that you can use in your UI by
creating instances of them.
\image qmldesigner-editing-components.webp "Creating Component Instances"
\image qmldesigner-editing-components.webp "Creating component instances"
To create component instances and edit their properties:
@@ -29,23 +29,23 @@
custom properties on the \uicontrol {Properties} tab in the
\l {Connections} view.
\image add-updated-local-custom-property.webp "Connections View Properties tab"
For more information, see \l{Specifying Custom Properties}.
For more information, see \l{Specifying custom properties}.
\li To enable users to interact with the component instances, connect
the instances to signals on the \uicontrol Connections tab in the
\uicontrol {Connections} view. For example, you can specify what
happens when a component instance is clicked. For more information,
see \l{Connecting Components to Signals}.
see \l{Connecting components to signals}.
\image qmldesigner-connections.webp "Connections View Connections tab"
\li To dynamically change the behavior of a component instance when
another component instance changes, create bindings between them on
the \uicontrol Bindings tab in the \uicontrol {Connections} view.
For more information, see \l{Adding Bindings Between Properties}.
For more information, see \l{Adding bindings between properties}.
\image qmldesigner-bindings.webp "Connections view Bindings tab"
\li Add states to apply sets of changes to the property values of one
or several component instances in the \uicontrol States view.
For more information, see \l{Working with States}.
For more information, see \l{Working with states}.
\li Animate the properties of component instances in the
\uicontrol Timeline view. For more information, see
\l{Creating Timeline Animations}.
\l{Creating timeline animations}.
\endlist
*/
@@ -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
/*!
@@ -6,7 +6,7 @@
\previouspage quick-component-instances.html
\nextpage quick-buttons.html
\title Creating Custom Components
\title Creating custom components
You can either use project wizard templates to create custom components and
controls or move component instances into separate files to turn them into
@@ -20,7 +20,7 @@
by dragging-and-dropping them from \uicontrol Components to the \l {2D},
\l {3D}, or \l Navigator view.
\section1 Creating Components from Scratch
\section1 Creating components from scratch
To use wizard templates to create custom components:
@@ -37,7 +37,7 @@
\uicontrol Navigator or the \uicontrol {2D} view.
\li Edit component properties in the \uicontrol Properties view.
The available properties depend on the component type. You can
\l{Specifying Custom Properties}{add properties for
\l{Specifying custom properties}{add properties for
components} on the \uicontrol {Properties} tab in the
\uicontrol Connections view.
\li To change the appearance and behavior of the component instances
@@ -53,13 +53,13 @@
using instances of basic components:
\list
\li The \l{2D} View
\li The \l{3D} View
\li \l{Creating Buttons}
\li \l{Creating Scalable Buttons and Borders}
\li The \l{2D} view
\li The \l{3D} view
\li \l{Creating buttons}
\li \l{Creating scalable buttons and borders}
\endlist
\section1 Naming Conventions
\section1 Naming conventions
Establish naming conventions to keep the components in your UI organized.
Name your components accurately and give them suitable IDs. Particularly,
@@ -78,7 +78,7 @@
\include qtdesignstudio-components.qdocinc creating studio components
\section1 Turning Component Instances into Custom Components
\section1 Turning component instances into custom components
An alternative way of creating reusable components is to turn
component instances into custom components by moving them into
@@ -98,7 +98,7 @@
To open the new component file for editing the properties that you want
to change for all instances of the component, right-click the component,
and then select \uicontrol {Go into Component} in the context menu. For
additional ways of opening base components, see \l{Moving Within Components}.
additional ways of opening base components, see \l{Moving within components}.
For an example of creating a reusable custom component, see
\l{Progress Bar}.
@@ -107,7 +107,7 @@
> \uicontrol {My Components}, and you can use instances of them to build
more components.
\section1 Merging Files with Templates
\section1 Merging files with templates
You can merge the current component file against an existing second
component file using the second file in a way similar to using a CSS
@@ -6,7 +6,7 @@
\previouspage quick-uis.html
\nextpage quick-preset-components.html
\title Using Components
\title Using components
A \e component is a reusable building block for a UI.
@@ -18,7 +18,7 @@
Some of the preset components represent simple shapes, text, or images,
while others represent complex UI controls with full functionality, such
as spin boxes or sliders. You can also add instances of preset
\l {3D Components}{3D components} to your UIs.
\l {3D components}{3D components} to your UIs.
To build your own components, you can modify the \e properties of the
component instances and combine them.
@@ -27,8 +27,8 @@
\e ui.qml or \e .qml). For example, a Button component may be defined
in \e Button.ui.qml. Typically, the visual appearance of a component
is defined in a \e {UI file} (ui.qml). To create component files,
you can use \l{Creating Components from Scratch}{wizard templates}, or
\l{Turning Component Instances into Custom Components}
you can use \l{Creating components from scratch}{wizard templates}, or
\l{Turning component instances into custom components}
{move component instances into separate component files}.
Select \uicontrol Components to view the preset components that
@@ -41,12 +41,12 @@
Read more about components:
\list
\li \l {Preset Components}
\li \l {Creating Component Instances}
\li \l {Creating Custom Components}
\li \l {Preset components}
\li \l {Creating component instances}
\li \l {Creating custom components}
\endlist
\section1 Using Components Economically
\section1 Using components economically
It is important to understand the performance costs associated with using
components.
@@ -58,8 +58,8 @@
components that can be conveniently recombined to suit the needs of
your UI.
\li Use as few components as necessary. To minimize the number of
components, use \l{Adding Property Aliases}{alias properties} and
\l{Working with States}{states} to create the differences in your
components, use \l{Adding property aliases}{alias properties} and
\l{Working with states}{states} to create the differences in your
component instances. We recommend reusing components
instead of duplicating them, so the components do not need to be
processed as completely new component types. This reduces loading
@@ -69,8 +69,8 @@
a speedometer should have an \c int or \c real property for speed
to which the UI is bound.
\li Separate UI from the application logic. Designers should work with
the \l{UI Files}{UI files} (.ui.qml), while developers should work
on the corresponding implementation files (.qml) to define their
the \l{UI files} (.ui.qml), while developers should work on the
corresponding implementation files (.qml) to define their
programmatic behaviors or JavaScript. This enables iteration from
both the design and development side of the process without the
risk of overwriting each other's work.
@@ -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
/*!
@@ -6,7 +6,7 @@
\previouspage quick-user-interaction-methods.html
\nextpage quick-data-models.html
\title UI Controls
\title UI controls
You can create instances of preset UI controls to inform users about
the progress of the application or to gather input from users. They are
@@ -23,7 +23,7 @@
\li \l {Selectors}
\li \l {Tab Bar}
\li \l {Tool Bar}
\li \l {Summary of UI Controls}
\li \l {Summary of the UI controls}
\endlist
You can specify values for the properties of component instances in the
@@ -32,7 +32,7 @@
are only available for a particular control. The following sections
describe the preset UI controls and their properties.
\section1 General Control Properties
\section1 General control properties
You can set control properties in the \l Properties view.
@@ -57,7 +57,7 @@
\l {Check Box}. Spacing is not enforced by the controls, so each style may
interpret it differently, and some may ignore it altogether.
\section1 Button Controls
\section1 Button controls
Qt Quick Controls offer a selection of button-like controls for specific
use cases. The following sections contain guidelines for choosing the button
@@ -109,7 +109,7 @@
Don't use a button to set state because a \l Switch is more suitable for
that purpose.
\section3 Highlighted Buttons
\section3 Highlighted buttons
Select the \uicontrol Highlight check box in the \uicontrol Button section
to draw the users' attention towards a button. Highlighting a button has no
@@ -121,7 +121,7 @@
\image qtquickcontrols2-button-highlighted.gif "Highlighted button"
\section3 Flat Buttons
\section3 Flat buttons
A flat button typically does not draw a background unless it is pressed or
checked. To create a flat button, select the \uicontrol Flat check box in
@@ -131,14 +131,14 @@
\image qtquickcontrols2-button-flat.gif "Flat button"
\section3 Icon Buttons
\section3 Icon buttons
To create a button that contains an icon, use the wizard template to
\l{Creating Custom Controls}{create a custom button} and drag-and-drop
the icon to the button background component. For an example of using the
wizard template, see \l{Creating a Push Button}.
\section2 Delay Button
\section2 Delay button
\image qtquickcontrols2-delaybutton.gif "Delay button"
@@ -286,7 +286,7 @@
of the width or height of the button, and make the button's width and height
identical.
\section2 Displaying Text and Icons
\section2 Displaying text and icons
A button can contain text, an icon, or both. Specify the button text in
the \uicontrol Text field in the \uicontrol {Button Content} section. The
@@ -296,7 +296,7 @@
\image qtquick-designer-abstract-button-properties.png "Button Content properties"
\section2 Checking Buttons
\section2 Checking buttons
A \e checkable button toggles between checked (on) and unchecked (off) when
users click on it or press the space bar while the button has active
@@ -316,10 +316,10 @@
If the buttons don't belong to the same parent, checking and unchecking
buttons does not affect the other buttons in the group.
\section2 Button Signals
\section2 Button signals
A button emits the \c clicked() signal when it is activated by users.
\l{Connecting Components to Signals}{Connect to this signal} to perform
\l{Connecting components to signals}{Connect to this signal} to perform
the button's action. Buttons provide the following additional signals:
\c canceled(), \c doubleClicked(), \c pressed(), \c released(), and
\c pressAndHold() for long presses.
@@ -525,7 +525,7 @@
A combo box is used to select a value from a static multiple-line drop-down
list. Users cannot add new values, and only one option can be selected.
Combo box values are provided by a \l{Lists and Other Data Models}
Combo box values are provided by a \l{Lists and other data models}
{data model}. The data model is usually a JavaScript array, a \l ListModel,
or an integer, but other types of data models are also supported.
@@ -621,7 +621,7 @@
position its contents, for instance by creating a \l RowLayout. If the
toolbar contains only one item, it will resize to fit the implicit item
size. This makes a toolbar particularly suitable for use together with
\l{Using Layouts}{layouts}. However, you can specify content width
\l{Using layouts}{layouts}. However, you can specify content width
(\uicontrol W) and height (\uicontrol H) in the \uicontrol {Content size}
field in the \uicontrol Pane section.
@@ -630,7 +630,7 @@
be used in horizontal or vertical toolbars by setting the value of
the \uicontrol Orientation field.
\section1 Styling Controls
\section1 Styling controls
The preset UI controls can be \l {Styling Qt Quick Controls}{styled}.
The \uicontrol {2D} view reads the preferred style from a
@@ -647,7 +647,7 @@
For more information about how to customize a particular control, see
\l{Customization Reference}.
\section1 Summary of UI Controls
\section1 Summary of the UI controls
The following table lists preset UI controls with links to their developer
documentation. They are available in \uicontrol Components >
@@ -6,7 +6,7 @@
\previouspage quick-controls.html
\nextpage quick-2d-effects.html
\title Lists and Other Data Models
\title Lists and other data models
Applications typically need to handle and display data that is organized
into list or grid views. Models, views, and delegates are used for
@@ -28,7 +28,7 @@
For more information, see \l{Models and Views in Qt Quick}.
\section1 List and Grid Views
\section1 List Views and Grid Views
Create instances of \uicontrol {List View} and \uicontrol {Grid View}
components to organize other component instances in list or grid format.
@@ -95,7 +95,7 @@
to realize that setting a cache will only postpone issues caused by
slow-loading delegates, it is not a solution to this problem.
\section1 View Highlight
\section1 View highlight
In the \uicontrol {List View Highlight} and \uicontrol {Grid View Highlight}
sections, you can specify properties for highlighting items in views.
@@ -130,7 +130,7 @@
\uicontrol {Resize duration}, and \uicontrol {Resize velocity} fields
control the speed of the move and resize animations for the highlight.
\section1 Editing List Models
\section1 Editing list models
When you add a \l{GridView}{Grid View}, \l{ListView}{List View}, or
\l{PathView}{Path View}, the ListModel and the delegate component that
@@ -165,7 +165,7 @@
\include qtquick-pathview-editor.qdocinc pathview
\include qtquick-pathview-editor.qdocinc svgpath
\section1 Summary of Model Components
\section1 Summary of the model components
The following table lists the components that you can use to add data models
to UIs. The \e Location column indicates the location of the component in
@@ -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
/*!
@@ -9,7 +9,7 @@
\title Images
\target basic-image
The Image component is used for adding images to the UI in several supported
The \uicontrol Image component is used for adding images to the UI in several supported
formats, including bitmap formats, such as PNG and JPEG, and vector graphics
formats, such as SVG. To use any image files in your designs, you need to
first add them to \l Assets:
@@ -39,7 +39,7 @@
You can use the \l {Border Image} component to display an image,
such as a PNG file, as a border and a background. For more
information about using border images to create buttons, see
\l {Creating Scalable Buttons and Borders}.
\l {Creating scalable buttons and borders}.
If you need to display animated images, such as GIFs, use the
\l {Animated Image} component.
@@ -47,7 +47,7 @@
\note Currently, the supported image formats include JPEG, JPG, PNG, SVG,
HDR, KTX, BMP, TTF, TIFF, WEBP, and GIF.
\section1 Image Size
\section1 Image size
\image qtquick-designer-image-properties.png "Image properties"
@@ -77,7 +77,7 @@
Select the \uicontrol {Auto transform} check box if the image should
automatically apply image transformation metadata, such as EXIF orientation.
\section1 Source Size
\section1 Source size
The \uicontrol {Source size} property specifies the scaled width and height
of the full-frame image. Unlike the value of the \uicontrol Size property,
@@ -110,7 +110,7 @@
reloaded, potentially even from the network, if it is not in the disk cache.
Select the \uicontrol Cache check box to cache the image.
\section1 Image Alignment
\section1 Image alignment
You can align images horizontally and vertically in the
\uicontrol {Alignment H} and \uicontrol {Alignment V}
@@ -138,8 +138,9 @@
\section1 Border Image
The Border Image component extends the features of the Image component.
It is used to create borders out of images by scaling or tiling parts
The \uicontrol{Border Image} component extends the features of the
\uicontrol Image component. It is used to create borders out of images by
scaling or tiling parts
of each image. A source image is broken into 9 regions that are scaled or
tiled individually. The corner regions are not scaled at all, while the
horizontal and vertical regions are scaled according to the values of the
@@ -164,7 +165,7 @@
\section1 Animated Image
The Animated Image component extends the features of the Image component,
The \uicontrol {Animated Image} component extends the features of the Image component,
providing a way to play animations stored as images containing a series of
frames, such as those stored in GIF files.
@@ -192,11 +193,11 @@
\section1 Iso Icon
\note The Iso Icon component is not available if you selected
\note The \uicontrol {Iso Icon} component is not available if you selected
\uicontrol {Qt 6} when \l{Creating Projects}{creating the project}.
The Iso Icon component specifies an icon from an ISO 7000 icon library as a
\l [QtQuickExtras] {Picture} component. The icon to use for the type and
The \uicontrol {Iso Icon} component specifies an icon from an ISO 7000 icon
library as a \l [QtQuickExtras] {Picture} component. The icon to use for the type and
its color can be specified.
To select an icon in the \uicontrol {ISO Icon Browser} in \QDS, select
@@ -205,12 +206,12 @@
\image studio-iso-icon.png
You can use the \l{Picking Colors}{color picker} in \l Properties to
You can use the \l{Picking colors}{color picker} in \l Properties to
set the value of \uicontrol {Icon color}.
\image iso-icon-browser.png
\section1 Summary of Images
\section1 Summary of the image components
The following table lists the components that you can use to add images.
The \e Location column contains the tab name where you can find the
@@ -6,7 +6,7 @@
\previouspage qtquick-properties.html
\nextpage qtquick-annotations.html
\title Scalable Layouts
\title Scalable layouts
The position of a \l{glossary-component}{component} in a UI is either
absolute or relative to other components. The visual components exist at a
@@ -25,30 +25,30 @@
\li Action
\li Purpose
\row
\li \l{Setting Bindings}
\li \l{Setting bindings}
\li To connect the properties of components.
\row
\li \l{Setting Anchors and Margins}
\li \l{Setting anchors and margins}
\li To set the rules for attaching the component to other components. You can define
the distance between the components and put margins on the components.
\row
\li \l{Aligning and Distributing Components}
\li \l{Aligning and distributing components}
\li To align the unanchored components left, right, vertical, horizontal, top, and
bottom with respect to each other.
\row
\li \l{Using Positioners}
\li \l{Using positioners}
\li To arrange components in rows, columns, grids, or flows.
\row
\li \l{Using Layouts}
\li \l{Using layouts}
\li To place the components in columns, grids, rows and stacks in layouts.
The layouts adept the nature of dynamic and resizable UI.
\row
\li \l {Organizing Components}
\li \l {Organizing components}
\li To keep the components or controls collected with frames, groups,
group boxes, pages, and panes.
\endtable
\section2 Setting Bindings
\section2 Setting bindings
Using \e {Property Binding}, you can connect the properties of components. So, change in
one can affect another. Once the binding is set, the property value is automatically
@@ -72,7 +72,7 @@
\inlineimage icons/action-icon-binding.png.
To remove bindings, select \uicontrol Actions > \uicontrol Reset.
See \l {Adding Bindings Between Properties} to learn how to set bindings using
See \l {Adding bindings between properties} to learn how to set bindings using
the \uicontrol Bindings tab in the \l Connections view.
\note For better performance, set anchors and margins for binding
@@ -80,7 +80,7 @@
component, anchor the component to its sibling components on the
left and the right.
\section2 Setting Anchors and Margins
\section2 Setting anchors and margins
In an \l{Important Concepts In Qt Quick - Positioning#anchors}
{anchor-based} layout, each component has a set of
@@ -140,7 +140,7 @@
\uicontrol Margin. Margins work for anchors. They do not take any
effect when using layouts or absolute positioning.
\section2 Aligning and Distributing Components
\section2 Aligning and distributing components
For a group of components, select them to align
and distribute them evenly. As the positions of the components are fixed,
@@ -209,7 +209,7 @@
pixels, click \inlineimage icons/distribute-origin-none.png
button.
\section2 Using Positioners
\section2 Using positioners
Positioner components are containers that manage the positions of their
child components. For many use cases, the best positioner to use is a simple
@@ -231,7 +231,7 @@
\uicontrol Column, \uicontrol Grid or \uicontrol {Flow Positioner}.
\endlist
\section3 Column Positioner
\section3 Column positioner
A \uicontrol Column positions its child components along a single column.
It is used as a convenient way to vertically position a series of
@@ -246,7 +246,7 @@
content and the left, right, top, and bottom edges of components
in the \l Padding section.
\section3 Row and Flow Positioners
\section3 Row and the Flow positioners
A \uicontrol Row positions its child components along a single row. It is
used as a convenient way to horizontally position a series of components
@@ -255,7 +255,7 @@
The \uicontrol Flow component positions its child components like words on a
page, wrapping them to create rows or columns of components.
\image qtquick-positioner-flow-properties.png "Flow properties"
\image qtquick-positioner-flow-properties.png "The Flow properties"
For flow and row positioners, also set the direction of a flow to
either left-to-right or top-to-bottom in the \uicontrol Flow field.
@@ -269,7 +269,7 @@
the width of the row is explicitly set, the left anchor remains to the
left of the row and the right anchor remains to the right of it.
\section3 Grid Positioner
\section3 Grid positioner
A \uicontrol Grid creates a grid of cells that is large enough to hold all
of its child components, and places these components in the cells from left
@@ -292,7 +292,7 @@
To also mirror the horizontal alignment of components, select
\uicontrol AlignRight in the \uicontrol {Alignment H} field.
\section2 Using Layouts
\section2 Using layouts
Use the components available in \uicontrol Components
> \uicontrol {Qt Quick Layouts} to arrange components in UIs.
@@ -307,7 +307,7 @@
to select its size in respect to its non-layout parent component. However,
do not anchor the child components within layouts.
To put components in the \uicontrol {Grid Layout}:
To put components in \uicontrol {Grid Layout}:
\list 1
\li Select all the components and right-click on one of them.
@@ -406,7 +406,7 @@
\image studio-stack-layout-example-output.webp "Stack Layout example output"
\endlist
\section2 Organizing Components
\section2 Organizing components
You can use the \uicontrol Frame and \uicontrol {Group Box} controls to
draw frames around groups of controls.
@@ -6,7 +6,7 @@
\previouspage quick-components.html
\nextpage quick-shapes.html
\title Preset Components
\title Preset components
To use preset components, add the modules that contain them to your project
by selecting \uicontrol Components > \inlineimage icons/plus.png
@@ -19,7 +19,7 @@
and set its properties in the \l Properties view.
For more information about creating your own components, see
\l{Creating Custom Components}.
\l{Creating custom components}.
\section1 2D Components
@@ -27,10 +27,10 @@
\li \l Shapes
\li \l Text
\li \l Images
\li \l {User Interaction Methods}
\li \l {UI Controls}
\li \l {Lists and Other Data Models}
\li \l {2D Effects}
\li \l {User interaction methods}
\li \l {UI controls}
\li \l {Lists and other data models}
\li \l {2D effects}
\li \l {Design Effects}
\li \l {Logic Helpers}
\li \l Animations
@@ -48,15 +48,15 @@
\li \l {3D Views}
\li \l {Node}
\li \l {Group}
\li \l {Instanced Rendering}
\li \l {Skeletal Animation}
\li \l {3D Models}
\li \l {Materials and Shaders}
\li \l {Instanced rendering}
\li \l {Skeletal animation}
\li \l {3D models}
\li \l {Materials and shaders}
\li \l {Textures}
\li \l {3D Materials}
\li \l {3D Effects}
\li \l {Custom Shaders}
\li \l {Custom Effects and Materials in Qt 5}
\li \l {3D materials}
\li \l {3D effects}
\li \l {Custom shaders}
\li \l {Custom effects and materials in Qt 5}
\li \l {Lights}
\li \l {Cameras}
\li \l {Scene Environments}
@@ -206,7 +206,7 @@
\uicontrol {Rotational axis} property determine whether the component
is rotated around the x-axis or the y-axis.
\section1 Summary of Shapes
\section1 Summary of the shape components
The following table lists the components that you can use to draw shapes.
The \e Location column indicates the location of the component in
@@ -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
/*!
@@ -29,7 +29,7 @@
They differ from the basic components in that a common style is applied
to them and that you can specify placeholder text for them.
\section1 Using Rich Text
\section1 Using rich text
You can use rich text in the \uicontrol Text and \uicontrol {Text Input}
components. To open the rich text editor, select the \inlineimage icons/edit.png
@@ -53,7 +53,7 @@
\image qtquick-rtf-editor.png "Text formatted as rich text in the editor"
\section1 Marking Strings for Translation
\section1 Marking strings for translation
To support translators, mark the strings that should be translated.
In \uicontrol Properties > \uicontrol Character > \uicontrol Text, select
@@ -77,7 +77,7 @@
For more information, see \l {Mark Strings for Translation}.
\section1 Character Properties
\section1 Character properties
You can set font properties in the \uicontrol Character section
in \uicontrol Properties. For each string that you enter in the
@@ -123,7 +123,7 @@
to set the spacing proportionally to the line (as a multiplier).
For example, set to 2 for double spacing.
\section1 Text Alignment
\section1 Text alignment
You can align text components horizontally and vertically. By default, text
is vertically aligned to the top. Horizontal alignment follows the natural
@@ -136,11 +136,11 @@
For a single line of text, the size of the text is the area of the text.
In this common case, all alignments are equivalent. To center a text in
its parent, use \l{Setting Anchors and Margins}{anchoring} or bind the
its parent, use \l{Setting anchors and margins}{anchoring} or bind the
width of the text component to that of the parent. For more information, see
\l{Setting Bindings}.
\l{Setting bindings}.
\section1 Text and Style Colors
\section1 Text and style colors
You can set the color of the text itself and a secondary color used by
text styles.
@@ -156,7 +156,7 @@
For more information about selecting colors, see \l{Picking Colors}. You
can only set solid colors for text components.
\section1 Advanced Text Properties
\section1 Advanced text properties
The height and width of a text component are determined automatically depending
on the values of the properties you set, to accommodate the length of the
@@ -178,7 +178,7 @@
has a minimum bound specified by the \uicontrol {Min size} field and
maximum bound specified by the \uicontrol Size field.
\section3 Wrapping and Eliding Text
\section3 Wrapping and eliding text
In the \uicontrol {Wrap mode} field, you can wrap the text to the text
component's width. The text will only wrap if you set an explicit width for
@@ -202,7 +202,7 @@
Multi-length strings are ordered from longest to shortest, separated by the
Unicode \e {String Terminator} character \c U009C.
\section3 Formatting Text
\section3 Formatting text
Text can be either in plain text or rich text format, depending on the
value you set in the \uicontrol Format field. If you select
@@ -211,7 +211,7 @@
described on the \l {Supported HTML Subset}. Note that plain text offers
better performance than rich text.
\section3 Rendering Text
\section3 Rendering text
In the \uicontrol {Render type} field, you can override the default
rendering type for a text component. Select \uicontrol NativeRendering if
@@ -238,7 +238,7 @@
\note This property only describes a preference, as the full range of
hinting levels are not supported on all of Qt's supported platforms.
\section1 Advanced Font Properties
\section1 Advanced font properties
You can specify additional properties for fonts in the
\uicontrol {Font Extras} section.
@@ -279,7 +279,7 @@
\image qtquick-designer-text-input-properties.png "Text input field properties"
\section2 Entering Passwords
\section2 Entering passwords
You can set properties for \uicontrol {Text Input} components that make
them suitable for entering passwords.
@@ -299,7 +299,7 @@
as users enter them. The mask character is displayed in the
\uicontrol {Password character} field.
\section2 Entering Text
\section2 Entering text
You can specify how users can enter text into text edit or input fields.
@@ -318,7 +318,7 @@
To prevent users from changing the text, select the \uicontrol {Read only}
check box.
\section2 Selecting Text
\section2 Selecting text
In the \uicontrol {Selection mode} field, you can specify whether
individual characters or whole words are selected when selecting text
@@ -350,7 +350,7 @@
If the \uicontrol {Persistent selection} check box is selected, a text edit
or input keeps its selection when active focus moves to another component.
\section2 Tabs and Margins
\section2 Tabs and margins
You can specify additional properties for formatting a block of text in
a \uicontrol {Text Edit} component.
@@ -376,7 +376,7 @@
text does not have enough vertical or horizontal space in which to be
rendered, it will appear clipped.
\section1 Placeholder Text
\section1 Placeholder text
For \uicontrol {Text Field} and \uicontrol {Text Area} controls, you can
specify text to display in a field before users enter text into it.
@@ -388,7 +388,7 @@
Select the \uicontrol Hover check box to enable the text field to accept
hover events.
\section1 Summary of Text Components
\section1 Summary of the text components
The following table lists the components that you can use to add text to
UIs. The \e Location column contains the tab name where you can find the
@@ -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
/*!
@@ -6,7 +6,7 @@
\previouspage quick-images.html
\nextpage quick-controls.html
\title User Interaction Methods
\title User interaction methods
You can create instances of preset basic components to add interaction
methods to UIs, such as performing actions by using a pointing device or
@@ -14,7 +14,7 @@
vertically. They are availabe in \uicontrol Components >
\uicontrol {Default Components} > \uicontrol Basic.
In addition, you can create instances of preset \l{UI Controls} to inform
In addition, you can create instances of preset \l{UI controls} to inform
users about the progress of the application or to gather input from users.
The following basic components are available for user interaction:
@@ -23,7 +23,7 @@
\li \l {Mouse Area}
\li \l {Focus Scope}
\li \l {Flickable}
\li \l {Summary of Basic Interaction Methods}
\li \l {Summary of the basic interaction methods}
\endlist
You can specify values for the properties of component instances in the
@@ -37,14 +37,14 @@
a defined area.
A mouse area receives events within a defined area. One quick way to define
this area is to \l{Setting Anchors and Margins}{anchor} the mouse area to
this area is to \l{Setting anchors and margins}{anchor} the mouse area to
its parent's area. If the parent is a \l {basic-rectangle}{Rectangle} (or
any component that is derived from an \l {basic-item}{Item}), the mouse area
will fill the area defined by the parent's dimensions. Alternatively, you
can define an area smaller or larger than the parent. Several controls, such
as \l {Button}{buttons}, contain a mouse area.
A mouse area emits \l{Connecting Components to Signals}{signals} in response
A mouse area emits \l{Connecting components to signals}{signals} in response
to different mouse events:
\list
@@ -59,7 +59,7 @@
\li \c released()
\endlist
\section2 Mouse Area Properties
\section2 Mouse Area properties
A \uicontrol {Mouse Area} is an invisible component that is typically used
in conjunction with a visible component in order to provide mouse handling
@@ -125,7 +125,7 @@
propagating down this visual hierarchy until a \uicontrol {Mouse Area}
accepts the event.
\section2 Advanced Mouse Area Properties
\section2 Advanced Mouse Area properties
You can place a \uicontrol {Mouse Area} instance within a component that
filters child mouse events, such as \uicontrol Flickable. However, the
@@ -140,7 +140,7 @@
For more information, see the developer documentation for the \l {MouseArea}
{Mouse Area} component.
\section2 Drag Properties
\section2 Drag properties
You can specify properties for dragging components in the \uicontrol Drag
section. Select the component to drag in the \uicontrol Target field.
@@ -190,8 +190,8 @@
The \uicontrol {Focus Scope} component is not a visual component and
therefore the properties of its children need to be exposed to the parent
component of the focus scope. \l{Using Layouts}{Layouts} and
\l{Using Positioners}{positioners} will use these visual and styling
component of the focus scope. \l{Using layouts}{Layouts} and
\l{Using positioners}{positioners} will use these visual and styling
properties to create the layout.
For more information, see \l {Keyboard Focus in Qt Quick}.
@@ -202,7 +202,7 @@
and flicked, causing the view onto the child components to scroll. This
behavior forms the basis of components that are designed to show large
numbers of child components, such as \uicontrol {List View} and
\uicontrol {Grid View}. For more information, see \l{List and Grid Views}.
\uicontrol {Grid View}. For more information, see \l{List Views and Grid Views}.
In traditional user interfaces, views can be scrolled using standard
controls, such as scroll bars and arrow buttons. In some situations, it
@@ -269,7 +269,7 @@
provides a smoother experience (no jump) at the cost of losing some of the
drag distance at the beginning.
\section2 Flickable Geometry
\section2 Flickable Geometry properties
The \uicontrol {Content size} field specifies the dimensions of the
surface controlled by a flickable. Typically, set the values of the
@@ -287,7 +287,7 @@
may have an arbitrary origin due to delegate size variation, or component
insertion or removal outside the visible region.
\section1 Summary of Basic Interaction Methods
\section1 Summary of the basic interaction methods
The following table lists the components that you can use to add basic
interaction methods to UIs with links to their developer documentation.
@@ -6,20 +6,20 @@
\previouspage studio-implementing-applications.html
\nextpage studio-debugging.html
\title Designer-Developer Workflow
\title Designer-developer workflow
\note In this section, you are using advanced menu items. These are not
visible by default. To toggle the visibility of advanced menu items, see
\l{Customizing the Menu Bar}.
\QDS enables designers and developers to work together on common
projects to develop applications. Designers use the \l{Design Views}{views}
in the \uicontrol Design mode to modify \l{UI Files}{UI files} (\e .ui.qml),
projects to develop applications. Designers use the \l{Design views}{views}
in the \uicontrol Design mode to modify \l{UI files} (\e .ui.qml),
whereas developers use Qt Creator to work on the Qt Quick (\e .qml) and
other files that are needed to implement the application logic and to
prepare the application for production.
\QDS \l{Creating Projects}{projects} come with boilerplate code for a
\QDS \l{Creating projects}{projects} come with boilerplate code for a
working Qt 6 application that you can build and run in Qt Creator using
CMake. Therefore, you can open, build, and run the projects with Qt Creator.
@@ -32,7 +32,7 @@
\e {main.py}. Use this file to start the development in Python for the UI
made with \QDS.
\section1 Exporting a \QDS Project for C++ Development
\section1 Exporting a \QDS project for C++ development
Before you export a \QDS project for Qt Creator, install the following:
\list
@@ -44,7 +44,7 @@
To export a \QDS project for Qt Creator:
\list 1
\li \l {Creating a Project} {Create} or open your \QDS project with \QDS 4.5 or above.
\li \l {Creating a project} {Create} or open your \QDS project with \QDS 4.5 or above.
\note If you are creating a new project in \QDS, select the
\uicontrol {Target Qt Version} that is not higher than the Qt version
@@ -61,7 +61,7 @@
\image studio-project-export-cmake.webp "Exporting Qt Design Studio project to CMake"
\endlist
\section1 Opening the \QDS Project in Qt Creator
\section1 Opening the \QDS project in Qt Creator
Open the \e {CMakeLists.txt} file in Qt Creator:
@@ -138,7 +138,7 @@
\enddetails
\section1 Exporting a \QDS Project for Python Development
\section1 Exporting a \QDS project for Python development
\list 1
\li \l {Creating a Project} {Create} a project with \QDS 4.5 or above.
@@ -160,7 +160,7 @@
\image studio-project-export-python.webp "Exporting Qt Design Studio project to Python"
\endlist
\section1 Opening the \QDS Project with Python
\section1 Opening the \QDS project with Python
After your project have the Python folder and the \e {main.py} file
available, you can start setting up your Python environment for developing
@@ -206,7 +206,7 @@
functionalities to the project. Go to \l {Qt for Python} to learn more
about developing Qt projects using Python.
\section1 Converting Qt Design Studio Projects to Applications
\section1 Converting \QDS projects to applications
\include qtquick-converting-ui-projects-to-applications.qdocinc {converting-ui-projects-to-applications} {\QDS}
@@ -13,10 +13,10 @@
You can jump to the code from:
\list
\li \uicontrol {Navigator} view
\li \uicontrol {2D} view
\li \uicontrol {States} view
\li \uicontrol {Connections} view
\li The \uicontrol {Navigator} view
\li The \uicontrol {2D} view
\li The \uicontrol {States} view
\li The \uicontrol {Connections} view
\endlist
\section1 Jump to the Code from the Navigator View
@@ -28,7 +28,7 @@
\image jump-to-the-code-from-navigator-view.webp
\section1 Jump to the Code from the 2D View
\section1 Jump to the Code from the 2D view
\list 1
\li Right-click on a component in the \uicontrol {2D} view.
@@ -41,7 +41,7 @@
or in the \uicontrol {2D} view and press \key {F4}. That takes you to the code
location in the \uicontrol {Code} view.
\section1 Jump to the Code from the States View
\section1 Jump to the Code from the States view
\list 1
\li Locate the state you want to check in the \uicontrol {States} view.
@@ -52,7 +52,7 @@
\image jump-to-the-code-from-state-view.webp
\section1 Jump to the Code from the Connections View
\section1 Jump to the Code from the Connections view
\list 1
\li Select a connection in the \uicontrol {Connections} view.
@@ -6,7 +6,7 @@
\previouspage studio-live-preview.html
\nextpage creator-live-preview-devices.html
\title Previewing on Desktop
\title Previewing on desktop
To preview the currently active QML file on the desktop:
@@ -30,7 +30,7 @@
To preview the application in a different zoom level, right-click the \uicontrol {Live Preview}
button and select the zoom level.
\section1 Overriding the Preview Tool
\section1 Overriding the preview tool
By default, the QML runtime is used for previewing.
@@ -44,6 +44,6 @@
the preview tool executable is located.
\endlist
To preview the design on a device, see \l {Previewing on Devices}.
To preview the design on a device, see \l {Previewing on devices}.
*/
@@ -6,14 +6,14 @@
\previouspage creator-quick-ui-forms.html
\nextpage studio-collecting-usage-statistics.html
\title Managing Data Collection
\title Managing data collection
See below for more information about the collected data:
\list
\li \l {Collecting Usage Statistics}
\li \l {Collecting User Feedback}
\li \l {Reporting Crashes}
\li \l {Collecting usage statistics}
\li \l {Collecting user feedback}
\li \l {Reporting crashes}
\endlist
\section1 Principles of Data Collection
@@ -27,7 +27,7 @@
\l{https://www.qt.io/terms-conditions/privacy-and-security}
{Qt Appendix for Privacy and Security}.
\sa {Collecting Usage Statistics}
\sa {Collecting usage statistics}
*/
/*!
@@ -35,7 +35,7 @@
\previouspage studio-telemetry.html
\nextpage studio-user-feedback.html
\title Collecting Usage Statistics
\title Collecting usage statistics
The telemetry plugin uses Qt Insight, an analytics solution for collecting usage data in
Qt applications. The Qt Insight Tracker library ensures compliance with GDPR regulations.
@@ -49,5 +49,5 @@
\image studio-preferences-telemetry-usage-statistics.webp {Usage Statistics}
\sa {Managing Data Collection}
\sa {Managing data collection}
*/
@@ -1,4 +1,4 @@
// Copyright (C) 2023 The Qt Company Ltd.
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
@@ -6,7 +6,7 @@
\page studio-compatibility-with-mcu-sdks.html
\nextpage studio-features-on-mcu-projects.html
\title \QDS Version Compatibility with \QMCU SDKs
\title \QDS version compatibility with \QMCU SDKs
The following table lists the \QDS versions you can use to develop
applications with particular \QMCU SDK versions.
@@ -1,4 +1,4 @@
// Copyright (C) 2023 The Qt Company Ltd.
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
@@ -6,7 +6,7 @@
\page studio-projects-for-mcus.html
\nextpage studio-creating-uis-for-mcus.html
\title Creating Projects for MCUs
\title Creating projects for MCUs
Use the \uicontrol {\QMCU} preset in the \QDS wizard to set up a new \QMCU
project. When you create a project with the wizard, all the necessary files
@@ -18,9 +18,9 @@
of the default components that you can deploy, run, and debug on MCU boards.
\note For more information on the default components available for MCU
projects, see \l {Qt Design Studio Features on MCU Projects}.
projects, see \l {\QDS features on MCU projects}.
\section1 Creating an MCU Project
\section1 Creating an MCU project
To create an MCU project:
@@ -50,7 +50,7 @@
\li .qml files define the functionality and appearance of application
components.
\li \e Screen01.ui.qml defines a custom component that you can edit in
the \l {2D} view. For more information, see \l {UI Files}.
the \l {2D} view. For more information, see \l {UI files}.
While the custom component is a good starting point for new users,
you don't have to use it. Specifically, if you export and import
@@ -79,7 +79,7 @@
\sa {Using Custom Presets}
\section1 Adding Files to MCU Projects
\section1 Adding files to MCU projects
You can use wizard templates to add individual files to projects.
@@ -99,7 +99,7 @@
\row
\li Qt Quick File
\li Generates a component with one of the following default components
or \l{Using Positioners}{positioners} as the root component:
or \l{Using positioners}{positioners} as the root component:
\l {basic-item}{Item}, \l {basic-rectangle}{Rectangle}, \l {Images}
{Image}, \l {Border Image}, \l Flickable, Row, Column, Flow, or
Grid.
@@ -110,7 +110,7 @@
\row
\li Qt Quick Views
\li Generates a List View. For more information, see
\l{List and Grid Views}.
\l{List Views and Grid Views}.
\row
\li Qt Quick UI Form
\li Creates a UI file along with a matching QML file for
@@ -1,4 +1,4 @@
/ Copyright (C) 2023 The Qt Company Ltd.
/ Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
@@ -14,20 +14,20 @@
design from the design tools, and import your 2D UI design assets into \QDS,
which can convert them into code for developers. For more information on
managing the original assets created with specialized UI design tools, see
\l {Asset Creation with Other Tools}.
\l {Asset creation with other tools}.
Once your UI design assets are in \QDS, use it to \l {Wireframing} {wireframe}
your MCU application, to visualize its structure. To modify the look and feel
of your UI further, utilize the preset UI components available in \QDS.
\section1 Using MCU Components
\section1 Using MCU components
With \QDS, you can use subsets of components to create UIs for
devices that are powered by microcontroller units (MCU). The subset of
supported components depends on the \QMCU version that you use for
development.
To develop for MCUs, \l{Creating Projects for MCUs}{create an MCU project}.
To develop for MCUs, \l{Creating projects for MCUs}{create an MCU project}.
Only the components available on MCUs are displayed in \l Components. Also,
only a subset of properties is supported for the supported components. The
properties that are not available on MCUs are marked in the \l Properties
@@ -35,7 +35,7 @@
\image studio-mcu-components-and-properties.webp "Components and Text properties supported for MCUs"
For more information on the supported views and features, see \l{\QDS Features on MCU Projects}.
For more information on the supported views and features, see \l{\QDS features on MCU projects}.
For an example on how to create a UI that runs both on the desktop and
on MCUs, see \l {Washing Machine UI}. For step-by-step instructions on how
@@ -48,5 +48,5 @@
\li \l {Designing a UI for Renesas RH850-D1M1A}
\endlist
\sa {Specifying Component Properties}, {Qt Design Studio/MCU FAQ}
\sa {Specifying component properties}, {Qt Design Studio/MCU FAQ}
*/
@@ -1,4 +1,4 @@
/ Copyright (C) 2023 The Qt Company Ltd.
/ Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
@@ -6,7 +6,7 @@
\previouspage studio-creating-uis-for-mcus.html
\nextpage studio-connecting-mcus-with-creator.html
\title Developing Applications for MCUs
\title Developing applications for MCUs
As a GUI/application developer, use \QDS to bring your designs to life. Add
further functionality to your applications and utilize the \l {Prototyping}
@@ -16,7 +16,7 @@
With \QDS, designers and developers can work together on common projects to
develop applications. As a designer you can use the views in the \e Design
mode to modify UI files (.ui.qml). For more information, see
\l {Implementing Applications}.
\l {Implementing applications}.
\image qds-mcu-target-deployment.png
@@ -1,4 +1,4 @@
// Copyright (C) 2023 The Qt Company Ltd.
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
@@ -6,7 +6,7 @@
\page studio-features-on-mcu-projects.html
\nextpage studio-projects-for-mcus.html
\title \QDS Features on MCU Projects
\title \QDS features on MCU projects
The table below provides a summary of how the key \QDS features are supported
for developing MCU projects.
@@ -1,4 +1,4 @@
/ Copyright (C) 2023 The Qt Company Ltd.
/ Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
@@ -6,7 +6,7 @@
\previouspage studio-on-mcus.html
\nextpage studio-compatibility-with-mcu-sdks.html
\title \QMCU Framework
\title \QMCU framework
\QMCU is a comprehensive framework that supports various hardware ecosystems
and platforms. One of the most important libraries provided by the \QMCU
@@ -20,16 +20,16 @@
\endtable
\list
\li \l {\QMCU Framework}
\li \l {\QMCU framework}
Provides an overview of the \QMCU framework.
\li \l {\QDS Version Compatibility with \QMCU SDKs}
Lists how the \QDS versions match with particular \QMCU SDKs.
\li \l {\QDS Features on MCU Projects}
\li \l {\QDS features on MCU projects}
Specifies how the \QDS features are supported for developing MCU projects.
\li \l {Creating Projects for MCUs}
\li \l {Creating projects for MCUs}
Describes how to use the \QDS wizard and \uicontrol {\QMCU} preset
to set up a new \QMCU project.
@@ -1,4 +1,4 @@
// Copyright (C) 2023 The Qt Company Ltd.
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
@@ -8,13 +8,13 @@
\nextpage qt-ui-viewer.html
\title Creating a Single Page Navigation Web Application
\title Creating a single page navigation web application
This example explains how you can create a single page navigation web
application suitable to run in Qt Design Viewer. In this project,
you create the structure and navigation for the web application.
\section1 Setting up the Project
\section1 Setting up the project
To set up the project:
\list 1
@@ -33,7 +33,7 @@
\endlist
\endlist
\section1 Adding Components
\section1 Adding components
Next, add the needed components to create the structure for your web
application.
@@ -70,7 +70,7 @@
\image web-navigation-components.png
\section1 Creating the Pages
\section1 Creating the pages
Next, create the separate pages for your web application. In this example,
you create pages for \e Home, \e {About Us}, and \e {Contact Us}.
@@ -132,7 +132,7 @@ You can see the pages you created under \uicontrol {My Components} in the
\image web-navigation-page-components.png
\section1 Organizing the Pages
\section1 Organizing the pages
To organize the pages vertically:
@@ -194,7 +194,7 @@ main rectangle so that it adapts to the window size:
\c {Window.height}.
\endlist
\section1 Creating the Navigation
\section1 Creating the navigation
The final step is to create the navigation for the web page. To do this, use the buttons
that you created earlier.
@@ -1,4 +1,4 @@
// Copyright (C) 2019 The Qt Company Ltd.
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
@@ -6,7 +6,7 @@
\previouspage creator-live-preview-devices.html
\nextpage design-viewer-single-page-navigation.html
\title Sharing Applications Online
\title Sharing applications online
\image qt-design-viewer.webp
@@ -24,7 +24,7 @@
The loaded applications remain locally in your browser. No data is uploaded
into the cloud.
\section1 Sharing your Application Online
\section1 Sharing your application online
To share your \QDS application online:
@@ -45,7 +45,7 @@
\image share-online-manage.webp
\section1 Best Practices
\section1 Best practices
\l {Creating a Single Page Navigation Web Application}
\l {Creating a single page navigation web application}
*/
@@ -6,7 +6,7 @@
\previouspage qtquick-creating-ui-logic.html
\nextpage qtquick-placeholder-data.html
\title Simulating Complex Experiences
\title Simulating complex experiences
\QDS enables you to connect UIs to different forms of data from various
sources, such as QML-based data models, JavaScript files, and backend
@@ -15,23 +15,23 @@
\list
\li \l{Loading Placeholder Data}
\li \l{Loading placeholder data}
You can create QML files that contain placeholder data, so that
you can test grid, list, or path views, even though you don't
have access to real data.
\li \l{Simulating Application Logic}
\li \l{Simulating application logic}
You can use JavaScript to generate mock data for your UI.
\li \l{Simulating Dynamic Systems}
\li \l{Simulating dynamic systems}
Use the Simulink connector to connect a Simulink Simulation Model to
your UI. Simulink is a MATLAB-based graphical programming environment
for modeling, simulating, and analyzing multi-domain dynamic systems.
\li \l{Using QML Modules with Plugins}
\li \l{Using QML modules with plugins}
You can load C++ plugins for QML to simulate data.
\endlist
@@ -6,7 +6,7 @@
\previouspage qtquick-motion-design.html
\nextpage studio-timeline.html
\title Introduction to Animation Techniques
\title Introduction to animation techniques
\image timeline-rotation-animation.gif "Timeline animation of rotation and opacity"
@@ -19,7 +19,7 @@
\li Data-driven UI logic animations
\endlist
\section1 Common Motion Design Techniques
\section1 Common motion design techniques
The following table summarizes common motion design techniques for 2D and
3D and their typical use cases.
@@ -33,7 +33,7 @@
\li Linear interpolation through intermediate values at specified
keyframes instead of immediately changing to the target value.
\row
\li \l{Editing Easing Curves}{Easing curves} attached to keyframes
\li \l{Editing easing curves}{Easing curves} attached to keyframes
\li Nonlinear interpolation between keyframes to make components
appear to pick up speed, slow down, or bounce back at the end
of the animation.
@@ -44,7 +44,7 @@
simultaneously.
\endtable
\section2 Timeline and Keyframe Based Animation
\section2 Timeline and keyframe based animation
Timeline animation is based on \e keyframes. In \QDS, keyframes determine the
value of the property of a \l{glossary_component}{component} at a certain
@@ -57,7 +57,7 @@
In the middle of the animation, the y property has the value of 50 since
keyframes are interpolated linearly by default.
\section2 Easing Curves
\section2 Easing curves
Sometimes you don't want linear movement but would rather like the rectangle
to move faster at the beginning and slower at the end of the animation. To
@@ -67,7 +67,7 @@
easing curves can make components appear to pick up speed, slow down, or
bounce back at the end of the animation.
\section2 Animation Curves
\section2 Animation curves
While easing curves work well for most simple UI animations, more complex
3D animations require several keyframes, so it becomes necessary to visualize
@@ -78,13 +78,13 @@
simultaneously so that you can see the animation for the x position
and the animation for the y position side-by-side.
\section1 State-to-State Animations
\section1 State-to-state animations
To navigate between UI states, use transitions between different states of the UI
using a transition timeline that is based on keyframes. You can apply easing
curves to the keyframes.
\section2 Transitions Between States
\section2 Transitions between states
UIs are designed to present different UI configurations in different
scenarios, or to modify their appearances in response to user
@@ -118,10 +118,10 @@
In \l {Transitions}, you can set the start frame, end frame,
and duration for the transition of each property. You can also set
an \l{Editing Easing Curves}{easing curve} for each animation and
an \l{Editing easing curves}{easing curve} for each animation and
the maximum duration of the whole transition.
\section1 Data-Driven UI Logic Animations
\section1 Data-driven UI logic animations
The following table summarizes techniques used for animating the UI logic
by using real or mock data from a backend.
@@ -139,7 +139,7 @@
transitions.
\endtable
\section2 Data-Driven Timeline Animation
\section2 Data-driven timeline animation
You can connect property values to data backends to drive timeline
animation. You can fetch data from various sources, such as data models,
@@ -156,7 +156,7 @@
For more information, see \l{Simulating Complex Experiences}.
\section2 Programmatic Animation
\section2 Programmatic animation
You can control property animation programmatically. Property animations
are created by binding \uicontrol Animation components to property
@@ -6,7 +6,7 @@
\previouspage qtquick-positioning.html
\nextpage qtquick-prototyping.html
\title Annotating Designs
\title Annotating designs
You can submit your designs to review or further development as QML files.
You can annotate your designs to provide reviewers or developers with
@@ -6,7 +6,7 @@
\previouspage qtquick-prototyping.html
\nextpage studio-simulation-overview.html
\title Creating UI Logic
\title Creating UI logic
Turn your wireframe into an interactive prototype by adding UI logic that
enables your components to apply actions or react to mock data from backend
@@ -23,7 +23,7 @@
components by emitting a signal that indicates a change in the value.
To reference a property of a component from another component, you can
create \l{Adding Property Aliases}{property aliases} that hold a reference
create \l{Adding property aliases}{property aliases} that hold a reference
to another property. Unlike an ordinary property definition, which
allocates a new, unique storage space for the property, a property
alias connects the newly declared property (called the
@@ -32,7 +32,7 @@
exported as a public property of the relevant component. For example,
a speedometer should have a property for speed to which the UI is bound.
You can declare various \l{Working with States}{UI states} that describe how
You can declare various \l{Working with states}{UI states} that describe how
property values change from a base state. States can be a useful way of
organizing your UI logic. You can associate transitions with components
to define how their properties will animate when they change due to a
@@ -50,7 +50,7 @@
component types. This reduces the loading and compilation time as well as
the package size of the final application.
The preset \l{UI Controls}{UI controls} have default properties and states
The preset \l{UI controls} have default properties and states
that you can modify. If you need additional properties, you can turn
instances of the controls into custom components and specify new properties
for them.
@@ -81,34 +81,34 @@
\li Go to
\row
\li Responding to application events
\li \l{Connecting Components to Signals}
\li \l{Connecting components to signals}
\row
\li Formatting connections
\li \l{Actions and Conditions}
\li \l{Actions and conditions}
\row
\li Dynamically changing the behavior of a component
\li \l{Adding Bindings Between Properties}
\li \l{Adding bindings between properties}
\row
\li Formatting property bindings
\li \l{Setting Bindings}
\li \l{Setting bindings}
\row
\li Referencing a property of a component from another component
\li \l{Adding Property Aliases}
\li \l{Adding property aliases}
\row
\li Referencing a state from within a specific component
\li \l{Working with States}
\li \l{Working with states}
\row
\li Switching to a state when a particular property changes
\li \l{Applying States}
\li \l{Applying states}
\row
\li Using preset UI controls that have default properties and states
\li \l{UI Controls}
\li \l{UI controls}
\row
\li Creating conditional conditions
\li \l{Logic Helpers}
\row
\li Adding custom properties for a particular component type
\li \l{Specifying Custom Properties}
\li \l{Specifying custom properties}
\omit
\row
\li Adding properties for controlling states
@@ -6,14 +6,14 @@
\previouspage studio-importing-3d.html
\nextpage sharing-assets.html
\title Exporting Components
\title Exporting components
\note In this section, you are using advanced menu items. These are not
visible by default. To toggle the visibility of advanced menu items, see
\l{Customizing the Menu Bar}.
\l{glossary-component}{Components} contained in \l{UI Files}
{UI files} (.ui.qml) can be exported to JSON metadata format and PNG assets.
\l{glossary-component}{Components} contained in \l{UI files} (.ui.qml)
can be exported to JSON metadata format and PNG assets.
To export the UI files from the current project, select \uicontrol Build >
\uicontrol {Export Components}.
@@ -33,7 +33,7 @@
components generate assets as PNG files.
\endlist
\section1 Configuring QML Export
\section1 Configuring the QML export
You can configure the export in the \uicontrol {Export Components} dialog,
which lists the UI files (.ui.qml) of the current project.
@@ -6,7 +6,7 @@
\previouspage studio-importing-2d.html
\nextpage studio-importing-3d.html
\title Using Custom Fonts
\title Using custom fonts
For your UI to use custom fonts when you preview it on a device,
you have to import the fonts to the project folder. \QDS deploys them to
@@ -6,7 +6,7 @@
\previouspage quick-states.html
\nextpage studio-live-preview-desktop.html
\title Validating with Target Hardware
\title Validating with target hardware
Preview a UI file or the entire UI on the desktop, as well as on embedded
Linux devices to instantly view the changes you make to the UI. On Android
@@ -20,18 +20,18 @@
don't have \QC.
\list
\li \l{Previewing on Desktop}
\li \l{Previewing on desktop}
Preview individual QML files or the whole UI.
\li \l{Previewing on Devices}
\li \l{Previewing on devices}
Connect your devices to your computer.
\li \l{Sharing Applications Online}
\li \l{Sharing applications online}
Share applications online and view them in a web browser.
\li \l{Viewing Applications on Android}
\li \l{Viewing applications on Android}
Preview \QDS projects with \QUV on an Android device.
\endlist
@@ -19,29 +19,29 @@
\endtable
\list
\li \l {Introduction to Animation Techniques}
\li \l {Introduction to animation techniques}
Learn more about which animation techniques are supported by \QDS
and the use cases they are most suitable for.
\li \l {Creating Timeline Animations}
\li \l {Creating timeline animations}
You can use a timeline and keyframe based editor in the
\l Timeline view to animate the properties of UI
components. Animating properties enables their values to
move through intermediate values at specified keyframes
instead of immediately changing to the target value.
\li \l{Editing Easing Curves}
\li \l{Editing easing curves}
Specify easing curves for nonlinear interpolation between
keyframes in timeline animations, as well as between original
and new property values in property animations and between
transitions.
\li \l {Production Quality}
\li \l {Production quality}
After the wireframing and prototyping phases, you can use previewing
and profiling tools to fine-tune your UI for production.
\li \l{Optimizing Designs}
\li \l{Optimizing designs}
You can test your UIs on the target devices to make sure you get
the best performance out of your animations. To solve performance
@@ -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
/*!
@@ -6,7 +6,7 @@
\previouspage qtquick-production-quality-animation.html
\nextpage studio-optimized-3d-scenes.html
\title Optimizing Designs
\title Optimizing designs
You can test your UIs on the target devices to make sure you get the best
performance out of your animations. To solve performance problems, you
@@ -24,9 +24,9 @@
\l {QML Performance Considerations And Suggestions}.
For more information about optimizing 3D scenes, see
\l{Creating Optimized 3D Scenes}.
\l{Creating optimized 3D scenes}.
\section1 Minimizing Image Size
\section1 Minimizing image size
Images are a vital part of any user interface. Unfortunately, they are also
a big source of problems due to the time it takes to load them, the amount
@@ -38,7 +38,7 @@
For more information about how to use images efficiently in your UI, see
\l{Images}.
\section1 Avoid Transparency
\section1 Avoiding transparency
Opaque content is generally a lot faster to draw than transparent because
the latter needs blending and the renderer can potentially optimize opaque
@@ -6,7 +6,7 @@
\previouspage studio-simulation-overview.html
\nextpage studio-javascript.html
\title Loading Placeholder Data
\title Loading placeholder data
\QDS supports views, models, and delegates, so that when you add
a Grid View, List View, or Path View component, the ListModel and
@@ -18,7 +18,7 @@
or in other component files. A typical example is a component that uses the
properties of its parent, such as \c parent.width.
\section1 Using Dummy Models
\section1 Using dummy models
If you open a file in the \l {2D} view that references a C++ model, you see
nothing in it. If the data in the model is fetched from the
@@ -64,7 +64,7 @@
}
\endqml
\section1 Creating Dummy Context
\section1 Creating dummy context
The following example presents a common pattern:
@@ -6,7 +6,7 @@
\previouspage qtquick-editing-easing-curves.html
\nextpage qtquick-optimizing-designs.html
\title Production Quality
\title Production quality
After the wireframing and prototyping phases, you can use previewing and
profiling tools to fine-tune your UI for production.
@@ -19,7 +19,7 @@
and stuttering.
\endlist
\section1 FPS Refresh Rate
\section1 FPS refresh rate
As a general rule, animators strive to allow the rendering engine to
achieve a consistent 60 frames-per-second (FPS) refresh rate. 60 FPS
@@ -43,11 +43,11 @@
\endlist
For more information about previewing UIs on devices, see
\l{Validating with Target Hardware}.
\l{Validating with target hardware}.
\section1 Profiling UI Code
\section1 Profiling UI code
You can use \l{Profiling QML Applications}{QML Profiler} that is integrated
You can use \l{Profiling QML applications}{QML Profiler} that is integrated
into \QDS to find causes for typical performance problems in your UI. For
example, your UI might be slow, unresponsive, or stuttering. Typically, such
problems are caused by executing too much JavaScript in too few frames. All
@@ -65,5 +65,5 @@
to optimize code without profiling is likely to result in very minor rather
than significant performance improvements.
For more information, see \l{Profiling QML Applications}.
For more information, see \l{Profiling QML applications}.
*/
@@ -24,13 +24,13 @@
\list
\li \l {Creating UI Logic}
\li \l {Creating UI logic}
You can turn your wireframe into an interactive prototype by
adding the logic that enables your components to apply actions
or react to mock data from backend systems to simulate complex
experiences.
\li \l{Simulating Complex Experiences}
\li \l{Simulating complex experiences}
You can connect UIs to different forms of data from various
sources, such as QML-based data models, JavaScript files, and
@@ -38,20 +38,20 @@
You can also connect your UI to Simulink to load live data from
a Simulink simulation.
\li \l {Dynamic Behaviors}
\li \l {Dynamic behaviors}
You can create connections between components to enable them to
communicate with each other. The connections can be triggered by
changes in component property values or in UI states.
\li \l {Validating with Target Hardware}
\li \l {Validating with target hardware}
You can use the live preview feature to preview a UI file or the
entire UI on the desktop, as well as on Android and embedded Linux
devices. The changes you make to the UI are instantly visible
to you in the preview.
\li \l {Asset Creation with Other Tools}
\li \l {Asset creation with other tools}
Describes how to export designs containing 2D and 3D assets into
files that you can import to projects in \QDS, how to import them,
@@ -38,7 +38,7 @@
the developer documentation by pressing \key F1.
\list
\li \l {Using Components}
\li \l {Using components}
\QDS comes with \e {preset components} that you can use in
wireframes and prototypes by creating instances of them.
@@ -46,7 +46,7 @@
of the component instances and combine them. You can import
designs and assets from other tools as components.
\li \l {Specifying Component Properties}
\li \l {Specifying component properties}
You can specify values for the properties of a component to change
its appearance and behavior. All components have a set of predefined
@@ -55,7 +55,7 @@
component. You can specify values for properties of component
instances in the \l Properties view.
\li \l {Scalable Layouts}
\li \l {Scalable layouts}
The position of a component in a UI can be either absolute
or relative to other components. While manual positioning
@@ -63,7 +63,7 @@
methods, such as anchors, layouts, positioners, and property
bindings, for dynamic UIs.
\li \l {Annotating Designs}
\li \l {Annotating designs}
You can annotate your designs to provide reviewers or developers
with additional information about them.
@@ -6,7 +6,7 @@
\previouspage studio-user-feedback.html
\nextpage studio-packaging.html
\title Reporting Crashes
\title Reporting crashes
You can enable \QDS to report crashes automatically. \QDS uses Google
Crashpad to collect crashes and report them to the Sentry backend storage
@@ -6,7 +6,7 @@
\previouspage collecting-usage-statistics.html
\nextpage studio-crashpad.html
\title Collecting User Feedback
\title Collecting user feedback
A pop-up survey asking for your feedback will appear for some of the features
after you have been using them for some time. You will be asked to to rate
@@ -6,7 +6,7 @@
\page qtbridge-ai.html
\nextpage psqtbridge.html
\title Exporting Designs from Adobe Illustrator
\title Exporting designs from Adobe Illustrator
Even though \QDS does not provide a specific export bridge for Adobe
Illustrator, you can design UIs in it and export your designs to \QDS in
@@ -20,9 +20,9 @@
assets into formats supported by \QDS, such as PNG and JPEG.
\endlist
\section1 Placing Illustrator Content into Photoshop
\section1 Placing the Illustrator content into Photoshop
You can place Illustrator content into Photoshop in several ways. If you
You can place the Illustrator content into Photoshop in several ways. If you
select \uicontrol File > \uicontrol {Place linked} in Illustrator, the
content updates automatically. However, the whole file content is placed
on a single Photoshop layer, which means that you cannot use \QBPS to
@@ -39,9 +39,9 @@
smart objects, see the Illustrator and Photoshop documentation.
For more information about exporting designs from Photoshop, see
\l{Exporting Designs from Adobe Photoshop}.
\l{Exporting designs from Adobe Photoshop}.
\section1 Exporting Assets for Screens
\section1 Exporting assets for screens
Sometimes it is easier to just export layers and artboards from Illustrator
and to create scalable layouts and UI flows in \QDS. You can export assets
@@ -8,7 +8,7 @@
\page figmaqtbridge.html
\nextpage qtbridge-figma-setup.html
\title Exporting Designs from Figma
\title Exporting designs from Figma
You can use \QBF to export designs from Figma to a \e {.qtbridge}
archive that you can \l{Importing 2D Assets}{import} to projects in \QDS.
@@ -19,7 +19,7 @@
\list
\li \l{Setting Up Qt Bridge for Figma}
\li \l{Setting up Qt Bridge for Figma}
You must install Figma and the \QBF export tool before you can use
the tool to export designs.
@@ -6,7 +6,7 @@
\page qtbridge-figma-setup.html
\nextpage qtbridge-figma-using.html
\title Setting Up \QBF
\title Setting up \QBF
\note \QBF is included in the
\l{https://www.qt.io/pricing}{\QDS Enterprise license}.
@@ -1,4 +1,4 @@
// Copyright (C) 2023 The Qt Company Ltd.
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
@@ -6,7 +6,7 @@
\page qtbridge-figma-template.html
\nextpage exporting-3d-assets.html
\title Using Figma Quick Control Template Components in \QDS
\title Using the Figma Quick Control Template components in \QDS
You can design with the template components created by \QDS in Figma
and import them to \QDS with \QBF. These template components are structured
@@ -14,7 +14,7 @@
\QBF, they generate functional QML components for \QDS. So, you can edit components both in
\QDS and Figma.
\section1 Using Figma Template Components
\section1 Using the Figma Template components
You should have these prerequisites available:
\list
@@ -27,11 +27,11 @@
for that.
\endlist
\section2 Creating Figma Design with Template Components
\section2 Creating a Figma design with the Template components
\list 1
\li Sign in to Figma.
\li Go to the Template provided by \QDS team
\li Go to the Template provided by the \QDS team
\externallink {https://www.figma.com/community/file/1185200043286168239}{here}.
\li Select \uicontrol {Get a copy} and then your account to have a copy
on your Figma workspace.
@@ -59,7 +59,7 @@
Toggle them active to use in a project.
\endlist
\section2 Importing the Figma Design to \QDS with \QBF
\section2 Importing the Figma design to \QDS with \QBF
\list 1
\li In Figma, do one of the following:
@@ -8,7 +8,7 @@
\title Using \QBF
\section1 Organizing Designs
\section1 Organizing designs
To get the best results during export and import, follow these guidelines
when working with Figma:
@@ -46,9 +46,9 @@
To use the fonts that you use in Figma also in \QDS, you need to add
them to \QDS as assets. \QDS deploys them to devices when you preview the
UI. For more information, see \l{Using Custom Fonts}.
UI. For more information, see \l{Using custom fonts}.
\section2 Items You Can Export
\section2 Items you can export
You can export the following parts of your design using \QBF:
\list
@@ -65,27 +65,27 @@
\li Groups
\endlist
\section2 Using Frames
\section2 Using frames
Frames are exported as components of the \l Rectangle type by default.
However, if you have applied effects to the frames that \QBF cannot
handle, such as gradient fill colors or a mixed radius, the frames are
exported as images.
\section2 Using Variables
\section2 Using variables
With \QDS 4.6, variables are exported as a QML module named \e DesignSystem. A QML singleton
is created for each collection. Modes of the collection are exported as theme objects.
A collection has a \e currentTheme property, updating the property changes the active theme.
When a variable is bound to a property of a layer, the \e DesignSystem module import
is added to the generated code and the property binding is created accordingly.
To export variables, select \uicontrol {Export Variables} from \l{Settings}.
\note Remote variables are not supported. Setting the active mode on the page or
layer does not affect the generated code.
\section2 Using Variants
\section2 Using variants
Figma variants are exported as a component with states. All variants
inside a \e component-set are merged together and the differences across
the variants are translated into states.
@@ -103,7 +103,7 @@
encouraged to create the variant differences.
\endlist
\section1 Exporting Designs
\section1 Exporting designs
\image qt-figma-bridge.png "Qt Bridge for Figma"
@@ -118,7 +118,7 @@
\QBF exports everything into a .qtbridge archive. You can import the archive
into a project in \QDS, as described in \l{Importing 2D Assets}.
\section1 Export Settings
\section1 Export settings
You can specify export settings in the \uicontrol Home tab and in the
\uicontrol Settings tab.
@@ -213,7 +213,7 @@
}
\endcode
\note The code must have a scope of a component (such as Item, MouseArea,
Connections) with a valid syntax for \l {UI Files}.
Connections) with a valid syntax for \l {UI files}.
\note Add respective imports for your snippet in \uicontrol {Imports}.
\row
\li \uicontrol Alias
@@ -6,10 +6,10 @@
\page qtbridge-overview.html
\nextpage qtbridge-ai.html
\title Exporting from Design Tools
\title Exporting from design tools
When working with 2D assets, you can use \QB to export them from design
tools into a metadata format that you can then \l{Importing Designs}{import}
tools into a metadata format that you can then \l{Importing designs}{import}
into \QDS.
When working with 3D assets, you can use the export functions provided by
@@ -19,7 +19,7 @@
For best results when importing assets, follow
the guidelines for creating and exporting them.
\section1 2D Assets
\section1 2D assets
You can use \QOI to install \QB if you have a
\QDS enterprise license.
@@ -32,20 +32,20 @@
\li \inlineimage sketch-logo.png
\li \inlineimage figma-logo.png
\row
\li \l{Exporting Designs from Adobe Illustrator}{Adobe Illustrator}
\li \l{Exporting Designs from Adobe Photoshop}{Adobe Photoshop}
\li \l{Exporting Designs from Adobe XD}{Adobe XD}
\li \l{Exporting Designs from Sketch}{Sketch}
\li \l{Exporting Designs from Figma}{Figma}
\li \l{Exporting designs from Adobe Illustrator}{Adobe Illustrator}
\li \l{Exporting designs from Adobe Photoshop}{Adobe Photoshop}
\li \l{Exporting designs from Adobe XD}{Adobe XD}
\li \l{Exporting designs from Sketch}{Sketch}
\li \l{Exporting designs from Figma}{Figma}
\endtable
\section1 3D Assets
\section1 3D assets
You can import files you created using 3D graphics applications and
stored in several widely-used formats, such as .blend, .dae, .fbx,
.glb, .gltf, .obj, .uia, or .uip.
For an overview, see \l{Exporting 3D Assets}.
For an overview, see \l{Exporting 3D assets}.
\table
\row
@@ -8,7 +8,7 @@
\page psqtbridge.html
\nextpage qtbridge-ps-setup.html
\title Exporting Designs from Adobe Photoshop
\title Exporting designs from Adobe Photoshop
You can use \QBPS to export designs from Adobe Photoshop to \e {.metadata}
format that you can \l{Importing 2D Assets}{import} to projects in \QDS.
@@ -6,7 +6,7 @@
\page qtbridge-ps-setup.html
\nextpage qtbridge-ps-using.html
\title Setting Up \QBPS
\title Setting up \QBPS
\QBPS is included in the
\l{https://www.qt.io/pricing}{Qt Design Studio Enterprise license}.
@@ -67,7 +67,7 @@
\note On \macos \QBPS fails to load when Adobe Photoshop runs natively on an ARM
processor (Apple silicon). For more information, see \l {Running \QBPS on Apple Silicon}.
\section1 Enabling Remote Connections
\section1 Enabling remote connections
To set up \QBPS:
@@ -94,7 +94,7 @@
\note
\section1 Running \QBPS on Apple Silicon
\section1 Running \QBPS on Apple silicon
If you are using \macos on an ARM processor (Apple silicon), \QBPS may not be listed
in Adobe Photoshop under \uicontrol Window > \uicontrol {Extensions (Legacy)}.
@@ -8,7 +8,7 @@
\title Using \QBPS
\section1 Organizing Assets
\section1 Organizing assets
To get the best results when you use \QBPS to export designs from Adobe
Photoshop for importing them to \QDS, follow these guidelines when working
@@ -26,13 +26,13 @@
To use the fonts that you use in Photoshop also in \QDS, you need to load
them to \QDS. \QDS deploys them to devices when you preview the UI. For more
information, see \l{Using Custom Fonts}.
information, see \l{Using custom fonts}.
\note You can export only files that are saved in the Photoshop file format,
such as \e {.psd} and \e {.psb}. For all other document formats, \QDS
displays the following error message: \e {Document is not supported.}
\section2 Items You Can Export
\section2 Items you can export
You can export the following parts of your design using \QBPS:
\list
@@ -48,14 +48,14 @@
\li Frames
\endlist
\section2 Using Artboards
\section2 Using artboards
The relationships between the groups and layers on an artboard are preserved
when you export designs from Adobe Photoshop and import them into \QDS.
When you use \QBPS to export your designs, you will determine how you want
each group or layer exported: as a \e component or \e child. A component
will be imported as a single \l {UI Files}{UI file} that can contain other
will be imported as a single \l {UI files}{UI file} that can contain other
assets. A child will be imported as a single image file that you can use
within UI files.
@@ -88,7 +88,7 @@
\QB imports the control as a custom component that you can program in
\QDS.
\section1 Exporting Assets
\section1 Exporting assets
Each artboard is exported automatically as a component, which means that it
will be imported as a separate file that contains all the artwork on the
@@ -135,7 +135,7 @@
\image qt-bridge.png
\section2 Specifying Settings for Exporting Assets
\section2 Specifying settings for exporting assets
To export your design using \QBPS:
@@ -212,7 +212,7 @@
\li Select \uicontrol {Cascade properties} to apply the current set of
properties to all the children of the selected layer.
\li In the \uicontrol Annotations field, specify annotation for the
component. See \l {Annotating Designs}.
component. See \l {Annotating designs}.
\li Select \uicontrol Export to copy your assets to the export path you
specified.
\li When the exporting is done, select \uicontrol OK.
@@ -222,7 +222,7 @@
might take a little while depending on the complexity of your project.
You can now create a project in \QDS and import the assets to it, as
described in \l {Creating Projects} and \l{Importing Designs}.
described in \l {Creating projects} and \l{Importing designs}.
\note
Exporting your design using \QBPS can be slow for documents with large number
@@ -240,7 +240,7 @@
\image qt-bridge-qml-id-settings.png
\section1 Cloning Documents
\section1 Cloning documents
\QBPS enables creating a clone of the current document. The clone workflow
allows the user to filter out certain kind of layers and groups. In the \QBPS
@@ -248,7 +248,7 @@
\image qt-bridge-clone.png
\section2 Clone Options
\section2 Clone options
The following exclusion options can be selected to exclude certain kind of layers and
groups in the cloned document:
\list
@@ -261,7 +261,7 @@
the other selected exclusion options.
\endlist
\section1 Sanitizing Documents
\section1 Sanitizing documents
\QBPS enables removing all \QBPS related metadata from the active
document. In the \QBPS \uicontrol Settings dialog, select
@@ -279,7 +279,7 @@
You can change the default behavior of \QBPS with the help of a JSX script. One can write
specific functions in the script that are called by \QBPS with useful parameters.
\section2 Overridable JSX Functions
\section2 Overridable JSX functions
Define the following functions in the override JSX:
\list
\li preExport(document)
@@ -306,10 +306,10 @@
In the \QBPS \uicontrol Settings dialog, select \uicontrol {Override JSX Script} to set the
override JSX script.
\section1 Importing Metadata & Assets
\section1 Importing metadata and assets
\QBPS can import metadata generated from other tools and generate a Photoshop document. A
conventional workflow would be to generate metadata and assets by \l {Exporting Components} {exporting}
conventional workflow would be to generate metadata and assets by \l {Exporting components} {exporting}
a QML project from \QDS and use \QBPS to generate a Photoshop document.
Imported text and the assets are organized into Artboards, layers, and groups.
@@ -1,14 +1,14 @@
// Copyright (C) 2019 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
// Note: The \page value is hard-coded as a link in Qt Bridge for Sketch.
// Note: The \page value is hard-coded as a link in \QBSK.
/*!
\previouspage qtbridge-xd-using.html
\page sketchqtbridge.html
\nextpage qtbridge-sketch-setup.html
\title Exporting Designs from Sketch
\title Exporting designs from Sketch
You can use \QBSK to export designs from Sketch to \e {.metadata}
format that you can \l{Importing 2D Assets}{import} to projects in \QDS.
@@ -19,12 +19,12 @@
\list
\li \l{Setting Up Qt Bridge for Sketch}
\li \l{Setting up \QBSK}
You must install Sketch and the \QBSK export tool before you can use
the tool to export designs.
\li \l{Using Qt Bridge for Sketch}
\li \l{Using \QBSK}
To get the best results when you use \QBSK to export designs from
Sketch, you should follow the guidelines for working with Sketch and

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