提出一种将EXT JS作为展示层技术如何整合到SSH2框架中。基本的思想就是通过EXT JS的AJAX请求连接到Struts的action,用html document元素来获取用户输入值,并通过GET的方法将参数传递给action,处理完毕后用json来回传结果数据。
EXT JS是一个javascript库,该框架提供了很强大的富客户端体验,但由于EXT JS主要是客户端的技术,与服务器端技术整合有一定的困难。国内的EasyJWeb框架提供了强大的整合方案,在此本文仅提供一种简单的整合方案,就是通过AJAX请求来实现。
首先,请下载Ext JS2.0的库文件并将该文件夹放到项目的web路径下。对于如何开发EXT JS应用,在这里就不详述了,请参照其他网站上的例程。
如果想在EXT JS中使用Struts的标签,例如对EXT JS的控件中的文本进行国际化,则必须将JavaScript代码写到JSP页面中,如果写在单独的js文件里面,是无法访问Struts标签的。例如声明一个对话框:
var xxx = Ext.MessageBox.show({
id:'loginProcess',
title: '<s:text name="title"/>',
msg: '<s:text name="login"/>',
progressText: '',
width:300,
progress:true,
closable:true,
animEl: 'loading'
});
在资源文件中定义title=请稍后.. title即可读出。
你可以定义一个不显示的层来放置包含Struts标签的登陆框,然后再用EXT的窗口来包装这个登陆框:
<div id="divLoginWindow" style="display:none; ">
<div id="divLoginInfo">
<table id="tableLogin2" align="center">
<tr>
<td align="left"><s:textfield size="16" maxlength="20" id="name" name="username" label="%{getText('username')}"/></td>
</tr>
<tr>
<td align="left"><s:password size="16" maxlength="20" id="pwd" name="password" label="%{getText('password')}"/></td>
</tr>
</table>
</div>
</div>
<!--用于输出消息-->
<div id="divMessageTip"></div>
然后在EXT JS的窗口中显示这个层:
winLogin = new Ext.Window({
el:'divLoginWindow',
//layout:'fit',
//modal:true,
title:'<center>用户登录</center>',
width:250,
height:150,
resizable:false,
closeAction:'hide',
items: [divLoginInfo],
buttons: [{
text:'确 定',
handler: function(){login(imgId);}//function(){document.getElementById('loginSubmit').click();}
}]
});
整合的关键在于建立ajax请求,并向action传递参数:
var conn = new Ext.data.Connection();
// 发送异步请求
conn.request({
// 请求地址
url: 'login2.action',
method: 'GET',
params:'username='+document.getElementById('name').value+'&password='+document.getElementById('pwd').value,
// 指定回调函数
callback: callback
});
注意红色部分的代码,采用document元素来获取Struts标签的值,并以参数的形式设置到AJAX请求中。注意url属性,必须标明 .action,否则EXT会找不到Struts的action。再看一下login2.action的内容(配置在这里就不多说了,请参考上一篇文章):
private UserServiceImpl userService;
private String message;
private String username;
private String password;
private String checkcode;
private ResourceBundleMessageSource messageSource;
属性部分与前面文章里描述的基本相同,action可以将这些属性自动关联到GET方法传输的参数。所以在excute方法里直接调用:
User user = userService.getUser(username);
这里的username直接获取到视图层传输过来的username参数。为了响应AJAX请求,把数据封装到json对象是一个不错的选择:
Json json=new Json();
if(user!=null&&user.getPassword().equals(password))
{
json.add("answer", true);
json.add("msghead", messageSource.getMessage("messageAdvice", null,Locale.CHINA));
json.add("msg", messageSource.getMessage("loginSuccess", null,Locale.CHINA));//"登录成功"
}
else
{
json.add("answer", false);
json.add("msghead", messageSource.getMessage("ErrorAdvice", null,Locale.CHINA));
json.add("msg", messageSource.getMessage("pswError", null,Locale.CHINA));
}
message=json.toString();
这里的Json是自定义的,以下是add方法:
public void add(String key, Object value) {
if (text == null) {
if (value instanceof String) {
text = "{" + key + ":'" + value.toString() + "'}";
} else {
text = "{" + key + ":" + value.toString() + "}";
}
} else {
text = text.substring(0, text.length() - 1);
if (value instanceof String) {
text += "," + key + ":'" + value.toString() + "'}";
} else {
text += "," + key + ":" + value.toString() + "}";
}
}
}
在action中处理完毕后,可以在callback函数中取出响应值:
var jsonObj = Ext.util.JSON.decode(response.responseText);
然后再作处理:
if(jsonObj.answer==true){
.......
}
本示例的运行结果是: