Easy Ajax using Struts 2

From Kb

Jump to: navigation, search

Contact Article Author | Blog of Article Author | FirstPartners.net Home | LinkedIn profile of Author

Contents

[edit] See Also

[edit] Summary

Struts 2 makes it easy to implement and test an Ajax Java Web application, using standard javascript frameworks such as Prototype. This wiki article gives technical notes on how to kickstart your Ajax Java development.

[edit] Relevant Pages

Wiki

Blog

Whitepaper

Java.Net Article


[edit] Setting up Struts 2

  • Use Apache Showcase (Blank War file , with Struts 2 already setup) from the Apache Struts2 site

or

  • Use the excellent Appfuse to give you Struts2 pre-integrated with Spring, Hibernate and Maven.
    • Struts2 Appfuse tutorial - although this makes more sense if you follow the full appfuse tutorial (e.g. Database, Hibernate,Spring then Struts2)

[edit] Familar Parts (similar to Struts 1)

  • struts.xml
    • Slightly simplifed from Struts 1, but instantly understandable.
    • create two views
      • one traditional page
      • one (sub) that we will use for ajax (the content that will be returned by the ajax call to the server)

Extract from Struts.xml 

<!-- just view the (advanced) search page-->
      <action name="displayMainPage" class="net.firstpartners.MyStrutsAction" method="prepare">
            <result name="input">/WEB-INF/pages/someMainPage.jsp</result>
            <result name="success">/WEB-INF/pages/someMainPage.jsp</result>
            <result name="cancel" type="redirect">homePage.action</result>
        </action>
 
        <!-- just view meta information for a search-->
        <action name="ajaxCall" class="net.firstpartners.MyStrutsAction" method="handleAjax">
            <result name="input">/WEB-INF/pages/someAjaxResponsePage.jsp</result>
            <result name="success">/WEB-INF/pages/someAjaxResponsePage.jsp</result>
            <result name="cancel" type="redirect">homePage.action</result>
        </action>


  • struts action
    • the same as before - contains most of the 'do stuff' methods
    • also contains the equivalent of the ActionForm class

Extract from Struts Action Class (MyStrutsAction.java) - Action functionality 

//This method will be called later by ajax
public String handleAjax() {
 
        // Do something in respose to the ajax call
 
        //Forward to the (Ajax) JSP Page listed under 'success' in the Struts.xml
        //This page will be very simple , as all it does is replace the contents of one Div tag
        return SUCCESS;
    }
 
public String prepare() {
 
        // Do stuff to setup the values to the dropdowns etc
        this.setMyDropDown(getValuesFromSomewhere());
 
        //Forward to the JSP Page listed under 'success' in the Struts.xml
        return SUCCESS;
    }

Extract from Struts Action Class (MyStrutsAction.java) - Form functionality 

Article currentArticle;
 
    public Article getCurrentArticle() {
        return currentArticle;
    }
 
    public void setCurrentArticle(Article currentArticle) {
        this.currentArticle = currentArticle;
    }
  • JSP Pages
    • Two (Standard) JSP Pages
    • (1) Main JSP Page - display by struts as normal
    • (2) Ajax JSP Page - standard JSP page, but displayed as a result of a struts request

[edit] The New Parts (Ajax tags in Struts 2)

  • Tags include Main page
  • Struts 2 s:url tag
  • Struts 2 s:div tag

Main JSP Page -someMainPage.jsp 

<%@ include file="/common/taglibs.jsp"%>
 
.....
 
     <!-- extract from the jsp page -->
     <!-- Show the progress of the ajax call -->
     <img id="indicator1" src="${pageContext.request.contextPath}/images/indicator.gif"
         alt="Loading Info" style="display:none"/>
 
        <!-- This is the URL of the struts action we will call in the next step --> 
        <s:url id="ajaxCallUrl" value="ajaxCall.html">
            <s:param name="someParam" value="{someValueFromTheSession}"/>
        </s:url>
 
        <!-- Unless we pass any other parameters, this event will fire when the page is loaded -->
        <!-- An Ajax call will get the information from the above (ajaxCallUrl) url and        -->
        <!-- Replace the contents of the div tag (below) with whatever comes back from the server
        <s:div theme="ajax"
               href="%{ajaxCallUrl}" loadingText="Loading info..." indicator="indicator1">
 
        </s:div>


JSP Page returned as result of Ajax call-someAjaxResponsePage.jsp 

<%@ include file="/common/taglibs.jsp"%>
<%--
  This is a standard JSP Page.
  This uses static html, but you could use all the usual Struts tags for dynamic content
--%>
  <p>Place your Ajax content here</p>

[edit] Event Flow

  • Normal Struts Action request, redirect to JSP , Main JSP Page Load
  • Ajax Tags loads as part of JSP. When loaded into to the browser..
  • Ajax Div tag does a second request. To the Struts Action this is a standard request (Url mapped via Struts.xml to Action class. Redirect to JSP as specificed under 'success' in the stuts.xml tag)
  • The contents of the DIV tag are replaced with the outcome of the 2nd struts action.

(Very similar to find / replace mechanism suggested by this article , but slicker)

[edit] Advanced Struts

[edit] Other Struts 2 tags

  • run down of the other components available
  • In Progress

[edit] Kicking off ajax update event from url click / button

  • Prototype event model - from book
  • In Progress

[edit] See Also

Retrieved from "http://www.firstpartners.net/kb/index.php/Easy_Ajax_using_Struts_2"
Personal tools