Home > Technologies > Ajax — 新手上路 (using Appfuse 1.9)

Ajax — 新手上路 (using Appfuse 1.9)

February 15, 2006 (Wednesday) Leave a comment Go to comments

昨天發現 Appfuse 出了 Release 1.9,其中一個重大的改進就是內建 DWR,也就是 Appfuse 內建支援 Ajax。原本還想說要在 Appfuse 1.8.2 版中自行加入 DWR 支援,現在看來是晚了一步了。

這次是便用 Appfuse 的 SpringMVC version,主要也是看上 DWR 的 Spring Integration 可以直接呼叫 Spring bean。理論就不在這裡多說了,請自行參考 DWR 或相關網站。

Appfuse 1.9 雖然支援 Ajax,不過可惜的是沒看到範例,也沒有 guideline 告訴你怎麼做。只好去看 DWR 的 doc,可惜 DWR Spring Integration 那個部份講得太模糊,還好有一篇介紹 Your first CUP of DWR,基本上我是 follow 這篇在做的,技巧上也沒有超出它的範圍,只是我以 Appfuse 為基礎來做會比較快設定好。如果你不是用 Appfuse,就請以該篇文章為主去操作。

其實相關的東西 Appfuse 早就設定好了,唯一要改的就是 dwr.xml,在 /web/WEB-INF/ 內。以下是把預設的 dwr.xml 註解拿掉之後的設定:

<dwr>
    <allow>
        <create creator="spring" javascript="UserManager">
            <param name="beanName" value="userManager"/>
            <include method="getUsers"/>
        </create>
        <convert converter="bean" match="idv.scw.test.springmvc.model.User"/>
    </allow>
</dwr>

內容很簡單,說明了 UserManager.js 會對到 Spring bean userManager,可用的 method 是 getUsers。設定後照正常方式起動 Application。

連線 http://[server-host]:[server-port]/[application-name]/dwr/ 會出現一個 DWR 的 debug 畫面。這個非常重要,不知道的笨笨的在試 Javascript 會昏倒。進入畫面應該看到 UserManager 這個 class 可以呼叫,點選會跟你說裡面可用的 method 有哪些,並且可以試用看看,上面還有說明要怎麼使用。

現在正式來使用 Ajax,在你希望有 Ajax 功能的那個 jsp 裡加入:

<script type="text/javascript" src="<c:url value="/dwr/interface/UserManager.js"/>"></script>
<script type="text/javascript" src="<c:url value="/dwr/engine.js"/>"></script>
<input type="button" onclick="UserManager.getUsers(null, userCallback);" value="Get all users"/>

<script type="text/javascript">
  var userCallback = function(users) {
    var text = 'Users: <br><ul>';
    for(i = 0; i < users.length; i++) {
      text += '<li>';
      text += users[i].username;     
      text += '</li>';
    }
    document.getElementById('userlist').innerHTML = text;
  }
</script>
<span id="userlist">

執行的結果會在 userlist 的位置顯示 user 的列表。<script> 的宣告中 engine.js 是固定的,而 UserManager.js 則是在 dwr.xml 設定中產生的,兩個的路徑都在 dwr servlet 的 mapping 路徑 (Appfuse 預設是 /dwr/* )。呼叫 method 的方式就是如上面所示,其實感覺好像直接呼叫 spring bean。不同的是 method 都固定在最後多一個 param,那是 call back function,也就是 Ajax 的 XmlHttp request 回傳後,就會跑這個 Javascript method。而範例中的 method 會 loop through user list 然後組成字串,最後在 span userlist 的位置加入那串字串。

雖然這個範例一點都不炫,不過至少已經說明了 DWR + Spring 在 Appfuse 的環境中怎麼起動了。剩下的問題,其實大半都落在寫出更好的 Javascript 跟確立 best practice 上了。讓 Spring bean 提供 method 給 DWR 去 call 根本不會是問題。

最後提供一點目前的操作心得,DWR 的 debugger 前面提過了,一定要用 (或許可以 improve 成為 automation test?? )。再來跑 Javascript 最好要用 firefox,而且一定要開 Javascript 主控台,不然根本不知道發生了什麼事 (我知道有更好的 Javascript debugger,不過我還沒用過,歡迎大家推薦)。

接下來要說明的事,其實不應該自己亂寫 Javascript 在 JSP 裡啦,應該要運用像 DWRUtil 之類的 Javascript library,不過這個部份還沒研究,待有心得再行報告吧。

Advertisements
Categories: Technologies
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: