Doc: Update view names in documentation

Changing the following view names:
Form Editor -> 2D
3D Editor -> 3D
Connection View -> Connections
Curve Editor -> Curves
Transition Editor - Transitions

Task-number: QDS-7316
Change-Id: Id9b719b368cf5f7156319a597e94f0a3eb7c89ab
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
This commit is contained in:
Mats Honkamaa
2022-08-29 13:58:04 +03:00
parent e3408a8a0a
commit 422a20864e
83 changed files with 421 additions and 410 deletions

View File

@@ -38,7 +38,11 @@
\nextpage creator-editor-fakevim.html \nextpage creator-editor-fakevim.html
\endif \endif
\if defined(qtdesignstudio)
\title Specifying Code View Settings
\else
\title Specifying Text Editor Settings \title Specifying Text Editor Settings
\endif
Set the font preferences and apply color schemes for syntax highlighting, Set the font preferences and apply color schemes for syntax highlighting,
diff editor, and code analysis results in \uicontrol Edit > diff editor, and code analysis results in \uicontrol Edit >

View File

@@ -63,11 +63,15 @@
You can perform the following configuration actions: You can perform the following configuration actions:
\list \list
\if defined(qtdesignstudio)
\li Set the \l{Specifying Code View Settings}{font preferences and
apply color schemes} for syntax highlighting in
\uicontrol {Font & Colors}.
\else
\li Set the \l{Specifying Text Editor Settings}{font preferences and \li Set the \l{Specifying Text Editor Settings}{font preferences and
apply color schemes} for syntax highlighting in apply color schemes} for syntax highlighting in
\uicontrol {Font & Colors}. \uicontrol {Font & Colors}.
\endif
\li Specify \l{Generic Highlighting} \li Specify \l{Generic Highlighting}
{definition files for syntax highlighting} for other types of files {definition files for syntax highlighting} for other types of files
than C++ or QML in \uicontrol {Generic Highlighter}. than C++ or QML in \uicontrol {Generic Highlighter}.

View File

@@ -872,7 +872,7 @@
\li QML type name. \li QML type name.
\if defined(qtdesignstudio) \if defined(qtdesignstudio)
This action is also available in \l {Form Editor}. This action is also available in the \l {2D} view.
\endif \endif
\row \row
\li Split Initializer \li Split Initializer

View File

@@ -604,8 +604,8 @@
\li Open the QML file that defines the selected component \li Open the QML file that defines the selected component
\li F2 \li F2
\row \row
\li Move between \uicontrol {Text Editor} and \li Move between \uicontrol the {Code} and
\uicontrol {Form Editor} \uicontrol {2D} views
\li F4 \li F4
\row \row
\li Toggle left sidebar \li Toggle left sidebar

View File

@@ -43,9 +43,9 @@
\if defined(qtdesignstudio) \if defined(qtdesignstudio)
You can use \QDS wizards to create UI files that have the filename You can use \QDS wizards to create UI files that have the filename
extension \e .ui.qml. The UI files can be edited in \l {Form Editor}. extension \e .ui.qml. The UI files can be edited in the \l {2D} view.
If you use \l {Text Editor} to add code that is not supported If you use the \l {Code} view to add code that is not supported
by \uicontrol {Form Editor}, \QDS displays error messages. by the \uicontrol {2D} view, \QDS displays error messages.
\else \else
If you switch between \QC and \QDS or cooperate with designers on If you switch between \QC and \QDS or cooperate with designers on
a project, you might encounter UI files (.ui.qml). They are intended to a project, you might encounter UI files (.ui.qml). They are intended to
@@ -173,7 +173,7 @@
\if defined(qtdesignstudio) \if defined(qtdesignstudio)
\section1 Using UI Files \section1 Using UI Files
You can edit the UI files in the \l {Form Editor} and You can edit the UI files in the \l {2D} and
\uicontrol {Text Editor} views. Components that are \uicontrol {Text Editor} views. Components that are
supposed to be used in code have to be exported as properties: supposed to be used in code have to be exported as properties:
@@ -212,7 +212,7 @@
You can also assign properties or define behavior or transitions. You can also assign properties or define behavior or transitions.
To move from \l {Form Editor} or \l Navigator directly to the To move from the \l {2D} or \l Navigator view directly to the
implementation of a component in the .qml file, right-click the implementation of a component in the .qml file, right-click the
component and select \uicontrol {Go to Implementation} in the component and select \uicontrol {Go to Implementation} in the
context menu. context menu.

View File

@@ -107,7 +107,7 @@
\list \list
\li From \uicontrol Components > \li From \uicontrol Components >
\uicontrol{Qt Quick 3D Particle System Templates} drag an \uicontrol{Qt Quick 3D Particle System Templates} drag an
\uicontrol {Animated Sprite} component to \uicontrol{3D Editor}. You can \uicontrol {Animated Sprite} component to the \uicontrol{3D} view. You can
also drag it to \e scene in \uicontrol {Navigator}. also drag it to \e scene in \uicontrol {Navigator}.
\endlist \endlist
@@ -115,7 +115,7 @@
You now have the particle system in place. To preview it, select You now have the particle system in place. To preview it, select
\key Alt + \key{P}. You can also preview the particle system in \key Alt + \key{P}. You can also preview the particle system in
\uicontrol {3D Editor} by using the \l {Particle Editor} tools. the \uicontrol{3D} view by using the \l {Particle Editor} tools.
\section2 Adding Sprites and Sprite Animations \section2 Adding Sprites and Sprite Animations

View File

