O'Reilly Network Script Library -- Javascript
Forms Extension Framework (ForX)
|
Language: JavaScript |
The Forms Extension Framework is a set of attributes which are used as an addition to the elements of an HTML form. The design goal was to create a simple markup language, which could hide the most common scripting tasks when working with forms behind a simple set of attributes. This version of ForX supports:
- Validation of elements, using predefined content types or user-defined regular expressions.
- Definition of requirements, i.e. to mark elements as being required in dependency to other elements and their values.
- Grouping elements and specifying requirements.
- Immediate validation of elements.
- Templates to use your own markup for element marking.
Though ForX is not a complete XML application (as it has no DTD defined), it behaves like one, i.e. it integrates into an HTML document in a standardized manner.
ForX needs a working DOM Level 1 implementation and JavaScript 1.3; thus, only Navigator 6, Mozilla and Internet Explorer 5.x support this version of the ForX engine. Other platforms are targeted for future versions.
Instructions
For full instructions on how to extend and mark up your own HTML forms with ForX, please see Forms Extension Framework (ForX) Documentation and Working With Forms: An Introduction.
The Zip file contains:
- The JavaScript source code file (forx.js) and the GPL license file.
- A template file (template.html).
- A set of four demo pages with an intro page (index.html).
In addition to that, you can also access the working demos here.
After unzipping the archive to a folder of your choice you should examine the intro page to try out the working demos. The template file included contains the basic frame of an HTML document, which takes advantage of the ForX engine.
It's quite simple to use ForX in your own application. Just follow these steps:
- Create a new HTML document
- Copy the template markup and fill with your own content:
<div id="forx:marker" style="display:inline" class="forx">MARKER</div>
<div id="forx:review" style="display:inline" class="forx">REVIEW</div>
<div id="forx:remind" style="display:inline" class="forx">REMIND</div> - Copy the script tag and adjust the path to the source file:
<script src="./forx.js"></script> - Create a form with the attributes required, a unique id and
enabledset totrue:
<form forx:enabled="true" forx:id="forx_id" ... > ... </form> - Connect the ForX engine to the document, i.e. run
forxInit()after the document has loaded:
<body onload="forxInit()"> - Create the form. See the Forms Extension Framework (ForX) Documentation for allowed HTML elements and ForX attributes.
Now, you're ready to go. Just play a little with the attribute set, to see what happens.
Please note that ForX is (almost) an XML application, i.e. all attributes are case-sensitive. Also keep in mind that not all combinations of attributes make sense and that the engine tends to be rather restrictive.
Future versions will include better XML support, a DTD, correct handling of namespace (which is not yet supported by all platforms anyway) and further enhancements to the engine.
