ภาคสี่ เราผ่านการ POST ข้อมูลไปจัดเก็บแล้วครับในตอนที่แล้ว ตอนนี้เป็นตอนแถมในภาคของ SpringMVC นั่นคือถ้ามผมต้องการส่ง Response กลับไปให้ Browser เป็นรูปแบบอื่น
เช่น JSON จะทำยังไงเพราะถ้าผมทะลึ่งอยากใช้ ExtJS หรือ Dojo ที่สามารถทำงานกับข้อมูลที่ถูกแปลงเป็น JSON ได้ดีเราจะทำอย่างไรครับ
โชคดีที่มีคนอยากได้แบบนี้แล้วเหมือนกันโดยโปรเจคนี้ชื่อ SpingJSON-View ครับเนื่องจาก SpringMVC เราสามารถปล่อย View ออกมาได้สามล้านแบบครับ XML, PDF … JSON
ดังนั้นอย่ารอช้าครับเริ่มด้วยการเพิ่มไลบรารี่เข้าไปใน pom.xml ก่อนครับตามสูตร
<dependency>
<groupId>net.sf.spring-json</groupId>
<artifactId>spring-json</artifactId>
<version>1.1</version>
</dependency>
ต่อไปเราต้องบอกให้ SpringMVC รู้ว่าเรามี View แบบใหม่แล้วนะชื่อ jsonView เพื่อให้มันสามารถจัดการรับมือได้อย่างถูกต้องโดยสิ่งที่เราจะต้องทำคือการเพิ่มไฟล์ชื่อ views.xml เข้าไปที่
WEB-INF ให้มีรายละเอียดตามนี้ครับ
<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.0.xsd">
<bean name="jsonView" class="org.springframework.web.servlet.view.json.JsonView"/>
</beans>
จากนั้นสิ่งที่เราต้องทำคือเพิ่ม mapping เข้าไปใน web.xml เพื่อแยกว่า response ที่เราต้องการเป็น JSON นั้นเราจะแยกไฟล์ออกไปไม่ให้ปะปนกับของเดิมครับ โดยผมจะสร้างไฟล์ชื่อ
springjson66-servlet.xml ขึ้นมาเพื่อใช้เก็บ Controller ทุกตัวที่ทำงานเกี่ยวกับ JSON ไว้ในนี้ หลังจากสร้างไฟล์เรียบร้อยก็จัดการไปเพิ่มข้อมูลเข้าไปใน web.xml ดังนี้ครับ
<servlet>
<servlet-name>springjson66</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>2</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springjson66</servlet-name>
<url-pattern>*.json</url-pattern>
</servlet-mapping>
โดยที่ request อะไรก็ตามที่ลงท้ายด้วย *.json จะถูกส่งต่อไปให้ springjson66 จัดการต่อครับจากนั้นให้เราไปสร้าง Controller หนึ่งตัวครับที่มีหน้าที่ดึงข้อมูลออกมาจากตารางที่เราต้องการ
และทำการเปลี่ยนผลที่ได้ออกมาเป็น JSON ดังนี้ครับ
/**
*
* @author TwinP
*/
public class SimpleJsonGetController implements Controller {
private AppUserService appUserService;
@Override
public ModelAndView handleRequest(HttpServletRequest arg0, HttpServletResponse arg1) throws Exception {
Map model = new HashMap();
model.put("model", this.appUserService.getUsers(null));
return new ModelAndView("jsonView", model);
}
/**
* @return the appUserService
*/
public AppUserService getAppUserService() {
return appUserService;
}
/**
* @param appUserService the appUserService to set
*/
public void setAppUserService(AppUserService appUserService) {
this.appUserService = appUserService;
}
}
จะเห็นได้ว่าไม่มีอะไรแต่กต่างจากเดิมมากนักสิ่งที่ต่างคือจังหวะที่เราคืนค่าออกมาจากเมธอด handleRequest นั้นเราเพียบแต่ระบุเพิ่มเติมว่าเราต้องการให้แปลงเป็น JSON นะแต่ Controller นี้จะใช้
งานไม่ได้ถ้าเราไม่ไป register มันไว้ตามระเบียบของ Spring โดยที่เราจะไปใส่ข้อมูลไว้ที่ springjson66-servlet.xml ครับ
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN 2.0//EN"
"http://www.springframework.org/dtd/spring-beans-2.0.dtd">
<beans>
<bean name="simpleJsonGetController"
class="com.spring66.tutorial.web.controller.SimpleJsonGetController">
<property name="appUserService" ref="appUserService"/>
</bean>
<bean name="urlMapping" class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
<property name="mappings">
<props>
<prop key="/hello.json">simpleJsonGetController</prop>
</props>
</property>
</bean>
<bean name="viewResolver" class="org.springframework.web.servlet.view.XmlViewResolver" />
</beans>
เป็นอันเรียบร้อยครับต่อไปสุดท้ายคือเราต้องไปสร้าง View ที่สามารถรับ response เป็น JSON แล้วเอาไป process ต่อได้ในทันควันนั่นคือ ExtJS ครับโดยที่ผมจะไม่ลงรายละเอียดนะครับเขียนเลยละกัน
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Paging Grid Example</title>
<link rel="stylesheet" type="text/css" href="scripts/ext/resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="scripts/ext/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="scripts/ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="css/examples.css" />
<script type="text/javascript" src="scripts/usrJSONService.js"></script>
</head>
<body>
<!?- grid will render to this element -?>
<div id="db-grid"></div>
</body>
</html>
จากไฟล์นี้ผมไปเรียก JS พิเศษหนึ่งไฟล์ชื่อ usrJSONService.js ครับโดยไฟล์นี้จะทำหน้าที่ไปเรียก controller ของเราและเอาผลมา process ใส่ grid แบบบ้านๆของ ExtJS ครับ
Ext.onReady(function(){
// create the data store
var store = new Ext.data.JsonStore({
url: 'hello.json',
root: 'model',
fields: [
{
name: 'usrFirstLogin'//, mapping: 'usrFirstLogin', type: 'date', dateFormat: 'timestamp'
},
{
name: 'usrId'
},
{
name: 'regDate'//, mapping: 'usrFirstLogin', type: 'date', dateFormat: 'timestamp'
},
{
name: 'usrPwd'
},
{
name: 'logDate'//, mapping: 'usrFirstLogin', type: 'date', dateFormat: 'timestamp'
},
{
name: 'usrName'
}
]
});
//store.loadData(myData);
store.load();
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{
id:'usrFirstLogin',
header: "usrFirstLogin",
width: 160,
sortable: true,
dataIndex: 'usrFirstLogin'
},
{
header: "usrId",
width: 75,
sortable: true,
renderer: 'usMoney',
dataIndex: 'usrId'
},
{
header: "regDate",
width: 75,
sortable: true,
dataIndex: 'regDate'
},
{
header: "% logDate",
width: 75,
sortable: true,
dataIndex: 'logDate'
}
],
stripeRows: true,
autoExpandColumn: 'usrFirstLogin',
height:350,
width:600,
title:'Array Grid'
});
grid.render('db-grid');
});
เรียบร้อยครับเราก็ได้ View สุดสวยกันแล้วครับภาคต่อไปเราจะลองมา POST ผ่าน ExtJS กันนะครับ
