Appboard/2.6/builder/layout

Revision as of 15:52, 26 June 2014 by imported>Jason.nicholls (1 revision)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)


AppBoard uses a layout engine that arranges widgets into horizontal or vertical containers and allows these contains to be sized to suit. The containers are sized relative to each other so the same proportions are retained regardless of the resolution of the end-user.

Viewer users are able to make changes to the container sizing to suit their own screen and preference and these are saved locally. Any changes a Builder user makes to a board will invalidate a Viewer user's changes and revert to the default. A Viewer user can also force returning to the default by deleting their cookies for the AppBoard site.


Layout Management Behaviour

New Widgets

New widgets are automatically placed onto the currently selected dashboard.

This also applies to widgets moved from one board to another using the Widgets page.

Moving / Arranging Widgets

Existing widgets can be re-arranged by dragging them around and dropping them on particular targets:

  1. Insert Target: This Target appears on the outside of Widgets, or in the gap between Widgets. Dropping a Widget in this area will insert the new Widget at that location and uniformly re-size the other Widgets in that row or column to make room for itself.
  2. Split Target: This target appears inside of a Widget, but only close to one of the edges. A "split" is similar to an insert, except that it only affects the target Widget rather then the entire row or column. Splits can be done vertically or horizontally depending exactly where you target.
  3. Stack Target: When targeting a widget title bar the widget will be "stacked" on top of the existing widget. Refer to the Stacked Widgets page for more information.

Resizing Widget Containers

  1. Position the mouse in between widgets so the cursor changes to a double-ended arrow.
  2. Click and drag either left-right or up-down depending whether you selected a vertical or horizontal split.