@@ -26,7 +26,7 @@
/*! /*!
\page state-transition-animations.html \page state-transition-animations.html
\ingroup gstutorials \ingroup gstutorials
\sa States, {Transition Editor}, {Adding States} \sa States, {Transitions}, {Adding States}
\title Animated State Transitions \title Animated State Transitions
\brief Illustrates how to create animated state transitions. \brief Illustrates how to create animated state transitions.
@@ -164,10 +164,10 @@
The final step of this tutorial is to create animations between the states: The final step of this tutorial is to create animations between the states:
\list 1 \list 1
\li Go to \l{Transition Editor}. \li Go to \l{Transitions}.
\li Select \inlineimage icons/plus.png \li Select \inlineimage icons/plus.png
. .
\li In the upper right corner of \uicontrol {Transition Editor}, change \li In the upper right corner of \uicontrol {Transitions}, change
the number 2000 to 1000. the number 2000 to 1000.
This sets the length of the animation in milliseconds. This sets the length of the animation in milliseconds.
\li Drag the left end of the timebar for \e car_final to the 0 mark in \li Drag the left end of the timebar for \e car_final to the 0 mark in

View File

@@ -129,7 +129,7 @@
highly-readable, structured layout. Every UI file consists of two parts: highly-readable, structured layout. Every UI file consists of two parts:
an imports section and an component declaration section. The components and an imports section and an component declaration section. The components and
functionality most common to UIs are provided in the \c QtQuick import. You 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{Text Editor} view. can view the code of a \e .ui.qml file in the \l{Code} view.
Next, you will edit the values of the properties of the component instances Next, you will edit the values of the properties of the component instances
to create the main page of the UI. to create the main page of the UI.
@@ -170,14 +170,14 @@
To preview the changes that you make to the UI while you make To preview the changes that you make to the UI while you make
them, select the \inlineimage icons/live_preview.png them, select the \inlineimage icons/live_preview.png
(\uicontrol {Show Live Preview}) button on the \uicontrol {Form Editor} (\uicontrol {Show Live Preview}) button on the \uicontrol {2D}
view toolbar or press \key {Alt+P}. view toolbar or press \key {Alt+P}.
The \e Screen01.ui.qml file that the wizard template created for you should The \e Screen01.ui.qml file that the wizard template created for you should
be open in the \uicontrol Design mode. If it is not, you can double-click it be open in the \uicontrol Design mode. If it is not, you can double-click it
in the \uicontrol Projects view to open it. in the \uicontrol Projects view to open it.
To modify the \e Screen01 component in \uicontrol {Form Editor}: To modify the \e Screen01 component in the \uicontrol {2D} view:
\list 1 \list 1
\li Drag-and-drop the background image from \uicontrol Assets to the \li Drag-and-drop the background image from \uicontrol Assets to the
@@ -189,9 +189,9 @@
\image loginui1-image-properties.png "Image properties" \image loginui1-image-properties.png "Image properties"
\li Drag-and-drop the Qt logo from \uicontrol Assets to the rectangle \li Drag-and-drop the Qt logo from \uicontrol Assets to the rectangle
in \uicontrol Navigator and move it to the top-center of the in \uicontrol Navigator and move it to the top-center of the
background image in \uicontrol {Form Editor}. background image in \uicontrol the {2D} view.
\li Select \e Text in \uicontrol Navigator and drag it below the logo \li Select \e Text in \uicontrol Navigator and drag it below the logo
in \uicontrol {Form Editor}. If the text is hidden behind the in the \uicontrol {2D} view. If the text is hidden behind the
background, select \inlineimage icons/navigator-arrowdown.png background, select \inlineimage icons/navigator-arrowdown.png
in \uicontrol Navigator to move the text as the last item in the in \uicontrol Navigator to move the text as the last item in the
component tree structure. The text should then appear on top component tree structure. The text should then appear on top
@@ -213,7 +213,7 @@
to save your changes. to save your changes.
\endlist \endlist
Your UI should now look something like this in \uicontrol {Form Editor} Your UI should now look something like this in the \uicontrol {2D} view
and live preview: and live preview:
\image loginui1-main-page.jpg "Modified UI in the Design mode" \image loginui1-main-page.jpg "Modified UI in the Design mode"
@@ -234,7 +234,7 @@
\skipto import \skipto import
\printuntil Controls \printuntil Controls
You can view the import statements in the \uicontrol {Text Editor} view. You can view the import statements in the \uicontrol {Code} view.
The \l Components view lists the components in each module that are The \l Components view lists the components in each module that are
supported by \QDS. You can use the basic components to create your own supported by \QDS. You can use the basic components to create your own
@@ -394,7 +394,7 @@
Your button should now look something like this: Your button should now look something like this:
\image loginui1-entry-field-styled.jpg "Modified button in the Form Editor" \image loginui1-entry-field-styled.jpg "Modified button in the 2D view"
Next, you will add instances of the \e EntryField component to the Next, you will add instances of the \e EntryField component to the
\e Screen01 component and modify their properties. \e Screen01 component and modify their properties.
@@ -405,7 +405,7 @@
\list 1 \list 1
\li Double-click \e Screen01.ui.qml in \uicontrol Projects \li Double-click \e Screen01.ui.qml in \uicontrol Projects
to open it in \uicontrol {Form Editor}. to open it in the \uicontrol {2D} view.
\li Drag-and-drop two instances of the EntryField component from \li Drag-and-drop two instances of the EntryField component from
\uicontrol Components > \uicontrol {My Components} to the rectangle \uicontrol Components > \uicontrol {My Components} to the rectangle
in \uicontrol Navigator. in \uicontrol Navigator.
@@ -422,7 +422,7 @@
translatable. translatable.
\li Move the cursor on the selected button instance to make the \li Move the cursor on the selected button instance to make the
selection icon appear. You can now drag the button instance selection icon appear. You can now drag the button instance
to another position in \uicontrol {Form Editor}. Use the to another position in the \uicontrol {2D} view. Use the
guidelines to align the button instances below the tag line: guidelines to align the button instances below the tag line:
\image loginui1-align-buttons.jpg \image loginui1-align-buttons.jpg
\li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S} \li Select \uicontrol File > \uicontrol Save or press \key {Ctrl+S}
@@ -478,12 +478,12 @@
\list 1 \list 1
\li Double-click \e Screen01.ui.qml in \uicontrol Projects \li Double-click \e Screen01.ui.qml in \uicontrol Projects
to open it in \uicontrol {Form Editor}. to open it in the \uicontrol {2D} view.
\li Drag-and-drop two instances of the PushButton component from \li Drag-and-drop two instances of the PushButton component from
\uicontrol Components > \uicontrol {My Components} to the rectangle \uicontrol Components > \uicontrol {My Components} to the rectangle
in \uicontrol Navigator. in \uicontrol Navigator.
\li Drag the button instances to the bottom of the background image in \li Drag the button instances to the bottom of the background image in
\uicontrol {Form Editor}. Use the guidelines to align the button the \uicontrol {2D} view. Use the guidelines to align the button
instances horizontally with the entry fields. instances horizontally with the entry fields.
\li Select the first PushButton instance in \uicontrol Navigator \li Select the first PushButton instance in \uicontrol Navigator
to modify its ID and text label in \uicontrol Properties. to modify its ID and text label in \uicontrol Properties.
@@ -499,9 +499,9 @@
\endlist \endlist
The first iteration of your UI is now ready and should now look something The first iteration of your UI is now ready and should now look something
like this in \uicontrol {Form Editor} and live preview: like this in the \uicontrol {2D} view and live preview:
\image loginui1-ready.jpg "The finished UI in Form Editor" \image loginui1-ready.jpg "The finished UI in the 2D view"
\section2 Learn More - Component IDs \section2 Learn More - Component IDs

View File

@@ -69,14 +69,14 @@
To preview the changes that you make to the UI while you make To preview the changes that you make to the UI while you make
them, select the \inlineimage icons/live_preview.png them, select the \inlineimage icons/live_preview.png
(\uicontrol {Show Live Preview}) button on the \l {Form Editor} (\uicontrol {Show Live Preview}) button on the \l {2D} view
toolbar or press \key {Alt+P}. toolbar or press \key {Alt+P}.
To anchor component instances on a page: To anchor component instances on a page:
\list 1 \list 1
\li Open \e {Screen01.ui.qml} for editing in the \li Open \e {Screen01.ui.qml} for editing in the
\uicontrol {Form Editor} view. \uicontrol {2D} view.
\li Select \e adventurePage in the \l Navigator view to display its \li Select \e adventurePage in the \l Navigator view to display its
properties in the \l Properties view. properties in the \l Properties view.
\li In \uicontrol Properties > \uicontrol Layout, select \li In \uicontrol Properties > \uicontrol Layout, select
@@ -85,8 +85,8 @@
parent in the \uicontrol Target field. This attaches the background parent in the \uicontrol Target field. This attaches the background
image to the rectangle on all sides. image to the rectangle on all sides.
Note: Selecting the anchor button should automatically select the Note: Selecting the anchor button should automatically select the
four buttons on the left side of it. If it doesn't, refresh four buttons on the left side of it. If it doesn't, refresh the
\uicontrol{Form Editor}. \uicontrol{2D} view.
\image loginui2-layout.png "Layout properties" \image loginui2-layout.png "Layout properties"
\li Select \e qt_logo_green_128x128px in \l Navigator. \li Select \e qt_logo_green_128x128px in \l Navigator.
\li In \uicontrol Properties > \uicontrol Layout, select the \li In \uicontrol Properties > \uicontrol Layout, select the
@@ -152,8 +152,8 @@
\l {Multiselection}{multiple selection}), and right-click \l {Multiselection}{multiple selection}), and right-click
either of them to open a context menu. either of them to open a context menu.
\li Select \uicontrol Position > \uicontrol {Position in Column} \li Select \uicontrol Position > \uicontrol {Position in Column}
to position the fields on top of each other in to position the fields on top of each other in the
\uicontrol {Form Editor}. \uicontrol {2D} view.
\li Select the column in \uicontrol Navigator and change its ID \li Select the column in \uicontrol Navigator and change its ID
to \e fields in \uicontrol Properties. to \e fields in \uicontrol Properties.
\li In \uicontrol Column > \uicontrol Spacing, set the spacing between \li In \uicontrol Column > \uicontrol Spacing, set the spacing between

View File

@@ -64,7 +64,7 @@
To preview the changes that you make to the UI while you make To preview the changes that you make to the UI while you make
them, select the \inlineimage icons/live_preview.png them, select the \inlineimage icons/live_preview.png
(\uicontrol {Show Live Preview}) button on the \l {Form Editor} (\uicontrol {Show Live Preview}) button on the \l {2D} view
toolbar or press \key {Alt+P}. toolbar or press \key {Alt+P}.
To add the entry field needed on the second page to the \e Screen01 To add the entry field needed on the second page to the \e Screen01
@@ -72,7 +72,7 @@
\list 1 \list 1
\li Double-click \e Screen01.ui.qml in \uicontrol Projects to open it \li Double-click \e Screen01.ui.qml in \uicontrol Projects to open it
in \uicontrol {Form Editor}. in the \uicontrol {2D} view.
\li Drag-and-drop an instance of the EntryField component from \li Drag-and-drop an instance of the EntryField component from
\uicontrol Components > \uicontrol {My Components} to \e fields in \uicontrol Components > \uicontrol {My Components} to \e fields in
\l Navigator. \l Navigator.
@@ -87,7 +87,8 @@
to save your changes. to save your changes.
\endlist \endlist
\e Screen01 should now look something like this in \uicontrol {Form Editor}: \e Screen01 should now look something like this in the
\uicontrol {2D} view:
\image loginui3-base-state.jpg "Login page with a Repeat Password field" \image loginui3-base-state.jpg "Login page with a Repeat Password field"
@@ -99,7 +100,7 @@
\section1 Using States to Simulate Page Changes \section1 Using States to Simulate Page Changes
You will now add \l{Adding States}{states} to the UI to show and hide UI You will now add \l{Adding States}{states} to the UI to show and hide UI
components in \uicontrol {Form Editor}, depending on the current page: components in the \uicontrol {2D} view, depending on the current page:
\list 1 \list 1
\li In the \l States view, select \inlineimage icons/plus.png \li In the \l States view, select \inlineimage icons/plus.png
@@ -170,13 +171,13 @@
that has a \e clicked signal. The signal is emitted whenever the mouse that has a \e clicked signal. The signal is emitted whenever the mouse
is clicked within the area. is clicked within the area.
You will now use \l {Connection View} to You will now use the \l {Connections} view to
\l{Connecting Components to Signals}{connect} the clicked signal of the \l{Connecting Components to Signals}{connect} the clicked signal of the
\e createAccount button to \e createAccount state: \e createAccount button to \e createAccount state:
\list 1 \list 1
\li Select \uicontrol View > \uicontrol Views > \li Select \uicontrol View > \uicontrol Views >
\uicontrol {Connection View} to open the \uicontrol Connections tab. \uicontrol {Connections} to open the \uicontrol Connections view.
\li Select \e createAccount in \uicontrol Navigator. \li Select \e createAccount in \uicontrol Navigator.
\li In the \uicontrol Connections tab, select the \inlineimage icons/plus.png \li In the \uicontrol Connections tab, select the \inlineimage icons/plus.png
button to add the action that the \c onClicked signal handler of button to add the action that the \c onClicked signal handler of

View File

@@ -83,7 +83,7 @@
\list 1 \list 1
\li Double-click \e Screen01.ui.qml in \l Projects to open it \li Double-click \e Screen01.ui.qml in \l Projects to open it
in \l {Form Editor}. in the \l {2D} view.
\li In the \l States view, select \e login, and then select \li In the \l States view, select \e login, and then select
\inlineimage icons/close.png \inlineimage icons/close.png
to remove the state. Repeat for the \e createAccount state. to remove the state. Repeat for the \e createAccount state.
@@ -130,7 +130,7 @@
would probably stay the same, even if the positions of the fields on the would probably stay the same, even if the positions of the fields on the
page would change. page would change.
\e Screen01 should not display visible changes in \uicontrol {Form Editor}: \e Screen01 should not display visible changes in the \uicontrol {2D} view:
\image loginui3-base-state.jpg "UI with all the buttons and fields in the Design mode" \image loginui3-base-state.jpg "UI with all the buttons and fields in the Design mode"

View File

@@ -135,7 +135,7 @@
\li In \uicontrol{Projects}, double-click \e{Screen01.ui.qml} to open it. \li In \uicontrol{Projects}, double-click \e{Screen01.ui.qml} to open it.
\li All text strings that you want to translate need to be of \c \li All text strings that you want to translate need to be of \c
qsTrId type. In this project the text strings are of \c qsTr type so you qsTrId type. In this project the text strings are of \c qsTr type so you
need to change them. Open \uicontrol{Text Editor}, find all five need to change them. Open the \uicontrol{Code} view, find all five
occurrences of \c qsTr and replace them with \c{qsTrId}. For example, occurrences of \c qsTr and replace them with \c{qsTrId}. For example,
replace: replace:
\code \code
@@ -181,8 +181,8 @@
You can select language from the dropdown list on the left side of the You can select language from the dropdown list on the left side of the
\uicontrol Translations view. Translations for the selected languages will \uicontrol Translations view. Translations for the selected languages will
show in the \uicontrol Translations view as well as in show in the \uicontrol Translations view as well as in the
\uicontrol{Form Editor}. \uicontrol {2D} view.
You can run translation tests, import, and export translations as described You can run translation tests, import, and export translations as described
in \l{Translations}. in \l{Translations}.

View File

@@ -47,7 +47,7 @@
In the \uicontrol Design mode, we drag-and-drop a \uicontrol Rectangle from In the \uicontrol Design mode, we drag-and-drop a \uicontrol Rectangle from
\uicontrol Components > \uicontrol {Default Components} > \uicontrol Components > \uicontrol {Default Components} >
\uicontrol Basic to \l {Form Editor} and modify its size to create the \uicontrol Basic to the \l {2D} view and modify its size to create the
background for the progress bar. We change its ID to \e pb_back in background for the progress bar. We change its ID to \e pb_back in
\l Properties. \l Properties.
@@ -55,7 +55,7 @@
that was added by the project wizard, so we will use an \uicontrol Item that was added by the project wizard, so we will use an \uicontrol Item
component for that. We drag-and-drop the Item from \uicontrol Components > component for that. We drag-and-drop the Item from \uicontrol Components >
\uicontrol {Default Components} > \uicontrol Basic \uicontrol {Default Components} > \uicontrol Basic
to \uicontrol {Form Editor} and change its ID to \e root in to the \uicontrol {2D} view and change its ID to \e root in
\uicontrol Properties. \uicontrol Properties.
To make the background and text children of the Item, we drag-and-drop them To make the background and text children of the Item, we drag-and-drop them
@@ -65,7 +65,7 @@
margin at the top to leave space for the text. We then anchor the text to margin at the top to leave space for the text. We then anchor the text to
the top of the Item. the top of the Item.
\image progressbar-rectangle.png "Progress bar background in the Form Editor" \image progressbar-rectangle.png "Progress bar background in the 2D view"
We now drag-and-drop another rectangle on top of the background rectangle in We now drag-and-drop another rectangle on top of the background rectangle in
\uicontrol Navigator and change its ID to \e pb_front in \uicontrol Navigator and change its ID to \e pb_front in
@@ -161,7 +161,7 @@
We now select the root component in \uicontrol Navigator, and We now select the root component in \uicontrol Navigator, and
then select \uicontrol {Go into Component} in the context menu to then select \uicontrol {Go into Component} in the context menu to
open \e Root.qml in \uicontrol {Form Editor}. open \e Root.qml in the \uicontrol {2D} view.
We want to be able to use the keyframe value as the value of the text label, We want to be able to use the keyframe value as the value of the text label,
so we will export it as a \l{Adding Property Aliases}{property alias}. We so we will export it as a \l{Adding Property Aliases}{property alias}. We
@@ -172,10 +172,11 @@
\image progressbar-root-export-property.png "Export keyframe group as a property" \image progressbar-root-export-property.png "Export keyframe group as a property"
When we select \e root in \uicontrol Navigator, we can see the When we select \e root in \uicontrol Navigator, we can see the
\e timelineCurrentFrame property in \l {Connection View} > \e timelineCurrentFrame property on the \uicontrol Bindings tab in the
\l {Connections} view.
\uicontrol Bindings. We double-click it to change its name to \e progress. \uicontrol Bindings. We double-click it to change its name to \e progress.
\image progressbar-bindings-progress.png "Connection View Bindings tab" \image progressbar-bindings-progress.png "Connections View Bindings tab"
We will bind some JavaScript to the value of the text label to turn We will bind some JavaScript to the value of the text label to turn
it into a running number that reflects the number of the keyframe on the it into a running number that reflects the number of the keyframe on the
@@ -211,7 +212,7 @@
smooth looping animation. smooth looping animation.
When we select the \uicontrol {Show Live Preview} button on the When we select the \uicontrol {Show Live Preview} button on the
\uicontrol {Form Editor} toolbar, we see a running number and moving \uicontrol {2D} view toolbar, we see a running number and moving
progress indicator of the animated progress bar instance. progress indicator of the animated progress bar instance.
\image progressbar-animated.png \image progressbar-animated.png

View File

@@ -76,7 +76,7 @@
for the states to bind the properties to the states using \c when for the states to bind the properties to the states using \c when
conditions. First, we specify that a button instance enters the \e checked conditions. First, we specify that a button instance enters the \e checked
state when the \l {AbstractButton::}{checked} property is set to \c true. state when the \l {AbstractButton::}{checked} property is set to \c true.
This is how the code will look in \l{Text Editor}: This is how the code will look in the \l{Code} view:
\quotefromfile SideMenu/CustomButton.qml \quotefromfile SideMenu/CustomButton.qml
\skipto states: [ \skipto states: [
@@ -102,10 +102,10 @@
\section1 Constructing a Menu Bar \section1 Constructing a Menu Bar
We construct the menu bar in the \e {MainFile.ui.qml} file using the We construct the menu bar in the \e {MainFile.ui.qml} file using the
\l {Form Editor}. The CustomButton component is listed in \l {2D} view. The CustomButton component is listed in
\uicontrol Components > \uicontrol {My Components}. \uicontrol Components > \uicontrol {My Components}.
We drag-and-drop several instances of the component to \uicontrol Navigator We drag-and-drop several instances of the component to \uicontrol Navigator
or \uicontrol {Form Editor} and enclose them in a \uicontrol {Row Layout} or the \uicontrol {2D} view and enclose them in a \uicontrol {Row Layout}
component instance to lay them out as a menu bar. component instance to lay them out as a menu bar.
\image sidemenu-menubar.png \image sidemenu-menubar.png
@@ -201,7 +201,7 @@
In \e {SideMenu.qml}, we use connections to bind the action of clicking In \e {SideMenu.qml}, we use connections to bind the action of clicking
the burger menu to the signal handler for triggering the opening or the burger menu to the signal handler for triggering the opening or
closing animation, depending on the current state. We create the connections closing animation, depending on the current state. We create the connections
in \l{Connection View}. in the \l{Connections} view.
\image sidemenu-connections.png \image sidemenu-connections.png

View File

@@ -168,17 +168,17 @@
and 1000 (\e arcSegment4). and 1000 (\e arcSegment4).
When we move the playhead in \uicontrol Timeline, we can see the rotation When we move the playhead in \uicontrol Timeline, we can see the rotation
animation in \l {Form Editor}. animation in the \l {2D} view.
\image washingmachineui-multsegmentarc.gif "Rotation animation in Form Editor" \image washingmachineui-multsegmentarc.gif "Rotation animation in the 2D view"
\section1 Creating States \section1 Creating States
In our UI, we use connections and states to move between screens. First, In our UI, we use connections and states to move between screens. First,
we specify the application workflow in \e ApplicationFlow.qml. When the we specify the application workflow in \e ApplicationFlow.qml. When the
file is open in \uicontrol {Form Editor}, we drag-and-drop the components file is open in the \uicontrol {2D} view, we drag-and-drop the components
that define the screens in the application from \uicontrol Components to that define the screens in the application from \uicontrol Components to
\uicontrol Navigator or \uicontrol {Form Editor}: \e StartScreen, \uicontrol Navigator or the \uicontrol {2D} view: \e StartScreen,
\e SettingsScreen, \e PresetsScreen, and \e RunningScreen. \e SettingsScreen, \e PresetsScreen, and \e RunningScreen.
\image washingmachineui-application-flow.png "startScreen component in different views" \image washingmachineui-application-flow.png "startScreen component in different views"
@@ -205,7 +205,7 @@
Some signals are predefined for the \l {Mouse Area} component, some we have to Some signals are predefined for the \l {Mouse Area} component, some we have to
add ourselves. For example, let's look at the start button that we use add ourselves. For example, let's look at the start button that we use
in \e StartScreen.ui.qml. First, we use the \l{Text Editor} view in \e StartScreen.ui.qml. First, we use the \l{Code} view
to create the \c startClicked signal: to create the \c startClicked signal:
\quotefromfile washingMachineUI/StartScreen.ui.qml \quotefromfile washingMachineUI/StartScreen.ui.qml
@@ -213,12 +213,12 @@
\printuntil startClicked \printuntil startClicked
Then, we select the mouse area for the start button, \e startMA, Then, we select the mouse area for the start button, \e startMA,
in \uicontrol Navigator. In \l {Connection View} > \uicontrol Connections, in \uicontrol Navigator. On the \uicontrol Connections tab in the
we select the \inlineimage icons/plus.png \l {Connections} view, we select the \inlineimage icons/plus.png
(\uicontrol Add) button to connect the \c onClicked() signal handler (\uicontrol Add) button to connect the \c onClicked() signal handler
of the button to the \c startClicked() signal. of the button to the \c startClicked() signal.
\image washingmachineui-connections.png "Connection View" \image washingmachineui-connections.png "Connections view"
Then, in \e ApplicationView.qml, we specify that the \c startClicked() Then, in \e ApplicationView.qml, we specify that the \c startClicked()
signal changes the application state to \e presets: signal changes the application state to \e presets:

View File

@@ -170,16 +170,16 @@
the UI we will create. We use the imported components to create the the UI we will create. We use the imported components to create the
UI in the \e {MainApp.ui.qml} file. The imported components are UI in the \e {MainApp.ui.qml} file. The imported components are
listed in \uicontrol Components > \uicontrol {My Components}, listed in \uicontrol Components > \uicontrol {My Components},
and we can drag-and-drop them to \l {Form Editor}. and we can drag-and-drop them to the \l {2D} view.
\image webinardemo-mainappui.png "Main app UI in Design mode" \image webinardemo-mainappui.png "Main app UI in Design mode"
To view the structure of a particular component, we right-click it in the To view the structure of a particular component, we right-click it in the
\uicontrol {Form Editor} and select \uicontrol {Go into Component} in the \uicontrol {2D} view and select \uicontrol {Go into Component} in the
context menu. Any changes we make to a component are immediately visible in context menu. Any changes we make to a component are immediately visible in
all the other components where it appears. all the other components where it appears.
We can view the code for each component in \l{Text Editor}. We can view the code for each component in the \l{Code} view.
We can now use states and the timeline to animate the components in the UI. We can now use states and the timeline to animate the components in the UI.

View File

@@ -40,7 +40,7 @@
You can drag-and-drop animation components from You can drag-and-drop animation components from
\uicontrol Components > \uicontrol {Default Components} > \uicontrol Components > \uicontrol {Default Components} >
\uicontrol Animation to \l Navigator or \l {Form Editor} to \uicontrol Animation to the \l Navigator or \l {2D} view to
create instances of them. create instances of them.
You can achieve similar results by using different animation techniques. You can achieve similar results by using different animation techniques.

View File

@@ -53,7 +53,7 @@
\uicontrol {My Components} only if the filename begins with a \uicontrol {My Components} only if the filename begins with a
capital letter. capital letter.
\li Click \uicontrol {Design} to edit the file in \l {Form Editor}. \li Click \uicontrol {Design} to edit the file in the \l {2D} view.
\li In \l Navigator, select \uicontrol Item and set the width \li In \l Navigator, select \uicontrol Item and set the width
(\uicontrol W) and height (\uicontrol H) of the button in (\uicontrol W) and height (\uicontrol H) of the button in
@@ -152,7 +152,7 @@
Add a \l {Mouse Area} component that covers the whole area and Add a \l {Mouse Area} component that covers the whole area and
reacts to mouse events. reacts to mouse events.
\image qmldesigner-borderimage-type.png "Button component in Form Editor and States" \image qmldesigner-borderimage-type.png "Button component in the 2D and States views"
\section1 Creating the Button Component \section1 Creating the Button Component
@@ -175,7 +175,7 @@
To construct the button component: To construct the button component:
\list 1 \list 1
\li Click \uicontrol {Design} to edit the UI file in \l {Form Editor}. \li Click \uicontrol {Design} to edit the UI file in the \l {2D} view.
\li Select \uicontrol Assets > \inlineimage icons/plus.png \li Select \uicontrol Assets > \inlineimage icons/plus.png
to copy the image files you want to use to the project folder. to copy the image files you want to use to the project folder.
\li In \l Navigator, select the root component and set the \li In \l Navigator, select the root component and set the
@@ -271,8 +271,8 @@
When you work on other files in the project to create screens When you work on other files in the project to create screens
or other components for the UI, the button component appears in or other components for the UI, the button component appears in
\uicontrol Components > \uicontrol {My Components}. \uicontrol Components > \uicontrol {My Components}.
You can drag-and-drop it to \uicontrol {Form Editor} or You can drag-and-drop it to the \uicontrol {2D} or
\uicontrol Navigator to create button instances and modify the values \uicontrol Navigator view to create button instances and modify the values
of their properties to assign them useful IDs, change their appearance, of their properties to assign them useful IDs, change their appearance,
and set the button text for each button instance, for example. and set the button text for each button instance, for example.

View File

@@ -28,7 +28,7 @@
\section1 Context Menu \section1 Context Menu
The following table summarizes the \uicontrol Navigator and The following table summarizes the \uicontrol Navigator and
\uicontrol {Form Editor} context menu items and provides links \uicontrol {2D} views context menu items and provides links
to more information about them. to more information about them.
\table \table

View File

@@ -38,8 +38,8 @@
To create component instances and edit their properties: To create component instances and edit their properties:
\list 1 \list 1
\li Drag-and-drop components from \uicontrol Components (1) to \li Drag-and-drop components from \uicontrol Components (1) to the
\l Navigator (2), \l {Form Editor} (3), or \l {3D Editor} (4). \l Navigator (2), \l {2D} (3), or \l {3D} view (4).
This creates instances of the components in the current This creates instances of the components in the current
component file. component file.
\li Select component instances in \uicontrol Navigator to edit the \li Select component instances in \uicontrol Navigator to edit the
@@ -48,20 +48,21 @@
For more information, see \l {Specifying Component Properties}. For more information, see \l {Specifying Component Properties}.
\li To change the appearance and behavior of the component instances \li To change the appearance and behavior of the component instances
in ways that are not supported in \QDS by default, you can define in ways that are not supported in \QDS by default, you can define
custom properties in \l {Connection View} > \uicontrol {Properties}. custom properties on the \uicontrol {Properties} tab in the
\image qmldesigner-dynamicprops.png "Connection View Properties tab" \l {Connections} view.
\image qmldesigner-dynamicprops.png "Connections View Properties tab"
For more information, see \l{Specifying Dynamic Properties}. For more information, see \l{Specifying Dynamic Properties}.
\li To enable users to interact with the component instances, connect \li To enable users to interact with the component instances, connect
the instances to signals in \uicontrol {Connection View} > the instances to signals on the \uicontrol Connections tab in the
\uicontrol Connections. For example, you can specify what happens \uicontrol {Connections} view. For example, you can specify what
when a component instance is clicked. For more information, see happens when a component instance is clicked. For more information,
\l{Connecting Components to Signals}. see \l{Connecting Components to Signals}.
\image qmldesigner-connections.png "Connection View Connections tab" \image qmldesigner-connections.png "Connections View Connections tab"
\li To dynamically change the behavior of a component instance when \li To dynamically change the behavior of a component instance when
another component instance changes, create bindings between them in another component instance changes, create bindings between them on
\uicontrol {Connection View} > \uicontrol Bindings. 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.png "Connection View Bindings tab" \image qmldesigner-bindings.png "Connections view Bindings tab"
\li Add states to apply sets of changes to the property values of one \li Add states to apply sets of changes to the property values of one
or several component instances in the \uicontrol States view. or several component instances in the \uicontrol States view.
For more information, see \l{Adding States}. For more information, see \l{Adding States}.

View File

@@ -39,8 +39,8 @@
Custom components are stored in \uicontrol Components > Custom components are stored in \uicontrol Components >
\uicontrol {My Components}. You can create instances of custom components \uicontrol {My Components}. You can create instances of custom components
by dragging-and-dropping them from \uicontrol Components to \l {Form Editor}, by dragging-and-dropping them from \uicontrol Components to the \l {2D},
\l {3D Editor}, or \l Navigator. \l {3D}, or \l Navigator view.
\section1 Creating Components from Scratch \section1 Creating Components from Scratch
@@ -57,29 +57,30 @@
\note Components are listed in \uicontrol Components > \note Components are listed in \uicontrol Components >
\uicontrol {My Components} only if the filename begins with a \uicontrol {My Components} only if the filename begins with a
capital letter. capital letter.
\li Click \uicontrol Design to open the file in \li Click \uicontrol Design to open the file in the
\uicontrol {Form Editor}. \uicontrol {2D} view.
\li Drag-and-drop a component from \uicontrol Components to \li Drag-and-drop a component from \uicontrol Components to
\uicontrol Navigator or \uicontrol {Form Editor}. \uicontrol Navigator or the \uicontrol {2D} view.
\li Edit component properties in the \uicontrol Properties view. \li Edit component properties in the \uicontrol Properties view.
The available properties depend on the component type. You can The available properties depend on the component type. You can
\l{Specifying Dynamic Properties}{add properties for \l{Specifying Dynamic Properties}{add properties for
components} in \uicontrol {Connection View} > \uicontrol Properties. components} on the \uicontrol {Properties} tab in the
\uicontrol Connections view.
\li To change the appearance and behavior of the component instances \li To change the appearance and behavior of the component instances
in ways that are not supported in \QDS by default, you can define in ways that are not supported in \QDS by default, you can define
custom properties in \uicontrol {Connection View} > custom properties on the \uicontrol {Properties} tab in the
\uicontrol {Properties}. \uicontrol {Connections} view.
\endlist \endlist
The following sections contain more information about how to use The following sections contain more information about how to use the
\uicontrol {Form Editor} to edit 2D content and \uicontrol {3D Editor} \uicontrol {2D} view to edit 2D content and the \uicontrol {3D} view
to edit 3D scenes, as well as examples of how to create UI controls to edit 3D scenes, as well as examples of how to create UI controls
using instances of basic components: using instances of basic components:
\list \list
\li \l{Form Editor} \li The \l{2D} View
\li \l{3D Editor} \li The \l{3D} View
\li \l{Creating Buttons} \li \l{Creating Buttons}
\li \l{Creating Scalable Buttons and Borders} \li \l{Creating Scalable Buttons and Borders}
\endlist \endlist
@@ -110,7 +111,7 @@
An alternative way of creating reusable components is to turn An alternative way of creating reusable components is to turn
component instances into custom components by moving them into component instances into custom components by moving them into
separate component files (.ui.qml). Right-click a component instance separate component files (.ui.qml). Right-click a component instance
in \uicontrol Navigator or \uicontrol {Form Editor}, and select in \uicontrol Navigator or the \uicontrol {2D} view, and select
\uicontrol {Move Component into Separate File} in the context menu. \uicontrol {Move Component into Separate File} in the context menu.
\image qtcreator-move-component-into-separate-file.png \image qtcreator-move-component-into-separate-file.png
@@ -120,7 +121,7 @@
When you select \uicontrol OK, a new component file is created and an 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 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. file. The look of your UI in the \uicontrol {2D} view does not change.
To open the new component file for editing the properties that you want 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, to change for all instances of the component, right-click the component,
@@ -147,7 +148,7 @@
stylesheet. stylesheet.
To use this experimental feature, right-click a component in the To use this experimental feature, right-click a component in the
\uicontrol Navigator or \uicontrol {Form Editor} view and select \uicontrol Navigator or \uicontrol {2D} view and select
\uicontrol {Merge File with Template} in the context menu. \uicontrol {Merge File with Template} in the context menu.
\image qmldesigner-merge-with-template.png "Merge with Template dialog" \image qmldesigner-merge-with-template.png "Merge with Template dialog"

View File

@@ -86,7 +86,7 @@
most suitable for a use case and discuss the values you can set for button most suitable for a use case and discuss the values you can set for button
properties in the \uicontrol Properties view. properties in the \uicontrol Properties view.
\image qtquick-designer-button-types.png "Button controls in Form Editor" \image qtquick-designer-button-types.png "Button controls in the 2D view"
Recommendations for buttons that contain text: Recommendations for buttons that contain text:
@@ -669,7 +669,7 @@
\section1 Styling Controls \section1 Styling Controls
The preset UI controls can be \l {Styling Qt Quick Controls}{styled}. The preset UI controls can be \l {Styling Qt Quick Controls}{styled}.
\uicontrol {Form Editor} reads the preferred style from a The \uicontrol {2D} view reads the preferred style from a
configuration file (\c qtquickcontrols2.conf). To change the configuration file (\c qtquickcontrols2.conf). To change the
style, select another style from the list on the main toolbar. This style, select another style from the list on the main toolbar. This
enables you to check how your UI looks when using the available enables you to check how your UI looks when using the available

View File

@@ -170,8 +170,8 @@
\list 1 \list 1
\li Drag-and-drop a \uicontrol {Grid View} or \uicontrol {List View} \li Drag-and-drop a \uicontrol {Grid View} or \uicontrol {List View}
from \uicontrol Components > from \uicontrol Components >
\uicontrol {Default Components} > \uicontrol Views to \uicontrol {Default Components} > \uicontrol Views to the
\uicontrol Navigator or \uicontrol {Form Editor}. \uicontrol Navigator or \uicontrol {2D} view.
\li Right-click the view in \uicontrol Navigator, and select \li Right-click the view in \uicontrol Navigator, and select
\uicontrol {Edit List Model} in the context-menu to open \uicontrol {Edit List Model} in the context-menu to open
the list model editor: the list model editor:
@@ -183,7 +183,7 @@
\endlist \endlist
You can replace the default model and delegate with other, You can replace the default model and delegate with other,
more complex models and delegates in \l {Text Editor}. more complex models and delegates in the \l {Code} view.
\l{ItemDelegate}{Item Delegate} and \l{SwipeDelegate}{Swipe Delegate} \l{ItemDelegate}{Item Delegate} and \l{SwipeDelegate}{Swipe Delegate}
components are also available in \uicontrol Components components are also available in \uicontrol Components
> \uicontrol {Qt Quick Controls}. > \uicontrol {Qt Quick Controls}.

View File

@@ -50,7 +50,7 @@
\image qtquick-designer-image-type.png "Image component in different views" \image qtquick-designer-image-type.png "Image component in different views"
When you drag-and-drop an image file from \uicontrol Assets to \l Navigator When you drag-and-drop an image file from \uicontrol Assets to \l Navigator
or \l {Form Editor}, \QC automatically or the \l {2D} view, \QC automatically
creates an instance of the Image component for you with the path to the creates an instance of the Image component for you with the path to the
image file set as the value of the \uicontrol Source field in image file set as the value of the \uicontrol Source field in
\uicontrol Properties. \uicontrol Properties.
@@ -220,7 +220,7 @@
its color can be specified. its color can be specified.
To select an icon in the \uicontrol {ISO Icon Browser} in \QDS, select To select an icon in the \uicontrol {ISO Icon Browser} in \QDS, select
the ISO icon in \l Navigator or \l {Form Editor}, and then select the ISO icon in the \l Navigator or \l {2D} view, and then select
\uicontrol {Choose Icon} in the context menu. \uicontrol {Choose Icon} in the context menu.
\image studio-iso-icon.png \image studio-iso-icon.png

View File

@@ -32,14 +32,14 @@
on a \l{Path}. on a \l{Path}.
A graphical spline editor enables you to specify path view paths, which A graphical spline editor enables you to specify path view paths, which
is a non-trivial task to do in \uicontrol {Text Editor}. is a non-trivial task to do in the \uicontrol {Code} view.
\image qmldesigner-pathview-editor.png "Path View editor" \image qmldesigner-pathview-editor.png "Path View editor"
To start editing the path, double-click the path view in To start editing the path, double-click the path view in the
\l {Form Editor}. The editor composes the path of PathCubic path \l {2D} view. The editor composes the path of PathCubic path
objects. They are cubic Bezier curves to a given position with two control objects. They are cubic Bezier curves to a given position with two control
points. Drag and drop the control points in \uicontrol {Form Editor} to points. Drag and drop the control points in the \uicontrol {2D} view to
construct the curve. construct the curve.
In addition, PathLine and PathQuad path objects are supported indirectly. In addition, PathLine and PathQuad path objects are supported indirectly.

View File

@@ -88,7 +88,8 @@
\inlineimage icons/action-icon-binding.png \inlineimage icons/action-icon-binding.png
. To remove bindings, select \uicontrol Actions > \uicontrol Reset. . To remove bindings, select \uicontrol Actions > \uicontrol Reset.
You can set bindings also in \l {Connection View} > \uicontrol Bindings. You can set bindings also on the \uicontrol Bindings tab in the
\l Connections view.
For more information, see \l {Adding Bindings Between Properties}. For more information, see \l {Adding Bindings Between Properties}.
For more information on the JavaScript environment provided, see For more information on the JavaScript environment provided, see
@@ -121,7 +122,7 @@
(\uicontrol {Reset Anchors}) button to reset the anchors to their saved (\uicontrol {Reset Anchors}) button to reset the anchors to their saved
state. state.
You can specify the baseline anchor in \l{Text Editor}. You can specify the baseline anchor in the \l{Code} view.
For performance reasons, you can only anchor a component to its siblings For performance reasons, you can only anchor a component to its siblings
and direct parent. By default, a component is anchored to its parent when and direct parent. By default, a component is anchored to its parent when
@@ -315,7 +316,7 @@
To position several components in a \uicontrol Column, \uicontrol Row, To position several components in a \uicontrol Column, \uicontrol Row,
\uicontrol Flow, or \uicontrol Grid, select the components in \uicontrol Flow, or \uicontrol Grid, select the components in
\l {Form Editor}, and then select \uicontrol Position in the \l {2D} view, and then select \uicontrol Position in
the context menu. the context menu.
\section3 Column Positioner \section3 Column Positioner
@@ -364,7 +365,7 @@
corner of its cell with position (0, 0). corner of its cell with position (0, 0).
\QC generates the grid based on the positions of the child components in \QC generates the grid based on the positions of the child components in
\l {Form Editor}. You can modify the number of rows and columns in the the \l {2D} view. You can modify the number of rows and columns in the
\uicontrol Rows and \uicontrol Columns fields. \uicontrol Rows and \uicontrol Columns fields.
\image qtquick-positioner-grid-properties.png "Grid properties" \image qtquick-positioner-grid-properties.png "Grid properties"
@@ -429,7 +430,7 @@
do not anchor the child components within layouts. do not anchor the child components within layouts.
To arrange several components in a column, row, grid, or To arrange several components in a column, row, grid, or
\uicontrol {Stack Layout}, select the components in \l {Form Editor}, \uicontrol {Stack Layout}, select the components in the \l {2D} view,
and then select \uicontrol Layout in the context menu. and then select \uicontrol Layout in the context menu.
You can also click the \inlineimage column.png You can also click the \inlineimage column.png
@@ -439,7 +440,7 @@
layouts to the selected components. layouts to the selected components.
To make a component within a layout as wide as possible while respecting the To make a component within a layout as wide as possible while respecting the
given constraints, select the component in \uicontrol {Form Editor}, and given constraints, select the component in the \uicontrol {2D} view, and
then select \uicontrol Layout > \uicontrol {Fill Width} in the context menu. then select \uicontrol Layout > \uicontrol {Fill Width} in the context menu.
To make the component as high as possible, select \uicontrol {Fill Height}. To make the component as high as possible, select \uicontrol {Fill Height}.
@@ -485,7 +486,7 @@
To add components to a \uicontrol {Stack Layout}, select the To add components to a \uicontrol {Stack Layout}, select the
\inlineimage icons/plus.png \inlineimage icons/plus.png
button next to the component name in \l {Form Editor}. button next to the component name in the \l {2D} view.
To move between components, select the \inlineimage icons/prev.png To move between components, select the \inlineimage icons/prev.png
(\uicontrol Previous) and \inlineimage icons/next.png (\uicontrol Previous) and \inlineimage icons/next.png
(\uicontrol Next) buttons. (\uicontrol Next) buttons.

View File

@@ -34,10 +34,10 @@
by selecting \uicontrol Components > \inlineimage icons/plus.png by selecting \uicontrol Components > \inlineimage icons/plus.png
. For more information, see \l{Adding and Removing Modules}. You can then . For more information, see \l{Adding and Removing Modules}. You can then
create instances of the components by dragging-and-dropping them from create instances of the components by dragging-and-dropping them from
\uicontrol Components to \l {Form Editor}, \l {3D Editor}, or \l Navigator. \uicontrol Components to the \l {2D}, \l {3D} , or \l Navigator view.
To edit the appearance of a component instance, select it in To edit the appearance of a component instance, select it in
\uicontrol {Form Editor}, \uicontrol {3D Editor}, or \uicontrol Navigator the \uicontrol {2D}, \uicontrol{3D}, or \uicontrol Navigator view
and set its properties in the \l Properties view. and set its properties in the \l Properties view.
For more information about creating your own components, see For more information about creating your own components, see
@@ -61,7 +61,7 @@
\section1 3D Components \section1 3D Components
You can use \l{3D Editor} in the \uicontrol Design mode to edit files you You can use the \l {3D} view in the \uicontrol Design mode to edit files you
created using 3D graphics applications and stored in one of the supported 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 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 can \l{Importing 3D Assets}{import} the assets you need and work with them

View File

@@ -40,14 +40,14 @@
basic shapes, such as rectangles. In addition, \QDS comes with a set of basic shapes, such as rectangles. In addition, \QDS comes with a set of
more powerful and flexible graphical primitives, that allow creating more more powerful and flexible graphical primitives, that allow creating more
complex shapes, such as borders, triangles, arcs, and pies in complex shapes, such as borders, triangles, arcs, and pies in
\uicontrol {Form Editor}. the \uicontrol {2D} view.
\image studio-shapes.png "Shapes in Form Editor" \image studio-shapes.png "Shapes in the 2D view"
\else \else
You can use the Rectangle component to draw basic shapes in You can use the Rectangle component to draw basic shapes in
\l {Form Editor}. the \l {2D} view.
\image qml-shapes.png "Shapes in Form Editor" \image qml-shapes.png "Shapes in the 2D view"
\endif \endif
Most visual components in \uicontrol Components are based on the \l [QtQuick] Most visual components in \uicontrol Components are based on the \l [QtQuick]

View File

@@ -113,7 +113,7 @@
In the \uicontrol {Accepted buttons} field, select the mouse button that In the \uicontrol {Accepted buttons} field, select the mouse button that
the mouse area reacts to. Select \uicontrol AllButtons to have the mouse the mouse area reacts to. Select \uicontrol AllButtons to have the mouse
area react to all mouse buttons. You can add support for several buttons area react to all mouse buttons. You can add support for several buttons
in \l {Text Editor} or \uicontrol {Binding Editor} by combining the in the \l {Code} view or \uicontrol {Binding Editor} by combining the
values with the OR operator (|). For more information about the available values with the OR operator (|). For more information about the available
values, see the developer documentation for \l {MouseArea::acceptedButtons} values, see the developer documentation for \l {MouseArea::acceptedButtons}
{acceptedButtons}. {acceptedButtons}.

View File

@@ -60,7 +60,7 @@
appear to pick up speed, slow down, or bounce back at the end appear to pick up speed, slow down, or bounce back at the end
of the animation. of the animation.
\row \row
\li \l{Curve Editor}{Animation curves} attached to keyframes \li \l{Curves}{Animation curves} attached to keyframes
\li Complex 3D animations that require several keyframes so it becomes \li Complex 3D animations that require several keyframes so it becomes
necessary to visualize the value and the interpolation of a keyframe necessary to visualize the value and the interpolation of a keyframe
simultaneously. simultaneously.
@@ -94,7 +94,7 @@
While easing curves work well for most simple UI animations, more complex While easing curves work well for most simple UI animations, more complex
3D animations require several keyframes so it becomes necessary to visualize 3D animations require several keyframes so it becomes necessary to visualize
the value and the interpolation of a keyframe simultaneously. The the value and the interpolation of a keyframe simultaneously. The
\l {Curve Editor} visualizes the whole animation of a property at once and \l {Curves} view visualizes the whole animation of a property at once and
shows the effective values of a keyframe together with the interpolation shows the effective values of a keyframe together with the interpolation
between keyframes. It can also show animations of different properties between keyframes. It can also show animations of different properties
simultaneously so that you can see the animation for the x position simultaneously so that you can see the animation for the x position
@@ -116,7 +116,7 @@
the user experience of the application. the user experience of the application.
\endif \endif
\row \row
\li \l{Transition Editor}{Transitions between states} \li \l{Transitions}{Transitions between states}
\li Transitions between different states of the UI using a transition \li Transitions between different states of the UI using a transition
timeline that is based on keyframes. You can apply easing curves timeline that is based on keyframes. You can apply easing curves
to the keyframes. to the keyframes.
@@ -167,7 +167,7 @@
by using \e transitions. Transitions are animation types that interpolate by using \e transitions. Transitions are animation types that interpolate
property changes caused by state changes. property changes caused by state changes.
In \l {Transition Editor}, you can set the start frame, end frame, In \l {Transitions}, you can set the start frame, end frame,
and duration for the transition of each property. You can also set 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. the maximum duration of the whole transition.

View File

@@ -62,7 +62,7 @@
\list 1 \list 1
\li Select the component to annotate in \uicontrol Navigator or in \li Select the component to annotate in \uicontrol Navigator or in
\uicontrol {Form Editor}. the \uicontrol {2D} view.
\li In \uicontrol Properties, select \uicontrol {Add Annotation} to \li In \uicontrol Properties, select \uicontrol {Add Annotation} to
open \uicontrol {Annotation Editor}. open \uicontrol {Annotation Editor}.
\image qtquick-annotation-editor.png "Annotation Editor" \image qtquick-annotation-editor.png "Annotation Editor"

View File

@@ -42,7 +42,7 @@
\section1 Using Dummy Models \section1 Using Dummy Models
If you open a file in \l {Form Editor} that references a C++ model, you see 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 nothing in it. If the data in the model is fetched from the
internet, you have no control over it. To get reliable data, \e {dummy data} internet, you have no control over it. To get reliable data, \e {dummy data}
was introduced. was introduced.
@@ -97,7 +97,7 @@
} }
\endqml \endqml
This works nicely for applications but \uicontrol {Form Editor} displays a This works nicely for applications but the \uicontrol {2D} view displays a
zero-sized component. A parent for the opened file does not exist because zero-sized component. A parent for the opened file does not exist because
the context is missing. To get around the missing context, the idea of a the context is missing. To get around the missing context, the idea of a
\e {dummy context} is introduced. If you place a file with the same name as \e {dummy context} is introduced. If you place a file with the same name as

View File

@@ -58,7 +58,7 @@
visible to users, while others are used behind the scene. visible to users, while others are used behind the scene.
You drag-and-drop the preset components from the \uicontrol Components view You drag-and-drop the preset components from the \uicontrol Components view
to the \l {Form Editor}, \l{3D Editor}, or \l Navigator view to create to the \l {2D}, \l {3D}, or \l Navigator view to create
instances of them. You then change the instances to your liking by modifying instances of them. You then change the instances to your liking by modifying
their properties in the \l Properties view. The application code is their properties in the \l Properties view. The application code is
generated for you accordingly. For more information about the code, open generated for you accordingly. For more information about the code, open
@@ -122,8 +122,8 @@
\li \l{UI Files} \li \l{UI Files}
Some of the wizards create projects that contain UI files Some of the wizards create projects that contain UI files
(.ui.qml). You should always edit UI files in \l{Form Editor} (.ui.qml). You should always edit UI files in the \l {2D}
and \l Properties, to avoid breaking the code. and \l Properties view, to avoid breaking the code.
\endif \endif

View File

@@ -172,7 +172,7 @@
Next, to run the emulator, do one of the following: Next, to run the emulator, do one of the following:
\list \list
\li Select \uicontrol{Show Live Preview} in the \uicontrol{Form Editor} toolbar. \li Select \uicontrol{Show Live Preview} in the the \uicontrol {2D} view toolbar.
\image toolbar-show-live-preview.png \image toolbar-show-live-preview.png
\li Select \uicontrol Build > \uicontrol{QML Preview}. \li Select \uicontrol Build > \uicontrol{QML Preview}.
\note The \uicontrol Build menu option is not visible by default. To show \note The \uicontrol Build menu option is not visible by default. To show

View File

@@ -97,7 +97,7 @@
Place different parts of the UI, such as menus and pop-ups, on separate Place different parts of the UI, such as menus and pop-ups, on separate
artboards to be able to export them as components or children and to artboards to be able to export them as components or children and to
import them as code and PNG files that you can drag and drop to import them as code and PNG files that you can drag and drop to
\l {Form Editor} in \QDS Design mode while creating a UI. the \l {2D} view in \QDS Design mode while creating a UI.
\QDS offers predefined sets of UI controls that you can modify according \QDS offers predefined sets of UI controls that you can modify according
to your needs. You can export your own controls as components, Qt Quick to your needs. You can export your own controls as components, Qt Quick

View File

@@ -121,7 +121,7 @@
Place different parts of the UI, such as menus and pop-ups, on separate Place different parts of the UI, such as menus and pop-ups, on separate
artboards to be able to export them as components or children and to artboards to be able to export them as components or children and to
import them as component files and images that you can drag and drop to the import them as component files and images that you can drag and drop to the
\uicontrol {Form Editor} in \QDS Design mode while creating a UI. the \uicontrol {2D} view in \QDS Design mode while creating a UI.
If you want to use the assets on an artboard in \QDS as they are in Sketch, If you want to use the assets on an artboard in \QDS as they are in Sketch,
you can import the artboard without generating code for it. you can import the artboard without generating code for it.

View File

@@ -43,8 +43,8 @@
\li \l{UI Files} \li \l{UI Files}
Some of the wizard templates create projects that contain UI files. Some of the wizard templates create projects that contain UI files.
You should always edit UI files in \l{Form Editor} You should always edit UI files in the \l {2D}
and \l Properties, to avoid breaking the code. and \l Properties view, to avoid breaking the code.
\li \l{Managing Data Collection} \li \l{Managing Data Collection}
\if defined (qtcreator) \if defined (qtcreator)

View File

@@ -30,7 +30,7 @@
\title Designing Application Flows \title Designing Application Flows
\image studio-flow-view.png "Application flow in Form Editor" \image studio-flow-view.png "Application flow in the 2D view"
In \QDS, a \e {flow view} represents a schematic diagram. It consists of In \QDS, a \e {flow view} represents a schematic diagram. It consists of
\e {flow items} that represent the screens in the UI and \e {transition \e {flow items} that represent the screens in the UI and \e {transition
@@ -204,17 +204,17 @@
\li Add content to the flow item in one of the following ways: \li Add content to the flow item in one of the following ways:
\list \list
\li Drag-and-drop components from \uicontrol Components to a \li Drag-and-drop components from \uicontrol Components to a
flow item in \l {Form Editor} or \l Navigator. flow item in the \l {2D} view or \l Navigator.
\li Drag a screen from \uicontrol Components \li Drag a screen from \uicontrol Components
> \uicontrol {My Components} to a flow item in > \uicontrol {My Components} to a flow item in
\uicontrol {Form Editor} or \uicontrol Navigator. the \uicontrol {2D} view or \uicontrol Navigator.
\endlist \endlist
\li In \l Properties, edit the properties of each flow item. \li In \l Properties, edit the properties of each flow item.
\endlist \endlist
You can now drag the flow items from \uicontrol Components You can now drag the flow items from \uicontrol Components
> \uicontrol {My Components} to the flow view in \uicontrol {Form Editor} > \uicontrol {My Components} to the flow view in the \uicontrol {2D}
or \uicontrol Navigator. When you have all the flow items in place, you can or \uicontrol Navigator view. When you have all the flow items in place, you can
\l{Adding Action Areas and Transitions}{add action areas} to them to create \l{Adding Action Areas and Transitions}{add action areas} to them to create
transitions between them. transitions between them.
@@ -266,7 +266,7 @@
action to the \c onPressed signal of a button in your flow item to action to the \c onPressed signal of a button in your flow item to
determine what should happen when users press the button. determine what should happen when users press the button.
\image studio-flow-action-area.png "Flow Action Area in Form Editor" \image studio-flow-action-area.png "Flow Action Area in the 2D view"
\note To connect components to \l{Connecting and Releasing Signals} \note To connect components to \l{Connecting and Releasing Signals}
{signals}, you must first export the components as {signals}, you must first export the components as
@@ -292,7 +292,7 @@
To create action areas: To create action areas:
\list 1 \list 1
\li Right-click the flow item in \l {Form Editor} and select \li Right-click the flow item in the \l {2D} view and select
\uicontrol {Flow} > \uicontrol {Create Flow Action} in \uicontrol {Flow} > \uicontrol {Create Flow Action} in
the context menu. the context menu.
\li Drag the action area to the UI control that you want to connect \li Drag the action area to the UI control that you want to connect
@@ -371,7 +371,7 @@
\endlist \endlist
You can specify the following properties to change the appearance of You can specify the following properties to change the appearance of
transition lines in \uicontrol {Form Editor}: transition lines in the \uicontrol {2D} view:
\image studio-flow-transition-line-properties.png "Flow Transition Line properties" \image studio-flow-transition-line-properties.png "Flow Transition Line properties"
@@ -433,7 +433,7 @@
To add effects: To add effects:
\list 1 \list 1
\li Select a transition line in \l {Form Editor}. \li Select a transition line in the \l {2D} view.
\li In the context menu, select \uicontrol {Flow} > \li In the context menu, select \uicontrol {Flow} >
\uicontrol {Assign Flow Effects}, and then select the effect \uicontrol {Assign Flow Effects}, and then select the effect
to apply. to apply.
@@ -568,16 +568,16 @@
controls, backend, or sensor data that will be required for the production controls, backend, or sensor data that will be required for the production
version. version.
\image studio-flow-decision.png "Flow Decision in Form Editor" \image studio-flow-decision.png "Flow Decision in the 2D view"
To simulate conditions: To simulate conditions:
\list 1 \list 1
\li Drag a \uicontrol {Flow Decision} component from \li Drag a \uicontrol {Flow Decision} component from
\uicontrol Components \uicontrol {Flow View} to a \uicontrol Components \uicontrol {Flow View} to a
\l{Adding Flow Views}{flow view} in \l Navigator or \l {Form Editor}. \l{Adding Flow Views}{flow view} in the \l Navigator or \l {2D} view.
\li Select the flow item where you want the application to start in \li Select the flow item where you want the application to start in
\uicontrol Navigator or \uicontrol {Form Editor}, and then select the \uicontrol Navigator or \uicontrol {2D} view, and then select
\uicontrol {Flow} > \uicontrol {Set Flow Start} in the context menu. \uicontrol {Flow} > \uicontrol {Set Flow Start} in the context menu.
\li Create an \l{Adding Action Areas and Transitions}{action area} for \li Create an \l{Adding Action Areas and Transitions}{action area} for
the component that will trigger the condition and connect it to the the component that will trigger the condition and connect it to the
@@ -588,8 +588,8 @@
\li In the \l Properties view, \uicontrol {Dialog title} field, enter a \li In the \l Properties view, \uicontrol {Dialog title} field, enter a
title for the selection dialog that opens when the condition is title for the selection dialog that opens when the condition is
triggered. triggered.
\li Select a transition line in \uicontrol Navigator or \li Select a transition line in the \uicontrol Navigator or
\uicontrol {Form Editor} and add a descriptive text in the \uicontrol {2D} view and add a descriptive text in the
\uicontrol {Question} field in \uicontrol Properties to represent \uicontrol {Question} field in \uicontrol Properties to represent
a choice in the selection dialog. a choice in the selection dialog.
\image studio-flow-transition-properties-question.png "Flow Transition properties" \image studio-flow-transition-properties-question.png "Flow Transition properties"
@@ -622,7 +622,7 @@
\list \list
\li Select \inlineimage icons/visibility-off.png \li Select \inlineimage icons/visibility-off.png
to display the ID of the \uicontrol {Flow Decision} to display the ID of the \uicontrol {Flow Decision}
component in \l {Form Editor}. component in the \l {2D} view.
\li In the \uicontrol {Label position} field, select the corner of \li In the \uicontrol {Label position} field, select the corner of
the flow decision icon to place the label in. the flow decision icon to place the label in.
\li In the \uicontrol Size field, specify the size of the flow \li In the \uicontrol Size field, specify the size of the flow
@@ -654,8 +654,8 @@
\uicontrol {Flow Item} to create a flow item. \uicontrol {Flow Item} to create a flow item.
\li In \l States, add states to the flow item. \li In \l States, add states to the flow item.
\li Open the .ui.qml file that contains the \l{Adding Flow Views} \li Open the .ui.qml file that contains the \l{Adding Flow Views}
{flow view} in \l {Form Editor} and drag the flow item to the {flow view} in the \l {2D} view and drag the flow item to the
flow view in \l Navigator or \l {Form Editor}. flow view in the \l Navigator or \l {2D} view.
\li Drag an empty \uicontrol {Flow Item} component from \li Drag an empty \uicontrol {Flow Item} component from
\uicontrol Components > \uicontrol {Flow View} \uicontrol Components > \uicontrol {Flow View}
to the flow for each state that you added. to the flow for each state that you added.
@@ -696,8 +696,8 @@
\list 1 \list 1
\li Drag a \uicontrol {Flow Wildcard} component from \li Drag a \uicontrol {Flow Wildcard} component from
\uicontrol Components > \uicontrol {Flow View} to an \uicontrol Components > \uicontrol {Flow View} to an
\l{Adding Action Areas and Transitions}{action area} in \l Navigator \l{Adding Action Areas and Transitions}{action area} in
or \l {Form Editor}. the \l Navigator or \l {2D} view.
\li In \l Properties, select flow items to add them to the \li In \l Properties, select flow items to add them to the
positive and negative list of the action area. positive and negative list of the action area.
\endlist \endlist

View File

@@ -56,7 +56,7 @@
effects by selecting \l Properties > \uicontrol Control, and then disabling effects by selecting \l Properties > \uicontrol Control, and then disabling
the \uicontrol Hover check box. the \uicontrol Hover check box.
\image studio-dial.png "A stylable Dial component in Form Editor" \image studio-dial.png "A stylable Dial component in the 2D view"
To create stylable UI controls: To create stylable UI controls:
@@ -71,8 +71,8 @@
\li Edit component properties in the \l Properties view. \li Edit component properties in the \l Properties view.
The available properties depend on the component type. You can The available properties depend on the component type. You can
\l{Specifying Dynamic Properties}{add properties for components} in \l{Specifying Dynamic Properties}{add properties for components} on
\l {Connection View} > \uicontrol Properties. the \uicontrol Properties tab in the {Connections} view.
\endlist \endlist
For an example of using the \uicontrol Button template to create a button For an example of using the \uicontrol Button template to create a button

View File

@@ -62,10 +62,10 @@
\li \l{Creating Projects}{Create a project} in \QDS and import the \li \l{Creating Projects}{Create a project} in \QDS and import the
metadata file to it. metadata file to it.
\li Edit the imported components and create more components in \li Edit the imported components and create more components in
\l {Form Editor} and \l {3D Editor}. the \l {2D} and \l {3D} view.
\li Animate your design in \l {Transition Editor} or \l Timeline \li Animate your design in \l {Transitions} or \l Timeline
and \l {Curve Editor}. and \l {Curves}.
\li Create interactions in \l States and \l {Connection View}. \li Create interactions in \l States and \l {Connections}.
\li \l{Validating with Target Hardware}{Preview} your design in \li \l{Validating with Target Hardware}{Preview} your design in
real time, on the desktop or on a mobile or an embedded device. real time, on the desktop or on a mobile or an embedded device.
\li Optionally, export your components back into the metadata format \li Optionally, export your components back into the metadata format

View File

@@ -111,7 +111,7 @@
\section1 FAQ - Views \section1 FAQ - Views
\section2 What are the keyboard shortcuts for moving around in \uicontrol {3D Editor}? \section2 What are the keyboard shortcuts for moving around in the \uicontrol{3D} view?
\list \list
\li To pan: \key Alt + middle mouse button \li To pan: \key Alt + middle mouse button
@@ -119,7 +119,7 @@
\li To zoom: \key Alt + right mouse button \li To zoom: \key Alt + right mouse button
\endlist \endlist
For more information, see \l {3D Editor}. For more information, see the \l {3D} view.
\section1 FAQ - Integration Between \QDS and \QC \section1 FAQ - Integration Between \QDS and \QC

View File

@@ -38,7 +38,7 @@
the default configuration allows you to start wireframing, the default configuration allows you to start wireframing,
prototyping, and validating UIs with very little effort. prototyping, and validating UIs with very little effort.
You can use the \l{Text Editor} view to edit your component You can use the \l{Code} view to edit your component
files (.qml). If you use JavaScript, you can debug and profile files (.qml). If you use JavaScript, you can debug and profile
your UIs to find and fix problems in them. your UIs to find and fix problems in them.
\endtable \endtable
@@ -53,7 +53,7 @@
run on target hardware. run on target hardware.
\li \l{Coding} \li \l{Coding}
You can use the code editor in the \uicontrol {Text Editor} view or You can use the code editor in the \uicontrol {Code} view or
in the \uicontrol Edit mode to modify QML code. The code editor in the \uicontrol Edit mode to modify QML code. The code editor
understands the QML language as code, not just as plain text. This understands the QML language as code, not just as plain text. This
enables it to provide you with useful features, such as semantic enables it to provide you with useful features, such as semantic

View File

@@ -34,18 +34,18 @@
use them in your projects. use them in your projects.
To import an asset, drag-and-drop the external file containing the asset from, To import an asset, drag-and-drop the external file containing the asset from,
for example, File Explorer on Windows, to \uicontrol {Form Editor}, for example, File Explorer on Windows, to the \uicontrol {2D},
\uicontrol Navigator, or \uicontrol {Text Editor}. Alternatively, select \uicontrol Navigator, or \uicontrol {Code} view. Alternatively, select
\uicontrol Assets > \inlineimage icons/plus.png \uicontrol Assets > \inlineimage icons/plus.png
and follow the instructions in the \uicontrol {Asset Import} dialog. You can and follow the instructions in the \uicontrol {Asset Import} dialog. You can
also multiselect several external asset files to drag-and-drop them to also multiselect several external asset files to drag-and-drop them to
\QDS simultaneously. \QDS simultaneously.
The imported images will appear in \uicontrol Assets. The imported images will appear in \uicontrol Assets.
If you initiate the import by dragging the assets to \uicontrol {Form Editor}, If you initiate the import by dragging the assets to the \uicontrol {2D} view,
they are also added to your projects as image components, and you can view they are also added to your projects as image components, and you can view
them in \uicontrol {Form Editor} and \uicontrol Navigator. If you drag an them in the \uicontrol {2D} and \uicontrol Navigator view. If you drag an
external font file to \uicontrol {Form Editor}, it will be added to your external font file to the \uicontrol {2D} view, it will be added to your
project as a text component. Other imported assets, such as sound files, project as a text component. Other imported assets, such as sound files,
will only appear in \uicontrol Assets, and you can then will only appear in \uicontrol Assets, and you can then
drag-and-drop them to a suitable view. drag-and-drop them to a suitable view.
@@ -55,7 +55,7 @@
\image studio-imported-assets.png "UI imported into Qt Design Studio" \image studio-imported-assets.png "UI imported into Qt Design Studio"
\QB enables you to export assets and then import them to a \QDS project \QB enables you to export assets and then import them to a \QDS project
as images and QML files for editing in \l {Form Editor}. If you make changes as images and QML files for editing in the \l {2D} view. If you make changes
to your design in the design tool that you originally used to create it, to your design in the design tool that you originally used to create it,
you can merge the changes into existing QML files without overwriting the you can merge the changes into existing QML files without overwriting the
changes you have made in \QDS. For more information, see changes you have made in \QDS. For more information, see
@@ -115,8 +115,8 @@
The components that you specified in the design tool are displayed in The components that you specified in the design tool are displayed in
\uicontrol Components > \uicontrol {My Components} as well as in the \uicontrol Components > \uicontrol {My Components} as well as in the
\uicontrol Projects view as separate QML files. To use them, \uicontrol Projects view as separate QML files. To use them,
drag-and-drop them from \uicontrol Components to \uicontrol {Form Editor} or drag-and-drop them from \uicontrol Components to the \uicontrol {2D} or
\l Navigator. \l Navigator view.
If asset importer conflicts, warnings, and errors are displayed in the If asset importer conflicts, warnings, and errors are displayed in the
\uicontrol {Asset Import} dialog while importing, fix the issues in \uicontrol {Asset Import} dialog while importing, fix the issues in

View File

@@ -89,7 +89,7 @@
\code \code
singleton Values 1.0 Values.qml singleton Values 1.0 Values.qml
\endcode \endcode
\li Open \e Values.qml in \l{Text Editor} for editing. \li Open \e Values.qml in the \l{Code} view for editing.
\li Add the following code to the top of the file to register the \li Add the following code to the top of the file to register the
QObject-derived class that you will use to expose the global QObject-derived class that you will use to expose the global
properties as a singleton type: properties as a singleton type:
@@ -138,7 +138,7 @@
\code \code
import Data 1.0 import Data 1.0
\endcode \endcode
\li Returning to the \uicontrol {Form Editor}, locate the property that \li Returning to the \uicontrol {2D} view, locate the property that
should be bound to the simulated values. Select \inlineimage icons/action-icon.png should be bound to the simulated values. Select \inlineimage icons/action-icon.png
and \uicontrol {Set Binding} for the property and enter the and \uicontrol {Set Binding} for the property and enter the
simulated Value property. For example, you would set the following simulated Value property. For example, you would set the following

View File

@@ -146,7 +146,7 @@
you do not need to individually list all the files in the project. you do not need to individually list all the files in the project.
\li .qml file defines the functionality and appearance of a component. \li .qml file defines the functionality and appearance of a component.
\li \e Screen01.ui.qml defines a custom component that you can edit in \li \e Screen01.ui.qml defines a custom component that you can edit in
\l{Form Editor}. For more information, see \l {UI Files}. the \l {2D} view. For more information, see \l {UI Files}.
By default, this is the main file in the project, but you can By default, this is the main file in the project, but you can
change that in the .qmlproject file. While the custom component change that in the .qmlproject file. While the custom component

View File

@@ -162,14 +162,14 @@
To communicate with a specific model in Simulink, you need to create To communicate with a specific model in Simulink, you need to create
properties matching the send and receive properties in the root of the properties matching the send and receive properties in the root of the
application you are building. Select the root item in \uicontrol application you are building. Select the root item in \uicontrol
Navigator to add the properties in \l {Connection View} > Navigator to add the properties on the \uicontrol Properties tab in the
\uicontrol Properties. \l Connections view.
See \l {Specifying Dynamic Properties} for a detailed description of how See \l {Specifying Dynamic Properties} for a detailed description of how
to add a custom property. The name of the property and the data type to add a custom property. The name of the property and the data type
need to match those of the send or receive property of the Simulink model. need to match those of the send or receive property of the Simulink model.
\image studio-connection-view-properties.png "The Properties tab in Connection View" \image studio-connection-view-properties.png "The Properties tab in the Connections view"
\section2 Creating Bindings \section2 Creating Bindings

View File

@@ -137,12 +137,12 @@
is to create \l{glossary-binding}{bindings} between the values of their is to create \l{glossary-binding}{bindings} between the values of their
\l{glossary-property}{properties}. \l{glossary-property}{properties}.
\image qmldesigner-connections.png "Connection View" \image qmldesigner-connections.png "The Connections view"
Read more about connections: Read more about connections:
\list \list
\li \l{Connection View} \li \l{Connections}
\li \l{Adding Connections} \li \l{Adding Connections}
\endlist \endlist
@@ -236,7 +236,7 @@
the signal name is \c clicked, the signal handler for receiving this signal the signal name is \c clicked, the signal handler for receiving this signal
is named \c onClicked. is named \c onClicked.
\image washingmachineui-connections.png "Connection View, Connections tab" \image washingmachineui-connections.png "Connections view, Connections tab"
Further, a signal is automatically emitted when the value of a Further, a signal is automatically emitted when the value of a
\l{glossary-property}{property} changes. \l{glossary-property}{property} changes.
@@ -286,7 +286,7 @@
Read more about transitions: Read more about transitions:
\list \list
\li \l{Transition Editor} \li \l{Transitions}
\li \l{Animating Transitions Between States} \li \l{Animating Transitions Between States}
\endlist \endlist
\omit \omit

View File

@@ -37,20 +37,20 @@
\li \l{Selecting Modes} \li \l{Selecting Modes}
\li \l{Design Views} \li \l{Design Views}
\list \list
\li \l{Form Editor} \li \l{2D}
\li \l{3D Editor} \li \l{3D}
\li \l{Material Editor and Browser} \li \l{Material Editor and Browser}
\li \l{Components} \li \l{Components}
\li \l{Assets} \li \l{Assets}
\li \l{Navigator} \li \l{Navigator}
\li \l{Properties} \li \l{Properties}
\li \l{Connection View} \li \l{Connections}
\li \l{States} \li \l{States}
\li \l{Translations} \li \l{Translations}
\li \l{Transition Editor} \li \l{Transitions}
\li \l{Timeline} \li \l{Timeline}
\li \l{Curve Editor} \li \l{Curves}
\li \l{Text Editor} \li \l{Code}
\li \l{Projects} \li \l{Projects}
\li \l{File System} \li \l{File System}
\li \l{Open Documents} \li \l{Open Documents}
@@ -238,7 +238,7 @@
\li \l{Applying Refactoring Actions} \li \l{Applying Refactoring Actions}
\li \l{Configuring the Editor} \li \l{Configuring the Editor}
\list \list
\li \l{Specifying Text Editor Settings} \li \l{Specifying Code View Settings}
\endlist \endlist
\endlist \endlist
\li \l{Debugging and Profiling} \li \l{Debugging and Profiling}

View File

@@ -81,8 +81,8 @@
have \c CustomMaterial elements. have \c CustomMaterial elements.
\li If custom material uses textures, they are not imported automatically \li If custom material uses textures, they are not imported automatically
and must be manually added to the project structure. and must be manually added to the project structure.
\li Many custom materials are not rendered in \uicontrol {3D Editor} or \li Many custom materials are not rendered in the \uicontrol{3D} or
\uicontrol {Form Editor} views due to an open bug in \QDS 1.5. The \uicontrol {2D} view due to an open bug in \QDS 1.5. The
project needs to be run for them to appear. project needs to be run for them to appear.
\endlist \endlist
@@ -147,10 +147,10 @@
\image exporting-from-qt3ds/06-check-screen-size-in-qt3ds-project.png "Check screen size in Qt 3D Studio presentation" \image exporting-from-qt3ds/06-check-screen-size-in-qt3ds-project.png "Check screen size in Qt 3D Studio presentation"
\li Adjust the canvas size of your project in \QDS according to the screen \li Adjust the canvas size of your project in \QDS according to the screen
size in \Q3DS presentation by editing the \c Constants.qml file in size in \Q3DS presentation by editing the \c Constants.qml file in the
\l{Text Editor}. If you cannot see the \uicontrol {Text Editor} \l{Code} view. If you cannot see the \uicontrol {Code}
view, select \uicontrol Window > \uicontrol {Views}, and then select the view, select \uicontrol Window > \uicontrol {Views}, and then select the
\uicontrol {Text Editor} checkbox. In the \uicontrol Projects view, open \uicontrol {Code} checkbox. In the \uicontrol Projects view, open
the imports subfolder, then the subfolder named after your project, and the imports subfolder, then the subfolder named after your project, and
double-click \c Constants.qml. Edit the values for \e {readonly property double-click \c Constants.qml. Edit the values for \e {readonly property
int width} and \e {readonly property int height} to match the \uicontrol int width} and \e {readonly property int height} to match the \uicontrol
@@ -196,14 +196,14 @@
\list 1 \list 1
\li Drag \uicontrol MyOwnCluster from \uicontrol {My Quick3D Components} \li Drag \uicontrol MyOwnCluster from \uicontrol {My Quick3D Components}
in \uicontrol Components to \uicontrol {Form Editor}. in \uicontrol Components to the \uicontrol {2D} view.
\image exporting-from-qt3ds/15-drag-to-project.png "Drag MyOwnCluster to Form Editor" \image exporting-from-qt3ds/15-drag-to-project.png "Drag MyOwnCluster to the 2D view"
\li In \uicontrol Navigator, right click on myOwnCluster and select \uicontrol \li In \uicontrol Navigator, right click on myOwnCluster and select \uicontrol
{Go into Component}. {Go into Component}.
\image exporting-from-qt3ds/16-go-into-component.png "Go into component My Own Cluster" \image exporting-from-qt3ds/16-go-into-component.png "Go into component My Own Cluster"
\li Find the offending line in \uicontrol {Text Editor}. \li Find the offending line in the \uicontrol {Code} view.
\image exporting-from-qt3ds/17-offending-line.png \image exporting-from-qt3ds/17-offending-line.png
\li Comment out the offending line by placing two slashes in the beginning \li Comment out the offending line by placing two slashes in the beginning
@@ -214,8 +214,8 @@
(or remove) any offending lines you find. (or remove) any offending lines you find.
\image exporting-from-qt3ds/18-repeat-where-needed.png \image exporting-from-qt3ds/18-repeat-where-needed.png
\li You should now see some parts of the project in \uicontrol {Form Editor}. \li You should now see some parts of the project in the \uicontrol {2D} view.
\image exporting-from-qt3ds/19-see-form-editor.png "Project in Form Editor" \image exporting-from-qt3ds/19-see-form-editor.png "Project in the 2D view"
\endlist \endlist
\section2 Converting 3D Elements \section2 Converting 3D Elements
@@ -232,13 +232,13 @@
\li Go into the component subpresentation_ADAS. \li Go into the component subpresentation_ADAS.
\image exporting-from-qt3ds/22-go-into-subpresentation-adas.png "Go into component" \image exporting-from-qt3ds/22-go-into-subpresentation-adas.png "Go into component"
\li Reposition objects and/or camera in \uicontrol {3D Editor} according to \li Reposition objects and/or camera in the \uicontrol{3D} view according to
the original \Q3DS project. The desired scene may be achieved the original \Q3DS project. The desired scene may be achieved
simply by changing the z position sign from positive to negative, or simply by changing the z position sign from positive to negative, or
vice versa, in some cases. vice versa, in some cases.
See \l{3D Editor} for more information on how to edit 3D scenes. See the \l {3D} view for more information on how to edit 3D scenes.
\image exporting-from-qt3ds/23-replace-objects.png "Replace objects in 3D Editor" \image exporting-from-qt3ds/23-replace-objects.png "Replace objects in the 3D view"
\li Recreate animations in subpresentation_ADAS according to the original \li Recreate animations in subpresentation_ADAS according to the original
project. For more information on creating animations in \QDS, see project. For more information on creating animations in \QDS, see
@@ -259,7 +259,7 @@
original project have rotations, especially in a 3D layer, make sure to original project have rotations, especially in a 3D layer, make sure to
add rotations that mimic the original ones to the \QDS project. For add rotations that mimic the original ones to the \QDS project. For
example, rotation on one axis with perspective camera requires rotation example, rotation on one axis with perspective camera requires rotation
on two axes in pure 2D. You may need to use \uicontrol {Text Editor} on two axes in pure 2D. You may need to use the \uicontrol {Code} view
to achieve rotation similar to the rotation of the object in \Q3DS. to achieve rotation similar to the rotation of the object in \Q3DS.
For more information on specifying advanced transformations on For more information on specifying advanced transformations on
\uicontrol Items, see \l Transform. \uicontrol Items, see \l Transform.

View File

@@ -42,7 +42,7 @@
Add a camera by dragging-and-dropping one of the camera components from Add a camera by dragging-and-dropping one of the camera components from
\uicontrol Components > \uicontrol {Qt Quick 3D} > \uicontrol \uicontrol Components > \uicontrol {Qt Quick 3D} > \uicontrol
{Qt Quick 3D} to \l {3D Editor} or to a 3D view in \l Navigator. {Qt Quick 3D} to the \l {3D} view or to a 3D view in \l Navigator.
If the cameras are not displayed in \uicontrol {Components}, add the If the cameras are not displayed in \uicontrol {Components}, add the
\uicontrol QtQuick3D module to your project, as described in \uicontrol QtQuick3D module to your project, as described in
\l {Adding and Removing Modules}. \l {Adding and Removing Modules}.

View File

@@ -211,9 +211,10 @@
To use the above fragment shader in a custom effect or material component, To use the above fragment shader in a custom effect or material component,
you must remove the uniforms from the shader code and define them as you must remove the uniforms from the shader code and define them as
properties for the component in \l {Connection View} > \uicontrol Properties. properties for the component on the \uicontrol Properties tab in the
\l {Connections} view.
\image studio-custom-material-uniform-properties.png "Uniforms as properties in Connection View Properties tab" \image studio-custom-material-uniform-properties.png "Uniforms as properties in Connections view Properties tab"
For more information about adding properties, see For more information about adding properties, see
\l{Specifying Dynamic Properties}. \l{Specifying Dynamic Properties}.

View File

@@ -28,9 +28,9 @@
\page studio-3d-editor.html \page studio-3d-editor.html
\nextpage studio-material-editor.html \nextpage studio-material-editor.html
\title 3D Editor \title 3D
When editing a 3D scene, you view the scene in the \uicontrol {3D Editor} When editing a 3D scene, you view the scene in the \uicontrol{3D}
view. You can change the projection of the view by switching between view. You can change the projection of the view by switching between
\e {perspective camera} and \e {orthographic camera} modes. When using the \e {perspective camera} and \e {orthographic camera} modes. When using the
perspective camera mode, components that are far from the camera appear perspective camera mode, components that are far from the camera appear
@@ -47,13 +47,13 @@
components from \uicontrol Components > \inlineimage icons/plus.png components from \uicontrol Components > \inlineimage icons/plus.png
> \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D}. > \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D}.
You can use the \l{Summary of the 3D Editor Toolbar Buttons}{toolbar buttons} You can use the \l{Summary of the 3D View Toolbar Buttons}{toolbar buttons}
to \e transform 3D components and manipulate the 3D scene. Transformation to \e transform 3D components and manipulate the 3D scene. Transformation
refers to moving, rotating, or scaling of a component. The \e pivot of the refers to moving, rotating, or scaling of a component. The \e pivot of the
component is used as the origin for transformations. You can set a component is used as the origin for transformations. You can set a
\l{Managing 3D Transformations}{local pivot offset} for a component in \l{Managing 3D Transformations}{local pivot offset} for a component in
\uicontrol Properties to transform the component around a point other than \uicontrol Properties to transform the component around a point other than
its local origin. A line is drawn in \uicontrol {3D Editor} from the pivot its local origin. A line is drawn in the \uicontrol{3D} view from the pivot
point to the center of the component to provide a visual connection between point to the center of the component to provide a visual connection between
them. Especially when working with complex scenes, it may be useful to use them. Especially when working with complex scenes, it may be useful to use
the \l {Showing and Hiding Components}{showing and hiding} or the the \l {Showing and Hiding Components}{showing and hiding} or the
@@ -70,18 +70,18 @@
Additionally, you can toggle the visibility of the grid, selection boxes, Additionally, you can toggle the visibility of the grid, selection boxes,
icon gizmos, and camera frustums in the 3D scene. icon gizmos, and camera frustums in the 3D scene.
To refresh the contents of \uicontrol {3D Editor}, press \key P or To refresh the contents of the \uicontrol{3D} view, press \key P or
select the \inlineimage icons/reset.png select the \inlineimage icons/reset.png
(\uicontrol {Reset View}) button. (\uicontrol {Reset View}) button.
\image studio-3d-editor.png "3D Editor" \image studio-3d-editor.png "The 3D view"
The following video illustrates navigating in \uicontrol {3D Editor} and The following video illustrates navigating in the \uicontrol{3D} view and
using the toolbar: using the toolbar:
\youtube SsFWyUeAA_4 \youtube SsFWyUeAA_4
\section1 Controlling the 3D Editor Camera \section1 Controlling the 3D View Camera
To switch to perspective camera mode, select To switch to perspective camera mode, select
\inlineimage perspective_camera.png \inlineimage perspective_camera.png
@@ -90,7 +90,7 @@
\inlineimage orthographic_camera.png \inlineimage orthographic_camera.png
. You can also Toggle the camera mode by using the keyboard shortcut \key T. . You can also Toggle the camera mode by using the keyboard shortcut \key T.
You can navigate the scene by panning, rotating, and zooming the 3D Editor You can navigate the scene by panning, rotating, and zooming the 3D view
camera: camera:
\list \list
@@ -105,7 +105,7 @@
up or down. up or down.
\endlist \endlist
To zoom and focus the 3D Editor camera on a selected component, To zoom and focus the 3D view camera on a selected component,
select \inlineimage fit_selected.png select \inlineimage fit_selected.png
(\uicontrol {Fit Selected}) or press \key F. (\uicontrol {Fit Selected}) or press \key F.
@@ -116,10 +116,10 @@
selected, the camera is pointed at the world origin. This does not affect selected, the camera is pointed at the world origin. This does not affect
the camera zoom level. the camera zoom level.
\image studio-3d-editor-axis-helper.png "Axis helper in 3D Editor" \image studio-3d-editor-axis-helper.png "Axis helper in the 3D view"
You can use scene cameras (2) to view the \uicontrol View3D component from a You can use scene cameras (2) to view the \uicontrol View3D component from a
specific angle in \l {Form Editor} while editing scenes. Different types of specific angle in the \l {2D} view while editing scenes. Different types of
cameras are available in \uicontrol Components cameras are available in \uicontrol Components
> \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D}. For more information > \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D}. For more information
about using cameras in the scene, the available camera types, and their about using cameras in the scene, the available camera types, and their
@@ -160,7 +160,7 @@
To move, rotate, or scale components in the scene, you need to select them To move, rotate, or scale components in the scene, you need to select them
first. The selection mode buttons determine how components are selected when first. The selection mode buttons determine how components are selected when
you click them in \uicontrol {3D Editor}: you click them in the \uicontrol{3D} view:
\list \list
\li In the \inlineimage select_item.png \li In the \inlineimage select_item.png
@@ -179,14 +179,14 @@
{keyboard shortcuts} applicable to your operating system, for example, {keyboard shortcuts} applicable to your operating system, for example,
\key Ctrl+C and \key Ctrl+V on Windows to copy-paste components. \key Ctrl+C and \key Ctrl+V on Windows to copy-paste components.
\target moving components 3d editor \target moving components 3d view
\section1 Moving Components \section1 Moving Components
\image studio-3d-editor-move.png "3D Editor in move mode" \image studio-3d-editor-move.png "The 3D view in move mode"
You can move components in relation to their coordinate system, along the x, You can move components in relation to their coordinate system, along the x,
y, or z axis or on the top, bottom, left, and right clip planes of the y, or z axis or on the top, bottom, left, and right clip planes of the
\uicontrol {3D Editor} view. the \uicontrol{3D} view.
To move components, select \inlineimage move_on.png To move components, select \inlineimage move_on.png
or press \key W: or press \key W:
@@ -196,13 +196,13 @@
and drag the component along the axis. and drag the component along the axis.
\li To move components on a plane, click the plane handle and drag the \li To move components on a plane, click the plane handle and drag the
component on the plane. component on the plane.
\li To move an component freely in 3D editor, click and drag the gray \li To move an component freely in the 3D view, click and drag the gray
handle at the center of the move gizmo. handle at the center of the move gizmo.
\endlist \endlist
\section1 Rotating Components \section1 Rotating Components
\image studio-3d-editor-rotate.png "3D Editor in rotate mode" \image studio-3d-editor-rotate.png "The 3D view in rotate mode"
To rotate components, select \inlineimage rotate_on.png To rotate components, select \inlineimage rotate_on.png
or press \key E: or press \key E:
@@ -216,7 +216,7 @@
\section1 Scaling Components \section1 Scaling Components
\image studio-3d-editor-scale.png "3D Editor in scale mode" \image studio-3d-editor-scale.png "The 3D view in scale mode"
You can use the scale handles to adjust the local x, y, or z scale of a You can use the scale handles to adjust the local x, y, or z scale of a
component. You can adjust the scale across one, two, or three axes, component. You can adjust the scale across one, two, or three axes,
@@ -236,31 +236,31 @@
\section1 Aligning Views and Cameras \section1 Aligning Views and Cameras
To align a camera to the \uicontrol {3D Editor} view: To align a camera to the \uicontrol{3D} view:
\list 1 \list 1
\li Select a camera in \uicontrol {3D Editor} or \uicontrol {Navigator}. \li Select a camera in the \uicontrol{3D} or \uicontrol {Navigator} view.
\li In \uicontrol {3D Editor}, \li In the \uicontrol{3D} view,
select \inlineimage icons/align-camera-on.png select \inlineimage icons/align-camera-on.png
. .
\endlist \endlist
This moves and rotates the camera so that the camera shows the same view This moves and rotates the camera so that the camera shows the same view
as the current view in \uicontrol {3D Editor}. as the current view in the \uicontrol{3D} view.
To align the \uicontrol {3D Editor} view to a camera: To align the the \uicontrol{3D} view to a camera:
\list 1 \list 1
\li Select a camera in \uicontrol {3D Editor} or \uicontrol {Navigator}. \li Select a camera in the \uicontrol{3D} view or \uicontrol {Navigator}.
\li In \uicontrol {3D Editor}, \li In the \uicontrol{3D} view,
select \inlineimage icons/align-view-on.png select \inlineimage icons/align-view-on.png
. .
\endlist \endlist
This copies the position as well as x and y rotation values from the This copies the position as well as x and y rotation values from the
camera and applies them to \uicontrol {3D Editor}. camera and applies them to the \uicontrol{3D} view.
\section1 Toggling Visibility \section1 Toggling Visibility
To toggle the visibility of objects in \uicontrol {3D Editor}, select To toggle the visibility of objects in the \uicontrol{3D} view, select
\inlineimage icons/visibilityon.png \inlineimage icons/visibilityon.png
in the toolbar. This opens a menu with the following options: in the toolbar. This opens a menu with the following options:
@@ -278,29 +278,29 @@
\row \row
\li Always Show Camera Frustums \li Always Show Camera Frustums
\li Toggles between always showing the camera frustum and showing it \li Toggles between always showing the camera frustum and showing it
only for cameras selected in \uicontrol {3D Editor}. only for cameras selected in the \uicontrol{3D} view.
\row \row
\li Always Show Particle Emitters and Attractors \li Always Show Particle Emitters and Attractors
\li Toggle between always showing the particle emitter and attractor \li Toggle between always showing the particle emitter and attractor
visualizations and only showing them when the emitter or attractor is visualizations and only showing them when the emitter or attractor is
selected in \uicontrol {3D Editor}. selected in the \uicontrol{3D} view.
\endtable \endtable
\section1 Particle Editor \section1 Particle Editor
The particle editor tools help you preview your particle systems in The particle editor tools help you preview your particle systems in
\uicontrol {3D Editor}. You can select one particle system to preview at a the \uicontrol{3D} view. You can select one particle system to preview at a
time. time.
To preview a particle system in \uicontrol{3D Editor}: To preview a particle system in the \uicontrol{3D} view:
\list 1 \list 1
\li Select a particle system in \uicontrol Navigator or \li Select a particle system in the \uicontrol Navigator or
\uicontrol {3D Editor}. \uicontrol{3D} view.
\li In the \uicontrol {3D Editor}, select \li In the \uicontrol{3D} view, select
\inlineimage icons/particle-animation-on.png \inlineimage icons/particle-animation-on.png
to activate particle animation. Now you can see the particle animation in to activate particle animation. Now you can see the particle animation in
\uicontrol{3D Editor}. the \uicontrol{3D} view.
\endlist \endlist
You can pause the particle animation by selecting You can pause the particle animation by selecting
@@ -309,9 +309,9 @@
\inlineimage icons/particles-seek.png \inlineimage icons/particles-seek.png
to manually seek forward or backward in the particle animation. to manually seek forward or backward in the particle animation.
\section1 Summary of the 3D Editor Toolbar Buttons \section1 Summary of the 3D View Toolbar Buttons
The \uicontrol {3D Editor} toolbar contains the following buttons: The \uicontrol{3D} view toolbar contains the following buttons:
\table \table
\header \header
@@ -330,7 +330,7 @@
\inlineimage move_on.png \inlineimage move_on.png
\li Activate the Move Tool \li Activate the Move Tool
\li \key W \li \key W
\li \l{moving components 3d editor}{Moving Components} \li \l{moving components 3d view}{Moving Components}
\row \row
\li \inlineimage rotate_off.png \li \inlineimage rotate_off.png
\inlineimage rotate_on.png \inlineimage rotate_on.png
@@ -347,13 +347,13 @@
\li \inlineimage fit_selected.png \li \inlineimage fit_selected.png
\li Fit Selected Object to View \li Fit Selected Object to View
\li \key F \li \key F
\li \l{Controlling the 3D Editor Camera} \li \l{Controlling the 3D View Camera}
\row \row
\li \inlineimage perspective_camera.png \li \inlineimage perspective_camera.png
\inlineimage orthographic_camera.png \inlineimage orthographic_camera.png
\li Toggle Perspective/Orthographic Edit Camera \li Toggle Perspective/Orthographic Edit Camera
\li \key T \li \key T
\li \l{Controlling the 3D Editor Camera} \li \l{Controlling the 3D View Camera}
\row \row
\li \inlineimage global.png \li \inlineimage global.png
\inlineimage local.png \inlineimage local.png

View File

@@ -32,7 +32,7 @@
\title 3D Effects \title 3D Effects
\QDS provides a set of 3D effects, which are visible in \l {Form Editor}. \QDS provides a set of 3D effects, which are visible in the \l {2D} view.
To apply a visual effect to a scene, drag-and-drop an effect from To apply a visual effect to a scene, drag-and-drop an effect from
\uicontrol Components > \uicontrol {Qt Quick 3D} > \uicontrol Components > \uicontrol {Qt Quick 3D} >
\uicontrol {Qt Quick 3D Effects} to a \uicontrol View3D component in \uicontrol {Qt Quick 3D Effects} to a \uicontrol View3D component in

View File

@@ -37,7 +37,7 @@
To add a \uicontrol Group component To add a \uicontrol Group component
to your scene, drag-and-drop it from \uicontrol Components > to your scene, drag-and-drop it from \uicontrol Components >
\uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D} to the \l {3D Editor} \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D} to the \l {3D}
view or to \l Navigator > \uicontrol View3D > \uicontrol {Scene Environment} view or to \l Navigator > \uicontrol View3D > \uicontrol {Scene Environment}
> \uicontrol Scene. > \uicontrol Scene.

View File

@@ -56,7 +56,7 @@
\list 1 \list 1
\li Drag-and-drop an external file containing the 3D asset from, \li Drag-and-drop an external file containing the 3D asset from,
for example, File Explorer (on Windows), to \uicontrol {3D Editor}. for example, File Explorer (on Windows), to the \uicontrol{3D} view.
\li In the \uicontrol {3D Scene Options} tab, select options for \li In the \uicontrol {3D Scene Options} tab, select options for
importing the file. importing the file.
\note To see all options, select \uicontrol{Show All Options}. \note To see all options, select \uicontrol{Show All Options}.
@@ -64,7 +64,7 @@
\endlist \endlist
The 3D asset is now added to your scene, and you can see it in the The 3D asset is now added to your scene, and you can see it in the
\uicontrol {3D Editor} view and in \uicontrol Navigator. It is also \uicontrol{3D} and \uicontrol Navigator views. It is also
available in \uicontrol Components > \uicontrol {My 3D Components}. available in \uicontrol Components > \uicontrol {My 3D Components}.
Alternatively, you can initiate the import dialog from the Alternatively, you can initiate the import dialog from the
@@ -84,6 +84,6 @@
The 3D asset now appears in \uicontrol Components > The 3D asset now appears in \uicontrol Components >
\uicontrol {My 3D Components}. You can add it to the scene by \uicontrol {My 3D Components}. You can add it to the scene by
drag-and-dropping it to \uicontrol {3D Editor}. drag-and-dropping it to the \uicontrol{3D} view.
*/ */

