struts2 jQuery tag (2) - Grid

繼續上一篇關於 struts 2 jQuery tag 的介紹，這裡要 demo 一個很有用的 tag --- grid ! 如下圖是執行出來的結果。

struts jQuery tag 提供的 grid 功能非常強大，可以排序、翻頁、編輯，這些進階的功能留給鄉民們自行研究，這裡只簡單的從資料庫撈出選定日期的資料，顯示在 grid 上。struts.xml 及 index.jsp 的內容沒有改變，請看上一篇的內容。其餘說明如下:

• 專案結構: 所有檔案的列表，因為這裡的股票資料是存在資料庫，整合了 spring 和 mybatis，所以多了一些 DAO、DTO 及 spring 設定檔。

• 因為要整合 spring 和 mybatis，並且引入新的 grid tag 的標籤庫，所以 pom.xml 修改如下:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>DemoSite</groupId>
  <artifactId>DemoSite</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  <build>
    <sourceDirectory>src</sourceDirectory>
    <plugins>
      <plugin>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.1</version>
        <configuration>
          <source>1.7</source>
          <target>1.7</target>
        </configuration>
      </plugin>
      <plugin>
        <artifactId>maven-war-plugin</artifactId>
        <version>2.3</version>
        <configuration>
          <warSourceDirectory>WebContent</warSourceDirectory>
          <failOnMissingWebXml>false</failOnMissingWebXml>
        </configuration>
      </plugin>
    </plugins>
  </build>
  <dependencies>
      <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-context</artifactId>
          <version>4.1.0.RELEASE</version>
      </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-web</artifactId>
        <version>4.1.0.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-jdbc</artifactId>
        <version>4.1.0.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-tx</artifactId>
        <version>4.1.0.RELEASE</version>
    </dependency>
    <dependency>
        <groupId>org.springframework</groupId>
        <artifactId>spring-test</artifactId>
        <version>4.1.0.RELEASE</version>
    </dependency>

    <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>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>
    <dependency>
        <groupId>org.apache.struts</groupId>
        <artifactId>struts2-junit-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>com.jgeppert.struts2.jquery</groupId>
        <artifactId>struts2-jquery-grid-plugin</artifactId>
        <version>3.7.1</version>
    </dependency>

    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis</artifactId>
        <version>3.2.7</version>
    </dependency>
    <dependency>
        <groupId>org.mybatis</groupId>
        <artifactId>mybatis-spring</artifactId>
        <version>1.2.2</version>
    </dependency>

    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>5.1.33</version>
    </dependency>

    <dependency>
        <groupId>ch.qos.logback</groupId>
        <artifactId>logback-classic</artifactId>
        <version>1.1.2</version>
    </dependency>
  </dependencies>
</project>

• 修改 web.xml，整合 spring，內容如下:

<?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>

    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath*:beans-config.xml</param-value>
    </context-param>
    
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    
    <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>

• spring 設定檔: 這裡只是用 spring 整合 mybatis，以讀取資料庫，所有 DAO 會放在 idv.steven.demo.dao 這個 package 裡。datasource.properties 裡則有 JDBC 相關參數。

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:c="http://www.springframework.org/schema/c"
    xmlns:cache="http://www.springframework.org/schema/cache"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:jdbc="http://www.springframework.org/schema/jdbc"
    xmlns:jee="http://www.springframework.org/schema/jee"
    xmlns:lang="http://www.springframework.org/schema/lang"
    xmlns:mybatis-spring="http://mybatis.org/schema/mybatis-spring"
    xmlns:p="http://www.springframework.org/schema/p"
    xmlns:tx="http://www.springframework.org/schema/tx"
    xmlns:util="http://www.springframework.org/schema/util"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/cache http://www.springframework.org/schema/cache/spring-cache.xsd
        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/jdbc http://www.springframework.org/schema/jdbc/spring-jdbc-4.1.xsd
        http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee.xsd
        http://www.springframework.org/schema/lang http://www.springframework.org/schema/lang/spring-lang.xsd
        http://mybatis.org/schema/mybatis-spring http://mybatis.org/schema/mybatis-spring.xsd
        http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd
        http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util.xsd">

    <context:property-placeholder location="classpath:datasource.properties" />

    <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource"
        p:driverClassName="${jdbc.driverClassName}"
        p:url="${jdbc.url}"
        p:username="${jdbc.username}"
        p:password="${jdbc.password}"
    />
     
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"
        p:dataSource-ref="dataSource"
    />
    
    <tx:annotation-driven transaction-manager="transactionManager" />

    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
      <property name="dataSource" ref="dataSource" />
      <property name="transactionFactory">
        <bean class="org.apache.ibatis.transaction.managed.ManagedTransactionFactory" />
      </property>
      <property name="mapperLocations">
          <list>
              <value>classpath*:idv/steven/demo/dao/StockDao.xml</value>
          </list>
      </property>
    </bean>
     
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"
        p:sqlSessionFactoryBeanName="sqlSessionFactory"
        p:basePackage="idv.steven.demo.dao"
    />  
