diff --git a/doc/qtdesignstudio/config/style/qt5-sidebar.html b/doc/qtdesignstudio/config/style/qt5-sidebar.html
index 798cbe5a41e..6fa341ba470 100644
--- a/doc/qtdesignstudio/config/style/qt5-sidebar.html
+++ b/doc/qtdesignstudio/config/style/qt5-sidebar.html
@@ -81,13 +81,6 @@
-
- Code
diff --git a/doc/qtdesignstudio/images/studio-feedback-popup-material.png b/doc/qtdesignstudio/images/studio-feedback-popup-material.png
new file mode 100644
index 00000000000..2d935349bf1
Binary files /dev/null and b/doc/qtdesignstudio/images/studio-feedback-popup-material.png differ
diff --git a/doc/qtdesignstudio/images/studio-feedback-popup.png b/doc/qtdesignstudio/images/studio-feedback-popup.png
deleted file mode 100644
index 5a6d38bc050..00000000000
Binary files a/doc/qtdesignstudio/images/studio-feedback-popup.png and /dev/null differ
diff --git a/doc/qtdesignstudio/src/components/qtquick-components.qdoc b/doc/qtdesignstudio/src/components/qtquick-components.qdoc
index f512b8f67d4..a0ab80b2570 100644
--- a/doc/qtdesignstudio/src/components/qtquick-components.qdoc
+++ b/doc/qtdesignstudio/src/components/qtquick-components.qdoc
@@ -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
/*!
\page quick-components.html
- \previouspage studio-flow-external-events.html
+ \previouspage quick-uis.html
\nextpage quick-preset-components.html
\title Using Components
diff --git a/doc/qtdesignstudio/src/overviews/qtquick-animation-overview.qdoc b/doc/qtdesignstudio/src/overviews/qtquick-animation-overview.qdoc
index 86132b5ce1a..e6ae0295788 100644
--- a/doc/qtdesignstudio/src/overviews/qtquick-animation-overview.qdoc
+++ b/doc/qtdesignstudio/src/overviews/qtquick-animation-overview.qdoc
@@ -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
/*!
@@ -15,7 +15,7 @@
\list
\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
\endlist
@@ -70,7 +70,7 @@
\section2 Animation Curves
While easing curves work well for most simple UI animations, more complex
- 3D animations require several keyframes so it becomes necessary to visualize
+ 3D animations require several keyframes, so it becomes necessary to visualize
the value and the interpolation of a keyframe simultaneously. The
\l {Curves} view visualizes the whole animation of a property at once and
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
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
- screens and UI states.
-
- \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}.
+ To navigate between UI states, use transitions between different states of the UI
+ using a transition timeline that is based on keyframes. You can apply easing
+ curves to the keyframes.
\section2 Transitions Between States
diff --git a/doc/qtdesignstudio/src/overviews/qtquick-motion-design.qdoc b/doc/qtdesignstudio/src/overviews/qtquick-motion-design.qdoc
index 382c2f5fea8..80e0a844507 100644
--- a/doc/qtdesignstudio/src/overviews/qtquick-motion-design.qdoc
+++ b/doc/qtdesignstudio/src/overviews/qtquick-motion-design.qdoc
@@ -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
/*!
@@ -14,8 +14,8 @@
\li You can use different animation techniques for different
purposes. \QDS supports common motion design techniques,
such as timeline and keyframe based animation and easing
- curves, as well as screen-to-screen or state-to-state
- application flows and data-driven UI logic animation.
+ curves, as well as state-to-state application flows and
+ data-driven UI logic animation.
\endtable
\list
diff --git a/doc/qtdesignstudio/src/overviews/qtquick-uis.qdoc b/doc/qtdesignstudio/src/overviews/qtquick-uis.qdoc
index 2f0aa723b8f..74063602795 100644
--- a/doc/qtdesignstudio/src/overviews/qtquick-uis.qdoc
+++ b/doc/qtdesignstudio/src/overviews/qtquick-uis.qdoc
@@ -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
/*!
\page quick-uis.html
\previouspage {Examples}
- \nextpage studio-app-flows.html
+ \nextpage quick-components.html
\title Wireframing
@@ -38,15 +38,6 @@
the developer documentation by pressing \key F1.
\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}
\QDS comes with \e {preset components} that you can use in
diff --git a/doc/qtdesignstudio/src/overviews/studio-user-feedback.qdoc b/doc/qtdesignstudio/src/overviews/studio-user-feedback.qdoc
index db7d24cdba6..5feddcd2c97 100644
--- a/doc/qtdesignstudio/src/overviews/studio-user-feedback.qdoc
+++ b/doc/qtdesignstudio/src/overviews/studio-user-feedback.qdoc
@@ -16,7 +16,7 @@
\uicontrol Skip or \uicontrol Submit, the pop-up survey will not appear for
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
also allow collecting \uicontrol {4 - Detailed usage statistics} in
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc
deleted file mode 100644
index 1be7f143117..00000000000
--- a/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc
+++ /dev/null
@@ -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
-
-*/
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc
index 02a82d02031..c65469d8cd0 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-projects.qdoc
@@ -247,11 +247,7 @@
\li Wizard Template
\li Purpose
\row
- \li {1,5} 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 {1,4} Qt Quick Files
\li Qt Quick File
\li Generates a component with one of the following default components
or \l{Using Positioners}{positioners} as the root component:
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
index b9229af03c8..05615085770 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-toc.qdoc
@@ -52,17 +52,6 @@
\endlist
\li \l{Wireframing}
\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}
\list
\li \l{Preset Components}