Uiflow Studio's (Uiflow) Design view comprises the following panels:
In addition, the Libraries panel provides all of the components you need for your app, while the Explorer panel enables you to organize your app components in layers. You can access both from the left navigation bar:
Left: Libraries Panel; Right: Explorer Panel
The Preview panel shows the user interface for the page you select in the Explorer panel. Here, you design your user interface by dragging components from the Libraries panel and arranging them as needed on your page:
The toolbar at the top of the Preview panel includes several display controls:
Preview panel's toolbar
- Desktop, Tablet, Phone horizontal, and Phone vertical: Sets the app's screen size and aspect ratio based on the target platform.
- Width: Sets the app's width (in pixels).
- Zoom: Zooms the display in or out.
Each component added to the page appears in the Layers section of the Explorer panel:
Layers for the application Homepage
To quickly locate a component in your user interface, select it in the Layers section, which also selects the component in the Preview panel.
Drag components around the Layers section to change their position within the app. The preview updates accordingly.
The Inspector panel displays configurable properties for the application page or component you select. These properties define the object's appearance and behavior.
When a component is selected on a page, the Inspector panel displays three tabs:
Inspector panel showing properties for the currently selected component
- Styles: Visual properties such as size, border, etc.
- State: Stateful properties such as label text, data, etc.
- Actions: Events which the component handles.
Above the selected component, the Preview panel displays a quick selection menu as shown in the figure above. Click the menu's buttons to display condensed versions of the Inspector panel tabs inline with the component. This enables you to quickly and easily configure the component's properties:
Smart menu for the currently selected component
When a page is selected in the Explorer panel, the Inspector panel displays page-specific information (e.g., name, description, etc.):
Properties for the currently selected page