Designing Application Flows

After you export your artwork from your favorite design tool and import it to Qt Design Studio, you can design the application flow in the form of a 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. The QML code is created in the background and can be used as the base of the production version of the application.

"Application flow in Form Editor"

In Qt Design Studio, a flow view represents a schematic diagram. It consists of flow items that represent the screens in the UI and transition lines that connect them, thus illustrating the possible user pathways through the UI. You use 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 screen changes into another.

You can use flow decisions to set up alternative pathways between screens in the UI. For example, if user input determines which screen should open next, you can test the different scenarios in the prototype by having a dialog pop up, where you can select which screen 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 flow wildcards to determine the priority of screens by whitelisting or blacklisting them.

Creating Flows

You can add a flow view to an existing project or create a new project for it, as described in Creating Projects. To create the flow view, select File > New File or Project > Files and Classes > Qt Quick Files > Flow View and follow the instructions of the wizard.

You only need to select the Use event simulator check box if you want to add an event simulator to the flow view.

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 item, including the color, line thickness, dotted or solid lines, and even the curve of the connections. This enables you to add extra semantics to the design of the flow diagram itself.

Adding Flow Items

If you imported your screen designs from a design tool as individual components (.ui.qml files), you can use them as content for flow items. If you are building your UI from scratch in Qt Design Studio, you must first add components to the flow items to create the screens as you would any QML components. For more information, see Creating Components. The flow items that you attach the components to are listed under My QML Components.

Note: You must use the wizard to create the flow items. After you create a flow view, the Flow View section becomes visible in Library. It contains a Flow Item type that you can use to apply states to flow items, and that you should use solely for that purpose.

To add flow items:

  1. Select File > New File or Project > Files and Classes > Qt Quick Files > Flow Item and follow the instructions of the wizard to create flow items for each screen in the UI.
  2. Add content to the flow item in one of the following ways:
    • Drag and drop components to a flow item in Form Editor or Navigator and edit their properties in Properties.
    • Drag a screen from Library > My QML Components to a flow item in Form Editor or Navigator.
  3. In Properties, edit the properties globally for all flow items, action areas, or transition lines in the flow view.

To include another flow view into a flow view, select the .ui.qml file that specifies the flow view in the Loader source field in Properties.

You can now drag the flow items from Library > My QML Components to the flow view in Form Editor or Navigator. When you have all the screens in place, you can add action areas to them to create transitions between them.

Adding Action Areas and Transitions

Action areas can act as clickable areas that initiate transitions between screens or they can create connections to any signal from any component in a flow item. For example, you could connect an action to the onPressed signal of a button in your screen.

Typically, a screen can be connected to several other screens in the flow, with two-way connections. To avoid clutter, you can set an action area as go back, instead of adding explicit transition lines to and from every potentially connected screen. When the Go back option is enabled, the transition will always take the user back to the previous screen.

To create action areas:

  1. Right-click the flow item in Form Editor and select Flow > Create Flow Action in the context menu.
  2. Drag the action area to the screen control that you want to connect to the other screen. For example, to a button that opens another screen when clicked.
  3. Double-click the action area and drag the transition line to the flow item you want to connect to.
  4. In Properties, modify the properties of the action area and transition line.

To preview the flow, select the (Show Live Preview) button on the Form Editor toolbar or press Alt+P.

Applying Effects to Transitions

You can apply effects, such as fade, move, or push to transitions. A fade effect makes the first screen appear to fade out, while the next screen fades in. A move effect makes the second screen appear to move in over the first screen, while the push effect appears to make a screen push out the previous one. You can also design and use custom effects.

The transition direction determines the direction the new screen appears from: left, right, top, bottom. You can set the duration of the effect and attach an easing curve to the effect.

To add effects:

  1. Select a transition line in Form Editor.
  2. In the context menu, select Flow > Assign Flow Effects, and then select the effect to apply.
  3. In Properties, modify the properties of the effect.

To edit effect properties, select a transition, and then select Flow > Select Effect in the context menu.

Simulating Events

While transition lines are useful for prototyping, in production you need to use the real signals from UI screens 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 screens or the controls in them and by connecting these to the flow view. You can use keyboard shortcuts to simulate these events when you preview the UI.

When you use the wizard to create a Flow View item, select the 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.

To create an event list:

  1. In Navigator, select the EventListSimulator type, and then select the Active check box in Properties to activate the event simulator.
  2. Select the (Show Event List) button on the Design mode toolbar, or press Alt+E.

    "Event List Dialog"

  3. Select to add a keyboard shortcut for triggering an event to the list.
  4. In the Id field, enter an identifier for the event.
  5. In the Shortcut field, press the keyboard key that will trigger the event, and then select R to record the keyboard shortcut. The key identifier appears in the field.
  6. In the Description field, describe the keyboard shortcut.

You can now assign the events to the action areas in the flow to use the keyboard shortcuts to trigger events when you preview the UI.

To assign events to actions:

  1. In Navigator, select an action area or transition line.
  2. In the context menu, select Flow > Event List > Assign Events to Actions.
  3. Select an event in the list, and then select Accept.
  4. Press Alt+P to preview the UI.
  5. Double-click events in the event list or use the keyboard shortcuts to trigger events.

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 Flow Decision type 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.

To simulate conditions:

  1. Drag a Flow Decision QML type from Library to a flow view in Navigator or Form Editor.
  2. Select the screen where you want the application to start in Navigator or Form Editor, and then select Flow > Add Start in the context menu.
  3. Create an action area for the component that will trigger the condition and connect it to the flow decision.
  4. In Properties, Question field, enter the text that will appear next to the transition line that represents the connection to the flow decision type.
  5. Select the flow decision, and then select Connect in the context menu to create connections to the screens that will open depending on whether the condition is met.
  6. In Properties, Title field, enter a title for the selection dialog that opens when the condition is triggered.
  7. Select a transition line and add a descriptive text in the Question field to represent a choice in the selection dialog.
  8. Press Alt+P to preview the UI.

When you preview the UI, you can click the action areas to display a dialog that you can use to select which condition is met and see the results.

Applying States in Flows

You can use states in flows to modify the appearance of components on screens in response to user interaction, for example. For this purpose, you use the Flow Item QML types availabe in Library.

  1. Select File > New File or Project > Files and Classes > Qt Quick Files > Flow Item to create a flow item.
  2. In States, add states to the flow item.
  3. Open the .ui.qml file that contains the flow view in Form Editor and drag the flow item to the flow view in Navigator or Form Editor.
  4. Drag an empty Flow Item QML type from the Library view Flow View tab to the flow for each state that you added.
  5. In Properties, in the State change target field, select the flow item that you created using the wizard.
  6. In the Target state field, select the state to apply to the flow item.

You can now add action areas and flow decisions to apply the different states.

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 Flow Wildcard type to model this type of screens in your flow, using real or simulated signals and conditions. You can whitelist or blacklist wildcard events to prioritize them and 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:

  1. Drag a Flow Wildcard QML type from Library to a flow view in Navigator or Form Editor.
  2. In Properties, add screens to the white and black list for the screen.

Available under certain Qt licenses.
Find out more.