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

    大家一定会给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介绍的例子有限，对于前后台应用介绍很少，所以特意把经验写出来让大家少走弯路，共同研究，水平有限，请大家不要介意，请多交流指点。

鼓励一下，希望看到更多的经验

大家共同努力。
有时间做一个demo，并且把分页也介绍一下。

一直喜欢纯js的ajax组件，这样我就可以在rails和java上用了。昨天在springside上有人推荐，看了一下非常喜欢。

POST数据可以直接使用yui中的Dialog。我作了一个例子

<div id="dialog1">
	<div class="bd">
		<form name="dlgForm" method="POST" action="<c:url value="/web/user/ajax!save.action" />">
			<label for="firstname">用户名:</label><input type="text" name="user.userName" />
			<label for="lastname">密码:</label><input type="text" name="user.password" />
			<label for="lastname">姓名:</label><input type="text" name="user.name" />
			<label for="lastname">性别:</label><input type="text" name="user.sex" />
		</form>
	</div>
</div>
<script>

var handleSubmit = function() {
	alert('s');
	myDialog.submit();
};
var handleCancel = function() {
	alert('c');
};


var myDialog = new YAHOO.widget.Dialog("dialog1",{ width : "300px",
													  fixedcenter : true,
													  visible : false, 
													  constraintoviewport : true,
													  buttons : [ { text:"Submit", handler: handleSubmit, isDefault:true },
																  { text:"Cancel", handler: handleCancel } ]
													 }); 
myDialog.render(); 
myDialog.show(); 
</script>

这个例子控制器用的WebWork的Action，并且WebWork的Parameter Interceptor工作也正常。

yui中的Dialog做的跟ext的grid完全两码事，楼主举的例子不太好。

顶起来

yui-ext是个好东西，但是学习起来挺费劲！

“因为我找不到很好的java对象转换xml格式的包”
：试一下JAXB

学习下...