AJAX on a shoestring
In the following section we will use XRL to build a componentized bare-bones AJAX application. You can try the application here...
http://localhost:8080/workbench/xrldemo/part5/index
.
Each of the coloured boxes is an XHTML fragment which is dynamically loaded into the page when a button is pressed. This very simple
example shows all the features needed to build more elaborate AJAX-style applications. So let's examine the structure...
Template Framework
Here are the links which provide the framework for the application. The main structure is identical to the previous examples. Also
present are some links to static resources - including a set of coloured box widgets, an AJAX javascript fragment and the buttons...
<links basepath="ffcpl:/workbench/xrldemo/">
<link>
<name>index5</name>
<ext>/part5/index</ext>
<int>active:xrl+template@xrl:part5-template+content@xrl:part5-content</int>
<args>links</args>
</link>
<link>
<name>part5-template</name>
<int>ffcpl:/xrldemo/part5/template.xml</int>
</link>
<link>
<name>part5-content</name>
<int>ffcpl:/xrldemo/part5/content.xml</int>
</link>
<!---->
<link>
<name>red-box</name>
<ext>/widgets/red-box</ext>
<int>ffcpl:/xrldemo/widgets/red-box.xml</int>
</link>
<link>
<name>green-box</name>
<ext>/widgets/green-box</ext>
<int>ffcpl:/xrldemo/widgets/green-box.xml</int>
</link>
<link>
<name>blue-box</name>
<ext>/widgets/blue-box</ext>
<int>ffcpl:/xrldemo/widgets/blue-box.xml</int>
</link>
<link>
<name>buttons</name>
<int>ffcpl:/xrldemo/widgets/buttons.xml</int>
</link>
<link>
<name>ajax-script</name>
<int>ffcpl:/xrldemo/widgets/ajax-script.xml</int>
</link>
</links>
Here is the template. Note that this has two includes . The first is an include for the AJAX javascript. The second is for the xrl:content.
<html xmlns:xrl="http://1060.org/xrl">
<body>
<h1>Part5 Template</h1>
<xrl:include href="xrl:ajax-script" />
<xrl:include href="xrl:content" />
</body>
</html>
The main content resource provides an inner-framework for the application. The xrl:buttons resource is included. A named div block contains
a default red-box include xrl:red-box.
<div xmlns:xrl="http://1060.org/xrl" style="background-color: silver; padding:10px;">
<div>Part 5 Content</div>
<div>
<xrl:include href="xrl:buttons" />
</div>
<div id="box">
<xrl:include href="xrl:red-box" />
</div>
</div>
The buttons resource is simply a table of buttons...
<div xmlns:xrl="http://1060.org/xrl">
<table>
<tr>
<td>
<button name="red" onclick="javascript:loadResource('[[xrl:red-box]]', 'box')" type="button" value="red" xrl:resolve="onclick">RED</button>
</td>
<td>
<button name="green" onclick="javascript:loadResource('[[xrl:green-box]]', 'box')" type="button" value="green" xrl:resolve="onclick">GREEN</button>
</td>
<td>
<button name="blue" onclick="javascript:loadResource('[[xrl:blue-box]]', 'box')" type="button" value="blue" xrl:resolve="onclick">BLUE</button>
</td>
</tr>
</table>
</div>
However, note that each button has an xrl:resolve attribute which is used to indicate to the XRL runtime that it should dynamically parse
the onclick attribute and perform URI substitutions for the links enclosed in double square brackes. So for example the reference [[xrl:red-box]] in...
onclick="javascript:loadResource('[[xrl:red-box]]', 'box')"
You will see if you examine the XHTML source in your browser, that this attribute is parsed and transformed to
onclick="javascript:loadResource('/workbench/xrldemo/widgets/red-box', 'box')"
Link substitution is a capability of XRL that provides flexible decoupling between the client-side URL address space and the implementing server-side
URI address space of the mapper and XRL application.
AJAX at work
The simple client-side AJAX javascript which is dynamically pulled into the template is shown here...
<script language="javascript" type="text/javascript">
<!----></script>
When any button is pressed, the onclick attribute causes the loadResource() method to be called. This initiates an HTTP request for the coloured box widget
referenced in the href argument of the method.
We saw above, that in each case an href value was dynamically substituted into the button widget
during the XRL recursion and, due to its external link URI, each widget is accessible as a resource through
the mapper. For example here
is the redbox fragment.
Once the Javascript HTTP request for the widget has been returned it is placed into the container div block with id='box' and the browser automatically
reflows the rendered XHTML to show this.