Nelson的部落格: 2009-07-26

2009年7月29日星期三

Struts2 autocompleter功能實作

功能說明：當選擇州別名稱時，則會出現相關之drilldown List讓您選擇。





1.增加一個州別之Action(AutoCompleteState.java)內容如下：




package study;




import com.opensymphony.xwork2.ActionSupport;

import java.util.List;

import java.util.ArrayList;




public class AutoCompleteState extends ActionSupport {

 private List<String> state;

 

 public String execute(){

  state = new ArrayList();

  state.add("Alabama");

     state.add("Alaska");

     state.add("Arizona");

     state.add("Arkansas");

     state.add("California");

     state.add("Colorado");

     state.add("Connecticut");

     state.add("Delaware");

     state.add("District of Columbia");

     state.add("Florida");

     state.add("Georgia");

     state.add("Hawaii");

     state.add("Idaho");

     state.add("Illinois");

     state.add("Indiana");

     state.add("Iowa");

     state.add("Kansas");

     state.add("Kentucky");

     state.add("Louisiana");

     state.add("Maine");

     state.add("Maryland");

     state.add("Massachusetts");

     state.add("Michigan");

     state.add("Minnesota");

     state.add("Mississippi");

     state.add("Missouri");

     state.add("Montana");

     state.add("Nebraska");

     state.add("Nevada");

     state.add("New Hampshire");

     state.add("New Jersey");

     state.add("New Mexico");

     state.add("New York");

     state.add("North Carolina");

     state.add("North Dakota");

     state.add("Ohio");

     state.add("Oklahoma");

     state.add("Oregon");

     state.add("Pennsylvania");

     state.add("Rhode Island");

     state.add("South Carolina");

     state.add("South Dakota");

     state.add("Tennessee");

     state.add("Texas");

     state.add("Utah");

     state.add("Vermont");

     state.add("Virginia");

     state.add("Washington");

     state.add("West Virginia");

     state.add("Wisconsin");

     state.add("Wyoming");  

  return SUCCESS;

 }

 public List<String> getState(){

  return state;

 }

 public void setState(List<String> state){

  this.state=state;

 }

}

===========================================




2.增加一個呈現AutoComplete頁面(autoComplete_State.jsp)內容如下：


<%@ page contentType="text/html; charset=UTF-8" %>

<%@ taglib prefix="s" uri="/struts-tags" %>

<html>

<head>

<title>Struts 2 Autocompleter Example!</title>

<s:head theme="ajax"/>

</head>

<body>

 <h1>Struts 2 Autocompleter Example!</h1>

 <s:label name="stateName" value="請選擇州別"/>

 <s:autocompleter theme="simple" list="state" name="stateName"/>

</body>

</html>

==========================================




3.於struts.xml中加入一個autoComplete_State  Action，內容如下：


<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE struts PUBLIC

"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"

"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

<constant name="struts.devMode" value="true" />




 <package name="default" namespace="/" extends="struts-default">

  <global-results>

   <result name="error">/Error.jsp</result>

  </global-results>

  <global-exception-mappings>

   <exception-mapping result="error" exception="java.lang.Exception"></exception-mapping>

  </global-exception-mappings>

  <action name="main" class="study.Main">

   <result>/index.jsp</result>

  </action>

  <action name="show" class="study.ShowAction">

   <result name="success">/show.jsp</result>

   <result name="error">/Error.jsp</result>

   <result name="input">/index.jsp</result>

  </action>

  <action name="updateForm" class="study.UpdateForm">

   <result>/updateForm.jsp</result>

  </action>

  <action name="update" class="study.UpdateSuccess">

   <result>/updateSuccess.jsp</result>

  </action>

  <action name="insertForm" class="study.InsertForm">

   <result>/insertForm.jsp</result>

  </action>

  <action name="insert" class="study.InsertSuccess">

   <result>/insertSuccess.jsp</result>

   <result name="input">/insertForm.jsp</result>

  </action>

  <action name="delete" class="study.DeleteSuccess">

   <result>/deleteSuccess.jsp</result>

  </action>

  <action name="showDetail" class="study.UpdateForm">

   <result>/showDetail.jsp</result>

  </action>

  <action name="StudentDetailAction" class="study.UpdateForm">

   <result>/studentDetail.jsp</result>

  </action>

  <action name="autoComplete_State" class="study.AutoCompleteState">

   <result>/autoComplete_State.jsp</result>

  </action>

 </package>

 

 <package name="Chart" namespace="/chart" extends="struts-default">

  <result-types>

   <result-type name="chart" class="org.apache.struts2.dispatcher.ChartResult"></result-type>

  </result-types>

  <action name="viewModerationChart" class="study.ViewModerationChart">

   <result name="success" type="chart">

    <param name="width">400</param>

    <param name="height">300</param>

   </result>

  </action>

  <action name="viewModerationChartDispatcher">

   <result name="success" type="dispatcher">/ViewModerationChartDispatcher.jsp</result>

  </action>

 </package> 

