App Designer - Styles

 

App Designer Style View

App Designer is a drag-and drop tool for developing application user interfaces with rows and columns as the basic design structure. Various UI elements such as buttons, input fields, text areas, and more can be dragged into a column that sits in a row.  All of the elements has a list of supported styles that are available in the “Styles” panel such as widths and show-hide.

App Designer New Style

Creating a New Style

  1. In the Styles panel, click on the supported desired attribute such as Widths or Show-Hide
  2. Click the “New” button
    1. A popup window will be displayed requesting the style class’s name
    2. Click Ok
      1. Numerous settings will be displayed for this newly created style to apply to your selected element

The “Style” panel’s attributes correspond to CSS properties that can be set for an element such as padding, alignment and width. Preexisting styles can also be copied to other elements without having to manually duplicate properties.  Keep in mind that changes to any of the properties of the shared Active Style will be changed for all of the instances applied.

App Designer Copying Styles

Copying an Active Style to another UI element

  1. Click the desired element that you would like to add the style to
  2. On the “Styles” panel, click the desired attribute to display the available style classes
    1. The previously created style should be shown
  3. Click the desired style to apply its properties

OR

  1. Drag the label of the Active Style to the item on the layout to apply its properties
App Designer Style Background

Applying a Background Style

  1. In the hierarchy bar, click on the body element
    1. Background should be displayed in the “Style” panel
  2. Click the “New” button
    1. A popup window will be displayed requesting the style class’s name
    2. Click Ok
      1. Numerous settings will be displayed for this newly created style to apply to your selected element

With the Background style, background colors, opacity, gradients, and images can be applied in various positioning and orientations. Background images can be uploaded to your project by dragging the file to the “Drop Here” box when Background-Image is enabled.

If you are interested in creating Adaptive Styles using App Designer, click here.

Get started with the Intel XDK


Download Now

 
For more complete information about compiler optimizations, see our Optimization Notice.
Categories: