App Designer is drag-and drop tool for developing application user interfaces with rows and columns as the basic design structure. Various elements such as buttons, input fields, text areas, and more can be dragged into a column that sits in a row. App Designer supports multiple user interface (UI) frameworks such as twitter bootstrap, jQuery Mobile, App Framework, and more. A control pane with various UI components is located on the left panel of the screen.
Inserting Components into App Designer
- Drag a UI component onto the workspace layout.
- Drop the component into your desired turquoise colored position.
- The available positions are colored to make it easier for organizing droppable components.
Once the item is dropped into place, such as the “input” field, various properties are available to be enabled and edited like the Label Text, Position, Placeholder, Type, Name and id.
Rearrange Components on the Workspace Layout
- Drag the component to one of the turquoise highlighted positions on the layout.
- Drop the component into the desired position.
- All the components on the layout will adjust for the change in components’ new positions.