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

Doc: Restructure the Wireframing chapter

Browse Source 
Renamed from "Creating UIs"

Fixes: QDS-4469
Change-Id: Iabf436a7ed9aa87c144c29fbe39d4d5923a29ae7
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
Reviewed-by: Johanna Vanhatapio <johanna.vanhatapio@qt.io>
This commit is contained in:
Leena Miettinen
2021-06-07 16:13:00 +02:00
parent cf8a05fbec
commit fee82ed2c2
48 changed files with 578 additions and 636 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
doc/qtcreator/images/qtquick-components-custom.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

50
doc/qtcreator/src/qtcreator-toc.qdoc
View File

@@ -117,27 +117,47 @@
\li \l{Curve Editor}
\li \l{Text Editor}
\endlist
\li \l {Creating UIs}
\li \l {Wireframing}
\list
\li \l {Creating Components}
\li \l {Components}
\list
\li \l{Shapes}
\li \l{Text}
\li \l{Images}
\li \l{UI Controls}
\li \l{User Interaction Methods}
\li \l{Lists and Other Data Models}
\li \l{Animations}
\li \l{Creating Buttons}
\li \l{Creating Scalable Buttons and Borders}
\li \l {Preset Components}
\list
\li \l{Shapes}
\li \l{Text}
\li \l{Images}
\li \l{UI Controls}
\li \l{User Interaction Methods}
\li \l{Lists and Other Data Models}
\li \l{Animations}
\li \l{3D Views}
\li \l{Group}
\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}
\li \l{Lights}
\li \l{Cameras}
\li \l{Scene Environment}
\endlist
\li \l {Creating Component Instances}
\li \l {Creating Custom Components}
\list
\li \l{Creating Buttons}
\li \l{Creating Scalable Buttons and Borders}
\endlist
\endlist
\li \l{Creating Optimized 3D Scenes}
\li \l{Specifying Component Properties}
\li \l{Positioning Components}
\li \l{Scalable Layouts}
\li \l{Using Custom Fonts}
\li \l{Annotating Designs}
\li \l{Loading Placeholder Data}
\li \l{UI Files}
\endlist
\endlist
\li \l {Adding Dynamics}
\list
\li \l{Creating Animations}
@@ -189,10 +209,6 @@
\li \l {Best Practices}
\list
\li \l{Optimizing Applications for Mobile Devices}
\li \l{Qt Quick Best Practices}
\list
\li \l{Creating Optimized 3D Scenes}
\endlist
\endlist
\endlist
\li \l{Coding}

11
doc/qtcreator/src/qtquick/creator-only/qtquick-app-development.qdoc
View File

@@ -47,7 +47,7 @@
You can use several different editors and views in the
Design mode to develop Qt Quick applications.
\li \l {Creating UIs}
\li \l {Wireframing}
Qt Quick enables you to build UIs around the behavior of
\e components and how they connect with one another. You
@@ -61,15 +61,6 @@
connections between them to enable them to communicate with
each other.
\li \l {Editing 3D Scenes}
You can use the 3D editor in the Design mode to edit files you
created using 3D graphics applications and stored in one of the
supported formats. You cannot create 3D models or other assets
in the editor, but you can import the assets you need and work
with them to create scenes and states, as well as the
transitions between them.
\endlist
For more information, watch a video that shows how to perform the tasks

71
doc/qtcreator/src/qtquick/library/qtquick-component-instances.qdoc Normal file
View File

@@ -0,0 +1,71 @@
/****************************************************************************
**
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Creator documentation.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
**
****************************************************************************/
/*!
\page quick-component-instances.html
\previouspage studio-3d-scene-environment.html
\nextpage quick-components-creating.html
\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.png "Creating Component Instances"
To create component instances and edit their properties:
\list 1
\li Drag-and-drop components from \uicontrol Library (1) to
\l Navigator (2), \l {Form Editor} (3), or \l {3D Editor} (4).
This creates instances of the components in the current
component file.
\li Select component instances in \uicontrol Navigator to edit the
values of their properties in \uicontrol Properties.
\image qmldesigner-properties-view.png "Properties view"
For more information, see \l {Specifying Component Properties}.
\li To change the appearance and behavior of the component instances
in ways that are not supported in \QDS by default, you can define
custom properties in \l {Connection View} > \uicontrol {Properties}.
\image qmldesigner-dynamicprops.png "Connection View Properties tab"
For more information, see \l{Specifying Dynamic Properties}.
\li To enable users to interact with the component instances, connect
the instances to signals in \uicontrol {Connection View} >
\uicontrol Connections. For example, you can specify what happens
when a component instance is clicked. For more information, see
\l{Connecting Components to Signals}.
\image qmldesigner-connections.png "Connection View Connections tab"
\li To dynamically change the behavior of a component instance when
another component instance changes, create bindings between them in
\uicontrol {Connection View} > \uicontrol Bindings.
For more information, see \l{Adding Bindings Between Properties}.
\image qmldesigner-bindings.png "Connection 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{Adding States}.
\li Animate the properties of component instances in the \uicontrol
Timeline view. For more information, see \l{Creating Animations}.
\endlist
*/

157
doc/qtcreator/src/qtquick/library/qtquick-components-custom.qdoc Normal file
View File

