Friday, 25 March 2011

Struts2 - Jquery AJAX tutorial1

This is a simplified, easy to understand version of AJAX events section from the STRUTS2 JQUERY PLUGIN SHOWCASE-2.5.0 of Johannes Geppert Hosted by weinfreund.de. The difference is GEPPERT has provided all the examples in the frameworks of a showcase using STRUTS2-convention, velocity, YAML, Maven and others.

My approach is to minimize the external connections, make each example independent and break the big pieces to smaller ones. Each of the pieces I provide will work alone and I will provide complete and working examples. I made a few additions when it is unavoidable.

Herr GEPPERT's showcase can easily be compiled and run without any problem. It was great fun to analyze and break down his work to smaller pieces. His work is very well written and logically documented, easy to understand but it is complex and it must be well deserved, a piece of art.

1- First things first. Create a Web application.
2- Create a lib and put everything in the showcases lib here. Put them into the CLASSPATH. I did not change the css and themes references to button and div definitions of Herr GEPPERT.
3- I put all the AJAX examples in a single application's WEB lib.
4- Of course I used the Struts.xml for all the actions because of 3.
5- Web.xml is different from Herr GEPPERT's. He uses convention and I use the classic STRUTS2.

Here are :

web.xml
---------
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>Basic_Struts2_Ant</display-name>
<welcome-file-list>
<welcome-file>/test.action</welcome-file>
</welcome-file-list>


<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>

<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

</web-app>

struts.xml
----------
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

<constant name="struts.devMode" value="true" />

<package name="basicstruts2" extends="struts-default, json-default">

<action name="index">
<result>/index.jsp</result>
</action>
<action name="AjaxTest">
<result>/data_server.jsp</result>
</action>
<action name="myremoteactionone">
<result>/data_server.jsp</result>
</action>
<action name="myremoteactiontwo">
<result>/data_server.jsp</result>
</action>
<action name="myremoteactionthree">
<result>/data_server.jsp</result>
</action>
<action name="myremact1">
<result>/index.jsp</result>
</action>
<action name="myremact2">
<result>/index.jsp</result>
</action>
<action name="myremact3">
<result>/index.jsp</result>
</action>
<action name="myremoteaction">
<result>/data_server.jsp</result>
</action>
<action name="ajax1">
<result>/data_server1.jsp</result>
</action>
<action name="ajax2">
<result>/data_server2.jsp</result>
</action>
<action name="ajax3">
<result>/data_server3.jsp</result>
</action>
<action name="ajax4">
<result>/data_server4.jsp</result>
</action>
<action name="echo" class="ARS.Echo" method="execute">
<result name="success">/echo.jsp</result>
</action>
<action name="jsonlanguages" class="ARS.Jsonlanguages" method="execute">
<result type="json"><param name="root">languages</param></result>

</action>
</package>

</struts>

I used a very simple data server JSP file.

data_server.jsp
---------------
<%--
Document : data_server
Created on : 19.Mar.2011, 21:10:39
Author : Ali Riza SARAL
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<%
out.println("Hello world!");
%

Later I moved to Herr GEPPERT's approach. Namely just a few words as data in the JSP.
All four of them are the same. You can change and play with them.

data_server1.jsp
data_server2.jsp
data_server3.jsp
data_server4.jsp
----------------
test ARS

You have to right click on AjaxTest.jsp and then RUN this file to test our first example.

The first AJAX example targets a div namely div1. The related action is AjaxTest.action which can be tracked at the struts.xml to data_server.jsp which
returns "Hello World!". This phrase is written to the target div1 area.

Please note the use of the struts URL tag.

AjaxTest.jsp
------------
<%--
Document : testAJAX
Created on : 15.Mar.2011, 20:08:02
Author : Ali Riza SARAL
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>
</head>
<body>
<div id="div1">Div 1</div>
<s:url id="ajaxTest" value="/AjaxTest.action"/>
<sj:a id="link1" href="%{ajaxTest}" targets="div1"> Update Content </sj:a>
<br>
<br>
<s:url id="ajax" value="ajax1.action"/>

<sj:a id="ajaxlink"
href="%{ajax}"
targets="result"
indicator="indicator"
button="true"
buttonIcon="ui-icon-refresh"
>
Run AJAX Action
</sj:a>
<br>
<br>
<s:url id="ajax2" value="ajax1.action"/>
<sj:a id="ajaxlink2"
href="%{ajax2}"
targets="div1"
indicator="indicator2"
button="true"
buttonIcon="ui-icon-refresh"
>
Run AJAX Action2
</sj:a>



</body>
</html>

The second example AjaxTest2.jsp

AjaxTest2.jsp
--------------
<%--
Document : testAJAX
Created on : 15.Mar.2011, 20:08:02
Author : Ali Riza SARAL
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
<head>
<sj:head/>
</head>
<body>
<strong>Result Div 1 :</strong>
<div id="result1" class="result ui-widget-content ui-corner-all">Click on the link bellow.</div>
<strong>Result Div 2 :</strong>
<div id="result2" class="result ui-widget-content ui-corner-all">Click on the link bellow.</div>

<s:url id="ajax" value="/ajax3.action"/>
<sj:a
id="ajaxlink"
href="%{ajax}"
targets="result1,result2"
button="true"
buttonIcon="ui-icon-gear"
>
Run AJAX Action
</sj:a>


</body>
</html>
Posted by at