Spring Roo定制web界面 | Easyigloo

Spring Roo定制web界面

September , 2011 | Posted by admin | No Comments

分享：QQ空间开心人人新浪淘江湖豆瓣腾讯微博搜狐微博

Spring Roo有很多功能：
Shell构建项目是很有效的
代码同步
自动代码生成

上面的列表中，我认为最有用的是：JSP(x)视图的Tagx库。假设你已经对Spring Roo有所熟悉了。更多关于Spring Roo，请访问它的网站：http://www./roo。

Nutshell Tagx库

Tagx库是由Web MVC附带安装的。Spring Roo支持实体类的控制器和视图。可创建带视图的tagx库组件。参考文档，请阅读

http://static./spring-roo/reference/html/base-web.html.

开门见山

文章参考World Almanac网站实现的表单。World Almanc是群组web应用创建成员之一，创建的web应用体验了Spring Roo发展。示例链接在https:///showcases。目的是实现典型的web开发要求。

问题是：我需要定义一个列表，列表的内容时国家旗帜图像。组件是按照字符和数字放入网格的方式组织的。表单分页浏览，如下图所示。这个功能实现了World Almanac的整体概览视图。另外，我要附加一个点击事件，实现导航到各个国家的详细信息页面。

表单提供了两个选择控制，实现对视图中显示国家的过滤。Roo选择了带有action的按钮。这个例子中，我删除带有action的按钮，过滤的操作是由选择触发的。我不必从头开始。只是修改了Roo产生的源代码。Roo非常棒！



以下是填充国家旗帜浏览视图。这里有很多的定制代码，但仍然可以看出有Roo创建的框架。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<div xmlns:jsp="http://java./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./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>

下一步，要示范的是点击旗帜之后导航到详细表单信息的功能。WorldAlmanac轻易地将谷歌地图整合进去，它使用了存储在数据库中的经/维度填充了国家地图。所有元素一起创建了很好的整体！

详细的国家信息JSP代码

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<div
 xmlns:field="urn:jsptagdir:/WEB-INF/tags/form/fields"
 xmlns:jsp="http://java./JSP/Page"
 xmlns:page="urn:jsptagdir:/WEB-INF/tags/form"
 version="2.0"
 xmlns:spring="http://www./tags"
 xmlns:c="http://java./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>

总结

这篇文章介绍了Spring Roo Web MVC附带功能实现定制。我发现Jspx标注非常有表达效果和直接。tagx库是可调整的并且是容易扩展的。Jspx是XML文档。我必须要说的是，开始觉得很麻烦之后开始喜欢这样的工具。

相比Javascript和Ajax，Spring Roo Web MVC视图比较简单而且更少交互。然而，我相信他们在很多的市场需要方面还是非常有用的。我们看到的渲染效果，Roo的视觉效果和感觉都能完全地更改以符合UI/Web设计需要。