Spring Roo: Customizing Web MVC UI Forms

There are many features that I like from Spring Roo:

• The shell is very effective for constructing projects -with a helpful tab completion-
• Round-trip is essential to keep the code in sync
• Code generation without “unnecessary abstractions” is refreshing -although version 1.1.2 might bring some of them back- just to mention a few.

At the top of the list, I am placing, what I consider the jewel-of-the-crown: The Tagx library for JSP(x) views. The article assumes some familiarity with Spring Roo. For more information on Spring Roo visit its website at http://www.springsource.org/roo.

Tagx Library in a Nutshell

The tagx library is installed by the Web MVC add-on. Spring Roo scaffolds controllers and views from entities classes. Views are created with components from the tagx library. Please read reference document at http://static.springsource.org/spring-roo/reference/html/base-web.html for a complete description.

Without further ado. Straight to business.

This article refers to forms implemented in World Almanac by jD website. World Almanac is a member of a group of web apps created to experiment with Spring Roo development. The link of the showcases website is at https://pragmatikroo.org/showcases. The purpose is to implement typical web development requirements beyond the CRUD scope. This is the problem to work on: I need to customize a list.tagx component to render country flag images. Typically this component renders strings and numbers inside a grid. The form will be paginated for easy navigation, as shown in the image below. This functionality provides a World Almanac galleria view Additionally, I want to attach a click event for navigating to a country detail page. The form provides two select controls for enabling counties filtering. The form is paginated and navigated the same way a typical list.jspx form is. Typically Roo select buttons are associated with an action button. In this case, I remove them and the filtering action is triggered by a choice select. I didn’t have to start from scratch. I just tweaked Roo generated source code. Roo is great!. Below is the source code that renders the flag country gallery view. There is a lot of customization here. However you can still see the skeleton of the original scaffold form created by Roo. Paginated Gallery JSPx code

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<div xmlns:jsp="http://java.sun.com/JSP/Page"
	xmlns:page="urn:jsptagdir:/WEB-INF/tags/form"
	xmlns:table="urn:jsptagdir:/WEB-INF/tags/form/fields" version="2.0"
	xmlns:field="urn:jsptagdir:/WEB-INF/tags/form/fields"
	xmlns:form="urn:jsptagdir:/WEB-INF/tags/form"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions">
	
    
<script type="text/javascript">
    <![CDATA[
       
       function selectIt( aName ){
    	   var selectContinentPage="/worldAlmanac/countrys";
    	   document.body.innerHTML = '<form id="dynForm" action='+
    	                                 selectContinentPage+ 
    	                                 '  method="get">'+
    	                                 '<input type="hidden" name="find" value="gallery" />'+
    	                                 '<input type="hidden" name="\page" value="1" />'+
    	                                 '<input type="hidden" name="\size" value="50" />'+
    	                                 '<input type="hidden" name="'+aName.name+'" value="'+aName.value+'" />'+
    	                               '</form>';
           document.getElementById("dynForm").submit();
        }
        ]]>
    </script>

<jsp:output omit-xml-declaration="yes" /> 
 <div id="wrapperTop">
                  <input name="btnBack" title="Previous Page"
                    onMouseOver="window.status='Previous Page'; return true"
                    onMouseOut="window.status=''; return true"
                    onclick="location.href = '/worldAlmanac'"
                    type="button" value="Previous Page"/>
  </div>

	<page:list id="pl:org.josean.rooworld.domain.Country" 
	           items="${countrys}">
	<div>
		<div style="float: left; width: 60%;">
		
		      <field:select     disableFormBinding="true" 
				              id="f:org.josean.rooworld.domain.Country.continent"
				              items="${continent}" 
				              field="continent" 
				              path="/countrys"  
				              onchange="selectIt(this);"/>
		
		</div>
		<div>
			<field:select disableFormBinding="true"
				         id="f:org.josean.rooworld.domain.Country.region" 
				         items="${region}"
				         field="region" 
				         path="/countrys" 
				         onchange="selectIt(this);" />
		 </div>
	</div>

	<table:gallery data="${countrys}"
		id="l:org.josean.rooworld.domain.Country" path="/countrys"
        title="Click on image to select country info" page="${page}" size="${size}"
		typeIdFieldName="code" pageid="page" sizeid="size" delete="false"
		update="false" create="false" select="false" show="false"
		anchorURL="/countrys?find=gallery">
		<table:column id="c:org.josean.rooworld.domain.Country.code"
			type="img" property="code"  />

	</table:gallery>
		
</page:list>

<script type="text/javascript">
    <![CDATA[

             function applyStateControl(aControl, anItem){
         
                var option = aControl.getElementsByClassName("HTMLOptionElement");
                for( i=0; i<aControl.options.length;i++){
                     if(aControl.options.item(i).value==anItem)
                         break;
                    }
                aControl.options.item(i).defaultSelected=true;
             }
             var selectedItem= window.location.search;
             var cIndex = selectedItem.indexOf("continent");
             var rIndex = selectedItem.indexOf("region");
             if(cIndex>-1){
                 var continent= selectedItem.substring( cIndex+10, selectedItem.length);
                 var control = document.getElementById("_continent_id");
                 applyStateControl(control, continent);
                 
             }
             else if (rIndex>-1){
            	  var region= selectedItem.substring( rIndex+7, selectedItem.length);
                  var control = document.getElementById("_region_id");
                  applyStateControl(control, region);
             }
          
     ]]>
    </script>
</div>
Code language: HTML, XML (xml)

