差異處

這裏顯示兩個版本的差異處。

--- java:web:struts:dispatchactionintro [2013/04/07 23:54]
tony 建立
+++ java:web:struts:dispatchactionintro [2023/06/25 09:48] (目前版本)
@@ 行 2: / 行 2: @@
 ====== 如何將相關的操作放置於同一個Action中? ======
 ===== Problem =====
-{{:java:web:struts:struts_disaction_sample_billboard.png}}
+{{:java:web:struts:struts_disaction_sample_billboard.png}}\\
+先前做的國軍登出倒數計時器中，有個正在受苦受難弟兄的排行榜，可以根據**入伍日期**、**退伍日期**、**%數**與**剩餘天數**去排序。除了排序外，還包含要取得不同種類資料的動作。我們可以選擇把這些動作寫成不同的Actions，但如果每一個都寫成一個Action，會讓Action類別很龐大。Struts提供了DispatchAction讓你可以封裝多個動作到一個Action中，以方便管理減少維護困難。
 ===== How to? =====
+==== Java Action ====
+我定義BillBoardAction做為DispatchAction的Controller負責與排行榜功能相關的邏輯流程控制。底下的程式碼主要讓大家知道大概是長怎樣，省略了很多實作細節。**基本上就是一個操作對應一個method**。
+<code java>
+public class BillBoardAction extends ActionSupport
+			implements ServletRequestAware,ServletResponseAware {
+	public String getPercentageBillboradInfo(){
+		return Action.NONE;
+	}
+	public String getJoinDateBillboradInfo(){
+		return Action.NONE;
+	}
+	public String getLeftDaysBillboradInfo(){
+		return Action.NONE;
+	}
+	public String getEndDateBillboradInfo(){
+		return Action.NONE;
+	}
+	public String getLogoutInformation(){
+		return Action.NONE;
+	}
+</code>
+==== Struts Config ====
+struts config的定義，需要關注的就是**name、method與class**:
+  * name: ui呼叫的Action名稱。
+  * class: DispatchAction的類別名稱。
+  * method: 對應功能的method名稱。
+由於我是透過ajax方式去呼叫Action，因此我沒定義結果導向的設定。另外這個範例有使用到interceptor，用來確認session與認證相關的流程，這裡非本篇重點我不多做說明。
+<code xml>
+<action name="getLogoutInformation" method="getLogoutInformation"
+	class="org.tonylin.logoutarmycd.web.action.BillBoardAction">
+	<interceptor-ref name="basic-stack" />
+</action>
+<action name="getPercentageBillboard" method="getPercentageBillboradInfo"
+	class="org.tonylin.logoutarmycd.web.action.BillBoardAction">
+	<interceptor-ref name="basic-stack" />
+</action>
+<action name="getJoinDateBillboard" method="getJoinDateBillboradInfo"
+	class="org.tonylin.logoutarmycd.web.action.BillBoardAction">
+	<interceptor-ref name="basic-stack" />
+</action>
+<action name="getEndDateBillboard" method="getEndDateBillboradInfo"
+	class="org.tonylin.logoutarmycd.web.action.BillBoardAction">
+	<interceptor-ref name="basic-stack" />
+</action>
+<action name="getLeftDaysBillboard" method="getLeftDaysBillboradInfo"
+	class="org.tonylin.logoutarmycd.web.action.BillBoardAction">
+	<interceptor-ref name="basic-stack" />
+</action>
+</code>
+==== UI HTML ====
+html的部分相當單純，就只是顯示表格，你注意排序圖片的id即可:
+<code html>
+<table id="BillboardTable" cellspacing="0" align="Center" border="1"
+	class="table-stats"
+	style="background-color: #CECFCE; border-width: 1px; border-style: solid; width: 97%; border-collapse: collapse;">
+	<tr bgcolor="#cccccc" style="text-align: center; font-weight: bold;">
+		<td width="30">排名</td>
+		<td width="40%" align="left">使用者&nbsp;<label>
+			<a href="#" style="text-decoration:none;" id="showAllLabel">顯示所有</a>
+		</label></td>
+		<td width="13%">入伍日期 <img id="jd-image" src="images/common/refresh.gif"
+			class="Image-Moveon" title="照入伍日期排行"/></td>
+		<td width="13%">退伍日期<img id="ld-image" src="images/common/refresh.gif"
+			class="Image-Moveon" title="照退伍日期排行"/></td>
+		<td width="13%">%數<img id="pbb-image" src="images/common/sort_desc.gif"
+			class="Image-Moveon" title="照%數排行"/></td>
+		<td width="13%">剩餘天數<img id="lds-image" src="images/common/refresh.gif"
+			class="Image-Moveon" title="照剩餘天數排行"/></td>
+	</tr>
+</table>
+</code>
+==== UI Javascript ====
+我在Javascript中定義了BillBoard的物件，我只取出部分重要程式碼做說明。BillBoard物件的宣告定義了各個元素id的綁定，最後會呼叫init的method:
+<code javascript>
+function BillBoard(obj){
+	var table = obj;
+	var pbbImage = $('#pbb-image');
+	var ldsImage = $('#lds-image');
+	var ldImage = $('#ld-image');
+	var jdImage = $('#jd-image');
+	this.getBillBoard = function(){
+		return table;
+	};
+	this.getPBBImage = function(){
+		return pbbImage;
+	};
+	this.getLDSImage = function(){
+		return ldsImage;
+	};
+	this.getLDImage = function(){
+		return ldImage;
+	};
+	this.getJDImage = function(){
+		return jdImage;
+	};
+	this.init();
+}
+</code>
+\\
+在BillBoard的init中，我會將圖片綁定點擊事件，當User點擊圖片後會去呼叫sortBillboard的method，但會根據不同圖片有不同的參數值，以達到不同的排序效果:
+<code javascript>
+BillBoard.prototype.init = function(){
+	var thisObj = this;
+	// init image event
+	this.getPBBImage().click(function(){
+			thisObj.sortBillboard('getPercentageBillboard.action','percentage');
+	});
+	this.getLDSImage().click( function(){
+			thisObj.sortBillboard('getLeftDaysBillboard.action','leftDays');
+	});
+	this.getLDImage().click(function(){
+			thisObj.sortBillboard('getEndDateBillboard.action','endDate');
+	});
+	this.getJDImage().click(function(){
+			thisObj.sortBillboard('getJoinDateBillboard.action','joinDate');
+	});
+};
+</code>
+\\
+sortBillboard的method很純粹的會透過ajax呼叫一個action的url，最後再將結果顯示於頁面中:
+<code javascript>
+BillBoard.prototype.sortBillboard = function(actionUrl, sortType){
+	var thisObj = this;
+	// Get the sorting result.
+	$.ajax({
+		  url: actionUrl,
+		  type: "POST",
+		  dataType: 'xml',
+			 success: function(data) {
+					//Show sorting result.
+			 }, error: function(data) {
+			   	window.alert("Link server failure.");
+			}
+	});
+};
+</code>
+===== Summary =====
+網路上最常看到的範例就是新增修改刪除查詢操作，而我則是使用以前的使用方式與大家做說明。善用DispatchAction可以透過集中管理方式減少大量的Action，也使得程式碼的維護較容易。\\
+\\
+友藏內心獨白: 這是第一篇Struts教學阿!
 ===== Reference =====
   * [[http://www.dzone.com/tutorials/java/struts-2/struts-2-example/dispatchaction-in-struts-2-example-1.html|DispatchAction Functionality in Struts 2 Tutorial]]
+  * [[http://www.dzone.com/tutorials/java/struts-2/struts-2-example/struts-2-crud-example-1.html|Struts2 CRUD Example]]
 =====    =====
@@ 行 13: / 行 155: @@
 \\
 ~~DISQUS~~