</beans>

# datasource.properties
jdbc.driverClassName=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://192.168.0.110:3306/demosite
jdbc.username=steven
jdbc.password=password

• DTO 的定義如下，是用來將資料庫裡的資料傳回給程式，因為 table Stock 有六個欄位，且我們這六個欄位的值都想要，就定義了相同的名稱的六個變數，並給予 getter、setter method。

package idv.steven.demo.dto;

import java.sql.Date;

public class Stock implements Comparable<Stock> {
    private String iD;
    private String name;
    private Double fluctuation;
    private Integer amount;
    private Double price;
    private Date txDate;
    
    public String getID() {
        return iD;
    }
    public void setID(String iD) {
        this.iD = iD;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public Double getFluctuation() {
        return fluctuation;
    }
    public void setFluctuation(Double fluctuation) {
        this.fluctuation = fluctuation;
    }
    public Integer getAmount() {
        return amount;
    }
    public void setAmount(Integer amount) {
        this.amount = amount;
    }
    public Double getPrice() {
        return price;
    }
    public void setPrice(Double price) {
        this.price = price;
    }
    
    public Date getTxDate() {
        return txDate;
    }
    public void setTxDate(Date txDate) {
        this.txDate = txDate;
    }
    
    @Override
    public String toString() {
        return "Stock [iD=" + iD + ", name=" + name + ", fluctuation="
                + fluctuation + ", amount=" + amount + ", price=" + price
                + ", txDate=" + txDate + "]";
    }
    
    @Override
    public int compareTo(Stock o) {
        return this.iD.compareTo(o.getID());
    }
}

• DAO 的程式如下，其實我們只會用到 find method，createStock method 可以先忽略。find method 接收一個參數 -- 交易日期，並將當天的股票資料傳回，注意 @Repository 這個標註，這表示這個類別是一個 DAO。

package idv.steven.demo.dao;

import idv.steven.demo.dto.Stock;

import java.util.List;

import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;

@Repository
public interface StockDao {
    public List<Stock> find(@Param("txDate") String txDate);
    public int createStock(Stock stock);
}

• mybatis 的 O/R mapping 如下，很簡單的一個 select statement。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">  

<mapper namespace="idv.steven.demo.dao.StockDao">  
     <sql id="fields">iD, name, fluctuation, amount, price, txDate</sql>
     
    <resultMap type="idv.steven.demo.dto.Stock" id="stock">
        <id column="iD" property="iD"/>
        <result column="name" property="name"/>
        <result column="fluctuation" property="fluctuation"/>
        <result column="amount" property="amount"/>
        <result column="price" property="price"/>
        <result column="txDate" property="txDate"/>
    </resultMap>

    <select id="find" parameterType="String" resultMap="stock">  
        select <include refid="fields"/>
        from Stock
        where txDate = #{txDate}
    </select>
    
