Struts 2 學習筆記（十三）：UI 標籤進階——選項轉移、單選按鈕、選項分組、Token 防重複提交、樹狀選單

繼續探討 Struts 2 豐富的 UI 標籤庫，涵蓋雙向選項轉移、單選/複選、選項分組、表單 Token 防重複提交、上下移動選單、樹狀選單等實用組件。

選項轉移選單：<s:optiontransferselect>

建立兩個下拉框，支援項目來回移動。屬性包括：

• list/listKey/listValue、doubleList/doubleKey/doubleValue：同 <s:doubleselect>
• allowUpDownOnLeft/allowUpDownOnRight：是否顯示左右框的上下移動按鈕
• 可自訂「選定左移」、「全部左移」、「選定右移」、「全部右移」按鈕文字

單選按鈕：<s:radio>

用法與 <s:checkboxlist> 完全一致，僅頁面表現不同（單選 vs 多選）。

選項分組：<s:optgroup>

置於 <s:select> 內部使用，屬性 list/listKey/listValue 對應 <s:checkboxlist> 同名屬性，生成 HTML <optgroup> 標籤。

Token 防重複提交：<s:token>

生成兩個隱藏欄位：

<input type="hidden" name="struts.token.name" value="struts.token"/>
<input type="hidden" name="struts.token" value="7GXL55LPSGU19SDC9D3VP54I20XT3BVA"/>

每次載入頁面 token 值不同。需啟用兩個攔截器：

• token：基本 Token 機制
• token-session：將 token 存入 Session，避免多標籤頁衝突

僅啟用 token-session 會報錯；啟用順序必須為 token → token-session → defaultStack。配置範例：

<package name="TestStruts" extends="struts-default">
  <interceptors>
    <interceptor-stack name="myStack">
      <interceptor-ref name="token"/>
      <interceptor-ref name="token-session"/>
      <interceptor-ref name="defaultStack"/>
    </interceptor-stack>
  </interceptors>
  <default-interceptor-ref name="myStack"/>
  <action name="Login" class="com.unmi.struts2.action.LoginAction">
    <result name="input">/login.jsp</result>
    <result name="invalid.token">/exception.jsp</result>
  </action>
</package>

重複提交時轉向 invalid.token 結果，頁面放 <s:actionerror/> 顯示：「The form has already been processed or no token was supplied, please try again.」

上下移動選單：<s:updownselect>

單一可上下移動項目的下拉框，屬性控制上移/下移/全選按鈕顯示與文字。emptyOption="true" 可加入空選項。

非表單標籤

• <s:a>：生成超連結
• <s:div>：生成 div 區塊

錯誤/訊息顯示標籤

• <s:actionerror/>：getActionErrors() 不為 null 時輸出錯誤集合
• <s:actionmessage/>：getActionMessages() 不為 null 時輸出訊息集合
• Action 中用 addActionError("錯誤")、addActionMessage("訊息") 添加
• <s:fielderror/>：預設列表顯示所有類型轉換/驗證錯誤
• <s:fielderror><s:param>username</s:param></s:fielderror>：僅顯示指定欄位錯誤，搭配 simple 主題可在每個輸入框後顯示對應錯誤

自定義模板元件：<s:component>

直接引用 ftl/jsp/vm 模板：

<s:component theme="customTheme" templateDir="customTemplateDir" template="jspCustomTemplate.jsp">
  <s:param name="list" value="{'one','two','three'}"/>
</s:component>

對應模板路徑：webapp/customTemplateDir/customTheme/jspCustomTemplate.jsp。模板中用 $parameters.paramName 或 $parameters['paramName'] 取值。適用於相似內容的重複顯示。

樹狀選單初探：<s:tree> + <s:treenode>

<s:tree theme="ajax" label="中國" showGrid="true">
  <s:treenode theme="ajax" label="江西">
    <s:treenode theme="ajax" label="吉安"/>
  </s:treenode>
  <s:treenode theme="ajax" label="廣東">
    <s:treenode theme="ajax" label="深圳"/>
  </s:treenode>
</s:tree>

treenode 巢狀即為樹枝節點，無子節點為葉子。預設 xhtml 主題缺少 tree-close.ftl 等模板，必須指定 ajax 主題。進階屬性：展開/收合圖片、網格圖片、nodeIdProperty、nodeTitleProperty 等，實際用到再深入研究。