In version 1.5 of Qt Design Studio, you can try the flow mode functionality. The first part of this multi-part article will cover the basic usage of flow mode and how to get started. At the end of the article, we will look at the planned advanced features that will appear in the next version of Qt Design Studio.
What is Flow Mode?
A flow can be described as a schematic representation of the screens in your application, somewhat similar to the graph node used for visual programming, though specifically implemented for the task of creating user interface flows. The flowchart itself shows each screen and its relationship to other screens, as well as possible user paths through the application. Traditionally, designers have created these boards as a mockup to represent the flow concepts of an application. With the advent of tools like Sketch, it's possible to run flowcharts created by a designer as an interactive prototype that can be navigated to mimic the user experience of an application. However, the actual logic for this thread still needs to be re-implemented by developers.
Flows in Design Studio provide a more complete solution to the problem. They allow the designer to quickly prototype a complete application by modeling the flow in a familiar visual programming style based on nodegraph-esque. The QML code is generated in the background, allowing the developer to extend the functionality of their flow beyond the limits of more traditional design tools. The end results are both a high-fidelity prototype and developers of functional code that can be used as the basis for a production version of the application.
Creating a thread in Qt Design Studio. Basics.
Setting up your first flow (Flow)
You can create a thread either in an existing project or in a new project. To start using stream mode, you need to be in a project and then add the following items via the File menu/New File or Project Wizard.
Create Flow View
The first file you need is a new QML type called Flow View. This is the canvas that you will connect all the screens of your interface to. This file can be added using the wizards (wizards) after creating the project, and then proceed to add a new file, new QML Types used in streams can be found in the Qt Quick Files section.
Create Flow Items
Next, you need a new screen type that can be used by flow mode - Flow Item. You can also create them using wizards. These files are a type of UI.QML file that can be inserted into a Flow View file.
Creating Screen content
Adding content to Flow Items works just like designing any normal screen in Qt Design Studio, since these Flow Item files are just a type of UI file. QML file, so you can use them just like you would a regular user interface file. They can contain subcomponents, quick controls, animations, and anything else you can add to a normal UI file. The only real difference is that these files can be seen in the Flow View, so when viewing a QML library, these special components are the only items visible in the My QML Components panel.
Adding your files to the flow view (flow view)
Drag a Flow Item from the library to the Flow View and then you will have the first screen in the flow, of course you need at least two screens to make the flow work so after you have the second screen you can start using the Flow View right.
Adding action areas
Action areas can work in several ways. The first is to act as a simple clickable area that initiates a transition - this is the easiest way to use the flow editor for prototyping. Another use of scopes is that you can hook up any signal from any component on your flow screen, or from any of its subcomponents, such as a button on your screen that has an onPressed signal. This first part of the blog will look at a simple use case, followed by a more complex use case in part two.
Connecting Screens
If you have an Action Area, you can use it to connect to another screen, either by double-clicking the Action Area and then dragging the connection line to the other screen and releasing it, or using the context menu for the Flow View where all the appropriate controls can be found. Once you've connected the screens together, you have your first stream, you can now launch Live Preview and click on the button covering the Action Area, which won't be visible in Live Preview, to see a useful preview of the first transition.
Adding Effects
Once you have a transition, you can add an effect to it. You do this by selecting the transition directly, returning to the context menu and selecting the effect for that transition (transition). After applying the effect, you can edit it through the properties panel, for many effects there is a transition direction that determines the direction from which the new screen will be displayed. You can set the duration of the effect and run the Curve Builder to apply your own easing curve to this effect.
Editing Effects
To go back and edit a previously applied effect, you can select the transition, go to the context menu and select the effect, which will return the effect controls back to the properties panel.
Return (Go Back)
One feature of the flow mode functionality in Qt Design Studio is the addition of a back button. In many cases, there will be many, many relationships to your screens in the flow, traditionally you would have to create explicit connection lines "to" and "from" each potentially connected screen, resulting in a confusing and messy diagram. With Qt Design Studio you can simply set the action to "Go Back" and it will always take you back to the previous screen.
Live Preview
As with all screens in Qt Design Studio, you can preview your changes in real time using Live Preview, just run the preview and continue working on the stream, your changes will be updated in real time and you can test them directly in the Live window preview.
Appearance
The Flow View properties allow you to customize the appearance of all elements in the flow, connection lines, Action Areas (scope), and additional nodes such as Decisions and Wildcards. You can change the general settings for all elements, or select a single line, node or action area and change the appearance of just that element (including color, line weight, dashed or solid lines, and even connection curve), allowing you to add additional semantics to the design of the block itself. -scheme.
Decisions
Part of any complex user interface is the conditional logic it uses to present its state to users, or to collect and process various data sources, user interaction from various inputs such as physical buttons and controls, sensor readings from equipment arrays, or generic values from supported/service APIs. With Decision Nodes, you can simulate any of these conditions by presenting the user with a list of options that allows you to prototype complex interactions before you have any production required physical controls, backend or sensor data. In the future, you'll be able to tie these decisions to actual supported values or event lists, moving your prototyping efforts into the early states of actual production code.
Coming to part 2
The next part of the blog series will look at how to use the advanced features planned for the next iteration of the thread editor.
Wildcards
Developers noticed that another common functionality in real user interfaces that was not well handled in traditional flow design tools was screens that could appear from anywhere or at any time based on a conditional event. Take, for example, push notifications on smartphones or on incoming call screens on your car's HMI. With Wildcards, you can simulate these types of screens in your flow using real or simulated signals and conditions, allowing you to push your flow concepts beyond this traditional barrier. Another use case that the developers had in mind was to enable whitelisting and blacklisting for these wildcard events. To continue from one of our examples here, with an incoming call to our car's HMI, let's say we have an alert screen for an engine somewhere in our thread that also uses a wildcard and can appear on any screen at any time if it received signal. Now let's add this engine warning screen to the incoming call screen blacklist. This means that now our incoming call screen can appear on any screen other than the engine warning screen.
The developers believe that with this set of tools, you can start modeling real-world UI complexity, going far beyond simple click-to-click layouts and lo-fi prototypes.
Connecting signals from components
Simple hives are great for prototyping, but what if you want to use real UI screens to control the flow of your application? The next part of this blog will look at how to use flow action areas to listen to signals from flow screen components and connect them to the flow design.
Integrating States
Another consideration the developers had to design is the existence of states in Qt Design Studio, an existing and powerful part of the workflow that allows you to create states for your UI screens and track changes between them. With these flows, you can not only transition from any screen state to any other screen state, but you can also use a flow to move between states on the same screen, mixing the power of existing QML features with the new flow mode.