@@ -0,0 +1,157 @@
/****************************************************************************
**
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Creator documentation.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
**
****************************************************************************/
/*!
\page quick-components-creating.html
\previouspage quick-component-instances.html
\nextpage quick-buttons.html
\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
new components that you can create instances of. You can then use the
instances of the new components in other components.
\image qtquick-components-custom.png "Custom components in My Components"
Custom components are stored in \l Library > \uicontrol Components >
\uicontrol {My Components}. You can create instances of custom components
by dragging-and-dropping them from \uicontrol Library to \l {Form Editor},
\l {3D Editor}, or \l Navigator.
\section1 Creating Components from Scratch
To use wizard templates to create custom components:
\list 1
\li Select \uicontrol File > \uicontrol {New File or Project} >
\if defined(qtcreator)
\uicontrol Qt > \uicontrol {QML File (Qt Quick 2)} >
\else
\uicontrol {Qt Quick Files} > \uicontrol {Qt Quick File} >
\endif
\uicontrol Choose to create a new .qml file.
\note Components are listed in \uicontrol Library >
\uicontrol Components > \uicontrol {My Components} only
if the filename begins with a capital letter.
\li Click \uicontrol Design to open the component file (ui.qml) in
\uicontrol {Form Editor}.
\li Drag-and-drop a component from \uicontrol Library to
\uicontrol Navigator or \uicontrol {Form Editor}.
\li Edit component properties in the \uicontrol Properties view.
\image qmldesigner-custom-component-properties.png
The available properties depend on the component type. You can
\l{Specifying Dynamic Properties}{add properties for
components} in \uicontrol {Connection View} > \uicontrol Properties.
\li To change the appearance and behavior of the component instances
in ways that are not supported in \QDS by default, you can define
custom properties in \uicontrol {Connection View} >
\uicontrol {Properties}.
\endlist
The following sections contain more information about how to use
\uicontrol {Form Editor} to edit 2D content and \uicontrol {3D Editor}
to edit 3D scenes, as well as examples of how to create UI controls
using instances of basic components:
\list
\li \l{Form Editor}
\li \l{3D Editor}
\li \l{Creating Buttons}
\li \l{Creating Scalable Buttons and Borders}
\endlist
\section1 Naming Conventions
Establish naming conventions to keep the components in your UI organized.
Name your components accurately and give them suitable IDs. Particularly,
check and modify the default names of the components you export from design
tools to create reliable and self-explanatory names that follow the naming
conventions you have established.
For example, a button symbol might have the ID \e myButton_symbol and the
different layers might have it as a prefix with the states appended, thus
producing IDs such as \e myButton_symbol_default. To prepare for additional
mouse areas later in the project, you could use similar IDs for them, such
as \e myButton_symbol_hotspot. When you use the button as instances in a
screen, you would give each of these instances a unique ID that relates to
that screen. For example, \e myButton_myMenu_home, \e myButton_myMenu_profile,
and \e myButton_myMenu_settings
\if defined(qtdesignstudio)
\include qtdesignstudio-components.qdocinc creating studio components
\endif
\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
separate component files (.ui.qml). Right-click a component instance
in \uicontrol Navigator or \uicontrol {Form Editor}, and select
\uicontrol {Move Component into Separate File} in the context menu.
\image qtcreator-move-component-into-separate-file.png
Give the new component a name, and select whether properties are set for
the new component or for the original one.
When you select \uicontrol OK, a new component file is created and an
instance of the component is added to the code in the current component
file. The look of your UI in \uicontrol {Form Editor} does not change.
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}.
For an example of creating a reusable custom component, see
\if defined(qtcreator)
\l{Creating a Mobile Application}.
\else
\l{Progress Bar}.
\endif
Custom components are listed in \uicontrol Library > \uicontrol Components
> \uicontrol {My Components}, and you can use instances of them to build
more components.
\include qtquick-mcu-support.qdocinc mcu qtquick components
\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
stylesheet.
To use this experimental feature, right-click a component in the
\uicontrol Navigator or \uicontrol {Form Editor} view and select
\uicontrol {Merge File with Template} in the context menu.
\image qmldesigner-merge-with-template.png "Merge with Template dialog"
In the \uicontrol Template field, select the file to use as a template.
*/

109
doc/qtcreator/src/qtquick/library/qtquick-preset-components.qdoc Normal file
View File

@@ -0,0 +1,109 @@
/****************************************************************************
**
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Creator documentation.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
**
****************************************************************************/
/*!
\page quick-preset-components.html
\previouspage quick-components.html
\nextpage quick-shapes.html
\title Preset Components
To use preset components, add the modules that contain them to your project
by selecting \l Library > \uicontrol Components > \inlineimage plus.png
. For more information, see \l{Adding and Removing Modules}. You can then
create instances of the components by dragging-and-dropping them from
\uicontrol Library to \l {Form Editor}, \l {3D Editor}, or \l Navigator.
To edit the appearance of a component instance, select it in
\uicontrol {Form Editor}, \uicontrol {3D Editor}, or \uicontrol Navigator
and set its properties in the \l Properties view.
For more information about creating your own components, see
\l{Creating Custom Components}.
\section1 2D Components
\list
\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}
\if defined(qtdesignstudio)
\li \l {2D Effects}
\li \l {Logic Helpers}
\endif
\li \l Animations
\endlist
\section1 3D Components
You can use \l{3D Editor} in the \uicontrol Design mode to edit files you
created using 3D graphics applications and stored in one of the supported
formats. You cannot create 3D models or other assets in the editor, but you
can \l{Importing 3D Assets}{import} the assets you need and work with them
to create scenes and states, as well as the transitions between them.
\list
\li \l {3D Views}
\li \l {Group}
\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}
\li \l {Lights}
\li \l {Cameras}
\li \l {Scene Environment}
\endlist
When you import 3D scenes from files that you exported from 3D graphics
tools, you also import the camera, light, model, and materials as 3D
components. If your scene did not contain them, you can add predefined
3D components to it and edit their properties to fit your needs.
\note Using 3D components will affect the performance of your UI. Do not
use 3D components if the same results can be achieved using 2D components.
\section2 Videos About 3D Components
The following video shows you how to add the components included in the
\uicontrol {Qt Quick 3D} module, such as 3D models, cameras, and lights,
to your scene:
\youtube u3kZJjlk3CY
The following video shows you how to use the custom shader utilities, 3D
effects, and materials:
\youtube bMXeeQw6BYs
The following video shows you how to combine 2D and 3D components:
\youtube w1yhDl93YI0
*/

2
doc/qtcreator/src/qtquick/library/qtquick-shapes.qdoc
View File

@@ -25,7 +25,7 @@
/*!
\page quick-shapes.html
\previouspage quick-components.html
\previouspage quick-preset-components.html
\nextpage quick-text.html
\title Shapes

102
doc/qtcreator/src/qtquick/qtdesignstudio-best-practices.qdoc
View File

@@ -1,102 +0,0 @@
/****************************************************************************
**
** Copyright (C) 2020 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Design Studio documentation.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
**
****************************************************************************/
/*!
\page studio-qtquick-best-practices.html
\if defined(qtdesignstudio)
\previouspage {Tutorials}
\nextpage studio-optimized-3d-scenes.html
\else
\previouspage creator-usability.html
\nextpage studio-optimized-3d-scenes.html
\endif
\title Qt Quick Best Practices
The following guidelines describe the most efficient ways to use \QC to
create UIs and scenes that run flawlessly on the intended platforms.
For best practices in creating 3D scenes with optimized graphics
performance, see \l {Creating Optimized 3D Scenes}.
\if defined(qtdesignstudio)
For guidelines on how to achieve best results when importing assets, see
\l {Exporting from Design Tools}.
\endif
\section1 Naming Conventions
Establish naming conventions to keep the components in your UI organized.
Name your components accurately and give them suitable IDs. You should
manually specify the names of the components you export from design tools to
create reliable and self-explanatory names that follow the naming
conventions you have established.
For example, a button symbol might have the ID \e myButton_symbol and the
different layers might have it as a prefix with the states appended, thus
producing IDs such as \e myButton_symbol_default. To prepare for additional
mouse areas later in the project, you could use similar IDs for them, such
as \e myButton_symbol_hotspot. When you use the button as instances in a
screen, you would give each of these instances a unique ID that relates to
that screen. For example, \e myButton_myMenu_home, \e myButton_myMenu_profile,
and \e myButton_myMenu_settings
\section1 Planning the UI
Plan your UI properly. Know what elements, such as screens, components,
and states, you need. Creating a descriptive wireframe and acquiring a
detailed UI specification before you start will make the process of creating
the UI more efficient.
\section1 Using Components Economically
It is important to understand the performance costs associated with using
components.
To use components efficiently and economically:
\list
\li Componentize your design by packaging your resources into reusable
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{Adding 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
and compilation time as well as the size of the binary.
\li Any content that is data-driven should be
\l {Using UI Files}{exported as a public property} of the
relevant component. For example, 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
programmatic behaviors or JavaScript. This enables iteration from
both the design and development side of the process without the the
risk of overwriting each other's work.
\endlist
*/

