Login  |  繁體中文
感謝您對「自由軟體鑄造場」的支持與愛護,十多年來「自由軟體鑄造場」受中央研究院支持,並在資訊科學研究所以及資訊科技創新研究中心執行,現已完成階段性的任務。 原網站預計持續維運至 2021年底,網站內容基本上不會再更動。本網站由 Denny Huang 備份封存。
也紀念我們永遠的朋友 李士傑先生(Shih-Chieh Ilya Li)。
Tech Column Java Web Parts

Java Web Parts

Java Opensources for Web Development Part I:Chapter 3 當 Java 遇到 AJAX
Lession 12 : Java Web Parts

上期說明了 AjaxTags 的應用,讓 Java Web 工程師可以利用簡單的 Taglibs 就可以完成 ajax 的技巧。在我們開始複雜 ajax framework 如 DWR、Prototype、ZK、或 Scriptaculous 之前,除了 AjaxTags 還有如 Java Web Parts 或是 AjaxAnywhere 等元件可以利用。


相同的技巧,我們先到 Java Web Parts 的官方網站下載相關的 JAR 檔案,在 1.0 的範例之中具有許多的 jar 檔案,其實內部最重要的有兩項:

 javawebparts-core-1.0.jar
 javawebparts-ajaxparts-1.0.jar

除此之外,共有

AjaxParts 蒐集了許多著名的 ajax taglibs (APT),例如上次介紹的 Ajaxtags
Context 處理 Servlet Context 的元件
Filter 處理 Servlet Filter 的元件
Listener 處理 Context 或 Session Listeners
Misc 一些沒辦法歸納的有用元件
Taglib 各式各樣的 taglibs
Servlet 利用在 Servlet 之上的一些元件
Request 專門處理 HTTP Request 的元件
Response 專門處理 HTTP Response 的元件
Session 專門處理 HTTP Session 的元件

雙下拉選單的一個範例,我們可以先在 web.xml 設定 ajaxTagsConfig 的位置:

<context-param>
<param-name>AjaxPartsTaglibConfig</param-name>
    <param-value>/WEB-INF/ajax_config.xml</param-value>
</context-param>
<servlet>
<servlet-name>DynamicDoubleSelectServlet</servlet-name>
<servlet-class>javawebparts.cookbook.dynamicdoubleselect.DynamicDoubleSelectServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DynamicDoubleSelectServlet</servlet-name>
<url-pattern>/dynamicDoubleSelect</url-pattern>
</servlet-mapping>

在 JSP 之中可以設定,我們會希望 當 showTitleSelect 有所變化時,id = characters 的 DIV 中的 select 可以顯示相關的選項。在 jsp 的最末要設定 ajax:enable ,如果 ajax:enable 設定 logger 就要利用 commons-logger 來記錄相關的 Log。

<%@ taglib prefix="ajax" uri="javawebparts/ajaxparts/taglib" %>
<form name="DynamicDoubleSelectForm">
<select name="showTitleSelect">
      <option></option>
      <option value="B5">Babylon 5</option>
      <option value="BSG">Battlestar Galactica</option>
      <option value="STTNG">Star Trek The Next Generation</option>
      <option value="STTOS">Star Trek The Original Series</option>
      <option value="SGA">Stargate Atlantis</option>
      <option value="SG1">Stargate SG-1</option>
</select>
<ajax:event ajaxRef="DynamicDoubleSelectForm/showTitleChange"/>
<div id="characters">
   <select>
   </select>
</div>
</form>
<ajax:enable debug="debug" logger="JWPAlertLogger"/>

當 ajax event 驅動就是在 web.xml 之中所設定的 AjaxPartsTaglibConfig,會去查詢相關對應的事件,例如範例中就是查詢 ajax_config.xml。

<ajaxConfig>
<group ajaxRef="DynamicDoubleSelectForm">
<element ajaxRef="showTitleChange">
<event type="onchange">
<requestHandler type="std:QueryString" method="get" target="/dynamicDoubleSelect?method=first">
<parameter>showTitle=showTitleSelect</parameter>
</requestHandler>
<responseHandler type="std:InnerHTML">
<parameter>characters</parameter>
</responseHandler>
</event>
</element>
</group>
</ajaxConfig>

ajax:event 利用 ajaxRef="DynamicDoubleSelectForm/showTitleChange",找到 ajax_config.xml 之中的 showTitleChange element,並且知道 event 的型態是 onchange,所以處理 AJAX 資料是去拿著 showTitle=$ 傳入的showTitleSelect 變數去呼叫 /dynamicDoubleSelect?method=first 這支 Servlet,當資料取得之後,利用 responseHandler 將資料透過 InnerHTML 方式放回原有的 JSP 之中。

假設在 DynamicDoubleSelectServlet 收到 showTitle="B5",就會回傳 String[] characters 回到 Java Web Parts ,如此簡單的雙下拉選單就可以製作出來了,利用這種方式,即使多維式關聯性表單也都可以輕易地完成之。




OSSF Newsletter : 第 74 期 自由軟體人才資料庫推廣活動

Category: Tech Column