App Designer - Inserting Components

Tweet Like

workspace_layout

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.

insert_inputfield

Inserting Components into App Designer

  1. Drag a UI component onto the workspace layout.
  2. Drop the component into your desired turquoise colored position.
    1. 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_items

Rearrange Components on the Workspace Layout

  1. Drag the component to one of the turquoise highlighted positions on the layout.
  2. Drop the component into the desired position.
    1. All the components on the layout will adjust for the change in components’ new positions.

Get started with the Intel XDK


Download Now