UI
Last updated
Was this helpful?
Last updated
Was this helpful?
Appfarm Create's UI designer is a visual tool for structuring and designing the user interface of an app. Simply drag and drop UI components and connect them to data, app flow, and business logic to rapidly compose an interactive interface.
The UI designer consists of four main sections:
To add a component from the library to a view, either:
Click the component to add it as a child of the selected element in the view tree, or
Drag and drop the component into either the view tree or the layout designer.
Drag and drop the component from the list at the bottom of the Views pane into the view tree.
In the Views pane is a list of all the user interfaces, or views in the app. There are three types of views in Appfarm Create:
To add a view to an app, at the top of the Views pane, either:
Click the plus icon to immediately add a new standard view, or
Click the arrow icon and select the type of view you'd like to add.
The selected view, dialog, or drawer is displayed in the layout designer. You can adjust the settings for responsive design and preview the app in different screen sizes.
The Properties pane displays the available properties for the selected UI component over four tabs:
Component properties
Style properties
Conditional style properties
Motion properties
The UI components pane contains the full that can be added to an app.
To add a to a view:
, a standard page/screen;
, a modal window placed over a view often used for user confirmation or data entry;
, a persistent element or temporary modal window often used for navigation.
Views consist of UI components that can be in a tree structure by nesting them inside . Branches of the tree can be expanded and collapsed. Select a component to highlight the preview in the layout designer and show the available properties in the properties pane. Right-click a component in the tree, or use to perform operations like copy, paste, and delete.
By default, your most recent (visited) views or dialogs are displayed at the top of the Views pane ("Recent"). You may turn this feature off from the in the top-left menu. You may also right-click a view or dialog to pin it as a Favourite at the top of the Views pane.
