forked from qt-creator/qt-creator
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:
@@ -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 >
|
||||||
|
@@ -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}.
|
||||||
|
@@ -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
|
||||||
|
@@ -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
|
||||||
|
@@ -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.
|
||||||
|
@@ -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
|
||||||
|
|
||||||
|
@@ -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
|
||||||
|
@@ -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
|
||||||
|
|
||||||
|
@@ -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
|
||||||
|
@@ -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
|
||||||
|
@@ -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"
|
||||||
|
|
||||||
|
@@ -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}.
|
||||||
|
@@ -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
|
||||||
|
@@ -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
|
||||||
|
|
||||||
|
@@ -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:
|
||||||
|
@@ -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.
|
||||||
|
|
||||||
|
@@ -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.
|
||||||
|
@@ -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.
|
||||||
|
|
||||||
|
@@ -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
|
||||||
|
@@ -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}.
|
||||||
|
@@ -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"
|
||||||
|
@@ -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
|
||||||
|
@@ -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}.
|
||||||
|
@@ -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
|
||||||
|
@@ -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.
|
||||||
|
@@ -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.
|
||||||
|
@@ -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
|
||||||
|
@@ -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]
|
||||||
|
@@ -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}.
|
||||||
|
@@ -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.
|
||||||
|
@@ -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"
|
||||||
|
@@ -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
|
||||||
|
@@ -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
|
||||||
|
|
||||||
|
@@ -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
|
||||||
|
@@ -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
|
||||||
|
@@ -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.
|
||||||
|
@@ -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)
|
||||||
|
@@ -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
|
||||||
|
@@ -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
|
||||||
|
@@ -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
|
||||||
|
@@ -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
|
||||||
|
|
||||||
|
@@ -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
|
||||||
|
@@ -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
|
||||||
|
@@ -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
|
||||||
|
@@ -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
|
||||||
|
@@ -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
|
||||||
|
|
||||||
|
@@ -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
|
||||||
|
@@ -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}
|
||||||
|
@@ -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.
|
||||||
|
@@ -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}.
|
||||||
|
@@ -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}.
|
||||||
|
@@ -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
|
||||||
|
@@ -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
|
||||||
|
@@ -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.
|
||||||
|
|
||||||
|
@@ -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.
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
@@ -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
|
||||||
|
@@ -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
|
||||||
|
@@ -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
|
||||||
|
@@ -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.
|
||||||
*/
|
*/
|
||||||
|
@@ -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,
|
||||||
|
@@ -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
|
||||||
|
|
||||||
|
@@ -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).
|
||||||
|
|
||||||
|
@@ -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
|
||||||
|
@@ -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
|
||||||
|
@@ -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.
|
||||||
|
|
||||||
|
@@ -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}.
|
||||||
|
|
||||||
|
@@ -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
|
||||||
|
@@ -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"
|
||||||
|
|
||||||
|
@@ -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"
|
||||||
|
@@ -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
|
||||||
|
@@ -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.
|
||||||
|
@@ -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
|
||||||
|
@@ -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
|
||||||
|
@@ -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.
|
||||||
|
|
||||||
|
@@ -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.
|
||||||
|
@@ -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
|
||||||
|
@@ -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
|
||||||
|
@@ -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"
|
||||||
|
@@ -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}.
|
||||||
|
|
||||||
|
@@ -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
|
||||||
|
@@ -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:
|
||||||
|
|
||||||
|
@@ -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
|
||||||
|
@@ -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
|
||||||
|
Reference in New Issue
Block a user