This manuel is very incomplete and still in progress, please consult the readme file to learn how to use AXEL at the moment. Any help welcome to create more documentation !
This guide explains how to use the AXEL library within your application. Before reading this guide you should read the readme file. You can also consult the CHANGELOG of the library at any time.
The AXEL Javascript library transforms XHTML documents that follow the XTiger XML language specification into custom XML editors running inside a browser window. These editors allow to edit XML documents conformant with an XML document model implicitly defined by the template. The library is entirely client-side, the only interactions with the server are to get a template, and to load and save XML data ; all this can be realized with Ajax calls. Thus AXEL can be deployed on top of any Web framework. There are two different ways to use the library:
The advantage of the first method is that you can keep your template independant from the library and its location (no URL dependency). This is a better practice for instance if you share your template with other developers who do not have necessarily the same environment. However you can also keep templates independant from the library location with the second method (i.e. auto-editable templates), if your Web server injects the library and the onload Javascript handler when serving the template to the user.
The AXEL library provides some utility functions and an xtiger.util.Form class that manage template file loading, template transformation and XML content generation and loading inside the document generated from the template.
The best thing to learn how to use the library is to read the instructions below and to have a look inside the source files of the sample applications that comes with it:
Please read the FAQ for more information
You need to install the Yahoo Javascript compressor utility first, and update its path inside scripts/ant.properties in order to generate the minified version of the library with the build.lib target of the scripts/build.xml ant script.
You can edit the scripts/build.xml file to select which plugins you want to include within the library. For instance (see below for a description of the available plugins and their dependencies) the list contains actually :
<filelist dir="${plugins.src.dir}"
files="text.js textdevice.js popupdevice.js select.js wiki.js image.js
lensdevice.js link.js richtext.js buttonbardevice.js uploaddevice.js
photo.js documentid.js layout.js"/>
You must also include the library global CSS file in your application. For instance this CSS is required to hide / show the editing fields of the primitive editors as the user clicks on them. A standard one is given in bundles/xtiger.css. For a Web page that loads the template with Ajax, or for an auto-editable template you just need to include it with:
<link rel="stylesheet" href="{PATH_TO_BUNDLES}/bundles/xtiger.css" type="text/css"/>
If you are using a Web page and then load the template inside an iframe in a second time, you may find handy to call the injectStyleSheet({CSS_FILE_URL}) method of the xtiger.util.Form object just after the template transformation, to inject the style sheet in host iframe (see example below). This way you can keep your templates independant from the AXEL style sheet location.
The bundles/ folder must also be copied into the Web application as you will give its access path to the xtiger.util.Form contructor (see below). This folder contains different resources used by the core libary editors and by the plugin editors, such as images. For instance it defines the minus and plus icons which are used by the repetition editor.
In summary you should at least have the following resources from the AXEL distribution into your deployment environment:
lib/axel.js
bundles/xtiger.css
bundles/* (all the other folders within bundles)
The main library entry point is the xtiger.util.Form object which is described in the tutorial. You import that object into your application when you import the all-in-one minified version of the library which is contained in the axel/ folder and which is called axel-version.js (or alternatively axel.js). You can also build this file with an ant script.
We develop the library with Firefox (actually 3.6) and do our best efforts to support the other major browsers: Safari and Chrome, Opera, Internet Explorer (version 7 and above). However we advise you to use Firefox for development and for testing the library. The main reason is that if you allow local file access inside Firefox, you will be able to try and test all the examples directly from your file system without the need to run a Web server, which is very convenient.
Since Firefox version 3 you need to change one of the security settings to give access to local file system URLs to the XMLHttpRequest object. For that purpose open the about:config URL inside your browser and set security.fileuri.strict_origin_policy to false (with one click).
Source: http://kb.mozillazine.org/Security.fileuri.strict_origin_policy
Last update: Stéphane Sire, May 20 2010