(RUN!PC 116期第237頁起)
#副標=Struts&JSTL&XSLT整合應用(5)
#大標=霹靂變臉篇
#作者=歐宣修

     規劃的XML結構如下：
     ====================<box>=============
     <data>
       <title><!--標題區--></title>
       <message><!--訊息顯示區--></message>
       <data_input><!--資料輸入區--></data_input>
       <previous_next><!--上下筆連結區--></previous_next>
       <buttons><!--按鈕區--></buttons>
     </data>
     ===============<end>=======================
     資料輸入區可置入多筆列數及輸入元件，我們只規範分為label及content，讓輸入元件由程式設計者決定要放入什麼元件對使用者最合適，所以格式如下：
     ==============<box>==================
     <data_input>
       <row>
         <label><!--輸入說明--></label>
         <content><!--輸入元件--></content>
       </row>
       <row>
       ....
       </row>
     </data_input>
     
     ===============<end>========================
     上下筆連結區標籤沒有內容，但有下列屬性：
     
==============<box>==============
<previous_next first_href="<!--首筆連結-->" previous_href="<!--上筆連結-->" now_record="<!--目前列數-->" max_record="<!--最大列數-->" next_href="<!--下筆連結-->" last_href="<!--末筆連結-->" />
     =============<end>=======================
  
     ===========<box>=================
     <buttons>
       <but_row>
         <but_col><!--按鈕元件--></but_col>
       </bot_row>
       <but_row>
       ....
       </but_row>
     </buttons>
     
     ==============<end>=================

     
     ==============<box>=================
     
single.xsl

<xsl:stylesheet
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">.............(1)

  <xsl:template match="data">.............(2)
    <p><xsl:value-of select="title"/></p>.............(3)
    <br/>
    <table >
      <tr>
        <td width="70%">
        
          <table>
            <!--訊息顯示區塊-->
            <xsl:apply-templates select="message"/>.............(4)  
        
            <!--資料輸入區塊-->
            <xsl:apply-templates select="data_input"/>        
        
          </table>
        </td>
        
        <td width="30%">
          
          <table>
            <!--上下筆連結區塊-->
            <xsl:apply-templates select="previous_next"/>                
            <!--按鈕區塊-->
            <xsl:apply-templates select="buttons"/>                
          </table>
        </td>
      </tr>
    </table>

  </xsl:template>


  <!--訊息顯示-->
  <xsl:template match="message">.............(5)
     <tr>
       <td>訊息列：</td>
       <td>
         <xsl:value-of select="."/>
       </td>       
     </tr>  
  </xsl:template>

  <!--資料輸入區塊-->
  <xsl:template match="data_input">.............(6)
    <xsl:apply-templates select="row"/>
  </xsl:template>


  <!--組tr-->
  <xsl:template match="row">
    <tr>
      <xsl:apply-templates select="label | content"/>.............(7)
    </tr>
  </xsl:template>

  <!--組td-->
  <xsl:template match="label | content">
    <td>

      <xsl:if test="@width">.............(8)
        <xsl:attribute name="width">.............(9)
          <xsl:value-of select="@width"/>
        </xsl:attribute>
      </xsl:if>

      <xsl:if test="@colspan">
        <xsl:attribute name="colspan">
          <xsl:value-of select="@colspan"/>
        </xsl:attribute>
      </xsl:if>

      <xsl:if test="@rowspan">
        <xsl:attribute name="rowspan">
          <xsl:value-of select="@rowspan"/>
        </xsl:attribute>
      </xsl:if>

      <!--將輸入元件直接輸出-->
      <xsl:for-each select=".">.............(10)
          
        <xsl:choose>.............(11)
          <xsl:when test="input | select | textarea | a | p | br">
            <xsl:apply-templates select="@* | node()"/>.............(12)
          </xsl:when>
          <xsl:when test="text()">.............(13)
            <xsl:value-of select="."/>
          </xsl:when>

        </xsl:choose>
      
      </xsl:for-each>
    </td>  
    
  </xsl:template>

  <!--複製所有標籤及屬性-->
  <xsl:template match="@* | node()">.............(14)
      <xsl:copy>
        <xsl:apply-templates select="@* | node()"/>
      </xsl:copy>
  </xsl:template>

  <!--上下筆區塊-->
  <xsl:template match="previous_next">
    <tr>
      <td>
        <a>
          <xsl:if test="@first_href">
            <xsl:attribute name="href">
              <xsl:value-of select="@first_href"/>
            </xsl:attribute>
          </xsl:if>  
          首筆
        </a>
        <xsl:text>&#160;</xsl:text>.............(15)
        <a>
          <xsl:if test="@previous_href">
            <xsl:attribute name="href">
              <xsl:value-of select="@previous_href"/>
            </xsl:attribute>
          </xsl:if>  
          上筆
        </a>
        <xsl:text>&#160;</xsl:text>
        <xsl:value-of select="@now_record"/>/<xsl:value-of select="@max_record"/>
        <xsl:text>&#160;</xsl:text>
        <a>
          <xsl:if test="@next_href">
            <xsl:attribute name="href">
              <xsl:value-of select="@next_href"/>
            </xsl:attribute>
          </xsl:if>  
          下筆
        </a>
        <xsl:text>&#160;</xsl:text>
        <a>
          <xsl:if test="@last_href">
            <xsl:attribute name="href">
              <xsl:value-of select="@last_href"/>
            </xsl:attribute>
          </xsl:if>  
          末筆
        </a>
      </td>
    </tr>
  </xsl:template>


  <!--按鈕區塊-->
  <xsl:template match="buttons">
    <xsl:apply-templates select="but_row"/>
  </xsl:template>

  <!--組tr-->
  <xsl:template match="but_row">
    <tr>
      <xsl:apply-templates select="but_col"/>
    </tr>
  </xsl:template>

  <!--組td-->
  <xsl:template match="but_col">
    <td>

      <xsl:if test="@width">
        <xsl:attribute name="width">
          <xsl:value-of select="@width"/>
        </xsl:attribute>
      </xsl:if>

      <xsl:if test="@colspan">
        <xsl:attribute name="colspan">
          <xsl:value-of select="@colspan"/>
        </xsl:attribute>
      </xsl:if>

      <xsl:if test="@rowspan">
        <xsl:attribute name="rowspan">
          <xsl:value-of select="@rowspan"/>
        </xsl:attribute>
      </xsl:if>

      <!--將輸入元件直接輸出-->
      <xsl:for-each select=".">
          
        <xsl:choose>
          <xsl:when test="input | select | textarea | a | p | br">
            <xsl:apply-templates select="@* | node()"/>
          </xsl:when>
          <xsl:when test="text()">
            <xsl:value-of select="."/>
          </xsl:when>

        </xsl:choose>
      
      </xsl:for-each>
    </td>  
    
  </xsl:template>

</xsl:stylesheet>

     ==============<end>=================
     
1. <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
     我們必須在XSLT檔頭宣告它的naming space及version，基本上照抄即可。
     
2. <xsl:template match="data">
     此標籤很類似副程式(procedure)宣告，記得我們的來源樹的根節點(Root Node)是<data>，所以當來源樹執行到此點時，透過match屬性去比對是否符合條件，若符合則進入此標籤內容執行。
     
3. <xsl:value-of select="title"/>
     進入data 這template後，此時目前使用節點會停在<data>，在<data>下有<title>這個子節點，透過<xsl:value-of select="title"/>可以把<title>這個節點的內容輸出，<xsl:value-of select="title"/>是簡寫，更完整的寫法是<xsl:value-of select="./title"/>，這種用法是不是很像在Windows檔案路徑的用法，只是"/"與"\"的差異，在select屬性值的語法又有一個名稱叫XPath，裡面又有其他名詞，怕再講下去有些讀者會昏倒，故不再深入，若有興趣讀者可參考相關資料。
     
4. <xsl:apply-templates select="message"/>
     在data template裡要呼叫另外一個template就要應用這個標籤，以本例來說，若碰到<data>裡有<message>，則會進入message template。
 
5. 
<xsl:template match="message">
     <tr>
       <td>訊息列：</td>
       <td>
         <xsl:value-of select="."/>
       </td>       
     </tr>  
</xsl:template>
     
     承繼上一項目，當進入message template時，來源樹目前節點將會停在<message>，會將此template裡的HTML標籤原封不動直接輸出，<xsl:value-of select="."/>會將目前節點，即<message>標籤內容輸出。
     
6. 
<xsl:template match="data_input">
    <xsl:apply-templates select="row"/>
</xsl:template>
     
     在資料輸入區<data_input>的標籤規劃，裡面有<row>，在<row>還有子標籤<col>，在data_input template並沒有什麼需要特別去處理，但為配合XSLT的階層觀念，進入此template，再轉導至row template，透過這種技巧惟一目的就是要移動目前節點。 
     
7. "label | content"
     XPath OR的語法，意指<label>或<content>皆符合此template。有OR就會有AND，XPath用[]表示，如"content[@width][@kind = '1']"即是<content>須有width屬性及kind屬性且kind屬性值為'1'
    
8. <xsl:if test="@width">
     XSLT IF語法，判斷目前節點若有width屬性則進入此區段執行，在XPath裡使用@，代表後面字串為屬性名稱。

9. 
<xsl:attribute name="width">
    <xsl:value-of select="@width"/>