View File

@@ -37,7 +37,7 @@
{image-based lighting}. {image-based lighting}.
To add light components to your UI, drag-and-drop them from To add light components to your UI, drag-and-drop them from
\uicontrol Components > \uicontrol {Qt Quick 3D} to \l {3D Editor} or to \uicontrol Components > \uicontrol {Qt Quick 3D} to the \l {3D} view or to
\l Navigator > \uicontrol {Scene Environment} > \uicontrol Scene. \l Navigator > \uicontrol {Scene Environment} > \uicontrol Scene.
If you cannot find the light components in \uicontrol {Components}, add the If you cannot find the light components in \uicontrol {Components}, add the
@@ -89,10 +89,10 @@
Use a \l{SceneEnvironment}{Scene Environment} component to apply image-based Use a \l{SceneEnvironment}{Scene Environment} component to apply image-based
lighting that can produce soft and subtle lighting. lighting that can produce soft and subtle lighting.
To edit light properties, select a light component in \uicontrol Navigator, To edit light properties, select a light component in the \uicontrol Navigator
or \uicontrol {3D Editor}, and then adjust its properties in the or \uicontrol{3D} view, and then adjust its properties in the
\uicontrol Properties view or by dragging the yellow light gizmo handles in \uicontrol Properties view or by dragging the yellow light gizmo handles in
\uicontrol {3D Editor}. the \uicontrol{3D} view.
To specify an overall multiplier for a light component's effects, adjust the To specify an overall multiplier for a light component's effects, adjust the
\uicontrol Brightness property. The \uicontrol Scope property specifies which \uicontrol Brightness property. The \uicontrol Scope property specifies which

