path: root/doc/qtdesignstudio/src/qtdesignstudio-app-flows.qdoc

// 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.png "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. You use \e {action areas} as starting points for transition
    lines. You can attach effects to transition lines, such as fade or push,
    to determine what users see when one flow item changes into another.

    You can 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, you can test the different scenarios in the prototype
    by having a dialog pop up 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. You can use \e {flow wildcards}
    to determine the priority of flow items by adding them to positive and
    negative 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}.
        \li Use context menu commands to apply effects to transitions,
            as described in \l{Applying Effects to Transitions}.
        \li When you are ready for production, use the event list simulator
            to replace transition lines with connections to real signals
            from UI controls, as described in \l{Simulating Events}.
        \li To set up alternative pathways between flow items, use
            \uicontrol {Flow Decision} components from
            \uicontrol Components > \uicontrol {Flow View}, 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.
        \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} check box 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. You can search for existing events by entering 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 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.png "Assign Events to Actions dialog"
        \li In the \uicontrol ID field, select a transition or an action area
            \inlineimage icons/flow-action-icon.png
            . You can search for events by entering search criteria in the
            \uicontrol Filter field.
        \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-decision-preview.png "Event list in preview"
    \endlist

    If the event triggers a \l{Simulating Conditions}{flow decision}, you
    can select the path to take to the next flow item.
*/

/*!
    \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.png "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, and then select
            \uicontrol {Flow} > \uicontrol {Set Flow Start} in the context menu.
        \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.png "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.png "Selection dialog for flow decision"

    \section1 Flow Decision Properties

    You can 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.png "Flow Decision properties"

    In the \uicontrol {Dialog title} field, enter a title for the selection
    dialog that opens when the condition is triggered.

    You can 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 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

    You can use the \l{Picking Colors}{color picker} to set the outline and
    fill color of the flow decision icon.
*/

/*!
    \page studio-flow-states.html
    \previouspage studio-flow-conditions.html
    \nextpage studio-flow-external-events.html

    \title Applying States in Flows

    You can use \l{Working with States}{states} in flows to modify the appearance
    of \l{glossary-component}{components} in flow items in response to user
    interaction, for example. For this purpose, you use the
    \uicontrol {Flow Item} components available in
    \uicontrol Components > \uicontrol {Flow View}.

    \list 1
        \li Select \uicontrol File > \uicontrol {New File} >
            \uicontrol {Qt Quick Files} >
            \uicontrol {Flow Item} to create a 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}
            {flow view} in the \l {2D} view and drag the flow item to the
            flow view in the \l Navigator or \l {2D} view.
        \li Drag an empty \uicontrol {Flow Item} component from
            \uicontrol Components > \uicontrol {Flow View}
            to the flow for each state that you added.
        \li In \l Properties, in the \uicontrol {State change target}
            field, select the flow item that you created using the wizard.
            \image studio-flow-item-properties.png "Flow Item properties"
        \li In the \uicontrol {Target state} field, select the state to
            apply to the flow item.
    \endlist

    You can now add \l{Adding Action Areas and Transitions}{action areas} and
    \l{Simulating Conditions}{flow decisions} to apply the different states.
*/

/*!
    \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.

    You can use the \uicontrol {Flow Wildcard} component to model this type of
    screens in your \l{Adding Flow Views}{flow view} using real or simulated
    \l{Connecting and Releasing Signals}{signals} and \l{Simulating Conditions}
    {conditions}. You can add \l{Adding Flow Items}{flow items} to a positive
    list to prioritize them or to a negative 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 an
            \l{Adding Action Areas and Transitions}{action area} in
            the \l Navigator or \l {2D} view.
        \li In \l Properties, select flow items to add them to the
            positive and negative list of the action area.
    \endlist

    \section1 Flow Wildcard Properties

    You can 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.png "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} check box 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.

    You can specify the following properties to change the appearance of the
    wildcard icon \inlineimage icons/flow-wildcard-icon.png
    :

    \list
        \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

    You can use the \l{Picking Colors}{color picker} to set the outline and
    fill color of the wildcard icon.
*/