Accept/Render cycle in Ajax mode

If browser supports Javascript and XMLHTTPRequest object, a web component does not have to reload composite page to render an updated view. Instead, component returns a view immediately in response to input request, and the component fragment is inserted into composite page. Therefore, in Ajax mode input phase and render phase occur during one request/response sequence.

If a problem is encountered while sending an asynchronous request, the Library falls back to a regular synchronous request. The same synchronous submit occurs if Javascript is not enabled in the browser. This approach ensures that request is delivered to a component in both Ajax and non-Ajax environment.

Note: The component must produce well-formed XHTML markup.

Enabling Ajax mode for a component

Starting from version 0.6 the Library uses Behaviour.js to augment components with Ajax functionality at runtime. To make Ajax work you need to set CSS class to "jspcCommand" for INPUT, FORM and A HTML elements. When page is loaded, client-based Javascript engine assigns proper handlers to onclick, onchange and onsubmit Javascript events.

Look at the sample below. The submit button and the form itself are marked with "jspcCommand" CSS class:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c" %>
<%@ taglib uri="/WEB-INF/lib/jspcontrols.tld" prefix="jc" %>
<jc:component id="LoginComponent">
  <jc:handler event="login"> ... </jc:handler>
  <jc:handler event="logout"> ... </jc:handler>
  <jc:reload/>

  <jc:prerender> ... </jc:prerender>
  <jc:render view="notloggedin"> ... </jc:render>
  <jc:render view="loggedin">
    <h3>Log Out</h3>
    <form class="jspcCommand" action="${jspcComponentAddress}">
      Logged In As: ${sessionScope.USER}<br/>
      <input class="jspcCommand" type="submit" 
             name="logout" value="Log Out" />
    </form>
  </jc:render>
</jc:component>

A Dual-Mode Component

The Ajax-enabled web component works in both Ajax and non-Ajax environment. If the page content is not too elaborate and the browser renders a page in an off-screen buffer, you may not even notice the difference. It makes sense to always design your components as Ajax-enabled, unless the component cannot render well-formed XHTML.

While in non-Ajax mode Reload tag redirects (or forwards) to the composite page, in Ajax mode Reload tag falls through and evaluation of the page is continued. Then the Prerender tag sets the content type of the response to "text/xml". Then view is rendered and a well-formed XHTML fragment is returned to the browser. And finally, the Javascript function processes the response in the browser, and integrates returned fragment into composite page.

Component interaction in Ajax mode

Indirect interaction in non-Ajax mode is quite simple: just change the state of a certain server-side object, reload a composite page, and components dependent on that object will have rerendered themselves according to new application state. Easy.

In Ajax mode the composite page is not reloaded fully. To ensure that other components have updated their view fragments as well, you need to set them as dependants using a small piece of Javascript. This code must be placed in the composite page.

For example, assume that the composite page contains two components, login component and login status component. Every time a user logs in or logs out, we need to update user's status. This is how the dependency should be registered:

<script language="javascript">
  JSPControls.registerDependencies(
    {
      'loginComponent.jsp' : ['loginStatusComponent.jsp']
    }
  );
</script>

Remeber, that you have to use actual JSP file names. The "master" component serves as a key in associative array, the dependant components are listed as the value, which is a plain string array. Of course, it is posible to register several dependencies, for example:

<script language="javascript">
  JSPControls.registerDependencies(
    {
      'logonComponent.jsp' : ['menuComponent.jsp'],
      'localeComponent.jsp' : ['menuComponent.jsp', 'logonComponent.jsp']
    }
  );
</script>