View File

@@ -73,7 +73,7 @@
The \uicontrol {Source Component} property defines the component for The \uicontrol {Source Component} property defines the component for
\uicontrol Loader3D to instantiate. Currently, the \uicontrol Loader3D to instantiate. Currently, the
\uicontrol {Source component} needs to be defined in code using the \uicontrol {Source component} needs to be defined in code using the
\l {Working in Edit Mode}{Edit} mode or \l {Text Editor}. \l {Working in Edit Mode}{Edit} mode or the \l {Code} view.
\section2 Asynchronous \section2 Asynchronous
@@ -94,7 +94,7 @@
To add a Loader3D component and set it to load a QML file: To add a Loader3D component and set it to load a QML file:
\list 1 \list 1
\li From \uicontrol {Components}, drag a Loader3D component to \li From \uicontrol {Components}, drag a Loader3D component to
\e scene in \uicontrol Navigator or to \uicontrol {3D Editor}. \e scene in the \uicontrol Navigator or \uicontrol{3D} view.
\li In \uicontrol {Navigator}, select \e{loader3D}. \li In \uicontrol {Navigator}, select \e{loader3D}.
\image loader3d-navigator.png \image loader3d-navigator.png
\li In \uicontrol {Properties}, select \uicontrol{Source} and select a \li In \uicontrol {Properties}, select \uicontrol{Source} and select a
@@ -107,7 +107,7 @@
To add a Loader3D component and set it to load a Component3D component: To add a Loader3D component and set it to load a Component3D component:
\list 1 \list 1
\li From \uicontrol {Components}, drag a Loader3D Component to \li From \uicontrol {Components}, drag a Loader3D Component to
\e scene in \uicontrol Navigator or to \uicontrol {3D Editor}. \e scene in the \uicontrol Navigator or \uicontrol{3D} view.
\li From \uicontrol {Components}, drag a Component3D component to \li From \uicontrol {Components}, drag a Component3D component to
\e scene in \uicontrol {Navigator}. \e scene in \uicontrol {Navigator}.
\li In \uicontrol {Navigator}, select the filter icon and clear \li In \uicontrol {Navigator}, select the filter icon and clear