</struts>

========================================




4.測試結果：

2009年7月28日星期二

Struts2 + Dojo實現Ajax功能

功能說明：延續Struts2 + MySql實現分頁顯示之CRUD功能，增加列出學生連絡資料後，並於學號欄位增加一個連結，如此只要使用者按下此連結即可得到此學號之基本資料並將此資料秀於學生連絡資料表格之下方。

1.修改show.jsp頁面：如紅色字體部分為新增加。


<%@ page contentType="text/html; charset=UTF-8" %>

<%@ taglib prefix="s" uri="/struts-tags" %>

<html>

<head>

<title>分頁秀出學員資料</title>

<s:head theme="ajax"/><!-- for Ajax -->

</head>

<script type="text/javascript">

 var i=0;

 function ProcessTimer(){

  setInterval("showTimer()",1000);

 }

 function showTimer(){

  i++;

  msg.innerText=i;

  var date = new Date();

  dateTime.innerText=date.getMonth()+1+"/"+date.getDate()+"/"+date.getYear()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();

 }

 //for Aajx with dojo

 function show_user_detail(id){

  document.form_student.sid.value=id;

  dojo.event.topic.publish("show_detail");

 }

</script>

<body onload="ProcessTimer()">

 <div align="center">

  <s:form id="form_student" name="form_student">

  <h3>學生連絡資料</h3>

  <table border="1" bordercolor="#999999">

   <tr bgcolor="#CCFFFF">

    <th>學號</th>

    <th>姓名</th>

    <th>地址</th>

    <th>電話</th>

    <th colspan=3>動作</th>

   </tr>   

   <s:iterator value="students" status="status">

   <s:if test="#status.odd==true">

    <tr bgcolor="pink">

   </s:if>

   <s:else>

    <tr bgcolor="#FF99FF">

   </s:else>    

     <td align="center"><s:a href="#" onclick="javascript:show_user_detail('%{#status.index}');return false;"><s:property value="stu_id" /></s:a></td>

     <td><s:property value="stuName" /></td>

     <td><s:property value="address" /></td>

     <td><s:property value="stuPhone" /></td>    

     <script type="text/javascript">

      function edit_<s:property value='#status.index' />(){ 

       location.href="updateForm.action?sid=<s:property value='#status.index'/>&pageNow=<s:property value='pageNow'/>";

      }

      function delete_<s:property value='#status.index' />(){    

       location.href="delete.action?sid=<s:property value='#status.index'/>";

      }

      function showDetail_<s:property value='#status.index' />(){    

       location.href="showDetail.action?sid=<s:property value='#status.index'/>&pageNow=<s:property value='pageNow'/>";

      }      

     </script>

     <td><input type="button" value="編輯" onclick="edit_<s:property value='#status.index' />()"/>

     <td><input type="button" value="刪除" onclick="delete_<s:property value='#status.index' />()"/>

     <td><input type="button" value="查看" onclick="showDetail_<s:property value='#status.index' />()"/>

    </tr>

   </s:iterator>

   <!-- put students to session -->

   <s:set name="students" value="students" scope="session"></s:set>    

  </table> 

  <br/>

  <s:url id="url_pre" value="show.action">

   <s:param name="pageNow" value="pageNow-1"></s:param>

  </s:url>

  <s:url id="url_next" value="show.action">

   <s:param name="pageNow" value="pageNow+1"></s:param>

  </s:url>

  <s:url id="url_last" value="show.action">

   <s:param name="pageNow" value="totalPage"></s:param>

  </s:url>

  <s:url id="url_first" value="show.action">

   <s:param name="pageNow" value="1"></s:param>

  </s:url>  

  <script type="text/javascript">

   function nextPage(){

    location.href="<s:property value='#url_next'/>";    

   }

   function prePage(){

    location.href="<s:property value='#url_pre'/>";    

   }

   function lastPage(){

    location.href="<s:property value='#url_last'/>";

   }

   function firstPage(){

    location.href="<s:property value='#url_first'/>";

   }   

  </script> 

  <s:if test="students.size()==0"/>

  <s:elseif test="%{pageNow==1}">

   <!--

   <s:a href="#url_next">下一頁</s:a>&nbsp;&nbsp;&nbsp;&nbsp;

   <s:a href="#url_last">最後一頁</s:a><br/><br/>

   -->

   <input type="button" value="下一頁" onclick="nextPage()"/>&nbsp;&nbsp;&nbsp;&nbsp; 

   <input type="button" value="最後一頁" onclick="lastPage()"/><br/><br/> 

  </s:elseif>

  <s:elseif test="%{totalPage==pageNow}">

   <!--

   <s:a href="#url_pre">上一頁</s:a>&nbsp;&nbsp;&nbsp;&nbsp;

   <s:a href="#url_first">第一頁</s:a><br/><br/>

   -->

   <input type="button" value="上一頁" onclick="prePage()"/>&nbsp;&nbsp;&nbsp;&nbsp;

   <input type="button" value="第一頁" onclick="firstPage()"/><br/><br/>

  </s:elseif>

  <s:else>

   <!--

   <s:a href="#url_pre">上一頁</s:a>&nbsp;&nbsp;&nbsp;&nbsp;   

   <s:a href="#url_next">下一頁</s:a>&nbsp;&nbsp;&nbsp;&nbsp;

   <s:a href="#url_first">第一頁</s:a>&nbsp;&nbsp;&nbsp;&nbsp;

   <s:a href="#url_last">最後一頁</s:a><br/><br/>   

    -->

    <input type="button" value="上一頁" onclick="prePage()"/>&nbsp;&nbsp;&nbsp;&nbsp;

    <input type="button" value="下一頁" onclick="nextPage()"/>&nbsp;&nbsp;&nbsp;&nbsp;

    <input type="button" value="第一頁" onclick="firstPage()"/>&nbsp;&nbsp;&nbsp;&nbsp;

    <input type="button" value="最後一頁" onclick="lastPage()"/><br/><br/>

  </s:else>

  共<s:property value="totalCount"/>筆記錄,

  共<s:property value="totalPage"/>頁,

  第<s:property value="pageNow"/>頁&nbsp;&nbsp;&nbsp;&nbsp;

  <a href="main.action">回到首頁</a> 

  <!-- for Ajax with dojo -->

  <s:hidden name="sid"/>

  <s:url id="d_url" action="StudentDetailAction"/>   


  <s:div id="student_details" href="%{d_url}" theme="ajax" listenTopics="show_detail" formId="form_student"/>     


  </s:form>   


  <!-- for Ajax with dojo -->    


 </div>

 <br/>

 <div>

  Timer:<span id=msg></span><br/>

  Current Date Time:<span id=dateTime></span>

  <s:debug/>

 </div>

