现在的位置: 首页 > 综合 > 正文

初步搭建yui-ext(Ajax)的开发环境(后台->前台数据交换)

2013年08月08日 ⁄ 综合 ⁄ 共 5763字 ⁄ 字号 评论关闭

  如果看过yui-ext的例子,相信大家很想把它用在实际项目中去,我这两个星期都在研究它,国内几乎没有资料,只能从http://www.jackslocum.com的论坛找,我现在简单介绍一下我的实际开发环境:

     我的项目原来的开发环境是Struts+Spring1.2.8+Hibernate3.1.2,现在要把页面的jsp+jstl,和Struts的Action转换成yui-ext的Ajax页面,简单实现数据列表、翻页和添加、修改、删除等功能。

     1.
数据交换,要从Struts环境的Action通过request对象传递数据给jsp页面,如果用Ajax,比较常用的是XML转换和Json转换,我
选择了Json,因为用json-lib包可以在java端用很方便的把对象转换成Json格式,在页面可以调用脚本eval()转换成
javascript的数组对象。

     1) json-lib转换java对象(下载json-lib:http://json-lib.sourceforge.net)

    Action例子:(example.do)代码中加入:

    response.setContentType("text/xml;charset=utf-8");

    JSONArray jsonArray = JSONArray.fromObject(list);

     response.getWriter().print("{datalist:" + jsonArray + "}");

    return null;

    简单说明:把action的return mapping改成null,因为现在使用response对象进行数据传递,fromObject(list)中的list包括就是页面需要调用显示的数据,可以是其他java对象,String、bean或Map。

    2) JSONDataModel调用Action(example.do)

     yui-ext通过JSONDataModel.js把json格式转换成javascript的数组对象

     js例子:

     var schema = {

    root: 'datalist',

    id: 'nothing',

    fields: ['a','b', 'c', 'd']

     dataModel= new YAHOO.ext.grid.JSONDataModel(schema);

    dataModel.load('http://xxx/example.do');

    说明:schema的root参数要和action传递的json数据头list对应,这里new
JSONDataModel后,JSONDataModel会把example.do返回的json数据转换成dataModel的数
组,JSONDataModel继承于LoadableDataModel,JSONDataModel只复杂转换json数据,其他由继承的类实现,这
是yui-ext的特点,你可以自己写DataModel继承父类,转换自己的数据格式,yui-ext提供了JSONDataModel和
XMLDataModel两种数据格式转换。

     3) 使用grid显示dataModel数据

     js例子:

        var grid = new YAHOO.ext.grid.Grid('example-grid', dataModel, colModel);

       grid.render();

    jsp页面例子:

        <div id="example-grid" style="border: 1px solid #cccccc;
overflow: hidden; width: 535px; height: 225px;"></div>

    说明:colModel的使用看example,grid绑定dataModel后,在页面的<Div>显示grid。

 

 大家一定会给yui-ext的EditorGrid可编辑表格吸引,但编辑后怎么提交到后台Action?我也曾经苦恼了一段时间,在

http://www.jackslocum.com/forum的论坛,jack

sloc说过,如果使用XMLDataModel,你在grid编辑修改后,XMLDataModel中的数据也会同时修改,只要把
XMLDataModel的数据生成xml提交后台就可以了,我在项目中没有实现XMLDataModel的xml传输,没验证他的说法,因为我找不到很
好的java对象转换xml格式的包,希望网友有好的包介绍一下。

    而我选择了JSONDataModel,要实现把json格式提交到服务器,jack
sloc提示要自己转换json数据,晕,因为要在页面使用js脚本实现转换,开始觉得很难,但实现后发现并不困难,以下介绍一下,本文有些内容是参考了

http://www.rodrigodiniz.qsh.eu/YahooGrid.aspx的grid例子:

    1. 把dataModel数据回填Form中的元素

  
例子是实现把dataModel中的一行数据自动填到form表单的元素中,也就是替代struts的<html:XXX>标签,这里要告诉
大家,连jstl都不能用了,因为不用刷新页面,但还好,我还有点javascript基础,jstl的一些功能还可以用js实现。

   例子:

   <form name="form1">

      <input type="text" name="userId" value="">

      <input type="text" name="userName" value="">

  </form>

  说明:随便做一个简单的form。

  dataModel= new YAHOO.ext.grid.JSONDataModel(schema);

  dataModel.addListener('load', onEditLoad);

  dataModel.load('http://xxx/example2.do');

 
说明:在dataModel添加一个Listener,使用dataModel实时从后台example2.do取一个javabean对象new
User(userId,userName)的数据(example2.do的实现可参考第一部分Action介绍),javabean数据返回后激活
onEditLoad()方法,yui-ext使用一般使用callback得到回调数据,待会儿介绍。

 

  function onEditLoad() { 

    var row = dataModel.getRows([0,0]);

    var fields=dataModel.schema.fields;

    for(var i=0;i< fields.length;i++){

    if ($(fields[i])!= null) {    

    $(fields[i]).value= row[0][i];

    }

    }

  }

  说明:

   
因为返回是一个javabean,JSONDataModel已经转换成javascript数组对象,所以getRows([0,0]只取第一行数据
[object1,object2],object1中包括userId=XXX,object2包括userName=XXX,在schema取出与
javabean对应的fields数组[userId,userName),

  
这里用到prototype.js,网上很容易找到,它通过$(fields[i])调用form表单中的元素,其
实$(fields[i])=document.getElementById(fields[i])),通过循环就可以把dataModel数据自动填
到form表单元素。

   2. 页面提交表单方法一:

   使用prototype.js把form元素通过Form.serialize()方法自动调交后台,Action以request.getParameter("xxx")获取数据。例子如下:

   function Save(){           

   var callback = {

success : responseSuccess,

failure : responseFailure

   };

   var postData=Form.serialize($("form1"));

   YAHOO.util.Connect.asyncRequest('POST', "http://xxx/example3.do", hcallback, postData);

   }

   var responseSuccess = function(o)

   {

    alert(o.responseText);

   }

   var responseFailure = function(o)

   {

      alert(o.statusText);

   }

   说明:建立一个callback方法,使用Yahoo
UI的asyncRequest()方法post数据到action,其原理就是在链接后面加参数,象http://xxx
/example3.do?userId=XXX&userName=XXX,后台action通过
request.getParameter("xxx")获取数据,但缺点是要手工对建立user对象。

    3. 页面提交表单方法二:使用Json数据格式提交到后台Action

    1)前台js脚本例子:

    function save() {

var fields=dataModel.schema.fields;

var objRet= new Object();

    for(var i=0;i< fields.length;i++){

    if ($(fields[i])!= null) {

      objRet[fields[i]]=$(fields[i]).value; 

  }

    var callback = {

success : responseSuccess,

failure : responseFailure

    };

    YAHOO.util.Connect.asyncRequest(

     'POST',

     'http://xxx/example3.do',

     callback,

     "outJSONXml=[" + YAHOO.ext.util.JSON.encode(objRet) + "]");    

    }

    说明:通过dataModel的fields数组获取对象名,新建一个Object()对象,存放form表单中元素的value,然后通过Yahoo UI的JSON.encode()方法转换成json格式,其调交原理:

     http://xxx/example3.do?outJSONXml=[---json数据格式---]

   2) 后台Action(example3.do)接收json数据格式例子:

    private BeanUtilsBean beanUtilsBean;

    if (request.getParameter("outJSONXml")!=null) {

        JSONObject jsonObject = new JSONObject();

        jsonObject.put("JSonParser",request.getParameter("outJSONXml"));

        List list = JSONArray.toList( jsonObject.getJSONArray( "JSonParser" ) );

        JSONDynaBean beana = (JSONDynaBean) list.get(0);

        User user = new User();

        beanUtilsBean.copyProperties(user,beana)

    }

    说明:因为JSONDynaBean对象是继承于DynaBean,所以可以通过apache的common包中的BeanUtilsBean把对象自动从JSONDynaBean拷贝到user对象,这样就省去了手工把对象逐一赋值的麻烦。

    3) 关于updateManager()方法

    yui-ext也提供一个updateManager方法,实现和Yahoo asyncRequest()方法一样的功能,可以实现把后台反回的信息填入一个<Div>提示用户,例子如下:

    var mgr = new YAHOO.ext.UpdateManager('errorDiv');        

   mgr.update('http://xxx/example3.do',

      "outJSONXml=[" + YAHOO.ext.util.JSON.encode(objRet) + "]", );

   updateManager使用callback回调:

     mgr.update({

     url: 'http://xxx/example3.do',

     params: "outJSONXml=[" + YAHOO.ext.util.JSON.encode(objRet) + "]",

callback: updateString,

     text: 'Loading...',

     timeout: 10,

     scripts: true

  });

    function updateString(oElement, bSuccess) {

if (bSuccess) {

     alert(oElement.innerHTML);

}

    }    

   
总结:以上两部分一口气总结了我近两个星期对yui-ext在实际项目中测试应用的情况,现在我还在项目样例工程测试中,有很多细节的地方在这里没有很详
细的罗列,由于yui-ext介绍的例子有限,对于前后台应用介绍很少,所以特意把经验写出来让大家少走弯路,共同研究,水平有限,请大家不要介意,请多
交流指点。

抱歉!评论已关闭.