8
doc/qtcreator/src/qtquick/qtdesignstudio-optimized-3d-scenes.qdoc
View File

@@ -25,12 +25,8 @@
/*!
\page studio-optimized-3d-scenes.html
\previouspage studio-qtquick-best-practices.html
\if defined(qtdesignstudio)
\nextpage studio-platforms.html
\else
\nextpage creator-coding.html
\endif
\previouspage quick-scalable-image.html
\nextpage qtquick-properties.html
\title Creating Optimized 3D Scenes

2
doc/qtcreator/src/qtquick/qtquick-animation-types.qdoc
View File

@@ -30,7 +30,7 @@
\else
\previouspage quick-data-models.html
\endif
\nextpage quick-buttons.html
\nextpage studio-3d-view.html
\title Animations

6
doc/qtcreator/src/qtquick/qtquick-annotations.qdoc
View File

@@ -25,12 +25,12 @@
/*!
\page qtquick-annotations.html
\previouspage qtquick-fonts.html
\if defined(qtdesignstudio)
\nextpage creator-quick-ui-forms.html
\previouspage qtquick-positioning.html
\else
\nextpage qtquick-placeholder-data.html
\previouspage qtquick-fonts.html
\endif
\nextpage qtquick-placeholder-data.html
\title Annotating Designs

8
doc/qtcreator/src/qtquick/qtquick-buttons.qdoc
View File

@@ -31,7 +31,7 @@
/*!
\page quick-buttons.html
\previouspage quick-animations.html
\previouspage quick-components-creating.html
\nextpage quick-scalable-image.html
\title Creating Buttons
@@ -128,7 +128,11 @@
/*!
\previouspage quick-buttons.html
\page quick-scalable-image.html
\if defined(qtdesignstudio)
\nextpage qtquick-properties.html
\else
\nextpage studio-optimized-3d-scenes.html
\endif
\title Creating Scalable Buttons and Borders
@@ -275,7 +279,7 @@
and set the button text for each button instance, for example.
For more information about positioning buttons on screens, see
\l{Positioning Components}.
\l{Scalable Layouts}.
\image qmldesigner-borderimage.png "Button preview as part of a screen"
*/

2
doc/qtcreator/src/qtquick/qtquick-component-context-menu.qdocinc
View File

@@ -77,7 +77,7 @@
\li \l{Merging Files with Templates}
\row
\li Move Component Instances into Separate Files
\li \l{Moving Component Instances into Separate Files}
\li \l{Turning Component Instances into Custom Components}
\row
\li Add New Signal Handler
\li \l{Adding Signal Handlers}

193
doc/qtcreator/src/qtquick/qtquick-components.qdoc
View File

@@ -23,12 +23,6 @@
**
****************************************************************************/
// **********************************************************************
// NOTE: the sections are not ordered by their logical order to avoid
// reshuffling the file each time the index order changes (i.e., often).
// Run the fixnavi.pl script to adjust the links to the index order.
// **********************************************************************
/*!
\page quick-components.html
\if defined(qtdesignstudio)
@@ -36,9 +30,9 @@
\else
\previouspage creator-using-qt-quick-designer.html
\endif
\nextpage quick-shapes.html
\nextpage quick-preset-components.html
\title Creating Components
\title Components
A \e component is a reusable building block for a UI.
@@ -50,7 +44,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 {Using 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.
@@ -60,7 +54,7 @@
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{Moving Component Instances into Separate Files}
\l{Turning Component Instances into Custom Components}
{move component instances into separate component files}.
Select \l Library > \uicontrol Components to view the preset components that
@@ -70,160 +64,41 @@
\image qtquick-components-tab.png "Components in Library"
\note Use as few components as possible. To minimize the number of
components, use \l{Adding Property Aliases}{alias properties} and
\l{Adding States}{states} to create the differences in your component
instances. Using component instances instead of duplicating the components
reduces the time needed to load and build the application, as well as the
size of the application package.
\section1 Creating Component Instances
\image qmldesigner-editing-components.png "Creating Component Instances"
\list 1
\li Drag-and-drop components from \uicontrol Library (1) to
\l Navigator (2), \l {Form Editor} (3), or \l {3D Editor} (4).
This creates instances of the components in the current
component file.
\li Select component instances in \uicontrol Navigator to edit the
values of their properties in \uicontrol Properties.
\image qmldesigner-properties-view.png "Properties view"
For more information, see \l {Specifying Component Properties}.
\li To change the appearance and behavior of the component instances
in ways that are not supported in \QDS by default, you can define
custom properties in \l {Connection View} > \uicontrol {Properties}.
\image qmldesigner-dynamicprops.png "Connection View Properties tab"
For more information, see \l{Specifying Dynamic Properties}.
\li To enable users to interact with the component instances, connect
the instances to signals in \uicontrol {Connection View} >
\uicontrol Connections. For example, you can specify what happens
when a component instance is clicked. For more information, see
\l{Connecting Components to Signals}.
\image qmldesigner-connections.png "Connection View Connections tab"
\li To dynamically change the behavior of a component instance when
another component instance changes, create bindings between them in
\uicontrol {Connection View} > \uicontrol Bindings.
For more information, see \l{Adding Bindings Between Properties}.
\image qmldesigner-bindings.png "Connection 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{Adding States}.
\li Animate the properties of component instances in the \uicontrol
Timeline view. For more information, see \l{Creating Animations}.
\endlist
\section1 Creating Your Own 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
new components that you can create instances of. You can then use the
instances of the new components in other components.
\section2 Creating Components from Scratch
To use wizard templates to create custom components:
\list 1
\li Select \uicontrol File > \uicontrol {New File or Project} >
\if defined(qtcreator)
\uicontrol Qt > \uicontrol {QML File (Qt Quick 2)} >
\else
\uicontrol {Qt Quick Files} > \uicontrol {Qt Quick File} >
\endif
\uicontrol Choose to create a new .qml file.
\note Components are listed in the \uicontrol {My Components}
tab in the \uicontrol Library view only if the filename begins with
a capital letter.
\li Click \uicontrol Design to open the component file (ui.qml) in
\uicontrol {Form Editor}.
\li Drag-and-drop a component from \uicontrol Library to
\uicontrol Navigator or \uicontrol {Form Editor}.
\li Edit component properties in the \uicontrol Properties view.
\image qmldesigner-custom-component-properties.png
The available properties depend on the component type. You can
\l{Specifying Dynamic Properties}{add properties for
components} in \uicontrol {Connection View} > \uicontrol Properties.
\li To change the appearance and behavior of the component instances
in ways that are not supported in \QDS by default, you can define
custom properties in \uicontrol {Connection View} >
\uicontrol {Properties}.
\endlist
The following sections contain more information about how to use
\uicontrol {Form Editor} to edit 2D content and \uicontrol {3D Editor}
to edit 3D scenes, as well as examples of how to create UI controls
using instances of basic components:
Read more about components:
\list
\li \l{Form Editor}
\li \l{3D Editor}
\li \l{Creating Buttons}
\li \l{Creating Scalable Buttons and Borders}
\li \l {Preset Components}
\li \l {Creating Component Instances}
\li \l {Creating Custom Components}
\endlist
\if defined(qtdesignstudio)
\include qtdesignstudio-components.qdocinc creating studio components
\endif
\section1 Using Components Economically
\section2 Moving Component Instances into Separate Files
It is important to understand the performance costs associated with using
components.
An alternative way of creating reusable components is to move component
instances into separate component files (.ui.qml). Right-click a component
instance in \uicontrol Navigator or \uicontrol {Form Editor}, and select
\uicontrol {Move Component into Separate File} in the context menu.
To use components efficiently and economically:
\image qtcreator-move-component-into-separate-file.png
Give the new component a name, and select whether properties are set for
the new component or for the original one.
When you select \uicontrol OK, a new component file is created and an
instance of the component is added to the code in the current component
file. The look of your UI in \uicontrol {Form Editor} does not change.
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}.
For an example of creating a reusable custom component, see
\if defined(qtcreator)
\l{Creating a Mobile Application}.
\else
\l{Progress Bar}.
\endif
Custom components are listed in \uicontrol Library > \uicontrol Components
> \uicontrol {My Components}, and you can use instances of them to build
more components.
\include qtquick-mcu-support.qdocinc mcu qtquick components
\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
stylesheet.
To use this experimental feature, right-click a component in the
\uicontrol Navigator or \uicontrol {Form Editor} view and select
\uicontrol {Merge File with Template} in the context menu.
\image qmldesigner-merge-with-template.png "Merge with Template dialog"
In the \uicontrol Template field, select the file to use as a template.
\list
\li Componentize your design by packaging your resources into reusable
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{Adding 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
and compilation time as well as the size of the binary.
\li Any content that is data-driven should be
\l {Using UI Files}{exported as a public property} of the
relevant component. For example, 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
programmatic behaviors or JavaScript. This enables iteration from
both the design and development side of the process without the the
risk of overwriting each other's work.
\endlist
*/