</xsl:attribute>

     使用此標籤可用來增加屬性至結果樹，以本例來說即將width屬性增加至<td>，內容為來源樹目前節點之width屬性。

      
10. <xsl:for-each select=".">
     將目前節點之所有子節點依序倒出。
     
11. 
<xsl:choose>
    <xsl:when test="input | select | textarea | a | p | br">
        <xsl:apply-templates select="@* | node()"/>
    </xsl:when>
</xsl:choose>
     
     這語法不用多說，讀者應該一看就知道在幹嘛，多選一的判斷語法，<xsl:choose>必須包含<xsl:when>。
     
12. "@* | node()"
     表示所有屬性或節點皆應用下一template。
     
13. "text()"
     XSLT亦有許多function，可資運用，此function可用來判斷目前節點是否為文字節點，所謂文字節點意指標籤包含內容，如<tag>文字節點</tag>。
   
14. 
<xsl:template match="@* | node()">
      <xsl:copy>
        <xsl:apply-templates select="@* | node()"/>
      </xsl:copy>
</xsl:template>
     
     <xsl:copy>與<xsl:value-of>不同，<xsL:value-of>用來輸出標籤所含內容，即文字節點；<xsl:copy>用來直接輸出原始標籤、屬性及內容，讀者可發現這裡用上遞迴，意義是將目前節點及其子節點、孫節點...，不論標籤、屬性、內容原封不動直接輸出。
     
15. <xsl:text>&#160;</xsl:text>
     輸出空白，若我們直接在XSLT輸出空白是無用的，跟HTML一樣，所以要改用ASCII編碼，也可以用保留字，但在XSLT很奇怪，&nbsp;不能用，只好改用ASCII，若是&amp;、&gt;、&lt;則沒問題，筆者猜是Xalan的問題(註3)。
     
#小標=JSTL XML標籤

     完成了來源樹及樣版樹的規劃，接下來就是要把兩者連接起來，筆者採用JSTL XML標籤，它擁有對XML DOM的處理及XSLT Paser能力。我們在JSP裡先用<c:set>及XSLT <xsl:import>將樣版樹取得，存入page scope，用法如下：
     ==============<box>=================
<c:set var="xsl">
   <?xml version="1.0"?>
   <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
      <xsl:import href="/single.xsl" />
   </xsl:stylesheet>
</c:set>
     ==============<end>=================
     再運用<x:transform>與來源樹合成，輸出HTML格式結果樹，透過xslt屬性連接代表樣版樹的變數，標籤內容即是來源樹內容，用法如下：
     ==============<box>=================
<x:transform xslt="${xsl}">
  <data>
    <title>員工基本資料維護(Struts+Process+JSTL+XSLT版)</title>  
    ....
  </data>
</x:transform>
     ==============<end>=================
     
#小標=第一次變臉
     所需傢伙都有了，可以開始變臉啦！筆者將本系列上一筆文章的employee.jsp改寫如下：
     ==============<box>=================
     
<!--
Program:employee.jsp
Decription:員工基本資料維護(Struts+Process+JSTL+XSLT版)
Date:2003/06/25
Author:Senshaw

session variable
${pgid}_status:{"add","update"}
-->
<%@ page contentType="text/html;charset=UTF-8" import="java.io.*,java.util.*,idv.senshaw.DB.*,org.apache.struts.action.ActionErrors"%>
<!--Struts Tag-->
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>

<!--JSTL Tag-->
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<%@ taglib prefix="x" uri="http://java.sun.com/jstl/xml" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>

<script>
<!--

function doProcess(action)
{
  //alert(action);
  form1.command.value = action;
 
  if (action == "delete") {
    isConfirm = confirm("您確定要刪除此筆資料嗎？");
    
    if (isConfirm) {
      form1.submit();            
    }
  
  } else { 
    form1.submit();
  
  }
}
-->
</script>
<c:set var="pgid" value="employee"/>
<c:set var="status" value="${sessionScope.employee_status}"/>
<c:if test="${empty status}">
  <c:set var="status" value="add"/>
</c:if>

<c:set var="now_record" value="0"/>

<c:choose>
  <c:when test="${!empty requestScope.toRecord}">
    <c:set var="now_record" value="${requestScope.toRecord}"/>
  </c:when>
  <c:when test="${empty requestScope.toRecord}">
    <c:set var="now_record" value="${param.toRecord}"/>
  </c:when>
  
</c:choose>

<c:set var="max_record" value="0"/>

<c:set var="hd" value="${sessionScope.employee_query_data}"/>

