RIFE logo
This page last changed on Apr 17, 2006 by gbevin.

The DWR team has worked hard to make their project as modular as possible and to abstract it away as much as possible from the Servlet API. While their effort is still in progress and there hasn't been an official DWR release with these features yet, we already integrated a DWR snapshot with RIFE to provide easy Ajax capabilities will all the power of RIFE's element components. To make this work you have to use the DWR jar file that's shipped with the rife-sumo distribution archive.

Standard DWR Ajax element

RIFE ships with a new standard element declaration that can be accessed through the file "rife/ajax/dwr.xml".

For example:

<element id="DwrService" file="rife/ajax/dwr.xml" url="dwr/*"/>

That element will by default look for "dwr.xml" in the classpath. This is a standard DWR configuration file and you can find the details about it in their documentation.

Customize the configuration

However, you can also specify a specific DWR configuration file for each Ajax element through the xmlConfiguratorPath property.

For example:

<element id="DwrDate" file="rife/ajax/dwr.xml" url="dwr/jdate/*">
    <property name="xmlConfiguratorPath">jdate.xml</property>
    <property name="debug">true</property>
</element>

Notice the debug property which, when set to true, allows you to access the root URL of the element ("dwr/jdate/" in this case) and get a nifty DWR test page. It's recommended to turn this on during development.

Let's look at the content of this example's "jdate.xml" file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
                     "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
  <allow>
    <create creator="new" javascript="JDate">
      <param name="class" value="java.util.Date"/>
    </create>
  </allow>
</dwr>

Your element will now expose the methods of the java.util.Date class through Ajax.

Enable Ajax in your HTML

The purpose of DWR is to easily provide remote access to your Java classes and methods through Ajax. However, to access these remoted methods from within your HTML, you have to include certain Javascript files. This is very easy to do with embedded elements.

For example:

<!--V 'ELEMENT:DwrDate'-->
names = JDate
includeUtil = true
<!--/V-->

The default value of this embedded element tag is a property list, where the "name" key specifies a comma separated list that refers to the "javascript" attributes of your DWR "create" tags. The "includeUtil" key indicates whether the general purpose DWR Javascript utilities should be included or not.

The example above will generate the following Javascript inclusions. Note that as with everything in RIFE, when your element or application is relocated, the URLs will automatically adapt accordingly.

<script type="text/javascript" src="http://yoursite/dwr/jdate/interface/JDate.js"> </script>
<script type="text/javascript" src="http://yoursite/dwr/jdate/engine.js"> </script>
<script type="text/javascript" src="http://yoursite/dwr/jdate/util.js"> </script>

Use Ajax in your layout

The only thing that's now left to do is to use the newly available Javascript functions from within your layout.

The following example calls the "init" Javascript function when the page is loaded. This is only needed to setup DWR so that it shows a message while it's loading data asynchronously through Ajax.

The actual magic happens in the "update" function, which is called when the button on the page is clicked. This method uses the Javascript "JDate" class that has been generated by DWR and calls its "toGMTString" method. This method maps directly to the Java implementation on the server. The single argument, "loadinfo" refers to the function that will be called when the Ajax call returns. Here, it simply displays the data in the HTML span tag with the id "reply".

<script type="text/javascript">
    function update() {
        JDate.toGMTString(loadinfo);
    }
       
    function loadinfo(data) {
        DWRUtil.setValue("reply", data);
    }
     
    function callOnLoad(init) {
        if (window.addEventListener) window.addEventListener("load", init, false);
        else if (window.attachEvent) window.attachEvent("onload", init);
        else window.onload = init;
    }
 
    function init() {
        DWRUtil.useLoadingMessage();
    }
     
    callOnLoad(init);
</script>
<div class="content">
    <p>Current date: <input value="Execute" type="button" onclick="update()"/>
    <span id="reply" style="background:#eeffdd; padding-left:4px; padding-right:4px;"></span></p>
</div>
Document generated by Confluence on Oct 19, 2010 14:56