6
doc/qtcreator/src/qtquick/qtquick-designer.qdoc
View File

@@ -72,13 +72,13 @@
\li \l{3D Editor}
\li Provides an editor for files you created using 3D graphics
applications and stored in one of the supported formats.
\li \l{Editing 3D Scenes}
\li \l{3D Editor}
\row
\li \l Library
\li Contains the building blocks that you can use to design
applications: preset components, your own components, and
assets.
\li \l {Creating Components}
\li \l{Components}
\row
\li \l Navigator
\li Displays the composition of the current component file as
@@ -272,7 +272,7 @@
component in the list to open it in \uicontrol {Form Editor} and
\uicontrol Navigator.
\li
\li \l{Creating Components}
\li \l{Components}
\row
\li Workspace
\li Displays the currently selected workspace. To switch to another

2
doc/qtcreator/src/qtquick/qtquick-form-editor.qdoc
View File

@@ -121,7 +121,7 @@
\image qmldesigner-form-editor-move-cursor.png "Move cursor in Form Editor view"
For more information about alternative ways of positioning component
instances in UIs, see \l{Positioning Components}.
instances in UIs, see \l{Scalable Layouts}.
\section1 Resizing 2D Components

14
doc/qtcreator/src/qtquick/qtquick-library.qdoc
View File

@@ -69,11 +69,21 @@
\li \l {Logic Helpers}
\endif
\li \l Animations
\li \l{Using 3D Components}{3D Components}
\li \l{3D Views}
\li \l{Group}
\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{Lights}
\li \l{Cameras}
\li \l{Scene Environment}
\endlist
For more information about creating your own components, see
\l{Creating Components}.
\l{Creating Custom Components}.
\section2 Adding and Removing Modules

6
doc/qtcreator/src/qtquick/qtquick-positioning.qdoc
View File

@@ -26,9 +26,13 @@
/*!
\page qtquick-positioning.html
\previouspage qtquick-properties.html
\if defined(qtdesignstudio)
\nextpage qtquick-annotations.html
\else
\nextpage qtquick-fonts.html
\endif
\title Positioning Components
\title Scalable Layouts
The position of a \l{glossary-component}{component} in a UI can be either
absolute or relative to other components. The visual components exist at a

2
doc/qtcreator/src/qtquick/qtquick-properties-view.qdoc
View File

@@ -160,6 +160,6 @@
\l{Specifying Component Properties}.
\li For more information on the properties available for a
component, press \key {F1} or see \l{Component Types}
and \l{Positioning Components}.
and \l{Scalable Layouts}.
\endlist
*/

2
doc/qtcreator/src/qtquick/qtquick-properties.qdoc
View File

@@ -76,7 +76,7 @@
In the \uicontrol Position group, you can set the position of a component on
the x and y axis. The position of a component in the UI can be either
absolute or relative to other components. For more information, see
\l{Positioning Components}.
\l{Scalable Layouts}.
In the 2D space, the z position of a component determines its position in
relation to its sibling components in the component hierarchy. You can set

5
doc/qtcreator/src/qtquick/qtquick-states.qdoc
View File

@@ -27,10 +27,11 @@
\page quick-states.html
\if defined(qtdesignstudio)
\previouspage quick-property-bindings.html
\nextpage creator-live-preview.html
\else
\previouspage quick-connections-backend.html
\previouspage qtbridge-figma-using.html
\nextpage exporting-3d-assets.html
\endif
\nextpage studio-3d.html
\title Adding States

66
doc/qtcreator/src/qtquick/qtquick-uis.qdoc
View File

