基于json-rpc的对象绑定

阅读更多

从这个ibm上了解了json-rpc的简单使用
http://www-128.ibm.com/developerworks/cn/websphere/library/techarticles/0606_barcia/0606_barcia.html

看完文档后json-rpc还是蛮好用的。可以很简单的实现服务暴露.屏蔽http , 类似spring的rmiServiceExport功能

java 代码

//server端的服务注册
....
json_bridge = new JSONRPCBridge();
json_bridge.registerObject("StockService",StockServiceImpl.getStockService());


//client端的rpc 调用
var jsonrpc = new JSONRpcClient("/FormBinder/JSON-RPC");
jsonrpc.StockService.setStockData(saveStockData,stock);

如何用上面的网站上都有说

开发中大部分都是做对象的管理
而对象管理基本上是两种类型，
对象的批量管理  用table
单对象的管理  用form ，
table是很统一的方式，
而form则大都是定制化的，但form 是做单对象管理的，则表单上所表现的元素必然是与对象的属性一一对应的,只是表现形式不同


这里利用js的动态性及json-rpc的调用模型，在上面的示例的基本上 实现一个简单的对象绑定,类似spring mvc的绑定机制

需要被绑定的类如下

java 代码

public class StockData implements Serializable {
    private String symbol;

    private double price;

    private String companyName;

    private User user;

    private List users;
}

服务模型如下

java 代码

public interface StockService {
    public StockData getStockData(String symbol) throws StockException;

    public void setStockData(StockData data);
}

页面的表单代码如下
这里的input ,select 等html元素都对应着StockData对象的某个属性
并且需要为这几个元素加上自定义的绑定属性.
例如
<input  fieldName="symbol"  id="symbolInput">  这里的自定义的属性为fieldName ,这个元素对应着StockData的symbol属性

xml 代码

<div class="stockPane"  id="pane"  >
           <h2>Stock Serviveh2>
           Enter symbol: <input fieldName="symbol"  id="symbolInput">
           <p/>
           Enter price: <input fieldName="price"  id="priceInput">
           <p/>
           Enter companyName: <select fieldName="companyName" id="companyName" >
                                  <option>IBMoption>
                               <option>BEAoption>
                               <option>MSFToption>
                           select>
           <p/>
           Enter userName: <input fieldName="user.name"  id="user.name">
           <p/>
           Enter userAge: <input fieldName="user.age"  id="user.age">
           <p/>
           Enter users: <select fieldName="users" id="users" multiple="true" >
                          <option>aaaoption>
                          <option>bbboption>
                          <option>cccoption>
                     select>
           <p/>
           <button onclick="submitStock()">Save Stock Databutton>
           <p/>
           <button onclick="showStock()">Show Stock Databutton>
   div>

submitStock ()  事件 要做的是 把UI数据绑定到对象 再设到StockService.setStockData 中

showStock() 事件是从 StockService中取得相应的data 对象，再绑定到ui 上

通过事先约订好的表单绑定契约，由FormBinder这个类来完成对象绑定的功能 ，减少js，及拼装json对象的代码

java 代码

         var binder = new FormBinder();
          binder.resolvers["s1"]= new MultipleSelectResolver();
          binder.resolvers["s2"]= new SelectResolver();

          var jsonrpc = new JSONRpcClient("/FormBinder/JSON-RPC");

         function submitStock()
        {
            var stock = binder.bindUIToData("pane");
                          jsonrpc.StockService.setStockData(saveStockData,stock);
        }

        function saveStockData(result,exception){
        }

        function showStock() {
            jsonrpc.StockService.getStockData(showStockData,"IBM");

        }

        function showStockData(result,exception) {
                binder.bindDataToUI("pane",result);
        }

FormBinder
支持的元素只有input  及两种select
input 是内部默认支持, 当然你也可以覆盖掉
select是需要注册的

java 代码

var binder = new FormBinder();
binder.resolvers["s1"]= new MultipleSelectResolver();   //名字随便起不冲突就可以了
binder.resolvers["s2"]= new SelectResolver();

也可以实现自已的resolver 
以InputResolver为例

js 代码

 1. function InputResolver(){
 2.     this.tagName="input";  // 要被解析的tagName
 3. }
 4. //根据给定的fieldValue对象，为相应的widget赋值
 5. InputResolver.prototype.setWidgetValue = function(widget,fieldValue){
 6.                     widget.value = fieldValue;
 7. }
 8. //把widget的值赋给相应的data对象,
 9. InputResolver.prototype.setObjectValue = function (widget,data,fieldName){
10.                 data[fieldName] = widget.value;
11. }
12. // 判断widget是否为空
13. InputResolver.prototype.isEmpty = function (widget){
14.                 return widget.value =="";
15. }