返回上一页

VJSP Widget framework使用简述

VJSPWidgetFramework采用面向接口设计思想,所有控件类均完全实现WidgetInterface。


WidgetInterface定义如下:

    interface Widget{
    //渲染
    render : function(renderDom){},
    //设置属性
     set : function(name , value){},
    //获取属性
     get : function(name){},
    //绑定事件
     on : function(eventName,[context,] callbackFunction){},
    //解绑事件
     off : function(eventName , callbackFunction){},
    //调用方法
     doMethod : function(methodName,...args){},
    //控件销毁
    destroy : function(){}
}

一个控件分为模板代码和对应的类两大部分,模板代码经过Pasrser解析会生成对应类的对象,并设置属性和绑定事件,解析后的对象会保存到Parser里,可通过ParserApi获取。

控件模板代码可以设置属性,绑定事件(无法绑定多个),控件的对象可以设置属性(部分属性只能通过模板设置),读取属性,绑定事件(可以绑定多个),执行方法。


控件模板所有属性前缀vjsp-,每个控件有两个必须属性,分别为vjsp-ctype控件类型和vjsp-name控件name(唯一标识控件属性,不可重复)。事件类型属性格式为vjsp-on事件名,例如,vjsp-onclick

控件模板举例:

    <input vjsp-name="textbox1" vjsp-ctype="textbox" vjsp-readonly="true">


控件的类完全实现了Widget接口,其中renderdesroty方法是由Parser调用,其他为5个为用户调用方法。控件的类由Parser在解析模板代码时进行实例化,并进行缓存,可通过Parser获取控件实例的api来进行获取。在调用每个方法的之前,必需先通过api获取控件对象。

5个用户调用方法说明,

1.set方法,用于设置控件属性,第一个参数是属性名称,第二个参数为要设置的值

例如,设置一个name为textbox1的输入框为只读

    //获取控件对象
var widget = vjsp.Parser.getWidgetByName('textbo1');
//设置只读
widget.set('readonly' , true);


2.get方法,用于获取控件属性,只有一个参数为属性名称

例如,获取一个name为textbox1的输入框是否只读

    //获取控件对象
var widget = vjsp.Parser.getWidgetByName('textbo1');
//获取是否只读
widget.get('readonly');


3.on方法,用于绑定事件,第一个参数是事件名,第二个为可选参数,是上下文对象,第三个参数是回调函数,注意回调函数中的this为控件对象。

例如,给一个name为textbox1的输入框绑定click事件

    定义回调函数
function callback(){
    vjsp.alert(this.get('value'));
}
//获取控件对象
var widget = vjsp.Parser.getWidgetByName('textbo1');
//绑定事件
widget.on('click',callback);


4.off方法,用于解绑事件,第一个参数为事件名,第二个为回调函数。

例如,给上面绑定的事件解绑

    //获取控件对象
var widget = vjsp.Parser.getWidgetByName('textbo1');
//绑定事件
widget.off('click',callback);


5.doMethod方法,用于执行控件的方法,第一个参数为方法名,第二个参数开始为方法需要的入参。

例如,给一个name为datagrid1的表格控件增加一个空行。

    //获取控件对象
var widget = vjsp.Parser.getWidgetByName('datagrid1');
//调用appendRow方法增加一个空行
widget.doMethod('appendRow' , {});


详细API参考:VJSPWidgetApiDocumentation