After hearing all the buzz about Ajax, I decided to integrate my existing Struts application
with Ajax. So, I surfed around looking for some good Ajax tools. Initially, I was looking at Prototype as it seems to be the most dominant Ajax platform. Then, I found Rico. Rico is an open-source JavaScript library for creating rich internet applications. This toolset contains a ton of great user-driven functionalities such as Ajax, drag-and-drop, cinematic effects, and much more.
Now I have to study Rico and learn how it can be integrated with my existing Struts application. The process for integrating with Rico is a bit tricky – the documentation lacking information. They only provide code snippets which will not work as it is. To get around with this, I extracted the actual codes from the demo and analyze the flow. It took a while to understand the flow because the codes contain other features that are not needed for the desired functionality. Anyway, I tried out the sample codes into an HTML. Once I got this working, I attached it to the jsp files. It didn’t take a long time to get it working in JSP since I had it previously working in HTML.
Tip #1: Always start with a working prototype in HTML.
In traditional Struts framework, after an action method performs its operation, it forwards to the next JSP to be displayed.
With an Ajax driven framework, the Struts action method forwards to a message.jsp instead. This jsp file displays the message to the user by updating a specific div section in the original page.
Let’s dissect the code a little more here, below are the steps to convert an existing Stuts application.
1.) Include prototype and rico javascript files in the jsp file.
2.) Register the action class and div component.
ajaxEngine.registerRequest( ‘add’, ” );
ajaxEngine.registerAjaxElement(‘responseArea’);
3.) Put a div to display the message.
function submitForm(form){
var params = convertForm(‘BankAccountForm’);
ajaxEngine.sendRequest(‘add’,{method:’post’, parameters: params,
onSuccess : function(req){// do fancy effects }});
}
5.) Create message.jsp and error.jsp that will display the appropriate messages.
6.) Change your action class to forward to message.jsp or error.jsp depending on results.
Tip#2: When debugging, you can always use the onSuccess, onTimeOut or onError methods in the Ajax call. (shown in the example above)
One problem I encountered was that the jsp response is not updating the specified div. This is because the response is populated to responseText instead of responseXML. To solve this, the jsp must be forced to return an XML content.
Tip #3: Response should be in XML form, put <%@page contentType=”text/xml”%> in your jsp.
Well, this is what I have so far. I’ll be posting other tips as I explore on this more…
One thought on “Integrating Rico with Struts”
useful stuff, thanks , appriciate if u can post more tips how to update html DOM from javascript