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

Doc: Remove app flow docs

Browse Source 
Task-number: QDS-13232
Change-Id: I452b418fc4b59fab28f6d2284776ad8274d5ad96
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Johanna Vanhatapio
2024-10-09 12:35:50 +03:00
parent 6ccb8d919e
commit cf27c5d71b
11 changed files with 16 additions and 779 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
doc/qtdesignstudio/config/style/qt5-sidebar.html
View File

@@ -81,13 +81,6 @@
</ul> </ul>
</li> </li>
</ul> </ul>
<ul>
<li><a>Application Flows</a>
<ul>
<li><a href="studio-app-flows.html">Designing Application Flows</a></li>
</ul>
</li>
</ul>
<ul> <ul>
<li><a>Code</a> <li><a>Code</a>
<ul> <ul>

BIN
doc/qtdesignstudio/images/studio-feedback-popup-material.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
doc/qtdesignstudio/images/studio-feedback-popup.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.8 KiB

4
doc/qtdesignstudio/src/components/qtquick-components.qdoc
View File

@@ -1,9 +1,9 @@
// Copyright (C) 2021 The Qt Company Ltd. // Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*! /*!
\page quick-components.html \page quick-components.html
\previouspage studio-flow-external-events.html \previouspage quick-uis.html
\nextpage quick-preset-components.html \nextpage quick-preset-components.html
\title Using Components \title Using Components

39
doc/qtdesignstudio/src/overviews/qtquick-animation-overview.qdoc
View File

@@ -1,4 +1,4 @@
// Copyright (C) 2021 The Qt Company Ltd. // Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*! /*!
@@ -15,7 +15,7 @@
\list \list
\li Common motion design techniques for 2D and 3D \li Common motion design techniques for 2D and 3D
\li Screen-to-screen or state-to-state animations \li State-to-state animations
\li Data-driven UI logic animations \li Data-driven UI logic animations
\endlist \endlist
@@ -70,7 +70,7 @@
\section2 Animation Curves \section2 Animation Curves
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 {Curves} view 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
@@ -78,36 +78,11 @@
simultaneously so that you can see the animation for the x position simultaneously so that you can see the animation for the x position
and the animation for the y position side-by-side. and the animation for the y position side-by-side.
\section1 Screen-to-Screen or State-to-State Animations \section1 State-to-State Animations
The following table summarizes techniques used for navigating between To navigate between UI states, use transitions between different states of the UI
screens and UI states. using a transition timeline that is based on keyframes. You can apply easing
curves to the keyframes.
\table
\header
\li Technique
\li Use Case
\row
\li \l{Designing Application Flows}{Application flows}
\li An interactive prototype that can be clicked through to simulate
the user experience of the application.
\row
\li \l{Transitions}{Transitions between states}
\li Transitions between different states of the UI using a transition
timeline that is based on keyframes. You can apply easing curves
to the keyframes.
\endtable
\section2 Application Flows
You can design an application in the form of a \e {schematic diagram}
that shows all the significant components of the application UI and their
interconnections by means of symbols. This results in an interactive
prototype that can be clicked through to simulate the user experience of
the application. Code is created in the background and can be used
as the base of the production version of the application.
For more information, see \l{Designing Application Flows}.
\section2 Transitions Between States \section2 Transitions Between States

6
doc/qtdesignstudio/src/overviews/qtquick-motion-design.qdoc
View File

@@ -1,4 +1,4 @@
// Copyright (C) 2021 The Qt Company Ltd. // Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*! /*!
@@ -14,8 +14,8 @@
\li You can use different animation techniques for different \li You can use different animation techniques for different
purposes. \QDS supports common motion design techniques, purposes. \QDS supports common motion design techniques,
such as timeline and keyframe based animation and easing such as timeline and keyframe based animation and easing
curves, as well as screen-to-screen or state-to-state curves, as well as state-to-state application flows and
application flows and data-driven UI logic animation. data-driven UI logic animation.
\endtable \endtable
\list \list

13
doc/qtdesignstudio/src/overviews/qtquick-uis.qdoc
View File

