Google Code Prettify

2014年10月18日 星期六

struts2 jQuery tag (1) - TabbedPanel & DatePicker

最近又重拾 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}




By 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)