首页 > 代码库 > struts2 jQuery tag (1)
struts2 jQuery tag (1)
最近又重拾 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 = "http://www.mamicode.com//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}
struts2 jQuery tag (1)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。