Spring Roo定制web界面

September , 2011 | Posted by admin | No Comments

分享：QQ空間開心人人新浪淘江湖豆瓣騰訊微博搜狐微博

Spring Roo有很多功能：
Shell構(gòu)建項(xiàng)目是很有效的
代碼同步
自動代碼生成

上面的列表中，我認(rèn)為最有用的是：JSP(x)視圖的Tagx庫。假設(shè)你已經(jīng)對Spring Roo有所熟悉了。更多關(guān)于Spring Roo，請?jiān)L問它的網(wǎng)站：http://www./roo。

Nutshell Tagx庫

Tagx庫是由Web MVC附帶安裝的。Spring Roo支持實(shí)體類的控制器和視圖?？蓜?chuàng)建帶視圖的tagx庫組件。參考文檔，請閱讀

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

開門見山

文章參考World Almanac網(wǎng)站實(shí)現(xiàn)的表單。World Almanc是群組web應(yīng)用創(chuàng)建成員之一，創(chuàng)建的web應(yīng)用體驗(yàn)了Spring Roo發(fā)展。示例鏈接在https:///showcases。目的是實(shí)現(xiàn)典型的web開發(fā)要求。

問題是：我需要定義一個列表，列表的內(nèi)容時國家旗幟圖像。組件是按照字符和數(shù)字放入網(wǎng)格的方式組織的。表單分頁瀏覽，如下圖所示。這個功能實(shí)現(xiàn)了World Almanac的整體概覽視圖。另外，我要附加一個點(diǎn)擊事件，實(shí)現(xiàn)導(dǎo)航到各個國家的詳細(xì)信息頁面。

表單提供了兩個選擇控制，實(shí)現(xiàn)對視圖中顯示國家的過濾。Roo選擇了帶有action的按鈕。這個例子中，我刪除帶有action的按鈕，過濾的操作是由選擇觸發(fā)的。我不必從頭開始。只是修改了Roo產(chǎn)生的源代碼。Roo非常棒！



以下是填充國家旗幟瀏覽視圖。這里有很多的定制代碼，但仍然可以看出有Roo創(chuàng)建的框架。

<?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>

下一步，要示范的是點(diǎn)擊旗幟之后導(dǎo)航到詳細(xì)表單信息的功能。WorldAlmanac輕易地將谷歌地圖整合進(jìn)去，它使用了存儲在數(shù)據(jù)庫中的經(jīng)/維度填充了國家地圖。所有元素一起創(chuàng)建了很好的整體！

詳細(xì)的國家信息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>

總結(jié)

這篇文章介紹了Spring Roo Web MVC附帶功能實(shí)現(xiàn)定制。我發(fā)現(xiàn)Jspx標(biāo)注非常有表達(dá)效果和直接。tagx庫是可調(diào)整的并且是容易擴(kuò)展的。Jspx是XML文檔。我必須要說的是，開始覺得很麻煩之后開始喜歡這樣的工具。

相比Javascript和Ajax，Spring Roo Web MVC視圖比較簡單而且更少交互。然而，我相信他們在很多的市場需要方面還是非常有用的。我們看到的渲染效果，Roo的視覺效果和感覺都能完全地更改以符合UI/Web設(shè)計(jì)需要。