Thursday 31 March 2011

Struts2 JQuery AjaxFORMS-1

I have taken these examples from Herr GEPPERT's showcase for Struts2-JQuery applications. My intention was to try whether they can work individually for specific purposes. The problem is you can not run struts2-jquery-showcase-2.5.3 as it is provided. There are missing files in the lib folder. But the same site provides a grid showcase which works. So, I copied the whole lib from there on to the original struts2-jquery-showcase-2.5.3 lib. It works now.

After fixing the lib problem, I returned back to the original problem I had. The examples for validation did not work healthily on struts2-jquery-showcase-2.5.0 which I had chosen to be 'safe'. So, I tried the new lib with my old problem, it worked. (I had seen Herr Geppert's note on a fix about this matter). There is also another small fix I had to do, which I will explain when I come to that matter.








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="echo" class="ARS.Echo" method="execute">
<result name="success">/echo.jsp</result>
</action>
<action name="simpleecho" class="ARS.SimpleEcho" method="execute">
<result name="success">/simpleecho.jsp</result>
</action>
<action name="ajax1">
<result>/Ajax1.jsp</result>
</action>
<action name="jsonsample" class="ARS.JsonSample" method="execute">
<result type="json"></result>
</action>
<action name="jsonsample2" class="ARS.JsonSample2" method="execute">
<result type="json"></result>
</action>
<action name="jsonlanguages" class="ARS.Jsonlanguages" method="execute">
<result type="json"><param name="root">languages</param></result>
</action>
<action name="login" class="ARS.Login" method="execute">
<interceptor-ref name="jsonValidationWorkflowStack"/>
<result name = "success">/simpleecho.jsp</result>
</action>
</package>
</struts>

AjaxForms0.jsp uses an AJAX call that targets the div formResult.
There is a field named echo of which value is copied by the
action echo to the result field.
AjaxForms0.jsp
--------------
<%--
form example from the AJAX command section
--%>

<%@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="formResult">formResult</div>
<s:form id="form" action="echo" theme="xhtml">
Echo: <s:textfield id="echo" name="echo" value="Hello World!!!"/><br/>
</s:form>

<sj:a
id="ajaxformlink"
formIds="form"
targets="formResult"
indicator="indicator"
button="true"
buttonIcon="ui-icon-gear"
>
Submit form here
</sj:a>
<img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>
</body>
</html>

The echo action trigs the echo.java of which result is fed to the result file echo.jsp. Echo.jsp is then targeted to the result field on the jsp.


Echo.java
---------
package ARS;

import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

import com.opensymphony.xwork2.ActionSupport;

public class Echo extends ActionSupport {

private static final long serialVersionUID = 7968544374444173511L;
private static final Log log = LogFactory.getLog(Echo.class);

private String echo;
private boolean escape = true;

public String execute() throws Exception
{

log.info("Echo : " + echo);

return SUCCESS;
}

public String getEcho()
{
return echo;
}

public void setEcho(String echo)
{
this.echo = echo;
}

public boolean isEscape()
{
return escape;
}

public void setEscape(boolean escape)
{
this.escape = escape;
}
}

Echo.jsp
--------
<%@ taglib prefix="s" uri="/struts-tags"%>
<p>Echo : <s:property value="echo" escape="%{escape}"/></p>


This is a simple repetition in Herr Geppert's examples. simpleecho is not simpler than echo I guess.

AjaxForms1.jsp
--------------
<%--
AJAX Forms

--%>

<%@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="formResult">formResult</div>
<s:form id="form" action="echo" theme="simple" cssClass="yform">
<fieldset>
<legend>AJAX Form</legend>
<div class="type-text">
<label for="echo">Echo: </label>
<s:textfield id="echo" name="echo" value="Hello World!!!"/>
</div>
<div class="type-button">
<sj:submit
id="formSubmit1"
targets="formResult"
value="AJAX Submit"
indicator="indicator"
button="true"
/>
<s:url id="simpleecho" value="/simpleecho.action"/>
<sj:submit
id="formSubmit2"
href="%{simpleecho}"
targets="formResult"
value="AJAX Submit 2"
indicator="indicator"
button="true"
/>
</div>
</fieldset>
</s:form>
</body>
</html>

SimpleEcho.java
---------------
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

package ARS;

import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.convention.annotation.Result;

import com.opensymphony.xwork2.ActionSupport;

public class SimpleEcho extends ActionSupport {

private static final long serialVersionUID = 6999864671102333041L;
private String echo;
private boolean escape = true;

public String execute() throws Exception
{
return SUCCESS;
}

public String getEcho()
{
return echo;
}

public void setEcho(String echo)
{
this.echo = echo;
}

public boolean isEscape()
{
return escape;
}

public void setEscape(boolean escape)
{
this.escape = escape;
}
}

Addition of effects etc cosmetic changes.

AjaxForms2.jsp
--------------
<%--
AJAX Forms with Effects

--%>

<%@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="result"></div>
<s:form id="formEffect" action="echo" theme="xhtml">
<s:textfield id="echo" name="echo" label="Echo" value="Hello World!!!"/><br/>
<sj:submit
targets="result"
effect="slide"
effectMode="blind"
onEffectCompleteTopics="hideTarget"
value="AJAX Submit"
indicator="indicator"
button="true"
/>
</s:form>
<img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/> </body>

</html>

AjaxForms3.jsp
--------------
<%--
AJAX Forms with Outside Button

--%>

<%@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="result">formResult</div>
<s:form id="formOutside" action="echo" theme="simple" cssClass="yform">
<fieldset>
<legend>AJAX Form with Button outside</legend>
<div class="type-text">
<label for="echo">Echo: </label>
<s:textfield id="echo" name="echo" value="Hello World!!!"/><br/>
</div>
</fieldset>
</s:form>

<sj:submit
formIds="formOutside"
targets="result"
effect="pulsate"
value="Submit outside the Form"
indicator="indicator"
button="true"
/>
</body>
</html>

The events are interesting. It is pretty straight forward, you create the JSP and it works.

AjaxForms4.jsp
--------------
<%--
AJAX Forms with Events

--%>

<%@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/>
<script type="text/javascript" charset="utf-8">
$.subscribe('beforeForm', function(event,data) {
var fData = event.originalEvent.formData;
alert('About to submit: \n\n' + fData[0].value + ' to target '+event.originalEvent.options.target+' with timeout '+event.originalEvent.options.timeout );
var form = event.originalEvent.form[0];
if (form.echo.value.length < 2) {
alert('Please enter a value with min 2 characters');
event.originalEvent.options.submit = false;
}
});
$.subscribe('completeForm', function(event,data) {
alert('status: ' + event.originalEvent.status + '\n\nresponseText: \n' + event.originalEvent.request.responseText +
'\n\nThe output div should have already been updated with the responseText.');
});
$.subscribe('errorStateForm', function(event,data) {
alert('status: ' + event.originalEvent.status + '\n\nrequest status: ' +event.originalEvent.request.status);
});
</script>
</head>
<body>
<div id="result">formResult</div>
<s:form id="formevent" action="echo" theme="simple" cssClass="yform">
<fieldset>
<legend>AJAX Form</legend>
<div class="type-text">
<label for="echo">Echo: </label>
<s:textfield id="echo" name="echo" value="Hello World!!!"/>
</div>
<div class="type-button">
<sj:submit
targets="result"
value="AJAX Submit"
timeout="2500"
indicator="indicator"
onBeforeTopics="beforeForm"
onCompleteTopics="completeForm"
onErrorTopics="errorState"
button="true"
/>
</div>
</fieldset>
</s:form>

<img id="indicator" src="images/indicator.gif" alt="Loading..." style="display:none"/>

<s:form id="formeventerror" action="file-does-not-exist.html" theme="simple" cssClass="yform">
<fieldset>
<legend>AJAX Form with Error Result</legend>
<div class="type-text">
<label for="echo">Echo: </label>
<s:textfield id="echo" name="echo" value="Hello World!!!"/>
</div>
<div class="type-button">
<sj:submit
targets="result"
value="AJAX Submit with Error"
timeout="2500"
indicator="indicator"
onBeforeTopics="beforeForm"
onCompleteTopics="completeForm"
onErrorTopics="errorState"
button="true"
/>
</div>
</fieldset>
</s:form>
</body>
</html>