View File

@@ -35,14 +35,14 @@
The \l Components view features some built-in primitive 3D models. This allows The \l Components view features some built-in primitive 3D models. This allows
you to add cubes, cones, cylinders, and planes (rectangles) to your scene. you to add cubes, cones, cylinders, and planes (rectangles) to your scene.
\image studio-3d-models.png "Various 3D models in 3D Editor" \image studio-3d-models.png "Various 3D models in the 3D view"
A Model component loads mesh data from a file. You can modify how the A Model component loads mesh data from a file. You can modify how the
component is shaded by using materials. For more information, see component is shaded by using materials. For more information, see
\l {Materials and Shaders} and \l {Creating Custom Materials}. \l {Materials and Shaders} and \l {Creating Custom Materials}.
You can drag-and-drop a model from \uicontrol Components You can drag-and-drop a model from \uicontrol Components
> \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D} to \l {3D Editor} or > \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D} to the \l {3D} view or
to \l Navigator > \uicontrol {Scene Environment} > \uicontrol Scene. If the to \l Navigator > \uicontrol {Scene Environment} > \uicontrol Scene. If the
models are not displayed in \uicontrol {Components}, you should add the models are not displayed in \uicontrol {Components}, you should add the
\uicontrol QtQuick3D module to your project, as described in \uicontrol QtQuick3D module to your project, as described in

