Skip to content
uzquiano edited this page Feb 12, 2013 · 1 revision

This page contains design notes concerning Alpaca views.

About Views

Views are objects that tell Alpaca how to render a form model. They are collections of properties that tell the Alpaca engine how to present the form. These properties include:

  • id - a unique ID for the view
  • parent - optional ID for the parent view from which this view inherits
  • ui - identifies the UI framework currently being utilized ("bootstrap", "jquery-ui", "mobile")
  • type - the type of view being shown ("edit", "create" or "view")
  • templates - a collection of templates (either strings, uris or DOM selectors)
  • fields - a collection of field-level template overrides
  • style - the id of the style injector to use to further decorate DOM elements
  • messages - a collection of internationalized messages to be applied

View Compilation

When Alpaca initializes, it walks the chain of Views, compiles all of the templates and normalizes each view into a fast, high performance state. This allows Alpaca to operate very quickly in steady-state while incurring a slight startup penalty.

Selecting Views

Views are selected for use within the $.alpaca() call through a couple of mechanisms:

  1. A view can be identified by name, as in:
$("#field").alpaca({
   "view": "VIEW_WEB_EDIT",
   ...
});
  1. A view can be auto-selected by telling Alpaca what UI and type you're interested in:
$("#field").alpaca({
   "type": "create",
   "ui": "bootstrap",
   ...
});
  1. A view can be provided inline:
$("#field").alpaca({
   "view": {
      "parent": "VIEW_WEB_EDIT",
      ...
   }
});

Views

The following views are available:

Default

The following views render without any special attention to markup. These are ideal for a blank or clean slate approach to your form templates:

  • VIEW_WEB_DISPLAY
  • VIEW_WEB_CREATE
  • VIEW_WEB_EDIT

jQuery UI

The following views render cleanly into jQuery UI:

  • VIEW_JQUERYUI_DISPLAY (ui=jqueryui, type=view)
  • VIEW_JQUERYUI_CREATE (ui=jqueryui, type=create)
  • VIEW_JQUERYUI_EDIT (ui=jqueryui, type=edit)

Bootstrap

The following views render cleanly into Bootstrap:

  • VIEW_BOOTSTRAP_DISPLAY (ui=bootstrap, type=view)
  • VIEW_BOOTSTRAP_CREATE (ui=bootstrap, type=create)
  • VIEW_BOOTSTRAP_EDIT (ui=bootstrap, type=edit)

JQuery Mobile

The following views render cleanly into JQuery Mobile:

  • VIEW_MOBILE_DISPLAY (ui=mobile, type=view)
  • VIEW_MOBILE_CREATE (ui=mobile, type=create)
  • VIEW_MOBILE_EDIT (ui=mobile, type=edit)

Additional views are available. At present, these are generally conditioned to fallback to JQuery UI support but will be modified to support alternate frameworks in the near future. These include:

  • VIEW_WEB_EDIT_INLINE
  • VIEW_WEB_EDIT_LIST
  • VIEW_WEB_EDIT_TABLE
  • VIEW_WEB_CREATE_TABLE
  • VIEW_WEB_EDIT_YAML
Clone this wiki locally