@@ -1,10 +1,10 @@
// Copyright (C) 2021 The Qt Company Ltd. // Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*! /*!
\page quick-uis.html \page quick-uis.html
\previouspage {Examples} \previouspage {Examples}
\nextpage studio-app-flows.html \nextpage quick-components.html
\title Wireframing \title Wireframing
@@ -38,15 +38,6 @@
the developer documentation by pressing \key F1. the developer documentation by pressing \key F1.
\list \list
\li \l {Designing Application Flows}
You can design an application in the form of a \e {schematic diagram}
that shows all significant components of an application UI and their
interconnections by means of symbols. This results in an
interactive prototype that can be clicked through to simulate
the user experience of the application.
\li \l {Using Components} \li \l {Using Components}
\QDS comes with \e {preset components} that you can use in \QDS comes with \e {preset components} that you can use in

2
doc/qtdesignstudio/src/overviews/studio-user-feedback.qdoc
View File

@@ -16,7 +16,7 @@
\uicontrol Skip or \uicontrol Submit, the pop-up survey will not appear for \uicontrol Skip or \uicontrol Submit, the pop-up survey will not appear for
the same feature again. the same feature again.
\image studio-feedback-popup.png "User feedback pop-up survey for Flow Editor" \image studio-feedback-popup-material.png "User feedback pop-up survey for Material Browser"
For the pop-up survey to appear, you must enable collecting statistics, and For the pop-up survey to appear, you must enable collecting statistics, and
also allow collecting \uicontrol {4 - Detailed usage statistics} in also allow collecting \uicontrol {4 - Detailed usage statistics} in

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

