基于json-rpc的对象绑定 jsonSpringIBMprototypeUI

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

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

java 代码

 

1. //server端的服务注册 
   
2. ....
   
3. json_bridge = new JSONRPCBridge();
4. json_bridge.registerObject("StockService",StockServiceImpl.getStockService());  
5.   
6.   
7. //client端的rpc 调用  
8. var jsonrpc = new JSONRpcClient("/FormBinder/JSON-RPC");  
9. jsonrpc.StockService.setStockData(saveStockData,stock);  

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

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


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

需要被绑定的类如下

java 代码

 

1. public class StockData implements Serializable {  
2.     private String symbol;  
3.   
4.     private double price;  
5.   
6.     private String companyName;  
7.       
8.     private User user;  
9.   
10.     private List users;  
11. }  

服务模型如下

java 代码

 

1. public interface StockService {  
2.     public StockData getStockData(String symbol) throws StockException;  
3.   
4.     public void setStockData(StockData data);  
5. }  

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

xml 代码

 

1. <div class="stockPane"  id="pane"  >  
2.            <h2>Stock Servive</h2>  
3.            Enter symbol: <input fieldName="symbol"  id="symbolInput">  
4.            <p/>  
5.            Enter price: <input fieldName="price"  id="priceInput">  
6.            <p/>  
7.            Enter companyName: <select fieldName="companyName" id="companyName" >  
8.                                   <option>IBM</option>  
9.                                <option>BEA</option>  
10.                                <option>MSFT</option>  
11.                            </select>  
12.            <p/>  
13.            Enter userName: <input fieldName="user.name"  id="user.name">  
14.            <p/>  
15.            Enter userAge: <input fieldName="user.age"  id="user.age">  
16.            <p/>  
17.            Enter users: <select fieldName="users" id="users" multiple="true" >  
18.                           <option>aaa</option>  
19.                           <option>bbb</option>  
20.                           <option>ccc</option>  
21.                      </select>  
22.            <p/>  
23.            <button onclick="submitStock()">Save Stock Data</button>  
24.            <p/>  
25.            <button onclick="showStock()">Show Stock Data</button>  
26.    </div>  

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

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

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

java 代码

 

1.          var binder = new FormBinder();  
2.           binder.resolvers["s1"]= new MultipleSelectResolver();  
3.           binder.resolvers["s2"]= new SelectResolver();  
4.             
5.           var jsonrpc = new JSONRpcClient("/FormBinder/JSON-RPC");  
6.   
7.          function submitStock()  
8.         {  
9.             var stock = binder.bindUIToData("pane");  
10.                           jsonrpc.StockService.setStockData(saveStockData,stock);  
11.         }  
12.           
13.         function saveStockData(result,exception){  
14.         }  
15.           
16.         function showStock() {  
17.             jsonrpc.StockService.getStockData(showStockData,"IBM");  
18.            
19.         }  
20.           
21.         function showStockData(result,exception) {  
22.                 binder.bindDataToUI("pane",result);  
23.         }  

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

java 代码

 

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

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

js 代码

 

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