View File

@@ -92,6 +92,6 @@
around a point other than its local origin. Pivot values are applied before around a point other than its local origin. Pivot values are applied before
scaling and rotation values. scaling and rotation values.
A line is drawn in \uicontrol {3D Editor} from the pivot point to the center A line is drawn in the \uicontrol{3D} view from the pivot point to the center
of the component to provide a visual connection between them. of the component to provide a visual connection between them.
*/ */

View File

@@ -314,7 +314,7 @@
\list \list
\li From \uicontrol {Qt Quick 3D Particles System Templates} in \li From \uicontrol {Qt Quick 3D Particles System Templates} in
\uicontrol {Components}, drag \uicontrol Sprite to a scene component in \uicontrol {Components}, drag \uicontrol Sprite to a scene component in
\uicontrol Navigator. You can also drag it to \uicontrol {3D Editor}. \uicontrol Navigator. You can also drag it to the \uicontrol{3D} view.
\endlist \endlist
\image studio-3d-particles-sprite-template.png \image studio-3d-particles-sprite-template.png
@@ -737,7 +737,7 @@
rotated based on the emitter node properties. When the shape \uicontrol Fill rotated based on the emitter node properties. When the shape \uicontrol Fill
property is set to false, particles are emitted only from the surface of the property is set to false, particles are emitted only from the surface of the
shape. When the shape is defined, it is visualized in shape. When the shape is defined, it is visualized in
\uicontrol {3D Editor}. When the shape is not defined, particles are emitted the \uicontrol{3D} view. When the shape is not defined, particles are emitted
from the center point of the emitter. from the center point of the emitter.
In \uicontrol {Life span}, specify the lifespan of a single particle In \uicontrol {Life span}, specify the lifespan of a single particle
@@ -892,7 +892,7 @@
In \uicontrol Shape, select an instance of the \l {Particle Shape} or In \uicontrol Shape, select an instance of the \l {Particle Shape} or
\l {Model Shape} component to attract particles into a random position \l {Model Shape} component to attract particles into a random position
inside the shape. When the shape is defined, it is visualized in inside the shape. When the shape is defined, it is visualized in
\uicontrol {3D Editor}. the \uicontrol{3D} view.
\uicontrol Duration specifies the duration in milliseconds that it takes \uicontrol Duration specifies the duration in milliseconds that it takes
for particles to reach the attraction position. When the value is -1, for particles to reach the attraction position. When the value is -1,

View File