<c:if test="${!empty hd && hd.rowcount > 0}">
  <c:set var="status" value="update"/>
  <c:set var="max_record" value="${hd.rowcount}"/>
  
  <c:if test="${now_record > 0}">
    <c:set var="id" value="${hd.arrayList[now_record - 1].id}"/>
    <c:set var="name" value="${hd.arrayList[now_record - 1].name}"/>
    <c:set var="age" value="${hd.arrayList[now_record - 1].age}"/>
    <c:set var="address" value="${hd.arrayList[now_record - 1].address}"/>
    
  </c:if>

</c:if>

<%--決定按鈕狀態--%>
<c:if test="${status == 'add'}">
  <c:set var="save_onClick" value="javascript:doProcess('add')"/>
</c:if>
<c:if test="${status == 'update'}">
  <c:set var="save_onClick" value="javascript:doProcess('update')"/>
</c:if>

<%--上筆、下筆連結處理--%>
<c:set var="pre_record_href" value="employee.jsp?toRecord="/>

<c:if test="${now_record > 1}">
  <c:set var="to_record" value="${now_record - 1}"/>
</c:if>
<c:if test="${now_record <= 1}">
  <c:set var="to_record" value="1"/>
</c:if>
<c:set var="pre_record_href" value="${pre_record_href}${to_record}"/>


<c:set var="next_record_href" value="employee.jsp?toRecord="/>

<c:if test="${now_record < max_record}">
  <c:set var="to_record" value="${now_record + 1}"/>
</c:if>
<c:if test="${now_record >= max_record}">
  <c:set var="to_record" value="${max_record}"/>
</c:if>
<c:set var="next_record_href" value="${next_record_href}${to_record}"/>

<c:if test="${max_record == 0}">
  <c:set var="now_record" value="0"/>
</c:if>

<%--設置XSLT樣版--%>
<c:set var="xsl">
   <?xml version="1.0"?>
   <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
      <xsl:import href="/single.xsl" />
   </xsl:stylesheet>
</c:set>


<html>
<body>


<form name="form1" action="employee.do" method="post" >
<input type="hidden" name="command" value="" />
<input type="hidden" name="pgid" value="<c:out value="${pgid}"/>" />
<input type="hidden" name="toRecord" value="<c:out value="${now_record}"/>" />

<x:transform xslt="${xsl}">
  <data>
    <title>員工基本資料維護(Struts+Process+JSTL+XSLT版)</title>  
    <%--訊息顯示區塊--%>
    <message>
      <html:messages id="messages" message="true" >
        <bean:write name="messages"/>      
      </html:messages>    
    </message>
    <%--資料輸入區塊--%>
    <data_input>
      <row>
        <label>身分證號</label>
        <content>
          <%--新增時--%>
          <c:if test="${status == 'add'}">
            <input type="text" name="id" value="<c:out value="${id}"/>" maxlength="10" />
          </c:if>
          <%--修改時--%>
          <c:if test="${status == 'update'}">
            <c:out value="${id}"/><input type="hidden" name="id"
              value="<c:out value="${id}"/>" />          
          </c:if>                
        </content>
      </row>
      <row>
        <label>姓名</label>
        <content>
          <input type="text" name="name" value="<c:out value="${name}"/>" maxlength="10" />
        </content>
      </row>
      <row>
        <label>年齡</label>
        <content>
          <input type="text" name="age" value="<c:out value="${age}"/>" maxlength="3" />
        </content>
      </row>
      <row>
        <label>住址</label>
        <content>
          <input type="text" name="address" value="<c:out value="${address}"/>" />
        </content>
      </row>
      
    </data_input>
    
    <%--上下筆連結區塊--%>
    <previous_next first_href="employee.jsp?toRecord=1" previous_href="<c:out value="${pre_record_href}"/>" now_record="<c:out value="${now_record}"/>" max_record="<c:out value="${max_record}"/>" next_href="<c:out value="${next_record_href}"/>" last_href="employee.jsp?toRecord=<c:out value="${max_record}"/>" />

    <%--按鈕區塊--%>
    <buttons>
      <but_row>
        <but_col><input type="button" name="query" onClick="javascript:doProcess('query')" value="查詢" /></but_col>
      </but_row>
      <but_row>
        <but_col><input type="button" name="clear" onClick="javascript:doProcess('clear')" value="清除" /></but_col>
      </but_row>
      <but_row>
        <but_col><input type="button" name="save" onClick="<c:out value="${save_onClick}"/>" value="存檔" /></but_col>
      </but_row>
      <but_row>
        <but_col><input type="button" name="delete" onClick="javascript:doProcess('delete')" value="刪除" /></but_col>
      </but_row>
    </buttons>    
  </data>
  
</x:transform>

</form>


<%--錯誤處理--%>
<html:messages id="error">
  <script>
    alert('<bean:write name="error"/>'); 
  </script>
</html:messages>

<body>
</html>
     ==============<end>=================