Next, I show the country detail form navigated after clicking its flag. WorldAlmanac integrates easily Google Maps as well. It renders the country map using its latitude/longitude stored in the database. All elements together create a nice composition.! Detailed Country JSPx code

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<div
 xmlns:field="urn:jsptagdir:/WEB-INF/tags/form/fields"
 xmlns:jsp="http://java.sun.com/JSP/Page"
 xmlns:page="urn:jsptagdir:/WEB-INF/tags/form"
 version="2.0"
 xmlns:spring="http://www.springframework.org/tags"
 xmlns:c="http://java.sun.com/jsp/jstl/core">
  <jsp:output omit-xml-declaration="yes" />

  <spring:url
   value="http://maps.google.com/maps/api/js?sensor=false"
   var="google_map_url" />

  <spring:url
   value="/static/js/googleMap.js"
   var="tmp_map_url" />

  <c:set
   var="map_url"
   value="uri:/${tmp_map_url}" />

<script
 type="text/javascript"
 src="${google_map_url}">
</script>

<script
 src="${tmp_map_url}"
 type="text/javascript">
</script>

  <page:show
   id="ps:org.josean.rooworld.domain.Country"
   object="${country}"
   z="3tU6/DN2doNWT+sTLgEAZR7U8hk=">
    <table
     width="100%;">
      <tr>
        <td
         width="50%">
          <field:display
           field="code"
           id="s:org.josean.rooworld.domain.Country.code"
           object="${country}"
           type="img"
           z="?"
           label="Flag" />
          <field:display
           field="name"
           id="s:org.josean.rooworld.domain.Country.name"
           object="${country}"
           z="FAyyuD7aX42uNNgL4e7tS//taRI=" />
          <field:display
           field="continent"
           id="s:org.josean.rooworld.domain.Country.continent"
           object="${country}"
           z="fSpvsKUctolI0akJTZzYHoOwueo=" />
          <field:display
           field="region"
           id="s:org.josean.rooworld.domain.Country.region"
           object="${country}"
           z="z7xfg8bZs8LFPftHWVjP45HdpGI=" />
          <field:display
           field="surfaceArea"
           id="s:org.josean.rooworld.domain.Country.surfaceArea"
           object="${country}"
           z="7C7ri5E3jCruBij5X5iEJqh4g1k=" />
          <field:display
           field="indepYear"
           id="s:org.josean.rooworld.domain.Country.indepYear"
           object="${country}"
           z="EZL1ubZ/J9SiMbCUfokjr1OoDKA=" />

          <field:display
           field="population"
           id="s:org.josean.rooworld.domain.Country.population"
           object="${country}"
           z="kqB3gvDWozV4lRD2m/S/6tpw2rE=" />
          <field:display
           field="lifeExpectancy"
           id="s:org.josean.rooworld.domain.Country.lifeExpectancy"
           object="${country}"
           z="6Sj9b9rtuCZd1V5oNnz7gmAaQkI=" />
          <field:display
           field="gnp"
           id="s:org.josean.rooworld.domain.Country.gnp"
           object="${country}"
           z="cQC9QwBNccJoYP9+xn4nAakFVVk=" />
          <field:display
           field="gnpold"
           id="s:org.josean.rooworld.domain.Country.gnpold"
           object="${country}"
           z="AKqXyf8qWGWBU0HwUSIvnnLzZeE=" />
          <field:display
           field="localName"
           id="s:org.josean.rooworld.domain.Country.localName"
           object="${country}"
           z="jYwa2XCaRe58W9ae45HLAaLlt7A=" />
          <field:display
           field="govermentForm"
           id="s:org.josean.rooworld.domain.Country.govermentForm"
           object="${country}"
           z="N9WckigFkEM6lBgGaHR3QG13Lq4=" />
          <field:display
           field="capital"
           id="s:org.josean.rooworld.domain.Country.capital"
           object="${country}"
           z="JRQSSvwHoOt1d2yff5JeK7NDn0k=" />
          <field:display
           field="code2"
           id="s:org.josean.rooworld.domain.Country.code2"
           object="${country}"
           z="gIR7Z72tUJCdEBJHExd4FLG1ze0=" />
          <field:display
           field="headofState"
           id="s:org.josean.rooworld.domain.Country.headofState"
           object="${country}"
           z="EmNqI9StH4djy7tAZsVKe3+VJ+A=" />
          <field:display
           field="latitude"
           id="s:org.josean.rooworld.domain.Country.latitude"
           object="${country}"
           z="?" />
          <field:display
           field="longitude"
           id="s:org.josean.rooworld.domain.Country.longitude"
           object="${country}"
           z="?" />
          <page:find
           reportParam="${country.code}"
           path="/pdf/countryReport"
           id="c:report"
           buttonLabel="Pdf Report" />
        </td>
        <td>
          <div
           id="map_canvas"
           style="width: 400px; height: 550px;">
            <button
             onclick="initialize();">Show Map</button>
          </div>
        </td>
      </tr>
    </table>
  </page:show>
</div>
Code language: HTML, XML (xml)

That is it!

Conclusion

This article has shown a customization example using code originally started from the scaffold one created by the Spring Roo Web MVC add-on. I found the Jspx notation very expressive and intuitive. The tagx library is ample and easily to extend if needed. Jspx are XML documents, consequently they are validated against wellness. I have to say that this annoyed me in the beginning but after a short time, I got used to and started to like it. Not to mention the benefits of having forms error checking. Spring Roo Web MVC views are simpler and less interactive their contra-parts based heavily in Javascript and Ajax. However, I believe they are very useful in a variety of Web Development projects and plenty of market for them. As the Reader can see, the look and feel of a Roo created app can totally be change to meet any UI/Web design requirement. This code example was create Spring Roo 1.1.0.M1.