@@ -1,707 +0,0 @@
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
\page studio-app-flows.html
\previouspage quick-uis.html
\nextpage studio-flow-view.html
\title Designing Application Flows
\image studio-flow-view.webp "Application flow in the 2D view"
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
lines} that connect them, thus illustrating the possible user pathways
through the UI. \e {Action areas} are clickable starting points for transition
lines. Attach effects to transition lines, such as fade or push,
to determine what users see when one flow item changes into another.
Use \e {flow decisions} to set up alternative pathways between flow items in the UI. For
example, if user input determines which flow item should open next, test the different
scenarios in the prototype with the decision dialog where you can select which flow item to
show next.
Especially on mobile and embedded platforms, the application might need to
react to external events from the platform, such as notifications or other
applications requiring the users' attention. Use \e {flow wildcards}
to determine the priority of flow items by adding them to allow and
block lists.
To design application flows:
\image studio-flow-steps.png "Designing application flows"
\list 1
\li Use a project wizard template to add a \uicontrol {Flow View}
component, as described in \l{Adding Flow Views}.
\li Use a project wizard template to add a \uicontrol {Flow Item}
component for each screen in the UI, as described in
\l{Adding Flow Items}.
\li Use context menu commands to add action areas and transitions,
as described in \l{Adding Action Areas and Transitions}.
\endlist
Additionally, to create a more advanced application flow:
\list
\li Use context menu commands to apply effects to transitions,
as described in \l{Applying Effects to Transitions}.
\li Use the event list simulator to replace transition lines with connections to real
signals from UI controls, as described in \l{Simulating Events}.
\li Use \uicontrol {Flow Decision} components from \uicontrol Components > \uicontrol {Flow
View} to set up alternative pathways between flow items, as described in
\l{Simulating Conditions}.
\li Use \l{Working with States}{states} in flows to modify the appearance
of components on screens in response to user interaction, as
described in \l{Applying States in Flows}.
\li Use \uicontrol {Flow Wildcard} components from
\uicontrol Components > \uicontrol {Flow View} to prioritize events
from other applications and to stop some screens from appearing on
others, as described in \l{Reacting to External Events}.
\endlist
*/
/*!
\page studio-flow-view.html
\previouspage studio-app-flows.html
\nextpage studio-flow-item.html
\title Adding Flow Views
A flow view is the base component of the flow diagram that you can use to wireframe
the UI of your application. For more information, see \l{Designing Application Flows}.
Add a flow view to an existing project or create a new project for it, as described in
\l {Creating Projects}.
To create the flow view, select \uicontrol File >
\uicontrol {New File} >
\uicontrol {Qt Quick Files} > \uicontrol {Flow View}
and follow the instructions of the wizard.
\image studio-flow-view-create.png "Create Flow View wizard template"
If you want to add an event simulator to the flow view, select the
\uicontrol {Use Event Simulator} checkbox. In this case, select also the
\uicontrol {Use Application Import} checkbox to import the project to the flow view
as the event simulator requires it to work correctly. You need the
import also for access to the project \c Constants.qml file that contains
global settings for the project. For more information, see \l {Simulating Events}.
You can adjust the appearance of all the items in the flow: action areas,
transition lines, decisions, and wildcards. Change the global settings for all items
by editing the flow view properties. To add additional semantics to the flow diagram
design, select an individual action area or transition line and change the appearance
of just that component.
\section1 Flow View Properties
You can specify basic properties for a \uicontrol {Flow View} component
in the \l {Type}{Component}, \l {2D Geometry}{Geometry - 2D}, and
\l Visibility sections in the \l Properties view. Specify flow view
properties in the \uicontrol {Flow View} section.
\image studio-flow-view-properties.webp "Flow View component properties"
To specify the \uicontrol {Flow Item} that is currently visible in the
flow view, set its index in the \uicontrol {Current index} field.
Use the \l{Picking Colors}{color picker} to set colors for:
\list
\li Transition lines
\li Area outlines
\li Area fills
\li Block items
\endlist
You can set some additional global properties for drawing transition lines:
\image studio-flow-view-properties-transition.png "Flow View transition properties"
\list
\li In the \uicontrol {Type} field, select \uicontrol Bezier to draw
transition lines as bezier curves.
\li In the \uicontrol {Radius} field, specify the corner radius for
default curves.
\li In the \uicontrol {Bezier factor} field, specify the factor that
modifies the positions of the control points used for bezier curves.
\endlist
For more information about changing the appearance of a particular action
area or transition line, see \l{Flow Action Area Properties} and
\l{Flow Transition Properties}.
In the \uicontrol Advanced section, you can manage the more
\l{Specifying Developer Properties}{advanced properties}
of components.
*/
/*!
\page studio-flow-item.html
\previouspage studio-flow-view.html
\nextpage studio-flow-action-area.html
\title Adding Flow Items
After you create a \l{Adding Flow Views}{Flow View} component, use a project wizard
template to add a \uicontrol {Flow Item} component for each screen in the UI.
If you \l{Importing 2D Assets}{imported} your screen designs from a
design tool as individual \l{glossary-component}{components}
(\e {.ui.qml} files), you can use them as content for flow items like any other components.
The imported components are listed in \uicontrol Components
> \uicontrol {My Components}.
If you are building your UI from scratch in \QDS, add components to the flow items
first to create the screens as you would any components. For more information, see
\l {Using Components}. The flow items that you attach the components to are listed under
\uicontrol {My Components}.
\image studio-flow-item.webp "Custom Flow Item in Components"
\note You must use the wizard to create the flow items. After you create
a flow view, the \uicontrol {Flow View} module is added to
\uicontrol Components. It contains the \uicontrol {Flow Item} component for
\l{Applying States in Flows}{applying states to flow items}, and solely for that purpose.
To add flow items:
\list 1
\li Select \uicontrol File > \uicontrol {New File} >
\uicontrol {Qt Quick Files} >
\uicontrol {Flow Item} and follow the instructions of the wizard
to create flow items for each screen in the UI.
\li Add content to the flow item in one of the following ways:
\list
\li Drag components from \uicontrol Components to a
flow item in the \l {2D} view or \l Navigator.
\li Drag a screen from \uicontrol Components
> \uicontrol {My Components} to a flow item in
the \uicontrol {2D} view or \uicontrol Navigator.
\endlist
\li In \l Properties, edit the properties of each flow item.
\endlist
Now, drag the flow items from \uicontrol Components > \uicontrol {My Components} to the
flow view in the \uicontrol {2D} or \uicontrol Navigator view. When you have all the flow
items in place, \l{Adding Action Areas and Transitions}{add action areas} to them to create
transitions between them.
\section1 Flow Item Properties
You can specify basic properties for a \uicontrol {Flow Item} component
in the \l {Type}{Component}, \l {2D Geometry}{Geometry - 2D}, and
\l Visibility sections in the \uicontrol Properties view. Specify flow item
properties in the \uicontrol {Flow Item} section.
\image studio-flow-item-properties.png "Flow Item properties"
The \uicontrol {State change target} and \uicontrol {Target state}
properties are used to \l{Applying States in Flows}{apply states}
in flows.
To include another flow view as a flow item into a flow view, select the UI file (.ui.qml)
that specifies the flow view in the \uicontrol {Loader source} field.
Usually, a flow item is inactive and invisible when it is not currently
selected in the flow. Especially, all events from the flow item are ignored.
To make a flow item always active, so that another flow item within it
can respond to events and trigger the opening of a dialog, for example,
select the \uicontrol {Force active} checkbox.
In the flow view, transitions are drawn from action areas to the target flow item by default.
To draw the transitions from the edges of flow items instead, select the
\uicontrol {Join lines} checkbox in the \uicontrol {Transition Lines}
section.
In the \uicontrol Advanced section, you can manage the more
\l{Specifying Developer Properties}{advanced properties} of components.
*/
/*!
\page studio-flow-action-area.html
\previouspage studio-flow-item.html
\nextpage studio-flow-effects.html
\title Adding Action Areas and Transitions
\e {Action areas} are clickable areas that initiate transitions between flow items or
\l{Connecting and Releasing Signals}{create connections} to any signal from any component in a
\l{Adding Flow Items}{flow item}. For example, you could connect an
action to the \c onPressed signal of a button in your flow item to
determine what should happen when users press the button.
\image studio-flow-action-area.webp "Flow Action Area in the 2D view"
Select the type of the mouse or touch input to use for triggering
events, such as click, double-click, flick, pinch, or long press.
Typically, a flow item is connected to several other flow items in the
flow with two-way connections. To avoid clutter, set an action area
as \e {go back} instead of adding explicit transition lines to and from
every potentially connected flow item. When the \uicontrol {Go back} option
is enabled, the transition will always take the user back to the previous
flow item.
You can specify the appearance of each action area or transition line,
including the color, line thickness, dotted or solid lines, and even
the curve of the transition lines. You can change some of these properties
globally, as instructed in \l{Flow View Properties}.
To create action areas:
\list 1
\li Select the flow item in the \l {2D} view, then right-click it, and select
\uicontrol {Flow} > \uicontrol {Create Flow Action} in
the context menu.
\li Drag the action area to the UI control that you want to connect
to the other flow item. For example, to a button that opens another
flow item when clicked.
\li Double-click the action area and drag the transition line to the flow item you want to
connect to. Alternatively, select the action area, right-click it to open the
context-menu, and then select \uicontrol Connect and the flow item from the list.
\li In \l Properties, modify the properties of the action area
and transition line.
\endlist
To preview the flow, select the
\uicontrol {Live Preview} button on the top toolbar or press \key Alt +
\key P.
\section1 Common Properties
Specify basic properties for \uicontrol {Flow Action Area}
and \uicontrol {Flow Transition} components in the \l {Type}{Component},
\l {2D Geometry}{Geometry - 2D}, and \l Visibility sections in the
\uicontrol Properties view.
Use \l{Setting Anchors and Margins}{anchors} in the \uicontrol Layout tab to position
the component.
Manage the more \l{Specifying Developer Properties}{advanced properties} of components
in the \uicontrol Advanced section.
\section1 Flow Action Area Properties
Use the \l{Picking Colors}{color picker} in the \uicontrol {Flow Action Area} section
to set line and fill color.
\image studio-flow-action-area-properties.webp "Flow Action Area properties"
Specify additional properties for action areas in the \uicontrol {Flow Action} and
\uicontrol {Action Area} sections:
\list
\li Select the \uicontrol {Go back} checkbox to specify that the
transition will always take the user back to the previous flow item.
\li In the \uicontrol {Event IDs} field, specify the IDs of the
events to connect to, such as mouse, touch or keyboard events.
\li In the \uicontrol {Action type} field, select the type of the
mouse or touch input to use for triggering events.
\li In the \uicontrol {Line width} field, set the width of the
action area outline.
\li Select the \uicontrol {Dashed line} checkbox to draw a dashed
action area outline.
\li Select the \uicontrol Enabled checkbox to enable interaction
with the action area during preview.
\endlist
\section1 Flow Transition Properties
Specify additional properties for transitions between \l{Adding Flow Items}{flow items}
in the \uicontrol Transition section:
\image studio-flow-transition-properties.webp "Flow Transition properties"
\list
\li Select the \uicontrol Condition checkbox to activate the
transition. Select \inlineimage icons/action-icon.png
to \l{Adding Bindings Between Properties}{bind} a condition
to the transition.
\li In the \uicontrol Question field, enter the text that will appear
next to the transition line. If the transition represents the
connection to a \uicontrol {Flow Decision} component, the
text will also be visible in the selection dialog that opens when
the \l{Simulating Conditions}{condition} is triggered.
\li In the \uicontrol {Event IDs} field, specify the IDs of the
events to connect to, such as mouse, touch or keyboard events.
\li In the \uicontrol From and \uicontrol To fields, select the
flow item where the transition starts and the one where it
ends.
\endlist
Specify the following properties to change the appearance of transition lines in
the \uicontrol {2D} view:
\image studio-flow-transition-line-properties.webp "Flow Transition Line properties"
\list
\li In the \uicontrol {Line width} field, set the width of the
transition line.
\li In the \uicontrol {Offset} and \uicontrol {Break offset} fields, set
the start point (\uicontrol Out) or end point (\uicontrol In) of a
transition line or a break to the specified offset. This enables
you to move them up and down or left and right.
\li Select the \uicontrol {Dashed line} checkbox to draw a dashed line.
\li In the \uicontrol Type field, select \uicontrol Bezier to draw
transition lines as bezier curves.
\li In the \uicontrol Radius field, specify the corner radius for
default curves.
\li In the \uicontrol {Bezier factor} field, specify the factor that
modifies the positions of the control points used for a bezier
curve.
\li In the \uicontrol {Label position} field, set the position of
the value of the \uicontrol Question field in respect to the
transition start point.
\li Select the \uicontrol {Label flip side} checkbox to move the
\uicontrol Question value to the opposite side of the transition
line.
\endlist
\section1 Connecting and Releasing Signals
To connect components to \l{Connecting Components to Signals}{signals}, export the
components first as \l{Adding Property Aliases}{aliases} in \l Navigator. To create
and release connections, select \uicontrol {Open Signal Dialog} in the context menu.
The \uicontrol {Signal List} dialog displays the signals for all components.
\image studio-flow-signal-list.webp "Signal List dialog"
To connect a component to a signal, select \uicontrol Connect next to one
in the list. To release a connected signal, select \uicontrol Release.
*/
/*!
\page studio-flow-effects.html
\previouspage studio-flow-action-area.html
\nextpage studio-flow-events.html
\title Applying Effects to Transitions
You can apply effects, such as fade, move, or push, to
\l{Adding Action Areas and Transitions}{transitions} between
\l{Adding Flow Items}{flow items}. A fade effect makes the first
flow item appear to fade out, while the next flow item fades in.
A move effect makes the second flow item appear to move in over the
first flow item. The push effect makes a flow item appear to push out the previous one.
You can also use your own custom effects that you have created with some other tool.
The transition direction determines the direction the new flow item appears
from: left, right, top, bottom. You can set the duration of the effect and
\l{Editing Easing Curves}{attach an easing curve} to the effect.
To add effects:
\list 1
\li Select a transition line in the \l {2D} view.
\li Right-click the transition line to open the context menu, select \uicontrol {Flow} >
\uicontrol {Flow Effects}, and then select the effect to apply.
\li In \l Properties, modify the properties of the effect.
\endlist
To edit effect properties later, select a transition, open the context menu, and then select
\uicontrol {Flow} > \uicontrol {Select Effect}.
To use your own custom effects, select a transition, open the context menu, and then select
\uicontrol {Flow} > \uicontrol {Flow Effects} > \uicontrol {Assign Custom FlowEffect}.
Then specify the path to your custom effect file.
To remove the current effect from a transition, select a transition, open the context menu,
and then select \uicontrol {Flow} > \uicontrol {Flow Effects} >
\uicontrol {Assign FlowEffect None}.
\section1 Flow Effect Properties
Specify basic properties for a \uicontrol {Flow Effect} component in the \l Type and
\l ID fields in the \uicontrol Component section in the \uicontrol Properties view.
\image studio-flow-effect-properties.png "Flow Effect properties"
Set the duration and easing curve of flow effects in the \uicontrol {Transition Effect}
section:
\list
\li In the \uicontrol Duration field, specify the duration of the
effect.
\li Select the \inlineimage icons/curve_editor.png
button to open \uicontrol {Easing Curve Editor} to attach an
\l{Editing Easing Curves}{easing curve} to the effect.
\endlist
Set some additional properties for a move or push effect in the \uicontrol {Push Effect}
or \uicontrol {Move Effect} section:
\image studio-flow-effect-push-properties.png "Flow Push Effect properties"
\list
\li In the \uicontrol Direction field, specify the direction that
the target \uicontrol {Flow Item} appears from: left, right, top,
or bottom.
\li In the \uicontrol Scale field, set scaling for the effect.
\li In the \uicontrol {Incoming opacity} and
\uicontrol {Outgoing opacity} fields, specify the opacity of
the effect as a number between 0 and 1.
\li Select the \uicontrol Reveal checkbox to reveal the
\uicontrol {Flow Item} where the transition starts.
\endlist
*/
/*!
\page studio-flow-events.html
\previouspage studio-flow-effects.html
\nextpage studio-flow-conditions.html
\title Simulating Events
While \l{Adding Action Areas and Transitions}{transition lines}
are useful for prototyping, in production you need to use the real
\l{Connecting and Releasing Signals}{signals} from UI
\l{glossary-component}{components} to control the flow of the application.
For this purpose, you can use action areas in a more advanced way, by
having them listen to signals from flow items or the controls in them and
by connecting these to the \l{Adding Flow Views}{flow view}. You can use
keyboard shortcuts to simulate these events when you preview the UI.
When you use the wizard to create a \uicontrol {Flow View} component, select
the \uicontrol {Use event simulator} checkbox to add an event simulator to
the flow view.
You can create an event list where you assign keyboard shortcuts to events,
and then use context-menu commands to attach the events to action areas or
transition lines.
\section1 Creating Event Lists
To create an event list:
\list 1
\li Right-click in the \uicontrol 2D or \uicontrol Navigator view and select
\uicontrol {Event List} > \uicontrol {Show Event List}.
\li In the \uicontrol {Event List} dialog, select \inlineimage icons/plus.png
to add a keyboard shortcut for triggering an event to the list.
\image studio-flow-event-list.png "Event List dialog"
\li In the \uicontrol {Event ID} field, enter an identifier for the event. To search
for existing events, enter search criteria in the \uicontrol Filter field.
\li In the \uicontrol Description field, describe the keyboard shortcut.
\li In the \uicontrol Shortcut field, press the keyboard key that will
trigger the event, and then select \uicontrol R to record the
keyboard shortcut. The key identifier appears in the field.
\endlist
You can now assign the events to action areas and transitions.
\section1 Assigning Events to Actions
To assign events to actions:
\list 1
\li Select \uicontrol eventListSimulator in \uicontrol Navigator, and in
\uicontrol Properties > \uicontrol {Exposed Custom Properties}, select the
\uicontrol active checkbox. If \uicontrol eventListSimulator is not visible
in the \uicontrol Navigator, select \inlineimage icons/visibilityon.png.
\li In \uicontrol Navigator, select an action area or transition line.
\li In the context menu, select \uicontrol {Event List} >
\uicontrol {Assign Events to Actions}.
\image studio-flow-events-assign.webp "Assign Events to Actions dialog"
\li To connect an event, select \uicontrol Connect next to an event in
the list. To release a connected event, select \uicontrol Release.
\li Press \key {Alt+P} to preview the UI.
\li Select action areas in the preview, double-click events in the
event list, or use the keyboard shortcuts to trigger events.
\image studio-flow-events-event-list.webp "Event list in Live Preview"
\endlist
*/
/*!
\page studio-flow-conditions.html
\previouspage studio-flow-events.html
\nextpage studio-flow-states.html
\title Simulating Conditions
Part of any complex UI is the conditional logic it uses to present its
state to users or to collect and process data from various sources. Data
can be produced by user interaction from a variety of inputs, such as
buttons and controls, sensor readings from arrays of equipment, or general
values received from backend or service APIs.
The \uicontrol {Flow Decision} component simulates conditions by displaying a
list of options you can choose from when you preview the flow. This enables
you to prototype complex interactions before you have access to the physical
controls, backend, or sensor data that will be required for the production
version.
\image studio-flow-decision.webp "Flow Decision in the 2D view"
To simulate conditions:
\list 1
\li Drag a \uicontrol {Flow Decision} component from
\uicontrol Components > \uicontrol {Flow View} to a
\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
the \uicontrol Navigator or \uicontrol {2D} view. Then right-click the component
to open the context menu, and select \uicontrol Flow > \uicontrol {Set Flow Start}.
\li Create an \l{Adding Action Areas and Transitions}{action area} for
the component that will trigger the condition and connect it to the
flow decision.
\li Select the flow decision, and then select \uicontrol Connect in the
context menu to create connections to the flow items that will open
depending on whether the condition is met.
\li In the \l Properties view, \uicontrol {Dialog title} field, enter a
title for the selection dialog that opens when the condition is
triggered.
\li Select a transition line in the \uicontrol Navigator or
\uicontrol {2D} view, and add a descriptive text in the
\uicontrol {Question} field in \uicontrol Properties to represent
a choice in the selection dialog.
\image studio-flow-transition-properties-question.webp "Flow Transition properties"
\li Press \key {Alt+P} to preview the UI.
\li Select action areas in the preview, double-click events in the
event list, or use the keyboard shortcuts to trigger events.
\endlist
Flow decisions are listed in a dialog where you can select which condition
is met to see the results.
\image studio-flow-decision-preview.webp "Selection dialog for flow decision"
\section1 Flow Decision Properties
Specify basic properties for a \uicontrol {Flow Decision} component
in the \l Type and \l ID fields in the \uicontrol Component section in the
\uicontrol Properties view. Specify properties for flow decisions in the
\uicontrol {Flow Decision} section.
\image studio-flow-decision-properties.webp "Flow Decision properties"
In the \uicontrol {Dialog title} field, enter a title for the selection
dialog that opens when the condition is triggered.
Specify the following properties to change the appearance of the
flow decision icon \inlineimage icons/flow-decision-icon.png
:
\list
\li Select \inlineimage icons/visibility-off.png
to display the ID of the \uicontrol {Flow Decision}
component in the \l {2D} view.
\li In the \uicontrol {Label position} field, select the corner of
the flow decision icon to place the label in.
\li Use the \l{Picking Colors}{color picker} to set \uicontrol {Outline color} and
\uicontrol {Fill color} of the flow decision icon.
\li In the \uicontrol Size field, specify the size of the flow
decision icon.
\li In the \uicontrol Radius field, specify the radius of the flow
decision icon corners.
\endlist
*/
/*!
\page studio-flow-states.html
\previouspage studio-flow-conditions.html
\nextpage studio-flow-external-events.html
\title Applying States in Flows
Use \l{Working with States}{states} in flows to modify how the \l{glossary-component}
{component} properties change in flow items. For this purpose, use the \uicontrol {Flow Item}
component available in \uicontrol Components > \uicontrol {Flow View}.
To apply states in flows:
\list 1
\li Select \uicontrol File > \uicontrol {New File} >
\uicontrol {Qt Quick Files} >
\uicontrol {Flow Item} to create a flow item.
\li In the \l States view, add states to the flow item.
\li In the \l Projects view, open the .ui.qml file that contains the \l{Adding Flow Views}
{flow view}, and drag the flow item from \uicontrol Components >
\uicontrol {My Components} to the flow view in the \l Navigator or \l 2D view.
\li From \uicontrol Components > \uicontrol {Flow View}, drag an empty
\uicontrol {Flow Item} component (1) to the flow view for each state that you added.
\image studio-flow-item-component.webp "Flow Item in the Components view."
\li In the \uicontrol Navigator or \uicontrol 2D view, select an empty
\uicontrol {Flow Item} to open the \l Properties view.
\li In the \uicontrol {State change target} field, select the flow item that you created
using the wizard.
\li In the \uicontrol {Target state} field, select the state to apply to the flow item.
\image studio-flow-states-item-properties.webp "Flow Item properties"
\endlist
To apply the different states to your application flow, add
\l{Adding Action Areas and Transitions}{action areas} and
\l{Simulating Conditions}{flow decisions} to the flow items.
*/
/*!
\page studio-flow-external-events.html
\previouspage studio-flow-states.html
\nextpage quick-components.html
\title Reacting to External Events
On mobile and embedded platforms, applications are usually integrated into
the platform and therefore screens might pop-up from anywhere or at any
time, based on a conditional event. For example, push notifications
appear on mobile devices and incoming call screens on a car's HMI.
Use the \uicontrol {Flow Wildcard} component to model this type of
screens in your \l{Adding Flow Views}{flow view} using real or simulated events.
Add \l{Adding Flow Items}{flow items} to an \uicontrol {Allow
list} to prioritize them or to a \uicontrol {Block list} to stop some screens from
appearing on others. For example, you could block the incoming call screen
from appearing on a warning screen for the engine if you consider the
warning more important.
To use wildcards:
\list 1
\li Drag a \uicontrol {Flow Wildcard} component from
\uicontrol Components > \uicontrol {Flow View} to the \l {2D} view.
\li To connect the wildcard to a flow item with a \l{Adding Action Areas and Transitions}
{transition line}, double-click the wildcard and drag the transition line to the flow
item.
\li To add logic to the \uicontrol {Flow Wildcard} component, use
\l{Simulating Events}{events}, \l{Simulating Conditions}{Flow Decision} components,
or \l{Connecting and Releasing Signals}{signals}.
\li To manage the priority of your flow items, add flow items to
\uicontrol {Allow list} or \uicontrol {Block list} in \l Properties.
\image studio-flow-wildcard.webp "The wildcard component in 2D view."
\endlist
\section1 Flow Wildcard Properties
Specify basic properties for a \uicontrol {Flow Wildcard} component
in the \l Type and \l ID fields in the \uicontrol Component section in the
\uicontrol Properties view. Specify properties for flow wildcards in the
\uicontrol {Flow Wildcard} section.
\image studio-flow-wildcard-properties.webp "Flow Wildcard properties"
In the \uicontrol {Event IDs} field, specify the IDs of the events to
connect to, such as mouse, touch or keyboard events.
Select the \uicontrol {Global wildcard} checkbox to enable triggering
the wildcard from several flows.
To give flow items high priority, select them in the
\uicontrol {Allow list} field. To block flow items,
select them in the \uicontrol {Block list} field.
Specify the following properties to change the appearance of the
wildcard icon \inlineimage icons/flow-wildcard-icon.png:
\list
\li To set the outline and fill color of the wildcard icon, use the
\l{Picking Colors}{color picker}.
\li In the \uicontrol Size field, specify the size of the wildcard icon.
\li In the \uicontrol Radius field, specify the radius of the wildcard
icon corners.
\endlist
*/

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

@@ -247,11 +247,7 @@
\li Wizard Template \li Wizard Template
\li Purpose \li Purpose
\row \row
\li {1,5} Qt Quick Files \li {1,4} Qt Quick Files
\li Flow Item and Flow View
\li Generate components that you can use to design the
\l{Designing Application Flows}{application flow}.
\row
\li Qt Quick File \li Qt Quick File
\li Generates a component with one of the following default components \li Generates a component with one of the following default components
or \l{Using Positioners}{positioners} as the root component: or \l{Using Positioners}{positioners} as the root component:

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

@@ -52,17 +52,6 @@
\endlist \endlist
\li \l{Wireframing} \li \l{Wireframing}
\list \list
\li \l{Designing Application Flows}
\list
\li \l{Adding Flow Views}
\li \l{Adding Flow Items}
\li \l{Adding Action Areas and Transitions}
\li \l{Applying Effects to Transitions}
\li \l{Simulating Events}
\li \l{Simulating Conditions}
\li \l{Applying States in Flows}
\li \l{Reacting to External Events}
\endlist
\li \l {Using Components} \li \l {Using Components}
\list \list
\li \l{Preset Components} \li \l{Preset Components}