</body>

</html>

=============================================



2.新增studentDetail.jsp頁面來呈現Ajax執行結果








<jsp:directive.page contentType="text/html; charset=UTF-8"/>

<jsp:directive.taglib prefix="s" uri="/struts-tags"/>




<s:if test="student!=null">

<table border="0">

 <tr><th colspan="2">學生基本資料(Ajax demo for Dojo)</th></tr>

 <tr><td><s:label key="stu_id" label="學號"/></td></tr>

 <tr><td><s:label key="stuName" label="姓名"/></td></tr>

 <tr><td><s:label key="stuPhone" label="電話"/></td></tr>

 <tr><td><s:label key="address" label="住址"/></td></tr>

</table>

</s:if>

<s:debug/>


============================================




3.修改struts.xml：增加一個StudentDetailAction Action。如紅色字體部份。




<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE struts PUBLIC

"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"

"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

<constant name="struts.devMode" value="true" />




 <package name="default" namespace="/" extends="struts-default">

  <global-results>

   <result name="error">/Error.jsp</result>

  </global-results>

  <global-exception-mappings>

   <exception-mapping result="error" exception="java.lang.Exception"></exception-mapping>

  </global-exception-mappings>

  <action name="main" class="study.Main">

   <result>/index.jsp</result>

  </action>

  <action name="show" class="study.ShowAction">

   <result name="success">/show.jsp</result>

   <result name="error">/Error.jsp</result>

   <result name="input">/index.jsp</result>

  </action>

  <action name="updateForm" class="study.UpdateForm">

   <result>/updateForm.jsp</result>

  </action>

  <action name="update" class="study.UpdateSuccess">

   <result>/updateSuccess.jsp</result>

  </action>

  <action name="insertForm" class="study.InsertForm">

   <result>/insertForm.jsp</result>

  </action>

  <action name="insert" class="study.InsertSuccess">

   <result>/insertSuccess.jsp</result>

   <result name="input">/insertForm.jsp</result>

  </action>

  <action name="delete" class="study.DeleteSuccess">

   <result>/deleteSuccess.jsp</result>

  </action>

  <action name="showDetail" class="study.UpdateForm">

   <result>/showDetail.jsp</result>

  </action>

  <action name="StudentDetailAction" class="study.UpdateForm">

   <result>/studentDetail.jsp</result>

  </action>

 </package>

 

 <package name="Chart" namespace="/chart" extends="struts-default">

  <result-types>

   <result-type name="chart" class="org.apache.struts2.dispatcher.ChartResult"></result-type>

  </result-types>

  <action name="viewModerationChart" class="study.ViewModerationChart">

   <result name="success" type="chart">

    <param name="width">400</param>

    <param name="height">300</param>

   </result>

  </action>

  <action name="viewModerationChartDispatcher">

   <result name="success" type="dispatcher">/ViewModerationChartDispatcher.jsp</result>

  </action>

 </package> 

</struts>


===========================================




4.測試結果：





當表格中之學號被點下後，JavaScript就會通知Div Tag從URL中動態Load學生基本資料返回內容。

此為執行StudentDetailAction取得學生基本資料後，將studentDetail產生之結果傳送到show.jsp，並呈現在Div位置中。

2009年7月27日星期一

在Struts2中使用JFreeChart

1.在Struts2中，並沒有將JFreeChart包含進來，若要在Struts2中使用JFreeChart則需以PlugIn方式引進來。

下載範例(Study.war)
1.1.首先下載JFreeChart PlugIn並將其置放於WEB-INF\lib目錄下
下載JFreeChart PlugIn(struts2-jfreechart-plugin-2.0.11.jar)
1.2.下載JFreeChart Jar(jfreechart-1.0.13.jar，jcommon-1.0.16.jar)檔並將此兩個檔案置於WEB-INF\lib目錄下
下載JFreeChart Jar(jfreechart-1.0.13.jar，jcommon-1.0.16.jar)

1.3.將chart之result type加入於struts.xml內容如下：

 <package name="Chart" namespace="/chart" extends="struts-default"><result-types>
<result-type name="chart" class="org.apache.struts2.dispatcher.ChartResult"></result-type>
</result-types>   <action name="viewModerationChart" class="study.ViewModerationChart">
<result name="success" type="chart">
 <param name="width">400</param>
 <param name="height">300</param>
</result>
</action>
<action name="viewModerationChartDispatcher">
<result name="success" type="dispatcher">/ViewModerationChartDispatcher.jsp</result>
</action>
</package>

=====================================




2.編輯呈現JFreeChart圖形之對應Action(ViewModerationChart.java)


package study;




import org.jfree.chart.JFreeChart;

import org.jfree.chart.axis.NumberAxis;

import org.jfree.chart.plot.XYPlot;

import org.jfree.chart.renderer.xy.StandardXYItemRenderer;

import org.jfree.data.xy.XYSeries;

import org.jfree.data.xy.XYSeriesCollection;

import org.jfree.chart.axis.ValueAxis;

import com.opensymphony.xwork2.ActionSupport;

import java.util.Random;




public class ViewModerationChart extends ActionSupport {

 private JFreeChart chart;

    public String execute() throws Exception {

        // chart creation logic...

        XYSeries dataSeries = new XYSeries(new Integer(1)); //pass a key for this serie

        for (int i = 0; i <= 100; i++) {

            dataSeries.add(i, new Random().nextInt());

        }

        XYSeriesCollection xyDataset = new XYSeriesCollection(dataSeries);




        ValueAxis xAxis = new NumberAxis("Raw Marks");

        ValueAxis yAxis = new NumberAxis("Moderated Marks");




        // set my chart variable

        chart =

            new JFreeChart(

                "Moderation Function",

                JFreeChart.DEFAULT_TITLE_FONT,

                new XYPlot(

                    xyDataset,

                    xAxis,

                    yAxis,

                    new StandardXYItemRenderer(StandardXYItemRenderer.LINES)),

                false);

        chart.setBackgroundPaint(java.awt.Color.white);




        return super.SUCCESS;

    }




    public JFreeChart getChart() {

        return chart;

    }

}





==================================




3.在JSP中呈現JFreeChart圖形(ViewModerationChartDispatcher.jsp)






<%@ page contentType="text/html; charset=UTF-8" %>

<%@ taglib prefix="s" uri="/struts-tags" %>

<html>

<head>

<title>ViewModerationChartDispatcher page</title>

</head>

<body>

 <center><h2>Moderation Chart:</h2>

 <img src="chart/viewModerationChart.action"><br/>

 </center>

 <input type="button" value="上一頁" onclick="javascript:history.go(-1)">

 


 <s:debug/>

</body>

</html>


==================================




測試結果：

訂閱：文章 (Atom)

Nelson的部落格

2009年7月29日星期三

Struts2 autocompleter功能實作

2009年7月28日星期二

Struts2 + Dojo實現Ajax功能

2009年7月27日星期一

在Struts2中使用JFreeChart

追蹤者

關於我自己

2009年7月29日 星期三

Struts2 autocompleter功能實作

2009年7月28日 星期二

Struts2 + Dojo實現Ajax功能

2009年7月27日 星期一

在Struts2中使用JFreeChart

2009年7月29日星期三

2009年7月28日星期二

2009年7月27日星期一