JSP Controls Tag Library
 

JSP Controls Tag Library: The Component Lifecycle

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.

Initial Page Load

The accept phase in Ajax mode differs from accept phase in non-Ajax mode. The form content is serialized into a query string, and is sent to the component asynchronously.

If a problem is encountered while sending an asynchronous request, Ajax helper function returns true, and the form is submitted synchronously in a regular manner as if onsubmit handler was not defined. The same synchronous submit occurs if Javascript is not enabled in the browser. This approach ensures that the form gets submitted in both Ajax and non-Ajax environment.

Note

The Prerender tag modifies the MIME type in the response header to "text/xml", so Ajax helper could pull the needed information from the view fragment. Therefore, you have to make sure that the component produces well-formed XHTML fragment.

The Ajax helper assumes that the view fragment returned by component is enclosed within a "span" element with id uniquely identifying the component on a composite page. Ajax helper searches for an element on the page with the corresponding id and replaces its content with content of the returned fragment. XHTML does not allow to have page elements to have same IDs, so "span" element must have "_def" suffix:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="/WEB-INF/lib/jspcontrols.tld" prefix="jc" %>
<span id="LoginComponent_def">
  ...
</span>

See how the corresponding <div> placeholder wraps the included component in the composite page, index.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <body>
    <p>This paragraph is defined directly in the parent page
    and should <strong>precede</strong> the content of login control.</p>

    <div id="LoginComponent">
      <jsp:include page="loginComponent.jsp"/>
    </div>

    <p>This paragraph is defined directly in the parent page
    and should <strong>follow</strong> the content of login control.</p>
  </body>
</html>

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.

In non-Ajax mode Reload tag redirects (or forwards) to the master composite page, which reloads the page along with all included fragments.

In Ajax mode Reload tag continues the evaluation of the page. Then the Prerender tag sets the content type of the response to "text/xml". Then a Render tag returns well-formed XHTML fragment 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 complete composite page is not reloaded. To ensure that other components updated their view fragments as well, you need to set them as dependants using Attach tag. The Attach tag must be placed on top of parent composite page.