Home

AXEL-FORMS is a set of Javascript extensions to AXEL. It defines plugins and filters to create form controls, a binding mechanism to set dynamical authoring constraints and a command mechanism to create editor(s) and action buttons inside a web page. The former two are defined within the following modules :

• $axel.binding : binding classes to set dynamic authoring constraints on documents
• $axel.command : command classes to easily create editors with command buttons (e.g. "Save")

Read the prerequisites page to learn how to include AXEL and AXEL-FORMS into a page.

AXEL and AXEL-FORMS together allow to create form-based user interfaces. They offer an alternative to XForms

AXEL-FORMS Roadmap

Current planning (latest version number in bold)

• 0.1 : initial public preview
• 0.2 : multiple editors on the same page, 'autofill' filter, 'choice' plugin with full appearance (radio buttons / check boxes), compatibility with $axel wrapped set, 'html' plugin
• ? : integration with AXEL (to maintain a single project)
• create documentation templates for all bindings / commands

Proposals

• rename 'condition' binding into 'switch' binding
• rename name parameter of 'input' plugin into set
• 'xslt' command : applies an XSLT transformation to the editor's content and show the result to the user
• data-binding="sum" to dynamically display a sum of several fields

AXEL-FORMS components overview

Primitive editors (types="plugin")

• 'choice' : native HTML select / option field for forms (or radio button / checkbox with full appearance)
• 'input' plugin : native HTML input field for forms (input, checkbox, radio button)
• 'html' : read-only HTML blob insertion (useful in templates for displaying read-only XML content)

Filters

• 'select2' (filter of 'choice' plugin) : adaptation of Igor Vaynberg select box for multiple choice selection with type ahead functionality
• 'autofill' (filter of 'choice' plugin) : dynamical loading of XML content into a target document section based on user's current choice

Bindings (data-binding="name")

Synopsis

<host-element data-binding="name" data-variable="name" data-_parameter_="value">
  ...some template fragment---
<host-element>

Try the demonstration editor to test these bindings and get some examples of use :

Bindings with a side effect : ****

• 'conditional' : hide / show fields depending on other fields values
• 'clear' : unselect a group of checkboxes (compatible with 'input' plugin)
• 'select' : select a group of checkboxes (compatible with 'input' plugin)

Bindings for validation :

• 'interval' : constrain two dates to follow each other
• 'blacklist' : excludes some values from input value space
• 'regexp' : regexp validation
• 'unique' : uniqueness constraint
• 'required' : check that at least one radio button or one checkbox is selected in a group (compatible with 'input' plugin)

Commands (data-command="name")

Synopsis

<div id="editor" data-command="transform" data-template="{some template url}"></div>
...
<button data-command="{name}" data-target="{editor}" data-{parameter}="value">Name</button>

Try the demonstration editor to test these commands and get some examples of use.

Commands that create an editor :

• 'transform' : in-place loading and transformation of an XTiger XML template, this the way to create an editor which can become the target of other commands (see below)

Commands that apply to an editor :

• 'save' : create a button to save an editor's content to a server with XHR
• 'submit' : classical form submission with an editor's content
• validate' : create a button to validate an editor's content (in conjunction with the use of bindings for validation)
• 'reset' : create a button to reset an editor's content to start editing a new document
• 'dump' : create a button to dump an editor's content (to XML)
• 'add' : create a button to dynamically show an editor to create a new document (can be used in conjunction with 'save' to append the result to a page)
• 'delete' : create a button to delete an editor's resource on server with a confirmation dialog which may be generated server-side
• 'trigger' : create a button to trigger a custom event on a target editor (e.g. create a cancel button)

Other commands :

• 'preview' : create a button to preview an editor's content