Views

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",
   ...
});

2. A view can be auto-selected by telling Alpaca what UI and type you're interested in:

$("#field").alpaca({
   "type": "create",
   "ui": "bootstrap",
   ...
});

3. 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