@@ -26,20 +26,28 @@
/*!
\page quick-uis.html
\if defined(qtdesignstudio)
\previouspage creator-exporting-qml.html
\previouspage {Examples and Tutorials}
\nextpage studio-app-flows.html
\else
\previouspage qtquick-text-editor.html
\nextpage quick-components.html
\endif
\title Creating UIs
\title Wireframing
\if defined(qtdesignstudio)
When you install \QDS, everything you'll need to design UIs and to preview
them on the desktop or embedded Linux devices is automatically installed
and configured correctly for you.
\endif
\table
\row
\li \image front-ui.png
\li Plan your UI properly. Know what elements, such as screens,
components, and states, you need. Create a descriptive wireframe
and acquire a detailed UI specification before you start to make
the process of creating the UI more efficient.
\QC enables you to turn your UI concept into a wireframe with
a scalable layout where all your screens and controls are in
place. You can present your wireframe to developers and other
stakeholders for discussion, review, and approval before
continuing into the prototyping phase.
\endtable
In \QC, you build UIs around the behavior of \l{glossary-component}
{components} and how they connect with one another. You can use preset
@@ -49,11 +57,12 @@
set of predefined properties, some of which control things that are
visible to users, while others are used behind the scene.
When you drag-and-drop the preset components from the \uicontrol Library
view to the \l {Form Editor} or \l Navigator view and change them to your
liking by modifying their properties in the \l Properties view, the
application code is generated for you accordingly. For more information
about the code, open the developer documentation by pressing \key F1.
You drag-and-drop the preset components from the \uicontrol Library view
to the \l {Form Editor}, \l{3D Editor}, or \l Navigator view to create
instances of them. You then change the instances to your liking by modifying
their properties in the \l Properties view. The application code is
generated for you accordingly. For more information about the code, open
the developer documentation by pressing \key F1.
\list
@@ -67,12 +76,13 @@
the user experience of the application.
\endif
\li \l {Creating Components}
\li \l {Components}
You can enhance imported designs by customizing preset
components or design custom forms and shapes directly as
components. You can import visual assets in various formats,
such as PNG, JPG, and SVG for use in the components.
\QDS comes with \e {preset components} that you can use in
wireframes and prototypes by creating instances of them.
To build your own components, you can modify the \e properties
of the component instances and combine them. You can import
designs and assets from other tools as components.
\li \l {Specifying Component Properties}
@@ -80,10 +90,10 @@
its appearance and behavior. All components have a set of predefined
properties. Some properties, such as position, size, and visibility,
are common to all components, whereas others are specific to the
component. You can specify properties for your components in the
\l Properties view.
component. You can specify values for properties of component
instances in the \l Properties view.
\li \l {Positioning Components}
\li \l {Scalable Layouts}
The position of a component in a UI can be either absolute
or relative to other components. While manual positioning
@@ -91,9 +101,11 @@
methods, such as anchors, layouts, positioners, and property
bindings, for dynamic UIs.
\if defined(qtcreator)
\li \l {Using Custom Fonts}
You can load custom fonts to \QC and use them in your designs.
\endif
\li \l {Annotating Designs}
@@ -107,19 +119,13 @@
you can test grid, list, or path views, even though you don't
have access to real data.
\endif
\if defined(qtdesignstudio)
\endlist
\section1 Related Topics
\list
\endif
\li \l{UI Files}
\li \l{UI Files}
Some of the wizards create projects that contain UI files
(.ui.qml). You should always edit UI files in \l{Form Editor}
and \l Properties, to avoid breaking the code.
\endif
\endlist
*/

2
doc/qtdesignstudio/examples/doc/progressbar.qdoc
View File

@@ -73,7 +73,7 @@
change for the animation.
For more information about creating and positioning components, see
\l {Creating Components} and \l {Positioning Components}.
\l {Components} and \l {Scalable Layouts}.
\section1 Animating Progress Bar Elements

2
doc/qtdesignstudio/examples/doc/washingMachineUI.qdoc
View File

@@ -102,7 +102,7 @@
by selecting \uicontrol File > \uicontrol {New File or Project} >
\uicontrol {Qt Quick Files}. While designing the screens, you can
move reusable components into separate files. For more information,
see \l{Creating Components}.
see \l{Components}.
\section1 Creating a Progress Indicator

2
doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc
View File

@@ -134,7 +134,7 @@
The QML types supported by \QDS are listed in the \uicontrol {Components}
tab in the \l {Library} in the Design mode of \QDS. For more
information, see \l{Creating Components}.
information, see \l{Components}.
You can also specify values for the properties of the component or create
\l{Property Aliases}{property aliases} to fetch the values from other

5
doc/qtdesignstudio/src/qtdesignstudio-advanced.qdoc
View File

@@ -47,6 +47,11 @@
You can install and run \QC on several operating systems to design
UIs for multiple desktop, embedded, and mobile device platforms.
\li \l{UI Files}
Some of the wizards create projects that contain UI files
(.ui.qml). You should always edit UI files in \l{Form Editor}
and \l Properties, to avoid breaking the code.
\li \l{Coding}
You can use the code editor in the \uicontrol {Text Editor} view or

2
doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc
View File

@@ -175,7 +175,7 @@
If you are building your UI from scratch in \QDS, you must first add
components to the flow items to create the screens as you would any
components. For more information, see \l {Creating Components}. The
components. For more information, see \l {Components}. The
flow items that you attach the components to are listed under
\uicontrol {My Components}.

2
doc/qtdesignstudio/src/qtdesignstudio-components.qdocinc
View File

@@ -25,7 +25,7 @@
//! [creating studio components]
\section2 Creating Custom Controls
\section1 Creating Custom Controls
You can use project wizard templates to create stylable UI controls based
on the components in the Qt Quick Controls module:

6
doc/qtdesignstudio/src/qtdesignstudio-faq.qdoc
View File

