-
Notifications
You must be signed in to change notification settings - Fork 369
Views
This page contains design notes concerning Alpaca 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
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.
Views are selected for use within the $.alpaca() call through a couple of mechanisms:
- A view can be identified by name, as in:
$("#field").alpaca({
"view": "VIEW_WEB_EDIT",
...
});
- A view can be auto-selected by telling Alpaca what UI and type you're interested in:
$("#field").alpaca({
"type": "create",
"ui": "bootstrap",
...
});
- A view can be provided inline:
$("#field").alpaca({
"view": {
"parent": "VIEW_WEB_EDIT",
...
}
});
The following views are available:
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
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)
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)
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