@@ -63,7 +63,7 @@
The \uicontrol Model property specifies the model providing data for the The \uicontrol Model property specifies the model providing data for the
repeater. You can only use the \uicontrol Model property in the repeater. You can only use the \uicontrol Model property in the
\uicontrol Properties view to set a numeric model or to bind to QML based \uicontrol Properties view to set a numeric model or to bind to QML based
models. You can use \l {Text Editor} to define any of the supported models. You can use the \l {Code} view to define any of the supported
data models as the value of the \uicontrol Model property: data models as the value of the \uicontrol Model property:
\list \list
\li A number that indicates the number of delegates to be created by \li A number that indicates the number of delegates to be created by
@@ -81,7 +81,7 @@
The \uicontrol Delegate property specifies a template defining each object The \uicontrol Delegate property specifies a template defining each object
instantiated by the repeater. Currently, the \uicontrol Delegate property instantiated by the repeater. Currently, the \uicontrol Delegate property
needs to be defined in code using the \uicontrol Edit mode or needs to be defined in code using the \uicontrol Edit mode or
\uicontrol {Text Editor}. Delegates are exposed to a read-only index the \uicontrol {Code} view. Delegates are exposed to a read-only index
property that indicates the index of the delegate within the repeater. For property that indicates the index of the delegate within the repeater. For
more information, see \l{https://doc.qt.io/qt/qml-qtquick3d-repeater3d.html#delegate-prop} more information, see \l{https://doc.qt.io/qt/qml-qtquick3d-repeater3d.html#delegate-prop}
{Delegate} in the \uicontrol {Qt Quick 3D} documentation. {Delegate} in the \uicontrol {Qt Quick 3D} documentation.
@@ -119,7 +119,7 @@
\li In the binding editor, enter \c{index * 150}. This sets the X \li In the binding editor, enter \c{index * 150}. This sets the X
location to increase by 150 for each of the cube instances. location to increase by 150 for each of the cube instances.
\image repeater3d-index-binding.png \image repeater3d-index-binding.png
\li Select \uicontrol OK and go to \uicontrol {3D Editor} to see the \li Select \uicontrol OK and go to the \uicontrol{3D} view to see the
result. result.
\endlist \endlist
\image repeater3d-numeric-model.webp \image repeater3d-numeric-model.webp
@@ -135,7 +135,7 @@
\li Drag a \uicontrol Repeater3D component from \uicontrol Components to \li Drag a \uicontrol Repeater3D component from \uicontrol Components to
\e scene in \uicontrol Navigator. \e scene in \uicontrol Navigator.
\li You need to enter the QML code for the \uicontrol ListModel manually. \li You need to enter the QML code for the \uicontrol ListModel manually.
Go to \uicontrol {Text Editor} and enter the following code somewhere Go to the \uicontrol {Code} view and enter the following code somewhere
inside the root object: inside the root object:
\code qml \code qml
ListModel { ListModel {
@@ -183,7 +183,7 @@
anchors.fill: parent anchors.fill: parent
... ...
\endcode \endcode
\li In \uicontrol {Text Editor}, add \c {model: planetModel} to the \li In the \uicontrol {Code} view, add \c {model: planetModel} to the
\uicontrol Repeater3D object to tell that you want to use your \uicontrol Repeater3D object to tell that you want to use your
\uicontrol ListModel as the model for the \uicontrol Repeater3D object. \uicontrol ListModel as the model for the \uicontrol Repeater3D object.
\code qml \code qml
@@ -226,7 +226,7 @@
\li In the binding editor, enter \c{index * 1000}. This sets the X \li In the binding editor, enter \c{index * 1000}. This sets the X
location to increase by 1000 for each of the sphere instances. location to increase by 1000 for each of the sphere instances.
\image repeater3d-location-binding.png \image repeater3d-location-binding.png
\li Select \uicontrol OK and go to \uicontrol {3D Editor} to see the \li Select \uicontrol OK and go to the \uicontrol{3D} view to see the
result. You need to zoom out to see all the spheres. result. You need to zoom out to see all the spheres.
\endlist \endlist

View File

@@ -125,8 +125,8 @@
To use Texture components to apply textures to materials, drag-and-drop a To use Texture components to apply textures to materials, drag-and-drop a
Texture component from \uicontrol Components > Texture component from \uicontrol Components >
\uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D} to a material component \uicontrol {Qt Quick 3D} > \uicontrol {Qt Quick 3D} to a material component
in \l Navigator. The new texture should now be visible in \l {Form Editor} in \l Navigator. The new texture should now be visible in the \l {2D}
and \l {3D Editor}. \note If the colors in your texture are not visualized and \l {3D} views. \note If the colors in your texture are not visualized
correctly, you should check the color in the \uicontrol Diffuse property of correctly, you should check the color in the \uicontrol Diffuse property of
the material and try changing it to white (#ffffff). the material and try changing it to white (#ffffff).

View File

@@ -46,29 +46,29 @@
\image studio-qtquick-3d-components.png "Qt Quick 3D components in Components" \image studio-qtquick-3d-components.png "Qt Quick 3D components in Components"
You can now drag-and-drop a \uicontrol View3D component to \l Navigator or You can now drag-and-drop a \uicontrol View3D component to the \l Navigator
to \l {Form Editor}. or \l {2D} view.
\image studio-navigator-view3d.png "A View 3D component in the Navigator" \image studio-navigator-view3d.png "A View 3D component in the Navigator"
By default, a directional light and a perspective camera are used in a 3D By default, a directional light and a perspective camera are used in a 3D
scene created by using the wizard template mentioned above. To use other scene created by using the wizard template mentioned above. To use other
light and camera types, select the component in \uicontrol {3D Editor} or light and camera types, select the component in the \uicontrol{3D} or
\uicontrol Navigator and change the type of the component in the \uicontrol \uicontrol Navigatorn view and change the type of the component in the \uicontrol
Type field in \l Properties. For example, to use a point light, enter Type field in \l Properties. For example, to use a point light, enter
\e {PointLight}. \e {PointLight}.
\image studio-3d-properties-type.png "Type field in Properties view" \image studio-3d-properties-type.png "Type field in Properties view"
Similarly to other components, you can select a 3D view in \uicontrol Similarly to other components, you can select a 3D view in \uicontrol
Navigator or \uicontrol {3D Editor} and modify its property values in the Navigator or the \uicontrol{3D} view and modify its property values in the
\uicontrol Properties view. Use the properties in the \uicontrol View3D \uicontrol Properties view. Use the properties in the \uicontrol View3D
tab to set properties specific to a 3D view component. tab to set properties specific to a 3D view component.
\image studio-qtquick-3d-view.png "View 3D component properties" \image studio-qtquick-3d-view.png "View 3D component properties"
The \uicontrol Camera property defines which camera is used to render the The \uicontrol Camera property defines which camera is used to render the
scene to \uicontrol {Form Editor}. If this property is not defined, the scene to the \uicontrol {2D} view. If this property is not defined, the
first enabled camera in the scene will be used. first enabled camera in the scene will be used.
The \uicontrol Environment property specifies the \uicontrol The \uicontrol Environment property specifies the \uicontrol
@@ -76,7 +76,7 @@
\uicontrol {Scene Environment} in the scene is set as the property value. \uicontrol {Scene Environment} in the scene is set as the property value.
The \uicontrol {Import Scene} property defines the ID of the component to The \uicontrol {Import Scene} property defines the ID of the component to
render to \uicontrol {Form Editor}. The component does not have to be a render to the \uicontrol {2D} view. The component does not have to be a
child of a 3D view component. This referenced component becomes a sibling to child of a 3D view component. This referenced component becomes a sibling to
child items of a 3D view, if there are any. You can use this property, for child items of a 3D view, if there are any. You can use this property, for
example, to create a split screen view showing your scene from multiple example, to create a split screen view showing your scene from multiple

View File

@@ -112,7 +112,7 @@
In \QC, the scene graph is represented by the tree-like view in In \QC, the scene graph is represented by the tree-like view in
\uicontrol Navigator. You can also view the hierarchy of nodes in the \uicontrol Navigator. You can also view the hierarchy of nodes in the
\l {Text Editor} view. By minimizing the size of the scene graph, \l {Code} view. By minimizing the size of the scene graph,
you can minimize the effort needed when running the scene. In terms of you can minimize the effort needed when running the scene. In terms of
optimization, you should avoid unnecessary groups and complex hierarchy when optimization, you should avoid unnecessary groups and complex hierarchy when
possible. Deep hierarchies with complex parenting increase the performance possible. Deep hierarchies with complex parenting increase the performance

View File

@@ -39,15 +39,15 @@
\l {Importing 2D Assets} and \l {Importing 3D Assets}. \l {Importing 2D Assets} and \l {Importing 3D Assets}.
To add assets to your UI, drag-and-drop them from To add assets to your UI, drag-and-drop them from
\uicontrol Assets to \l Navigator, \l {Form Editor}, or \l {3D Editor}. \uicontrol Assets to the \l Navigator, \l {2D}, or \l {3D} view.
To add multiple assets to your UI simultaneously, multiselect them first by To add multiple assets to your UI simultaneously, multiselect them first by
holding \key Ctrl and clicking the asset files you wish to select. holding \key Ctrl and clicking the asset files you wish to select.
\image qtquick-assets-tab.png "Assets view" \image qtquick-assets-tab.png "Assets view"
When you drag-and-drop assets from \uicontrol Assets to \l Navigator When you drag-and-drop assets from \uicontrol Assets to the \l Navigator
or \l {Form Editor}, component instances with a suitable type are or \l {2D} view, component instances with a suitable type are
automatically created for you. For example, instances of the automatically created for you. For example, instances of the
\l{Images}{Image} component will be created for graphics files. \l{Images}{Image} component will be created for graphics files.

View File

@@ -102,7 +102,7 @@
\image qtquick-components-tab-add.png "Select Modules to Add" \image qtquick-components-tab-add.png "Select Modules to Add"
This adds an \e {import statement} to the component code that you This adds an \e {import statement} to the component code that you
can see in \l {Text Editor}. For example, if you add the can see in the \l {Code} view. For example, if you add the
\uicontrol QtQuick.Controls module, the following import statement \uicontrol QtQuick.Controls module, the following import statement
is added to the code: \c {import QtQuick.Controls}. is added to the code: \c {import QtQuick.Controls}.

View File

@@ -52,8 +52,7 @@
To bind a property of a component to the property of another component: To bind a property of a component to the property of another component:
\list 1 \list 1
\li Select \uicontrol View > \uicontrol Views > \li Go to the \uicontrol Binding tab in the \l Connections view.
\l {Connection View} > \uicontrol {Bindings}.
\li Select the \inlineimage icons/plus.png \li Select the \inlineimage icons/plus.png
(\uicontrol Add) button to add a binding for the currently selected (\uicontrol Add) button to add a binding for the currently selected
component. The component ID is displayed in the \uicontrol Item component. The component ID is displayed in the \uicontrol Item

View File

@@ -55,16 +55,15 @@
should have an \e int or \e real property for speed to which the UI is should have an \e int or \e real property for speed to which the UI is
bound. bound.
You can add properties for components in \l {Connection View} > You can add properties for components on the \uicontrol Properties tab in
\uicontrol Properties. in the \l {Connections} view.
\image qmldesigner-dynamicprops.png "Custom properties in Connection View Custom Properties tab" \image qmldesigner-dynamicprops.png "Custom properties in the Connections view Custom Properties tab"
To add properties for a component: To add properties for a component:
\list 1 \list 1
\li Select \uicontrol View > \uicontrol Views > \li Go to the \uicontrol Properties tab in the \l Connections view.
\uicontrol {Connection View} > \uicontrol {Properties}.
\li Select the \inlineimage icons/plus.png \li Select the \inlineimage icons/plus.png
(\uicontrol Add) button to add a dynamic property for the currently (\uicontrol Add) button to add a dynamic property for the currently
selected component. The component ID is displayed in the \uicontrol Item selected component. The component ID is displayed in the \uicontrol Item
@@ -87,8 +86,8 @@
\image qmldesigner-binding-editor.png "Binding Editor" \image qmldesigner-binding-editor.png "Binding Editor"
The properties you add for a component are displayed in the \l Properties The properties you add for a component are displayed in the \l Properties
view when you select a component of that type in \l Navigator or view when you select a component of that type in the \l Navigator or
\l {Form Editor}. \l {2D} view.
\image qtquick-custom-properties.png "Custom properties in Properties view" \image qtquick-custom-properties.png "Custom properties in Properties view"

View File

@@ -68,8 +68,7 @@
To connect components to signals: To connect components to signals:
\list 1 \list 1
\li Select \uicontrol View > \uicontrol Views > \li Go to the \uicontrol Connections tab in the \l Connections view.
\l {Connection View} > \uicontrol {Connections}.
\li Select the \inlineimage icons/plus.png \li Select the \inlineimage icons/plus.png
(\uicontrol Add) button to add a connection. (\uicontrol Add) button to add a connection.
\li Double-click the value in the \uicontrol Target column to add the \li Double-click the value in the \uicontrol Target column to add the
@@ -104,7 +103,7 @@
\uicontrol {Signal Handler} column, you can add it: \uicontrol {Signal Handler} column, you can add it:
\list 1 \list 1
\li Right-click a component in the \l Navigator or \l {Form Editor} view \li Right-click a component in the \l Navigator or \l {2D} view
and select \uicontrol {Add New Signal Handler} in the context menu. and select \uicontrol {Add New Signal Handler} in the context menu.
\li In the \uicontrol Signal field, select the signal to handle. \li In the \uicontrol Signal field, select the signal to handle.
\image qmldesigner-implement-signal-handler.png "Implement Signal Handler dialog" \image qmldesigner-implement-signal-handler.png "Implement Signal Handler dialog"

View File

@@ -28,13 +28,13 @@
\previouspage qtquick-properties-view.html \previouspage qtquick-properties-view.html
\nextpage qtquick-states-view.html \nextpage qtquick-states-view.html
\title Connection View \title Connections
\uicontrol {Connection View} is a collection of views that enable you The \uicontrol {Connections} view is a collection of views that enable you
to create connections between components and the application, to bind to create connections between components and the application, to bind
component properties together, and to add custom properties for components. component properties together, and to add custom properties for components.
\image qmldesigner-connections.png "Connection View" \image qmldesigner-connections.png "The Connections view"
The \l{glossary-component}{components} of the application UI and the The \l{glossary-component}{components} of the application UI and the
application logic need to communicate with each other. For example, a application logic need to communicate with each other. For example, a
@@ -64,11 +64,11 @@
to access QObject objects implemented in C++ from QML files. to access QObject objects implemented in C++ from QML files.
\endif \endif
\section1 Summary of Connection Views \section1 Summary of the Connections View Tabs
\table \table
\header \header
\li View \li Tab
\li Purpose \li Purpose
\li Read More \li Read More
\row \row

View File

@@ -28,12 +28,12 @@
\previouspage qtquick-timeline-view.html \previouspage qtquick-timeline-view.html
\nextpage qtquick-text-editor.html \nextpage qtquick-text-editor.html
\title Curve Editor \title Curves
\uicontrol {Curve Editor} shows the interpolated values of an animated The \uicontrol {Curves} view shows the interpolated values of an animated
property over the animation range. property over the animation range.
\image studio-curve-editor.png "Curve Editor" \image studio-curve-editor.png "Curves"
When you edit an animation curve, you implicitly edit the When you edit an animation curve, you implicitly edit the
\l{Editing Easing Curves}{easing curves} that the underlying system uses \l{Editing Easing Curves}{easing curves} that the underlying system uses
@@ -45,7 +45,7 @@
or \uicontrol Spline interpolation between two keyframes. or \uicontrol Spline interpolation between two keyframes.
When you set interpolation to \uicontrol Spline, handles appear in When you set interpolation to \uicontrol Spline, handles appear in
\uicontrol {Curve Editor} that you can use to modify the curve. Select \uicontrol {Curves} that you can use to modify the curve. Select
\uicontrol Unify to lock the handle on the left of a keyframe to the one \uicontrol Unify to lock the handle on the left of a keyframe to the one
on the right of it so that moving the left handle also moves the right on the right of it so that moving the left handle also moves the right
handle. handle.
@@ -62,9 +62,9 @@
and then select \inlineimage icons/pin.png and then select \inlineimage icons/pin.png
. .
\section1 Curve Editor Toolbar \section1 Curves Toolbar
The \uicontrol {Curve Editor} toolbar contains the following buttons and The \uicontrol {Curves} toolbar contains the following buttons and
fields. fields.
\table \table
@@ -109,8 +109,8 @@
\li In the \l Timeline view, animate at least one property value by \li In the \l Timeline view, animate at least one property value by
\l{Managing Keyframes}{inserting keyframes} for it. \l{Managing Keyframes}{inserting keyframes} for it.
\li Select \uicontrol View > \uicontrol Views > \li Select \uicontrol View > \uicontrol Views >
\uicontrol {Curve Editor} to open the animation curve editor. \uicontrol {Curves} to open the animation curve editor.
\li Right-click in \uicontrol {Curve Editor}, and select \li Right-click in \uicontrol {Curves}, and select
\uicontrol {Insert Keyframe} to add a keyframe. \uicontrol {Insert Keyframe} to add a keyframe.
\li Select keyframes to display the easing curves attached to them. \li Select keyframes to display the easing curves attached to them.
To select multiple keyframes, press and hold \key Ctrl. To select multiple keyframes, press and hold \key Ctrl.
@@ -118,7 +118,7 @@
Your changes are automatically saved when you close the view. Your changes are automatically saved when you close the view.
\section1 Deleting Keyframes in Curve Editor \section1 Deleting Keyframes in Curves
To delete the selected keyframe, select \uicontrol {Delete All Keyframes} To delete the selected keyframe, select \uicontrol {Delete All Keyframes}
in the context menu. in the context menu.

View File

@@ -63,16 +63,16 @@
\li Purpose \li Purpose
\li Read More \li Read More
\row \row
\li \l{Form Editor} \li \l {2D}
\li Provides a working area for designing 2D UIs. \li Provides a working area for designing 2D UIs.
When you are editing 3D scenes, \uicontrol {Form Editor} is When you are editing 3D scenes, the \uicontrol {2D} view is
used as a canvas for the 3D scene projected by the camera. used as a canvas for the 3D scene projected by the camera.
\li \l{Form Editor} \li \l {2D}
\row \row
\li \l{3D Editor} \li \l {3D}
\li Provides an editor for files you created using 3D graphics \li Provides an editor for files you created using 3D graphics
applications and stored in one of the supported formats. applications and stored in one of the supported formats.
\li \l{3D Editor} \li \l {3D}
\row \row
\li \l Components \li \l Components
\li Contains preset components and your own components, that you can use \li Contains preset components and your own components, that you can use
@@ -94,7 +94,7 @@
\li Enables you to modify the properties of the selected component. \li Enables you to modify the properties of the selected component.
\li \l {Specifying Component Properties} \li \l {Specifying Component Properties}
\row \row
\li \l{Connection View} \li \l{Connections}
\li Enables you to add functionality to the UI by creating \li Enables you to add functionality to the UI by creating
connections between components, signals, and component properties. connections between components, signals, and component properties.
\li \l{Adding Connections} \li \l{Adding Connections}
@@ -106,7 +106,7 @@
actions. actions.
\li \l{Adding States} \li \l{Adding States}
\row \row
\li \l{Transition Editor} \li \l{Transitions}
\li Enables you to make movement between states smooth by animating \li Enables you to make movement between states smooth by animating
the changes between states. the changes between states.
\li \l{Animating Transitions Between States} \li \l{Animating Transitions Between States}
@@ -121,13 +121,13 @@
the properties of components. the properties of components.
\li \l{Creating Timeline Animations} \li \l{Creating Timeline Animations}
\row \row
\li \l{Curve Editor} \li \l{Curves}
\li Enables you to view and modify the whole animation curve by \li Enables you to view and modify the whole animation curve by
inserting keyframes to the curve and dragging them and the point inserting keyframes to the curve and dragging them and the point
handlers to modify the curve. handlers to modify the curve.
\li \l {Editing Animation Curves} \li \l {Editing Animation Curves}
\row \row
\li \l{Text Editor} \li \l{Code}
\li Provides a code editor for viewing and modifying the code \li Provides a code editor for viewing and modifying the code
generated by the visual editors. generated by the visual editors.
\li \l {Working in Edit Mode} \li \l {Working in Edit Mode}
@@ -183,7 +183,7 @@
\li Currently open file \li Currently open file
\li Displays the location and filename of the currently open file. You \li Displays the location and filename of the currently open file. You
can select another file in the list of open files to view it in can select another file in the list of open files to view it in
\uicontrol {Form Editor} and \uicontrol Navigator. the \uicontrol {2D} and \uicontrol Navigator views.
\li \li
\li \l{Open Documents} \li \l{Open Documents}
\row \row
@@ -289,8 +289,8 @@
\row \row
\li Subcomponents \li Subcomponents
\li Displays the components referred to in the current file. Select a \li Displays the components referred to in the current file. Select a
component in the list to open it in \uicontrol {Form Editor} and component in the list to open it in the \uicontrol {2D} and
\uicontrol Navigator. \uicontrol Navigator views.
\li \li
\li \l{Using Components} \li \l{Using Components}
\row \row

View File

@@ -75,7 +75,7 @@
\section1 Easing Curves in Timeline Animations \section1 Easing Curves in Timeline Animations
For timeline animations, you can also use the more advanced For timeline animations, you can also use the more advanced
\l {Curve Editor} that shows the interpolated values of an animated \l {Curves} view that shows the interpolated values of an animated
property over the \l{Creating Timeline Animations}{animation} range. property over the \l{Creating Timeline Animations}{animation} range.
The animation curves present a more readable view of the animation by The animation curves present a more readable view of the animation by
@@ -110,7 +110,7 @@
To attach easing curves to transitions: To attach easing curves to transitions:
\list 1 \list 1
\li In \l{Transition Editor}, select the \inlineimage icons/curve_editor.png \li In \l{Transitions}, select the \inlineimage icons/curve_editor.png
(\uicontrol {Easing Curve Editor}) button. (\uicontrol {Easing Curve Editor}) button.
\li Select an easing curve, as described in \l{Selecting Easing Curves}. \li Select an easing curve, as described in \l{Selecting Easing Curves}.
\endlist \endlist

View File

@@ -28,15 +28,15 @@
\previouspage creator-using-qt-quick-designer.html \previouspage creator-using-qt-quick-designer.html
\nextpage studio-3d-editor.html \nextpage studio-3d-editor.html
\title Form Editor \title 2D
You design applications in the \uicontrol {Form Editor} view by opening You design applications in the \uicontrol {2D} view by opening
component files and placing instances of \l{Component Types}{2D components} component files and placing instances of \l{Component Types}{2D components}
and \l{Assets}{assets} into them. and \l{Assets}{assets} into them.
\image qmldesigner-form-editor.png "Form Editor view" \image qmldesigner-form-editor.png "The 2D view"
When you select component instances in \uicontrol {Form Editor}, markers When you select component instances in the \uicontrol {2D} view, markers
appear around their edges and in their corners. Depending on the shape of appear around their edges and in their corners. Depending on the shape of
the cursor, you can apply the following actions to the component instances the cursor, you can apply the following actions to the component instances
by dragging them: by dragging them:
@@ -47,9 +47,9 @@
\li \l{Rotating 2D Components}{Rotate} \li \l{Rotating 2D Components}{Rotate}
\endlist \endlist
\section1 Summary of Form Editor Buttons \section1 Summary of 2D View Buttons
The \uicontrol {Form Editor} toolbar contains the following buttons and The \uicontrol {2D} view toolbar contains the following buttons and
fields. fields.
\table \table
@@ -85,7 +85,7 @@
\li \l{Previewing Component Size} \li \l{Previewing Component Size}
\row \row
\li \inlineimage icons/canvas-color.png \li \inlineimage icons/canvas-color.png
\li Sets the color of the \uicontrol {Form Editor} working area. \li Sets the color of the the \uicontrol {2D} view working area.
\li \l{Setting Canvas Color} \li \l{Setting Canvas Color}
\row \row
\li \inlineimage icons/zoomIn.png \li \inlineimage icons/zoomIn.png
@@ -109,16 +109,16 @@
\li \l{Zooming} \li \l{Zooming}
\row \row
\li \inlineimage icons/reset.png \li \inlineimage icons/reset.png
\li Refreshes the contents of \uicontrol {Form Editor}. \li Refreshes the contents of the \uicontrol {2D} view.
\li \l{Refreshing Form Editor Contents} \li \l{Refreshing 2D View Contents}
\endtable \endtable
\section1 Moving Components \section1 Moving Components
When the move cursor is displayed, you can move the selected component When the move cursor is displayed, you can move the selected component
instance to any position in \uicontrol {Form Editor}. instance to any position in the \uicontrol {2D} view.
\image qmldesigner-form-editor-move-cursor.png "Move cursor in Form Editor view" \image qmldesigner-form-editor-move-cursor.png "Move cursor in the 2D view"
For more information about alternative ways of positioning component For more information about alternative ways of positioning component
instances in UIs, see \l{Scalable Layouts}. instances in UIs, see \l{Scalable Layouts}.
@@ -128,7 +128,7 @@
When the resize cursor is displayed, you can drag the markers to resize When the resize cursor is displayed, you can drag the markers to resize
component instances. component instances.
\image qtquick-designer-scaling-items.png "Form Editor view" \image qtquick-designer-scaling-items.png "The 2D view"
To have the resizing done from the center of the selected component instance To have the resizing done from the center of the selected component instance
rather than from its edges, press \key Alt (or \key Opt on \macos). rather than from its edges, press \key Alt (or \key Opt on \macos).
@@ -162,16 +162,16 @@
\section1 Zooming \section1 Zooming
You can use the zoom buttons on the toolbar to zoom into and out of You can use the zoom buttons on the toolbar to zoom into and out of
\uicontrol {Form Editor} or select the zoom level as a percentage the \uicontrol {2D} view or select the zoom level as a percentage
from a list. More buttons are availabe for zooming to fit all content from a list. More buttons are availabe for zooming to fit all content
in the view or zooming to fit the currently selected component instances. in the view or zooming to fit the currently selected component instances.
\image qmldesigner-zooming.gif "Zooming in Form Editor" \image qmldesigner-zooming.gif "Zooming in the 2D view"
\section1 Snapping to Parent and Sibling Components \section1 Snapping to Parent and Sibling Components
You can use snapping to align component instances in You can use snapping to align component instances in
\uicontrol {Form Editor}. Select the \inlineimage icons/snapping.png the \uicontrol {2D} view. Select the \inlineimage icons/snapping.png
button to have the component instances snap to their parent or siblings. button to have the component instances snap to their parent or siblings.
Snapping lines automatically appear to help you position the component Snapping lines automatically appear to help you position the component
instances. Click the \inlineimage icons/snapping_and_anchoring.png instances. Click the \inlineimage icons/snapping_and_anchoring.png
@@ -198,7 +198,7 @@
\section1 Hiding Component Boundaries \section1 Hiding Component Boundaries
\uicontrol {Form Editor} displays the boundaries of component instances. The \uicontrol {2D} view displays the boundaries of component instances.
To hide them, select the \inlineimage icons/boundingrect.png To hide them, select the \inlineimage icons/boundingrect.png
button. button.
@@ -213,7 +213,7 @@
To experiment with different component sizes, enter values in the To experiment with different component sizes, enter values in the
\uicontrol {Override Width} and \uicontrol {Override Height} fields (1) on \uicontrol {Override Width} and \uicontrol {Override Height} fields (1) on
the toolbar. The changes are displayed in the \uicontrol {Form Editor} the toolbar. The changes are displayed in the \uicontrol {2D}
view (2) and in the \uicontrol States view (3), but the property view (2) and in the \uicontrol States view (3), but the property
values are not changed permanently in the UI file. You can permanently values are not changed permanently in the UI file. You can permanently
change the property values in the \uicontrol Properties view (4). change the property values in the \uicontrol Properties view (4).
@@ -243,17 +243,17 @@
\image qmldesigner-canvas-color.png "Transparent canvas color for a transparent component instance" \image qmldesigner-canvas-color.png "Transparent canvas color for a transparent component instance"
\section1 Refreshing Form Editor Contents \section1 Refreshing 2D View Contents
When you open a UI file, the component defined in the file and the component When you open a UI file, the component defined in the file and the component
instances it contains are drawn in \uicontrol {Form Editor}. When you instances it contains are drawn in the \uicontrol {2D} view. When you
edit component instance properties in \l Properties, the code and its edit component instance properties in \l Properties, the code and its
representation in \uicontrol {Form Editor} might get out of sync. For representation in the \uicontrol {2D} view might get out of sync. For
example, when you change the position of a component instance within a example, when you change the position of a component instance within a
column or a row, the new position might not be displayed correctly in column or a row, the new position might not be displayed correctly in
\uicontrol {Form Editor}. the \uicontrol {2D} view.
To refresh the contents of \uicontrol {Form Editor}, press \key R or To refresh the contents of the \uicontrol {2D} view, press \key R or
select the \inlineimage icons/reset.png select the \inlineimage icons/reset.png
(\uicontrol {Reset View}) button. (\uicontrol {Reset View}) button.

View File

@@ -40,11 +40,11 @@
You can select components in the \uicontrol Navigator view to edit their You can select components in the \uicontrol Navigator view to edit their
properties in the \l Properties view. Components can access the properties in the \l Properties view. Components can access the
properties of their parent component. To select components in the properties of their parent component. To select components in the
\l {Form Editor} view, right-click a component, and select another \l {2D} view, right-click a component, and select another
component in the \uicontrol Selection submenu. component in the \uicontrol Selection submenu.
Typically, child components are located within the parent component in Typically, child components are located within the parent component in
\uicontrol {Form Editor}. However, they do not necessarily have to the \uicontrol {2D} view. However, they do not necessarily have to
fit inside the parent component. For example, you might want to make a fit inside the parent component. For example, you might want to make a
mouse area larger than the rectangle or image beneath it. mouse area larger than the rectangle or image beneath it.
@@ -96,7 +96,7 @@
\li \l{Adding Property Aliases} \li \l{Adding Property Aliases}
\row \row
\li \inlineimage icons/visibilityon.png \li \inlineimage icons/visibilityon.png
\li Shows and hide components in \uicontrol {Form Editor}. \li Shows and hides components in the \uicontrol {2D} view.
\li \l{Showing and Hiding Components} \li \l{Showing and Hiding Components}
\row \row
\li \inlineimage icons/lockon.png \li \inlineimage icons/lockon.png
@@ -106,7 +106,7 @@
\section1 Showing and Hiding Components \section1 Showing and Hiding Components
To show and hide components in \uicontrol {Form Editor} when focusing on To show and hide components in the \uicontrol {2D} view when focusing on
specific parts of the application, click \inlineimage icons/visibilityon.png specific parts of the application, click \inlineimage icons/visibilityon.png
in \uicontrol Navigator. in \uicontrol Navigator.
@@ -130,7 +130,7 @@
When designing complex applications, it is easy to accidentally modify When designing complex applications, it is easy to accidentally modify
the properties of a component in one of the \QC views in ways that lead to the properties of a component in one of the \QC views in ways that lead to
surprising results. For example, \uicontrol {Form Editor} can become surprising results. For example, the \uicontrol {2D} view can become
crowded and other components can get in the way when you are trying to crowded and other components can get in the way when you are trying to
select or transform a particular component, so that you end up transforming select or transform a particular component, so that you end up transforming
more components than you wanted to. more components than you wanted to.
@@ -142,39 +142,39 @@
\image qtquick-designer-navigator-lock.gif "Locking components in Navigator" \image qtquick-designer-navigator-lock.gif "Locking components in Navigator"
You cannot select locked components in \uicontrol {Form Editor} or You cannot select locked components in the \uicontrol {2D} view or
\l {3D Editor} nor access their properties in the \l {3D} view nor access their properties in
\uicontrol Properties. \uicontrol Properties.
If you attempt to \l{Adding States}{remove a state} that changes the If you attempt to \l{Adding States}{remove a state} that changes the
properties of a locked component, you are prompted to confirm the removal. properties of a locked component, you are prompted to confirm the removal.
If you have \l{Editing Animation Curves}{added easing curves} to keyframe If you have \l{Editing Animation Curves}{added easing curves} to keyframe
animations, you can lock and unlock them in the \l {Curve Editor} animations, you can lock and unlock them in the \l {Curves}
view. If you lock the components that contain the easing curves, the lock view. If you lock the components that contain the easing curves, the lock
status is synchronized between \uicontrol Navigator and status is synchronized between \uicontrol Navigator and
\uicontrol {Curve Editor}. \uicontrol {Curves}.
\section1 Arranging Components \section1 Arranging Components
You can view the order of components in a component file in \uicontrol Navigator You can view the order of components in a component file in \uicontrol Navigator
and \l {Text Editor}. The order of components in the file also and the \l {Code} view. The order of components in the file also
determines the order in which they are drawn in \uicontrol {Form Editor}. determines the order in which they are drawn in the \uicontrol {2D} view.
By default, components that are located at the top of the file are listed at By default, components that are located at the top of the file are listed at
the bottom of the \uicontrol Navigator tree and behind overlapping the bottom of the \uicontrol Navigator tree and behind overlapping
components in \uicontrol {Form Editor}. To list the components in the order components in the \uicontrol {2D} view. To list the components in the order
in which they appear in the file, as some other tools do, click in which they appear in the file, as some other tools do, click
\inlineimage icons/filtericon.png \inlineimage icons/filtericon.png
(\uicontrol {Filter Tree}), and select \uicontrol {Reverse Component Order}. (\uicontrol {Filter Tree}), and select \uicontrol {Reverse Component Order}.
To move a component to the top or bottom of the tree within its parent, To move a component to the top or bottom of the tree within its parent,
right-click it in \uicontrol Navigator or \uicontrol {Form Editor} right-click it in the \uicontrol Navigator or \uicontrol {2D} view
and select \uicontrol Arrange > \uicontrol {Bring to Front} or and select \uicontrol Arrange > \uicontrol {Bring to Front} or
\uicontrol {Send to Back}. To move a component up or down, select \uicontrol {Send to Back}. To move a component up or down, select
\uicontrol {Bring Forward} or \uicontrol {Send Backward}. \uicontrol {Bring Forward} or \uicontrol {Send Backward}.
To reverse the order of the selected components in \uicontrol Navigator and To reverse the order of the selected components in the \uicontrol Navigator and
\uicontrol {Text Editor}, select \uicontrol Arrange > \uicontrol Reverse. \uicontrol {Code} views, select \uicontrol Arrange > \uicontrol Reverse.
\image qtquick-designer-navigator-arrange.gif "Reversing component order" \image qtquick-designer-navigator-arrange.gif "Reversing component order"
@@ -184,7 +184,7 @@
\image qmldesigner-navigator-arrows.png "Navigator buttons" \image qmldesigner-navigator-arrows.png "Navigator buttons"
When you drag-and-drop instances of components to \uicontrol {Form Editor}, When you drag-and-drop instances of components to the \uicontrol {2D} view,
the new component is added as a child of the component the new component is added as a child of the component
beneath it. When you move the components, it is not possible to determine beneath it. When you move the components, it is not possible to determine
whether you want to adjust their position or attach them to a new parent component. whether you want to adjust their position or attach them to a new parent component.
@@ -196,7 +196,7 @@
\section1 Adding Property Aliases \section1 Adding Property Aliases
A \e {property alias} is a property that you can use from outside the A \e {property alias} is a property that you can use from outside the
component. When you view the code in \l {Text Editor}, a property alias component. When you view the code in the \l {Code} view, a property alias
declaration looks like an ordinary property definition, except that it declaration looks like an ordinary property definition, except that it
requires the \e alias keyword instead of a \l{Supported Property Types} requires the \e alias keyword instead of a \l{Supported Property Types}
{property type}, and the right-hand-side of the property declaration must {property type}, and the right-hand-side of the property declaration must
@@ -244,7 +244,7 @@
different views: different views:
\list \list
\li In \uicontrol {Form Editor} or \uicontrol Navigator, \li In the \uicontrol {2D} or \uicontrol Navigator view,
right-click an instance of a component and then select right-click an instance of a component and then select
\uicontrol {Go into Component} in the context menu or \uicontrol {Go into Component} in the context menu or
press \key F2. press \key F2.

View File

@@ -141,8 +141,8 @@
\section1 Multiselection \section1 Multiselection
To modify the values of common properties of multiple components To modify the values of common properties of multiple components
simultaneously, select the components in \l Navigator, \l {Form Editor} simultaneously, select the components in the \l Navigator, \l {2D}
or \uicontrol {3D Editor}: or \uicontrol{3D} view:
\list \list
\li On Windows, press and hold \key Ctrl and \key Shift, and then click \li On Windows, press and hold \key Ctrl and \key Shift, and then click

View File

@@ -97,8 +97,8 @@
In the \uicontrol Size group, you can set the width and height of a In the \uicontrol Size group, you can set the width and height of a
component. You can also use the resize cursor to \l{Resizing 2D Components} component. You can also use the resize cursor to \l{Resizing 2D Components}
{resize 2D components} in \uicontrol {Form Editor} or the scaling gizmo {resize 2D components} in the \uicontrol {2D} view or the scaling gizmo
to \l{Scaling Components}{scale 3D components} in \uicontrol {3D Editor}. to \l{Scaling Components}{scale 3D components} in the \uicontrol{3D} view.
The values in the \uicontrol X and \uicontrol Y fields change accordingly. The values in the \uicontrol X and \uicontrol Y fields change accordingly.
The component size and position can also be managed automatically The component size and position can also be managed automatically
@@ -129,16 +129,16 @@
Set the scale factor in the \uicontrol Scale field. A value of less than Set the scale factor in the \uicontrol Scale field. A value of less than
1.0 makes the component smaller, whereas a value greater than 1.0 makes 1.0 makes the component smaller, whereas a value greater than 1.0 makes
it larger. A negative value causes the component to be mirrored in it larger. A negative value causes the component to be mirrored in
\uicontrol {Form Editor}. the \uicontrol {2D} view.
In the \uicontrol Rotation field, specify the rotation of the component In the \uicontrol Rotation field, specify the rotation of the component
in degrees clockwise around the origin point. in degrees clockwise around the origin point.
Alternatively, you can move, resize, or rotate components by dragging them Alternatively, you can move, resize, or rotate components by dragging them
in \l{Form Editor}. in the \l {2D} view.
For more information about transforming 3D components, see For more information about transforming 3D components, see
\l{Managing 3D Transformations} and \l{3D Editor}. \l{Managing 3D Transformations} and \l{3D}{the 3D view}.
\section1 Visibility \section1 Visibility
@@ -475,13 +475,13 @@
{main toolbar}. {main toolbar}.
To apply the values to one or several other components, select To apply the values to one or several other components, select
them in \l Navigator or \l{Form Editor}, and then select them in the \l Navigator or \l {2D} view, and then select
\inlineimage icons/paste-formatting.png \inlineimage icons/paste-formatting.png
. .
\section1 Editing Properties Inline \section1 Editing Properties Inline
You can double-click components in \l {Form Editor} to edit their You can double-click components in the \l {2D} view to edit their
text, color, or source properties inline. Because you can specify several text, color, or source properties inline. Because you can specify several
of these properties for some components, such as \l {text-edit}{Text Edit}, of these properties for some components, such as \l {text-edit}{Text Edit},
you can also right-click components to open the inline editors from the you can also right-click components to open the inline editors from the

View File

@@ -41,7 +41,7 @@
\image qmldesigner-transitions.png "States view" \image qmldesigner-transitions.png "States view"
Click the new state to switch to it in \l {Form Editor}, and then modify the Click the new state to switch to it in the \l {2D} view, and then modify the
values of the properties of components or component instances in values of the properties of components or component instances in
\l Properties. \l Properties.
@@ -63,11 +63,11 @@
\endif \endif
To add motion to a screen, you can change the position of a component To add motion to a screen, you can change the position of a component
instance in \uicontrol {Form Editor} and then add animation to the change instance in the \uicontrol {2D} view and then add animation to the change
between the states. between the states.
The properties that you change in a state are highlighted with blue color. The properties that you change in a state are highlighted with blue color.
In \l{Text Editor}, you can see the changes recorded as changes In the \l{Code} view, you can see the changes recorded as changes
to the base state. to the base state.
\image qmldesigner-states.png "States and Properties views" \image qmldesigner-states.png "States and Properties views"

View File

@@ -32,18 +32,18 @@
\nextpage quick-uis.html \nextpage quick-uis.html
\endif \endif
\title Text Editor \title Code
In the \uicontrol {Text Editor} view, you can view and modify the code in a In the \uicontrol {Code} view, you can view and modify the code in a
\l{UI Files}{UI file} (.ui.qml) or component file (.qml) that is generated \l{UI Files}{UI file} (.ui.qml) or component file (.qml) that is generated
when you create components in \l{Form Editor} or \l{3D Editor} and specify when you create components in the \l {2D} or \l {3D} view and specify
their properties in \l Properties. their properties in \l Properties.
\image qtquick-text-editor.png "Text Editor" \image qtquick-text-editor.png "The Code view"
You can also view and modify other types of text files. You can also view and modify other types of text files.
To open the search dialog in \uicontrol {Text Editor}, go to To open the search dialog in the \uicontrol {Code} view, go to
\uicontrol Edit > \uicontrol {Find/Replace} > \uicontrol {Find/Replace}. \uicontrol Edit > \uicontrol {Find/Replace} > \uicontrol {Find/Replace}.
You can also select \key Ctrl + \key {F}. You can also select \key Ctrl + \key {F}.

View File

@@ -162,7 +162,7 @@
\list 1 \list 1
\li From \uicontrol {Components}, drag a slider to \li From \uicontrol {Components}, drag a slider to
\uicontrol {Form Editor} or \uicontrol {Navigator}. the \uicontrol {2D} or \uicontrol {Navigator} view.
\li In \uicontrol {Navigator}, select \e slider and in \li In \uicontrol {Navigator}, select \e slider and in
\uicontrol {Properties}, set: \uicontrol {Properties}, set:
\list \list

View File

@@ -28,10 +28,10 @@
\previouspage studio-translations.html \previouspage studio-translations.html
\nextpage qtquick-timeline-view.html \nextpage qtquick-timeline-view.html
\title Transition Editor \title Transitions
To make movement between states smooth, you can use To make movement between states smooth, you can use
\uicontrol {Transition Editor} to animate the changes between \uicontrol {Transitions} to animate the changes between
states. states.
First, you need to \l{Adding States}{add states} in the \l States view First, you need to \l{Adding States}{add states} in the \l States view
@@ -39,21 +39,21 @@
animated, such as colors or numbers, in the \l Properties view. For example, animated, such as colors or numbers, in the \l Properties view. For example,
you can animate the changes in the position of a component. you can animate the changes in the position of a component.
\image qtquick-transition-editor-view.png "Transition Editor view" \image qtquick-transition-editor-view.png "Transitions view"
In \uicontrol {Transition Editor}, you can set the start frame, end In \uicontrol {Transitions}, you can set the start frame, end
frame, and duration for the transition of each property. You can also frame, and duration for the transition of each property. You can also
set an \l{Editing Easing Curves}{easing curve} for each animation and set an \l{Editing Easing Curves}{easing curve} for each animation and
the maximum duration of the whole transition. the maximum duration of the whole transition.
\section1 Zooming in Transition Editor \section1 Zooming in Transitions
Use the slider on the toolbar to set the zooming level in Use the slider on the toolbar to set the zooming level in
\uicontrol {Transition Editor}. Select the \inlineimage icons/zoom_small.png \uicontrol {Transitions}. Select the \inlineimage icons/zoom_small.png
and \inlineimage icons/zoom_big.png and \inlineimage icons/zoom_big.png
buttons to zoom out of or into the view. buttons to zoom out of or into the view.
\section1 Summary of Transition Editor Toolbar Actions \section1 Summary of Transitions Toolbar Actions
\table \table
\header \header
@@ -68,7 +68,7 @@
\row \row
\li Transition ID \li Transition ID
\li Displays a list of transitions that you can open in \li Displays a list of transitions that you can open in
\uicontrol {Transition Editor}. \uicontrol {Transitions}.
\li \l{Animating Transitions Between States} \li \l{Animating Transitions Between States}
\row \row
\li \inlineimage icons/curve_editor.png \li \inlineimage icons/curve_editor.png
@@ -78,15 +78,15 @@
\row \row
\li \inlineimage icons/zoom_small.png \li \inlineimage icons/zoom_small.png
\li \uicontrol {Zoom Out} (\key Ctrl+-): zooms out of the view. \li \uicontrol {Zoom Out} (\key Ctrl+-): zooms out of the view.
\li \l{Zooming in Transition Editor} \li \l{Zooming in Transitions}
\row \row
\li Slider \li Slider
\li Sets the zooming level. \li Sets the zooming level.
\li \l{Zooming in Transition Editor} \li \l{Zooming in Transitions}
\row \row
\li \inlineimage icons/zoom_big.png \li \inlineimage icons/zoom_big.png
\li \uicontrol {Zoom In} (\key Ctrl++): zooms into the view. \li \uicontrol {Zoom In} (\key Ctrl++): zooms into the view.
\li \l{Zooming in Transition Editor} \li \l{Zooming in Transitions}
\row \row
\li Maximum Duration \li Maximum Duration
\li Specifies the maximum duration of the transition. \li Specifies the maximum duration of the transition.
@@ -100,12 +100,12 @@
\list 1 \list 1
\li Select \uicontrol View > \uicontrol Views > \li Select \uicontrol View > \uicontrol Views >
\uicontrol {Transition Editor}. \uicontrol {Transition Editor}.
\image qmldesigner-transition-editor-startup.png "Empty Transition Editor" \image qmldesigner-transition-editor-startup.png "Empty Transitions view"
\li Select the \inlineimage icons/plus.png \li Select the \inlineimage icons/plus.png
(\uicontrol {Add Transition}) button to add a transition. This (\uicontrol {Add Transition}) button to add a transition. This
works only if you have added at least one state and modified at works only if you have added at least one state and modified at
least one property in it. least one property in it.
\image qtquick-transition-editor-view.png "Transition Editor view" \image qtquick-transition-editor-view.png "Transitions view"
\li Move the blue bar next to the component or property name to set \li Move the blue bar next to the component or property name to set
the start and end frame of the animation of the property. Pull its the start and end frame of the animation of the property. Pull its
left and right edges to set the duration of the animation. left and right edges to set the duration of the animation.
@@ -120,7 +120,7 @@
(\uicontrol {Transition Settings (S)}) button in (\uicontrol {Transition Settings (S)}) button in
\uicontrol {Transition Editor}. \uicontrol {Transition Editor}.
\image qtquick-transition-editor-settings.png "Transition settings" \image qtquick-transition-editor-settings.png "Transitions settings"
To add transitions: To add transitions:

View File

@@ -62,7 +62,7 @@
\section1 Assigning a Material to an Object \section1 Assigning a Material to an Object
To assign a material to a 3D object in your project, first select the object To assign a material to a 3D object in your project, first select the object
in \uicontrol Navigator or \uicontrol {3D Editor}. Then, do one of the in \uicontrol Navigator or the \uicontrol{3D} view. Then, do one of the
following: following:
\list \list

View File

@@ -68,7 +68,7 @@
\row \row
\li \inlineimage icons/qml-translation-test.png \li \inlineimage icons/qml-translation-test.png
\li Run translation test for the currently open document. This test \li Run translation test for the currently open document. This test
shows translation warnings in \uicontrol{From Editor} and creates a shows translation warnings in the \uicontrol{2D} view and creates a
test report. test report.
\li \l{Running Translation Test for a Single Document} \li \l{Running Translation Test for a Single Document}
\row \row
@@ -146,7 +146,7 @@
You can run the translation test to find missing translations You can run the translation test to find missing translations
and translations where the text exceeds the text element boundaries. Running and translations where the text exceeds the text element boundaries. Running
the test is a quick way to check the translations in the document you have the test is a quick way to check the translations in the document you have
open in \uicontrol{Form Editor} as it highlights errors in the UI. open in the \uicontrol {2D} view as it highlights errors in the UI.
To run the test for the currently open document: To run the test for the currently open document:
@@ -168,7 +168,7 @@
\endlist \endlist
When the test has completed, you can see the test result highlights in When the test has completed, you can see the test result highlights in
\uicontrol{Form Editor}. the \uicontrol {2D} view.
\image qml-translation-test-result.png \image qml-translation-test-result.png
If the test finds an error, it is highlighted for all languages. For If the test finds an error, it is highlighted for all languages. For