@@ -1,6 +1,6 @@
/****************************************************************************
**
** Copyright (C) 2018 The Qt Company Ltd.
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Design Studio documentation.
@@ -34,9 +34,7 @@
grouped by categories. You might also find answers to your questions in the
product documentation by searching or browsing the index in the
\l{Using the Help Mode}{Help mode}. Many questions are also answered by the
\l{Examples and Tutorials}{examples and video tutorials}. Also see
\l {Qt Quick Best Practices} to learn about the most efficient ways to use
\QDS.
\l{Examples and Tutorials}{examples and video tutorials}.
\section1 \QB
\section2 How does \QBPS differ from \QBSK?

6
doc/qtdesignstudio/src/qtdesignstudio-terms.qdoc
View File

@@ -76,13 +76,15 @@
in Button.ui.qml. Typically, the visual appearance of a component is
defined in a \e {UI file}. To create component files, you can use
\l{Creating Components from Scratch}{wizard templates}, or
\l{Moving Component Instances into Separate Files}
\l{Turning Component Instances into Custom Components}
{move component instances into separate component files}.
Read more about components:
\list
\li \l{Creating Components}
\li \l {Preset Components}
\li \l {Creating Component Instances}
\li \l {Creating Custom Components}
\endlist
\section1 Device

67
doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
View File

@@ -60,32 +60,23 @@
\li \l{Use Cases}
\li \l{Concepts and Terms}
\li \l{Examples and Tutorials}
\list
\li \l{Qt Quick Best Practices}
\list
\li \l{Creating Optimized 3D Scenes}
\endlist
\endlist
\endlist
\li \l{Wireframing} (NEW)
\li \l{Wireframing}
\list
\li \l {Creating UIs}{Creating 2D and 3D UIs}
\li \l{Designing Application Flows}
\list
\li \l{Designing Application Flows}
\list
\li \l{Adding Flow Views}
\li \l{Adding Flow Items}
\li \l{Adding Action Areas and Transitions}
\li \l{Applying Effects to Transitions}
\li \l{Simulating Events}
\li \l{Simulating Conditions}
\li \l{Applying States in Flows}
\li \l{Reacting to External Events}
\endlist
\li \l{Adding Flow Views}
\li \l{Adding Flow Items}
\li \l{Adding Action Areas and Transitions}
\li \l{Applying Effects to Transitions}
\li \l{Simulating Events}
\li \l{Simulating Conditions}
\li \l{Applying States in Flows}
\li \l{Reacting to External Events}
\endlist
\li \l {Creating Components}{Components} (NEW) (grid?)
\li \l {Components}
\list
\li \l{Component Types}{Preset Components}
\li \l{Preset Components}
\list
\li \l{Shapes}
\li \l{Text}
@@ -96,28 +87,29 @@
\li \l{2D Effects}
\li \l{Logic Helpers}
\li \l Animations
\li \l{Setting Scene Environment}{Scene Environment}
\li \l{Adding 3D Views}{3D Views}
\li \l{Setting Group Properties}{Group}
\li \l{Adding 3D Models}{3D Models}
\li \l{Using Materials and Shaders}{Materials and Shaders}
\li \l{Attaching Textures to Materials}{Textures}
\li \l{Using 3D Materials}{3D Materials}
\li \l{Applying 3D Effects}{3D Effects}
\li \l{Using Custom Shaders}{Custom Shaders}
\li \l{Using Lights}{Lights}
\li \l{Using Scene Camera}{Cameras}
\li \l{3D Views}
\li \l{Group}
\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}
\li \l{Lights}
\li \l{Cameras}
\li \l{Scene Environment}
\endlist
\li \l {Creating Your Own Components}{Creating Custom Components}
\li \l {Creating Component Instances}
\li \l {Creating Custom Components}
\list
\li \l{Creating Buttons}
\li \l{Creating Scalable Buttons and Borders}
\li \l{Creating Custom Effects and Materials}
\endlist
\li \l{Specifying Component Properties}
\li \l{Positioning Components}{Scalable Layouts}
\li \l{Annotating Designs}
\endlist
\li \l{Specifying Component Properties}
\li \l{Scalable Layouts}
\li \l{Annotating Designs}
\endlist
\li \l{Prototyping} (NEW)
\list
@@ -200,6 +192,7 @@
\endlist
\li \l{Implementing Applications} (NEW)
\list
\li\l{Creating Optimized 3D Scenes}
\li Using Flows in Production (NEW)
\li \l{Coding}{Cross-Platform Development} (NEW)
\list

8
doc/qtdesignstudio/src/qtdesignstudio.qdoc
View File

@@ -55,12 +55,12 @@
\li \l{Concepts and Terms}
\li \l{Examples and Tutorials}
\endlist
\li \b {\l{Wireframing}} (NEW)
\li \b {\l{Wireframing}}
\list
\li \l{Creating UIs}{Creating 2D and 3D UIs}
\li \l{Creating Components}{Components}
\li \l{Designing Application Flows}
\li \l{Components}
\li \l{Specifying Component Properties}
\li \l{Positioning Components}{Scalable Layouts}
\li \l{Scalable Layouts}
\li \l{Annotating Designs}
\endlist
\li \b {\l{Prototyping}} (NEW)

4
doc/qtdesignstudio/src/qtquick3d-editor/exporting-3d/exporting-3d-assets.qdoc
View File

@@ -29,9 +29,9 @@
/*!
\page exporting-3d-assets.html
\if defined(qtdesignstudio)
\previouspage qtbridge-figma-using.html
\previouspage
\else
\previouspage studio-3d.html
\previouspage quick-states.html
\endif
\nextpage exporting-from-blender.html

4
doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-camera.qdoc
View File

@@ -30,12 +30,12 @@
\previouspage studio-3d-lights.html
\nextpage studio-3d-scene-environment.html
\title Using Scene Camera
\title Cameras
A camera is always necessary to view the content of a 3D scene. A camera
defines how to project the content of a 3D scene into a 2D coordinate space,
which can then be used on a 2D surface. When a camera is present in the
scene, it can be used to direct what is displayed in a \l {Adding 3D Views}
scene, it can be used to direct what is displayed in a \l {3D Views}
{3D view}.
\image studio-qtquick-3d-components.png "Qt Quick 3D components in Library"

110
doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-components.qdoc
View File

@@ -1,110 +0,0 @@
/****************************************************************************
**
** Copyright (C) 2019 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Design Studio documentation.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
**
****************************************************************************/
/*!
\page studio-3d-components.html
\previouspage studio-3d-view.html
\nextpage studio-3d-node.html
\title Using 3D Components
To use 3D components, you need to first add the required modules to your
project in \l Library > \uicontrol Components > \inlineimage plus.png
. For more information, see \l{Adding and Removing Modules}. You can then
add 3D components to your scene by dragging-and-dropping them from
\uicontrol Library > \uicontrol Components > \uicontrol {Qt Quick 3D} to
\l {3D Editor} or to a 3D view in \l Navigator.
\note Using 3D components will affect the performance of your UI. You should
not use 3D components if the same results can be achieved using 2D
components.
To edit 3D components, select the component in \uicontrol {3D Editor} or in
\uicontrol Navigator and set its properties in the \l Properties view.
\section1 Getting Started Videos
The following video shows you how to add the components included in the
\uicontrol {Qt Quick 3D} module, such as 3D models, cameras, and lights,
to your scene:
\youtube u3kZJjlk3CY
See the next video to learn more about the custom shader utilities, 3D
effects, and materials:
\youtube bMXeeQw6BYs
\section1 More Information about 3D Components
\list
\li \l {Setting Group Properties}
You can set the opacity, visibility, and transform properties
of all 3D components.
\li \l {Adding 3D Models}
You can use the model component to load static mesh data from
storage or one of the built-in primitive types: cube, cone,
cylinder, plane (rectangle), or sphere. You can attach materials to
meshes and sub-meshes.
\li \l {Using Materials and Shaders}
You can use materials and shaders to define how component surfaces
are rendered in a scene and during live preview.
\li \l {Attaching Textures to Materials}
You can use a Texture component to specify an image and how it is
mapped to meshes in a 3D scene. Texture components can use image
data either from a file or a Qt Quick QML type.
\li \l {Using 3D Materials}
You can apply a set of predefined 3D materials on your models.
\li \l {Applying 3D Effects}
You can use 3D effect components to generate post-processing
effects.
\li \l {Using Custom Shaders}
You can use 3D shader utilities to construct your own effects and
materials.
\li \l{Creating Custom Effects and Materials}
If the ready-made 3D effects and materials don't meet your needs,
you can use 3D shader utilities to construct your own effects and
materials.
\li \l{Using Lights}
You can use several light types as the source of lighting in a
scene and set their properties.
\li \l {Using Scene Camera}
To project a 3D scene to a 2D viewport, such as \l {Form Editor},
it is necessary to view the scene from a camera. You can select the
camera type and set its properties.
\li \l {Setting Scene Environment}
You can use the SceneEnvironment component to specify how the scene
is rendered globally.
\endlist
*/

