Login | Register   
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Turbocharge Your Pages with AJAX, Dojo, and Struts

Enhance users' sense of control with Dojo AJAX calls instead of page reloads. Use Dojo's AJAX API to cleanly invoke Struts actions.


advertisement
ou'd have to be developing web pages on another planet not to have heard the buzz about AJAX (asynchronous Java and XML). Judiciously employed, AJAX calls can enhance the usability of a site and add functionality to create eye-catching browser client applications. This article will show you how to use AJAX to invoke Struts actions and use Tiles to facilitate the creation of the response that updates the calling page. If you're new to Struts, Tiles, and Javascript you'll probably want to get a little background by checking out some of the tutorials or publications noted in the resources section. However, if you're up to speed on how to write Javascript and you've got some Struts and Tiles experience under your belt then you're ready to read on.

AJAX is actually not a new technology. XML-RPC calls have been around for years. Moreover, web services using SOAP received a lot of attention for a while but never reached the level of hype and intensity that AJAX has for a variety of reasons. It's hard to pinpoint any single benefit of AJAX that is the cause for such energy in the development community; however, the growing awareness of the benefits of service-oriented architectures and the powerful user interface improvements that AJAX facilitates certainly has something to do with it.

The traditional web request-response model forces a web form submission and a reload (refresh) of the entire page in order to change the data a user is viewing. In contrast, AJAX provides a mechanism for in-place modification of a subsection of the page that often is faster and less of a context shift for the user. Modern browsers create a parse-tree of all the elements on a page (this is the Document Object Model or DOM) and AJAX response processing can selectively update a subsection of the DOM, avoiding an expensive, full reload of the page from the server. The Dojo toolkit (see resources section, in the left column, for download link) is a powerful Javascript API for invoking remote resources (URLs for our purposes) and also provides a robust set of ancillary Javascript utility classes.



What You Need
--Dojo, which may be freely downloaded from http://sourceforge.net/project/showfiles.php?group_id=12867&release_id=67726.
--Basic understanding of AJAX including knowledge of Javascript and XML parsing
--Any Java Web container such as Tomcat or JBoss (Servlet spec 2.4+).
--Some knowledge of the Jakarta Struts Web framework, the Tiles Web framework, and their associated taglibs.

The ability to invoke a remote resource without a full page reload means that user interactions with a page's data can be incremental. A Web page typically uses the form tag to mark off a portion of the page to submit back to the server. The fields of the form are posted to the resource specified in the action attribute of the form tag. While Dojo does support sending or submitting a 'form node' to refresh/replace data on a page, this isn't required. (The code samples I'll be discussing shortly will demonstrate this.) The HTML spec also provides a div tag that allows for a non-form tag delimited node to be demarcated on a page. The data in the div is what is typically updated or replaced when the AJAX response is received from the server.

Dojo configuration is fairly simple. The main dojo.js Javascript resource file sits on your web server and you reference it in your pages. Including a Javascript block like the one below tells Dojo where to "find itself."

var djConfig = { baseRelativePath: "js/dojo", isDebug: true, preventBackButtonFix: false };

The isDebug flag, when set to 'true,' forces useful debug information to print to the page being loaded. The /src directory resides where this base path points ensuring that Dojo can access the libraries you reference in your scripts.

A base template can be defined in the tiles-def.xml to specify Dojo and other Javascript resource files in a reusable way. Other tiles can reuse this 'root' tile by extending. Below is the 'root' tile's definition.

<!-- Foundation Template Definitions --> <definition name="basic" path="/templates/basic.jsp"> <putList name="reusableJavascripts"> </definition>

The basic.jsp tile (see the sample code [[will add link]] accompanying this article) includes a Struts logic tag to read the argument that the tiles-def.xml 'putList' element passes to the tile.

<tiles:importAttribute scope="page"/> <tiles:useAttribute id="tileDefinedJS" name="reusableJavascripts" scope="page"/> <logic:present name="tileDefinedJS"> <logic:iterate id="tileDefinedJS" name="reusableJavascripts"> <script language="javascript" src="<bean:write name="tileDefinedJS"/>" type="text/javascript"></script> </logic:iterate> </logic:present>

Other tiles extending this base tile automatically include the appropriate Dojo Javascript resource references by passing the desired script names as additions to the reusableJavascripts list in their own tile definition in the tiles-def.xml.

<definition name="famousPeople" extends="jstemplate" > <put name="body" value="/tiles/famousPeopleList.jsp"/> <putList name="reusableJavascripts"> <add value="js/dojo/dojo.js"/> </putList> </definition>

Using Tiles to add the Javascript resource file references reduces the likelihood of typos or incorrect locations being specified inadvertently. It also makes your application more maintainable because it centralizes these definitions so developers don't have to look at individual Javascript pages to determine the .js resources being utilized.

As an aside, Dojo configuration for local development (without a web server) requires a slightly different approach. Be advised that the notation for the URI to the local Dojo resources (dojo.js) is browser sensitive. (I found this out the hard way.) The markup below (with comments) sums it up.

<!-- this form recognized by both IE and Firefox --> <script src="file:///c:/dojo-0.2.2-ajax/dojo.js" type="text/javascript" language="JavaScript1.5" ></script> <!-- this form recognized only by IE - not Firefox --> <script src="/dojo-0.2.2-ajax/dojo.js" type="text/javascript" language="JavaScript1.5" ></script>



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap