最近又重拾 web 程式，才讓我發現，原來 struts 又進化了! 提供了不少 jQuery tag，可以很方便的做出漂亮的操作介面! 說明如下:
- 官網: https://code.google.com/p/struts2-jquery/ 其實上面就有很多 sample 程式，下載來看就懂了，我這個 po 文算是給自己做個筆記吧!
- 這個程式只是簡單的有兩個功能，第一個是可以選擇日期，並顯示出來，第二個功能是查詢某一天的股價，在下一篇再說明，這裡先看一下第一個功能執行出來的畫面。
- 先在 eclipse 中建立一個 Dynamic Web Project，這裡就暫且命名為 struts2，先看寫完第一個功能時，整個程式會出現那些檔案:
裡面的 beans-config.xml 及 datasource.properties 在這裡還用不到，這是我在下一篇要用 spring 及 mybatis 存取資料庫時才會用到的。
- 載入 struts2 jar 檔，於 pom.xml 中加入如下內容:
<dependency>
<groupId>org.apache.struts</groupId>
<artifactId>struts2-core</artifactId>
<version>2.3.16.3</version>
</dependency>
<dependency>
<groupId>org.apache.struts</groupId>
<artifactId>struts2-spring-plugin</artifactId>
<version>2.3.16.3</version>
</dependency>
<dependency>
<groupId>com.jgeppert.struts2.jquery</groupId>
<artifactId>struts2-jquery-plugin</artifactId>
<version>3.7.1</version>
</dependency>
<dependency>
<groupId>org.apache.struts</groupId>
<artifactId>struts2-convention-plugin</artifactId>
<version>2.3.16.3</version>
</dependency>
<dependency>
<groupId>org.apache.struts</groupId>
<artifactId>struts2-json-plugin</artifactId>
<version>2.3.16.3</version>
</dependency>
- web.xml 中加入如下內容，讓 struts 來處理網頁。
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>Struts2</display-name>
<filter>
<filter-name>struts2</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
- struts.xml: 特別注意綠色那一行，所有 struts 的 action 類別會放在 idv.steven.demo.action 這個 package 裡。
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
"http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
<constant name="struts.enable.DynamicMethodInvocation" value="false" />
<constant name="struts.devMode" value="false" />
<constant name="struts.convention.action.packages" value="idv.steven.demo.action"/>
<constant name="struts.convention.default.parent.package" value="json-default"/>
<constant name="struts.custom.i18n.resources" value="messages" />
<!-- Settings for CKEditor Image Upload -->
<constant name="struts.ckeditor.allowUploads" value="true" /> <!-- default is false -->
<constant name="struts.ckeditor.allowedFileExtensions" value="jpg,jpeg,png" />
<constant name="sstruts.ckeditor.uploadFolder" value="/imageUploads" />
<!-- include file="showcase.xml" / -->
</struts>
- 建立首頁 index.jsp: 上面綠色的部份，引入 struts jquery tag，接下來使用 tabbedpanel，做出兩頁的頁籤，當按了第一個頁籤時，觸發 calendar 這個 action，要注意，於 <head></head> 一定要加入 <sj:head/>，這樣才會引入 struts jQuery 相關的 javascript。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首頁</title>
<sj:head/>
</head>
<body>
<s:url var="remoteurl1" action="calendar"/>
<s:url var="remoteurl2" action="stock"/>
<sj:tabbedpanel id="remotetabs" selectedTab="0" show="true" hide="‘fade‘" collapsible="true" sortable="true">
<sj:tab id="tab1" href="%{remoteurl1}" label="日曆"/>
<sj:tab id="tab2" href="%{remoteurl2}" label="股價"/>
</sj:tabbedpanel>
</body>
</html>
- Action: 在 idv.steven.demo.action 這個 package 中增加一個命名為 CalendarActoin 的類別，如下，其實，這個類別的名稱並不重要，因為上面 jsp 程式觸發 calendar action 時，struts 是在 @Action 尋找其 value 等於 calender 的 method 來執行。如下的 calender method 的設定說明了，當這個 method 傳回 "success" 值，網頁會導向 /jsp/calendar.jsp。
package idv.steven.demo.action;
import java.util.Date;
import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Result;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import com.opensymphony.xwork2.ActionSupport;
public class CalendarAction extends ActionSupport {
private static final long serialVersionUID = 1840098879054587910L;
final static Logger logger = LoggerFactory.getLogger(CalendarAction.class);
private String selectedDate;
//action method
@Action(value = "/calendar", results = { @Result(location = "/jsp/calendar.jsp", name = "success") })
public String calendar() throws Exception {
return SUCCESS;
}
@Action(value = "/showDate", results = { @Result(location = "/jsp/showDate.jsp", name = "success") })
public String showDate() throws Exception {
return SUCCESS;
}
//getter & setter method
public String getSelectedDate() {
return selectedDate;
}
public void setSelectedDate(String selectedDate) {
this.selectedDate = selectedDate;
}
}
- calendar.jsp: 這個網頁使用 datepicker tag 來顯示一個日曆，在使用者按下按鈕時，會觸發 showDate action，並將這個 action 的傳回結果會顯示在命名為 result 的 div tag 上。至於 showDate action 的程式已在上面的 CalendarAction 類別裡了，在那個類別裡可以找到一個有 @Action 上的 value 為 showDate 的 method，使用者按下按鈕就是會將 selectedDate 的值傳過去，去執行這個 method，這個 method 執行完者會將網頁導向 /jsp/showDate.jsp。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>日曆</title>
<sj:head jqueryui="true"/>
</head>
<body>
<s:form id="form" theme="xhtml">
<sj:datepicker id="selectedDate" name="selectedDate" label="請選擇日期" displayFormat="yy/mm/dd" />
<sj:submit
href="showDate"
targets="result"
value="送出"
indicator="indicator"
button="true"
/>
</s:form>
<sj:div id="result" />
</body>
</html>
- showDate.jsp: 顯示結果，只有一行程式，簡單的將日期顯示出來，於是就像文章最開頭的畫面顯示的，於按鈕下顯示出使用者選擇的日期。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
${selectedDate}
时间： 2024-10-27 18:08:16