6
doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-effects-materials.qdoc
View File

@@ -30,9 +30,9 @@
\previouspage studio-3d-custom-shaders.html
\nextpage studio-3d-lights.html
\title Creating Custom Effects and Materials
\title Custom Effects and Materials
The \l{Applying 3D Effects}{Qt Quick 3D Effects} and \l{Using 3D Materials}
The \l{3D Effects}{Qt Quick 3D Effects} and \l{3D Materials}
{Qt Quick 3D Materials} modules contain a set of ready-made effects and
materials that you can apply to 3D models. If the ready-made effects and
materials don't meet your needs, you can create custom effects and
@@ -57,7 +57,7 @@
component in \uicontrol Library > \uicontrol {QtQuick3D Materials} >
\uicontrol {Qt Quick 3D Custom Shader Utils}. For more information about the
shader utilities and commands and their properties, see
\l {Using Custom Shaders}.
\l {Custom Shaders}.
\note You must create the actual shader source files with some other tool
and copy them to your project folder. You can then specify the source file

10
doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-custom-shaders.qdoc
View File

@@ -30,7 +30,7 @@
\previouspage studio-3d-effects.html
\nextpage studio-3d-custom-effects-materials.html
\title Using Custom Shaders
\title Custom Shaders
You can use the 3D shader utilities and commands available in \l Library
> \uicontrol Components > \uicontrol QtQuick3D > \uicontrol
@@ -52,7 +52,7 @@
\l {Adding and Removing Modules}.
For more information on using the shaders, see
\l {Creating Custom Effects and Materials}.
\l {Custom Effects and Materials}.
See the following tables for available shader utilities and commands.
@@ -90,8 +90,8 @@
\uicontrol {Always Dirty} properties. The \uicontrol Passes property
contains a list of render passes implemented by the material.
The \uicontrol {Shader Info} specifies the shader info of the
material. For more information, see \l {Creating Custom Effects and
Materials}.
material. For more information, see
\l {Custom Effects and Materials}.
\row
\li \l Effect
@@ -99,7 +99,7 @@
The \uicontrol Passes property contains a list of render passes
implemented by the effect. For more information, see
\l {Creating Custom Effects and Materials}.
\l {Custom Effects and Materials}.
\row
\li \l Pass

10
doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc
View File

@@ -40,9 +40,9 @@
the scene.
When you import 3D scenes from files that you exported from 3D graphics
tools, you also import a \l{Using Scene Camera}{scene camera},
\l{Using Lights}{light}, \l{Adding 3D Models}{model}, and
\l {Using Materials and Shaders}{materials}. If your scene did not contain
tools, you also import a \l{Cameras}{scene camera},
\l{Lights}{light}, \l{3D Models}{model}, and
\l {Materials and Shaders}{materials}. If your scene did not contain
them, you can add the corresponding \l {Using 3D Components}{Qt Quick 3D}
components from \l Library > \uicontrol Components > \inlineimage plus.png
> \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D}.
@@ -120,7 +120,7 @@
cameras are available in \uicontrol Library > \uicontrol Components
> \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D}. For more information
about using cameras in the scene, the available camera types, and their
properties, see \l{Using Scene Camera}.
properties, see \l{Cameras}.
\section1 Using Global and Local Orientation
@@ -151,7 +151,7 @@
or press \key U.
For more information about the available scene light types and their
properties, see \l{Using Lights}.
properties, see \l{Lights}.
\section1 Selecting Components

8
doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-effects.qdoc
View File

@@ -30,7 +30,7 @@
\previouspage studio-3d-materials-types.html
\nextpage studio-3d-custom-shaders.html
\title Applying 3D Effects
\title 3D Effects
\QDS provides a set of 3D effects, which are visible in \l {Form Editor}.
To apply a visual effect to a scene, drag-and-drop an effect from \l Library
@@ -41,7 +41,7 @@
You can use the \l Effect component available in \uicontrol
{Qt Quick 3D Effects} > \uicontrol {Custom Shader Utils} as the base
component for creating custom post-processing effects. For more information,
see \l {Creating Custom Effects and Materials} and \l {Using Custom Shaders}.
see \l {Custom Effects and Materials} and \l {Custom Shaders}.
You can apply multiple effects to a scene. Select the \uicontrol
{Scene Environment} component in \uicontrol Navigator to view the applied
@@ -282,8 +282,8 @@
\note Only has a visible effect if the background of the scene is set to
be transparent in the \uicontrol {Background Mode} field of the
\uicontrol {Scene Environment} component. Otherwise, the clear color of
the background hides the blur. For more information, see \l {Setting
Scene Environment}.
the background hides the blur. For more information, see
\l {Scene Environment}.
The \uicontrol {Fade Amount} property defines the fade speed of the
trail.

2
doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-lights.qdoc
View File

@@ -30,7 +30,7 @@
\previouspage studio-3d-custom-effects-materials.html
\nextpage studio-3d-camera.html
\title Using Lights
\title Lights
Light components are the primary source of lighting in a \QDS scene.
As a secondary light source, you can use \l{Using Image-based Lighting}

6
doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials-shaders.qdoc
View File

@@ -30,7 +30,7 @@
\previouspage studio-3d-model.html
\nextpage studio-3d-texture.html
\title Using Materials and Shaders
\title Materials and Shaders
\image studio-qtquick-3d-material.png "Material attached to model in Design mode"
@@ -48,7 +48,7 @@
\list
\li Default material
\li Principled material
\li \l{Creating Custom Effects and Materials}{Custom material}
\li \l{Custom Effects and Materials}{Custom material}
\li Texture
\endlist
@@ -60,7 +60,7 @@
You can use the \l Texture component to apply textures to materials. It
defines an image and how the image is mapped to meshes in a 3D scene. For
more information, see \l {Attaching Textures to Materials}.
more information, see \l {Textures}.
You can modify material properties in the \uicontrol Properties view, as
instructed in the following sections. The availability of the properties

8
doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-materials.qdoc
View File

