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

/****************************************************************************
**
** Copyright (C) 2021 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Creator documentation.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
**
****************************************************************************/

/*!
    \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 Form Editor"

    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 \l Library >
            \uicontrol Components > \uicontrol {Flow View}, as described in
            \l{Simulating Conditions}.
        \li Use \l{Adding 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 Library >
            \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

    You can 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 or Project} > \uicontrol {Files and Classes} >
    \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"

    You only need to select the \uicontrol {Use Event Simulator} check box if
    you want to add an event simulator to the flow view. The event simulator
    needs the project to be imported to the flow view, so you also need
    to select the \uicontrol {Use Application Import} check box. You need the
    import also for access to the project \c Constants.qml file that contains
    global settings for the project.

    The flow view properties enable you to adjust the appearance of all
    the items in the flow: action areas, transition lines, decisions, and
    wildcards. You can change the global settings for all items by editing
    flow view properties, or you can select an individual action area or
    transition line and change the appearance of just that component, including
    the color, line thickness, dotted or solid lines, and even the curve of
    the line. This enables you to add extra semantics to the design
    of the flow diagram itself.

    You can \l{Adding Flow Items}{add flow items} to the flow view to design
    the UI.

    \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.png "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.

    You can 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 Layout tab, you can use \l{Setting Anchors and Margins}
    {anchors} to position the component.

    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, you can
    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.
    The imported components are listed in \l Library > \uicontrol Components
    > \uicontrol {My Components}.

    If you are building your UI from scratch in \QDS, you must first add
    components to the flow items to create the screens as you would any
    components. For more information, see \l {Components}. The
    flow items that you attach the components to are listed under
    \uicontrol {My Components}.

    \image studio-flow-item.png "Custom Flow Item in Library"

    \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 Library
    > \uicontrol Components. It contains a \uicontrol {Flow Item} component that
    you can use to \l{Applying States in Flows}{apply states to flow items}, and
    that you should use solely for that purpose.

    To add flow items:

    \list 1
        \li Select \uicontrol File > \uicontrol {New File or Project} >
            \uicontrol {Files and Classes} > \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-and-drop components from \uicontrol Library to a flow
                    item in \l {Form Editor} or \l Navigator.
                \li Drag a screen from \uicontrol Library > \uicontrol Components
                    > \uicontrol {My Components} to a flow item in
                    \uicontrol {Form Editor} or \uicontrol Navigator.
            \endlist
        \li In \l Properties, edit the properties of each flow item.
    \endlist

    You can now drag the flow items from \uicontrol Library > \uicontrol Components
    > \uicontrol {My Components} to the flow view in \uicontrol {Form Editor}
    or \uicontrol Navigator. When you have all the flow items in place, you can
    \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 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} check box.

    By default, transitions are drawn from action areas to the target flow item.
    To draw the transitions from the edges of flow items instead, select the
    \uicontrol {Join lines} check box in the \uicontrol {Transition Lines}
    section.

    In the \uicontrol Layout tab, you can use \l{Setting Anchors and Margins}
    {anchors} to position the component.

    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} can act as clickable areas that initiate transitions
    between flow items or they can \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.png "Flow Action Area in Form Editor"

    \note To connect components to \l{Connecting and Releasing Signals}
    {signals}, you must first export the components as
    \l{Adding Property Aliases}{aliases} in \l Navigator.
    To create and release connections, select
    \uicontrol {Open Signal Dialog} in the context menu.

    You can select the type of the mouse or touch input to use for triggering
    events, such as click, double-click, flick, pinch, or press.

    Typically, a flow item can be connected to several other flow items in the
    flow with two-way connections. To avoid clutter, you can 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 Right-click the flow item in \l {Form Editor} 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 \inlineimage live_preview.png
    (\uicontrol {Show Live Preview}) button on the Design mode
    \l{Summary of Main Toolbar Actions}{toolbar} or press \key {Alt+P}.

    \section1 Common Properties

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

    In the \uicontrol Layout tab, you can use \l{Setting Anchors and Margins}
    {anchors} to position the component.

    In the \uicontrol Advanced section, you can manage the more
    \l{Specifying Developer Properties}{advanced properties} of components.

    \section1 Flow Action Area Properties

    In the \uicontrol {Flow Action Area} section, you can use the
    \l{Picking Colors}{color picker} to set line and fill color.

    \image studio-flow-action-area-properties.png "Flow Action Area properties"

    In the \uicontrol {Flow Action} and \uicontrol {Action Area} sections,
    specify additional properties for action areas:

    \list
        \li Select the \uicontrol {Go back} check box 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} check box to draw a dashed
            action area outline.
        \li Select the \uicontrol Enabled check box to enable interaction
            with the action area during preview.
    \endlist

    \section1 Flow Transition Properties

    In the \uicontrol Transition section, specify additional properties for
    transitions between \l{Adding Flow Items}{flow items}:

    \image studio-flow-transition-properties.png "Flow Transition properties"

    \list
        \li Select the \uicontrol Condition checkbox to activate the
            transition. You can 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

    You can specify the following properties to change the appearance of
    transition lines in \uicontrol {Form Editor}:

    \image studio-flow-transition-line-properties.png "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} check box 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} check box to move the
            \uicontrol Question value to the opposite side of the transition
            line.
    \endlist

    \section1 Connecting and Releasing Signals

    To connect a component to a \l{Connecting Components to Signals}{signal},
    select \uicontrol {Open Signal Dialog} in the context menu. The
    \uicontrol {Signal List} dialog displays the signals for all components
    that you export as \l{Adding Property Aliases}{aliases} in \l Navigator.

    \image studio-flow-signal-list.png "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, while the push effect appears to make a flow item
    push out the previous one. You can also design and use custom effects.

    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 \l {Form Editor}.
        \li In the context menu, select \uicontrol {Flow} >
            \uicontrol {Assign 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, and then select
    \uicontrol {Flow} > \uicontrol {Select Effect} in the context menu.

    \section1 Flow Effect Properties

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

    You can set the duration and easing curve of all flow effects:

    \list
        \li In the \uicontrol Duration field, specify the duration of the
            effect.
        \li Select the \inlineimage curve_editor.png
            button to open \uicontrol {Easing Curve Editor} for attaching an
            \l{Editing Easing Curves}{easing curve} to the effect.
    \endlist

    For a move or push effect, you can set some additional properties:

    \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 check box 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 Select the \inlineimage icons/edit.png
            (\uicontrol {Show Event List}) button on the Design mode
            \l{Summary of Main Toolbar Actions}{toolbar}, or press \key {Alt+E}.
        \li In the \uicontrol {Event List} dialog, select \inlineimage 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 Form Editor"

    To simulate conditions:

    \list 1
        \li Drag a \uicontrol {Flow Decision} component from \l Library >
            \uicontrol Components \uicontrol {Flow View} to a
            \l{Adding Flow Views}{flow view} in \l Navigator or \l {Form Editor}.
        \li Select the flow item where you want the application to start in
            \uicontrol Navigator or \uicontrol {Form Editor}, 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 \uicontrol Navigator or
            \uicontrol {Form Editor} 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 \l {Form Editor}.
        \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{Adding 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 \l Library >
    \uicontrol Components > \uicontrol {Flow View}.

    \list 1
        \li Select \uicontrol File > \uicontrol {New File or Project} >
            \uicontrol {Files and Classes} > \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 \l {Form Editor} and drag the flow item to the
            flow view in \l Navigator or \l {Form Editor}.
        \li Drag an empty \uicontrol {Flow Item} component from
            \uicontrol Library > \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 \l Library >
            \uicontrol Components > \uicontrol {Flow View} to an
            \l{Adding Action Areas and Transitions}{action area} in \l Navigator
            or \l {Form Editor}.
        \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.
*/