繼續上一篇關於 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 取得資料直接顯示於當前的網頁，所以不會有傳統網頁還要翻到新一頁才能顯示資料的問題。
沒有留言:
張貼留言