@@ -30,10 +30,10 @@
\previouspage studio-3d-texture.html
\nextpage studio-3d-effects.html
\title Using 3D Materials
\title 3D Materials
\QDS provides a set of pregenerated Qt Quick 3D materials that can be used
to create good-looking \l {Adding 3D Models}{models} quickly and easily.
to create good-looking \l {3D Models}{models} quickly and easily.
To apply a 3D material to a component, you should first delete the default
material and then drag-and-drop a new material from \l Library >
@@ -64,8 +64,8 @@
You can use the \l {CustomMaterial}{Custom Material} component available in
\uicontrol {Qt Quick 3D Effects} > \uicontrol {Custom Shader Utils} as
the base component for creating custom materials used to shade models. For
more information, see \l {Creating Custom Effects and Materials} and
\l {Using Custom Shaders}.
more information, see \l {Custom Effects and Materials} and
\l {Custom Shaders}.
\section1 Metal Materials

6
doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-model.qdoc
View File

@@ -30,7 +30,7 @@
\previouspage studio-3d-node.html
\nextpage studio-3d-materials.html
\title Adding 3D Models
\title 3D Models
\QDS \l Library features some built-in primitive 3D models. This allows you
to add cubes, cones, cylinders, and planes (rectangles) to your scene.
@@ -38,7 +38,7 @@
\image studio-3d-models.png
A Model component loads mesh data from a file. You can modify how the
component is shaded by adding \l{Using 3D Materials}{materials} to the model.
component is shaded by adding \l{3D Materials}{materials} to the model.
You can drag-and-drop a model from \uicontrol Library > \uicontrol Components
> \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D} to \l {3D Editor} or
@@ -86,5 +86,5 @@
material. Select the material from the list in the \uicontrol {Materials}
field. Select the \inlineimage plus.png
button to add materials to the list. For more information about materials,
see \l {Using Materials and Shaders}.
see \l {Materials and Shaders}.
*/

4
doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-node.qdoc
View File

@@ -24,11 +24,11 @@
****************************************************************************/
/*!
\previouspage studio-3d-components.html
\page studio-3d-node.html
\previouspage quick-animations.html
\nextpage studio-3d-model.html
\title Setting Group Properties
\title Group
The \uicontrol Group component is a \uicontrol Node component that can be
used to wrap other objects for the purpose of grouping them. This allows you

12
doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-scene-environment.qdoc
View File

@@ -28,13 +28,9 @@
/*!
\page studio-3d-scene-environment.html
\previouspage studio-3d-camera.html
\if defined (qtdesignstudio)
\nextpage creator-live-preview.html
\else
\nextpage qtquick-iso-icon-browser.html
\endif
\nextpage quick-component-instances.html
\title Setting Scene Environment
\title Scene Environment
You can use the SceneEnvironment type to specify how the scene is rendered
globally. You can specify settings for antialiasing, scene background,
@@ -134,13 +130,13 @@
\note Large distances between the clipping planes of your camera may cause
problems with ambient occlusion. If you are seeing odd banding in ambient
occlusion, try adjusting the value in the \uicontrol {Clip far} field in
the \l{Using Scene Camera}{scene camera} properties.
the \l{Cameras}{scene camera} properties.
\section1 Using Image-based Lighting
In the material properties, you can specify an image (preferably
a high-dynamic range image) to use to light the scene, either
instead of or in addition to \l{Using Lights}{scene lights}. In the
instead of or in addition to \l{Lights}{scene lights}. In the
\uicontrol {Probe brightness} field, you can modify the amount of
light emitted by the light probe.

2
doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-texture.qdoc
View File

@@ -30,7 +30,7 @@
\previouspage studio-3d-materials.html
\nextpage studio-3d-materials-types.html
\title Attaching Textures to Materials
\title Textures
You can use the \uicontrol Texture component to attach textures to materials.
You specify an image to use as the source file for the \uicontrol Texture,

16
doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-view.qdoc
View File

@@ -24,20 +24,20 @@
****************************************************************************/
/*!
\previouspage studio-3d-editor.html
\page studio-3d-view.html
\nextpage studio-3d-components.html
\previouspage quick-animations.html
\nextpage studio-3d-node.html
\title Adding 3D Views
\title 3D Views
To create a Qt Quick 3D UI project, we recommend using a \uicontrol
{Qt Quick 3D Application Template} wizard template that adds the
\l {Using 3D Components}{Qt Quick 3D} components to \l Library >
\l {3D Components}{Qt Quick 3D} components to \l Library >
\uicontrol Components and contains a 3D view. A 3D view component includes a
\l {Setting Scene Environment}{scene environment} as well as a scene
\l {Using Lights}{light}, \l {Using Scene Camera}{camera}, and
\l {Adding 3D Models}{model}. A default \l {Using Materials and Shaders}{material}
is attached to the model. You can attach \l {Attaching Textures to Materials}{textures}
\l {Scene Environment}{scene environment} as well as a scene
\l {Lights}{light}, \l {Cameras}{camera}, and
\l {3D Models}{model}. A default \l {Materials and Shaders}{material}
is attached to the model. You can attach \l {Textures}{textures}
to materials. For more information about creating projects, see \l{Creating Projects}.
To add a 3D view to some other kind of a project, you first need to add the

80
doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d.qdoc
View File

@@ -1,80 +0,0 @@
/****************************************************************************
**
** Copyright (C) 2020 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Design Studio documentation.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
**
****************************************************************************/
/*!
\page studio-3d.html
\previouspage quick-states.html
\if defined(qtdesignstudio)
\nextpage studio-3d-view.html
\else
\nextpage exporting-3d-assets.html
\endif
\title Editing 3D Scenes
You can use \l{3D Editor} in the \uicontrol Design mode to edit files you
created using 3D graphics applications and stored in one of the supported
formats. You cannot create 3D models or other assets in the editor, but you
can \l{Importing 3D Assets}{import} the assets you need and work with them
to create scenes and states, as well as the transitions between them.
When you import 3D scenes from files that you exported from 3D graphics
tools, you also import the camera, light, model, and materials as 3D
components. If your scene did not contain them, you can add predefined
3D components to it and edit their properties to fit your needs.
The following topics contain information about editing 3D scenes:
\list
\if defined (qtcreator)
\li \l {Exporting 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.
\li \l{Importing 3D Assets}
You can import 3D assets that you created using 3D graphics
applications and stored in one of the supported file formats.
You can then edit them in the Design mode.
\endif
\li \l{Adding 3D Views}
You can drag-and-drop 3D components from \l Library >
\uicontrol Components to \uicontrol {3D Editor} or to \l Navigator.
You must add all 3D components into a 3D view.
\li \l {Using 3D Components}
You can speficy properties for 3D components, such as cameras,
lights, materials, and shaders, in the \uicontrol Properties view.
\endlist
For more information, watch the following video:
\youtube w1yhDl93YI0
*/