    <insert id="createStock">
          insert into Stock (<include refid="fields"/>)
          values (#{iD}, #{name}, #{fluctuation}, #{amount}, #{price}, #{txDate})
    </insert>
</mapper>

• stock.jsp: 從 index.jsp 點選「股價」的 tab 後，觸發 action 後轉進入這個畫面，這個畫面有三個元件，一個「日曆」、一個「按鈕」及一個「div」。這裡要注意的是 submit 這個 tag 的 targets attribute，它指出了結果會顯示的位置。按 submit 後會觸發的 action 是寫在 href 裡。

<%@ 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:url var="remoteurl" action="showStock" />

<s:form id="formStock" theme="xhtml">
    <sj:datepicker id="txDate" name="txDate" label="請選擇日期" displayFormat="yy/mm/dd" />
    <sj:submit 
        href="%{remoteurl}"
        targets="stockPrice" 
        value="送出" 
        indicator="indicator"
        button="true"
    />
    
</s:form>

<sj:div id="stockPrice" />

</body>
</html>

• Acton: 上面的畫面按 submit 後觸發了下面橘色的 method，這個 method 沒做什麼事，只是通知結果要顯示在 /jsp/showStock.jsp 這個網頁，至於結果是什麼? 那要看 showStock.jsp 才知道。

package idv.steven.demo.action;

import java.util.List;

import idv.steven.demo.dao.StockDao;
import idv.steven.demo.dto.Stock;

import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Result;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;

import com.opensymphony.xwork2.ActionSupport;

public class StockAction extends ActionSupport {
    private static final long serialVersionUID = 4242093494226883485L;
    final static Logger logger = LoggerFactory.getLogger(StockAction.class);
    
    @Autowired
    private StockDao dao;
    
    private String txDate;
    private List<Stock> stocks;
    
    //action method
    @Action(value = "/stock", results = { @Result(location = "/jsp/stock.jsp", name = "success") })
    public String stock() throws Exception {
        return SUCCESS;
    }

    @Action(value = "/showStock", results = { @Result(location = "/jsp/showStock.jsp", name = "success") })
    public String showStock() {
        return SUCCESS;
    }
    
    @Action(value = "/stockList", results = { @Result(name = "success", type = "json") })
    public String stockList() {
        stocks = dao.find(txDate);
        
        return SUCCESS;
    }
    
    //getter & setter method
    public String getTxDate() {
        return txDate;
    }

    public void setTxDate(String txDate) {
        this.txDate = txDate;
    }

    public List<Stock> getStocks() {
        return stocks;
    }

    public void setStocks(List<Stock> stocks) {
        this.stocks = stocks;
    }
}

• 股票列表的網頁如下，就只有一個 grid 裡顯示著股票資訊，因為 grid 是在 struts-query-grid-tags 標籤庫裡，所以綠色部份將這個標籤庫引入。至於 grid 的資料來源在那呢? 要看橘色部份，這裡指出要到 stockList action 去取得資料，淺藍色則是指出取得的資料將以什麼怎樣的資料型別傳回，這裡指定為 json，gridModel 這個設定則是資料傳回時的物件名稱，這裡設為 stocks，即表示在 action 那邊應該會有一個 getStocks() 的 method 可供 grid 取得資料。要特別注意的是灰色那一行，它指出了這個 grid 是屬於那一個 form，這樣我們才抓的到 form 裡面的交易日期。

 現在回頭去看上面的 action -- StockAction.java，裡面標有 @Action("stockList") 的 method，grid 從這取得資料，程式很簡單的呼叫 DAO 取得資料放到 stocks 變數裡即返回 grid，而 grid 這時即可透過 getStocks() method 取得相關資料並顯示出來了! 注意看那個 method 上也有標注傳回的資料型別為 json，action 和 grid 間才能正確溝通。

<%@ 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"%>
<%@ taglib prefix="sjg" uri="/struts-jquery-grid-tags"%>

<s:url var="remoteurl1" action="stockList" />

    <sjg:grid
        id="gridtable"
        caption="股價"
        dataType="json"
        href="/stockList"
        pager="true"
        gridModel="stocks"
        rowList="10,15,20"
        formIds="formStock"
        rowNum="15"
        rownumbers="true"
        viewrecords="true"
        shrinkToFit="true"
    >
        <sjg:gridColumn name="txDate" index="txDate" title="交易日期" sortable="false"/>
        <sjg:gridColumn name="ID" index="ID" title="代號" sortable="false"/>
        <sjg:gridColumn name="name" index="name" title="名稱" sortable="true"/>
        <sjg:gridColumn name="fluctuation" index="fluctuation" title="漲跌" sortable="false"/>
        <sjg:gridColumn name="amount" index="amount" title="交易量" sortable="true"/>
        <sjg:gridColumn name="price" index="price" title="成交價" sortable="true"/>
    </sjg:grid>

最後執行出來的，就如一開頭的畫面所示，非常的簡單，而且正如 struts2 jQuery tag 這個名稱所示的，因為是用 jQuery 透過 ajax 取得資料直接顯示於當前的網頁，所以不會有傳統網頁還要翻到新一頁才能顯示資料的問題。