1、静态引用链接:
需要在页面中引用的css链接列表。该属性仅在首页或在iframe中运行的模块内有效,内置模块页面引用css请使用Wb.addLink方法。
需要在页面中引用的js链接列表。该属性仅在首页或在iframe中运行的模块内有效,内置模块页面引用js请使用Wb.addLink方法。
2、动态应用链接:
动态在文档header中注入js和css链接,加载成功后执行指定的回调方法。
Wb.addLink(['file.css', 'file.js', {url: 'file', type: 'js'}], fn, true);
Parameters
links : Array (optional)
需要加载的js或css链接列表。如果链接类型未明需要在对象中显式指明url和type属性。
callback : Function (optional)
加载完成js和css后执行的方法。
recursive : Boolean (optional)
是否采用递归加载,递归加载是依次加载链接,加载完成上后再加载下一个链接。默认为false。
一般在viewport的afterRender事件加载
3、引用模块
引用模块有以下5种方法:
1、设置模块的importModules属性(可以直接拖动模块到该属性),可以通过app.importXwlI(i为索引号)来访问导入模块的命名空间
举例:
在importModules属性设置,["m?xwl=examples/basic/import-module/imported-module"]
被调用的module配置如下,serverscript
//执行初始化操作 request.setAttribute('myVar', 'abc');//定义模块公共服务器端方法,app为服务端本次请求共享的对象 Wb.apply(app, {add: function(val1, val2) {return val1 + val2;},minus: function(val1, val2) {return val1 - val2;} });
JS代码
//执行初始化操作或定义私有成员 var foo = 'bar';//定义公共客户端方法 Wb.apply(app, {add: function(val1, val2) {return val1 + val2;},minus: function(val1, val2) {return val1 - val2;} });//也可以使用以下方法,把方法定义上级模块 // Wb.apply(contextOwner, {//contextOwner为上级模块客户端app对象 // add: function(val1, val2) { // return val1 + val2; // }, // minus: function(val1, val2) { // return val1 - val2; // } // }); //contextOwner.contextOwner为上级模块的容器上下文对象
前端调用被引用的模块方法,包括JS方法和SS方法、属性
var minusVal = app.importXwl1.minus(7, 5); //minus方法在子模块imported-module的initialize内定义 Wb.tip({html: '通过服务端引用方法计算得到:{#addedVal#}<br>通过客户端引用方法计算得到:' + minusVal,width: 230 });
上述{#addedVal#},来自serverscript调用被引用模块的代码,如下:
//注:serverScript在importModules之后运行,initScript在importModules之前运行 //app.execute('m?xwl=examples/basic/import-module/imported-module');在后台调用imported-module模块 request.setAttribute('addedVal', Integer.toString(app.add(3, 5))); //app.add方法在子模块imported-module的serverScript内定义
2、添加server->xwl控件并设置file属性,可以通过app.xwl1(xwl1为控件的itemId)来访问导入模块的命名空间
使用xwl控件引用的模块会在主模块销毁时自动销毁
//打开xwl控件引用的窗口 app.xwl1.window1.show(); //窗口在主模块销毁时自动销毁
打开xwl控件引用的页面
var card, cardConfig = app.xwl1._panel1; //_panel1指向配置对象, panel1在创建实例后指向实例 if (!app.cardIndex)app.cardIndex = 1; Wb.apply(cardConfig, {itemId: Wb.getId(), //也可以根据业务规则标识itemId,以方便查找指定cardtitle: 'Card' + (app.cardIndex++),closable: true }); card = app.tab1.add(cardConfig); app.tab1.setActiveTab(card);
3、通过Wb.run/Wb.open方法来引用模块。使用该方法引用的模块在主模块销毁时不会自动销毁被引用的模块,可以使用如下方法销毁:
Wb.run({url:module,success:function(scope){ app.myScope=scope;//myScope可为任意名称。把引用的模块命名空间scope注册到主模块的命名空间app,通过该方法在主模块销毁时自动销毁引用的模块 }});
详细分为两种方式,单例模式
被引用的模块组间已经初始化好,该窗口关闭时隐藏
Wb.run({url: 'm?xwl=examples/basic/import-module/dynamic-invoke-single',single: true, //单例模式,在第2次运行时系统不重新运行dynamic-invoke-single模块,而是直接访问上次的对象,该对象的生命周期同整个页面success: function(scope) {scope.window1.show(); //window1的closeAction默认为hide,关闭时仅隐藏 } });
非单例模式,该窗口关闭时销毁
Wb.run({url: 'm?xwl=examples/basic/import-module/dynamic-invoke',success: function(scope) {scope.window1.show();//window1的closeAction设置为destroy,window1关闭时仅销毁window1本身,window1所在的模块不会销毁,//如果该模块还存在需要销毁的其他资源,那么可以在window1的destroy事件中添加代码:Wb.destroy(app, app.window1);来销毁整个模块//此例dynamic-invoke模块仅包含window1本身,因此不需要销毁整个模块 } });
4、在ServerScript中使用app.execute/Wb.execute方法,详见API中对这两个方法的描述说明和区别
5、在Java中使用WbUtil.run/WbUtil.invoke方法,详见API中对这两个方法的描述说明和区别
注意:显示模块内的窗口
app.window1.show(); //该窗口时关闭时默认为隐藏 //如果不希望窗口在模块关闭时销毁,可以把window1的引用从app中删除 //delete app.window1; delete app._window1;//删除引用,使窗口不在模块关闭时销毁 //如果窗口的createInstance属性设置为false,app.window1指向实例,app._window1指定配置对象
4、引用其他第三方插件,例如百度地图、写字板、代码编写器等
步骤1:viewport下面放一个panel容器,居中或全屏 flat : Boolean 是否创建透明且无边框的面板。
步骤2:viewport的afterRender写事件render()
5、html与WB混合开发
一般html开发都是在viewport的属性HTML下进行的,混合开发设置viewport的属性createObject为true,此属性的意义为:是否根据该控件html属性中dom控件的obj属性指定的对象表达式创建对象实例。
HTML代码如下:注意代码中对于民族obj直接设置为一个非实例化的combox控件,非常的简便
<div style="padding:8px;"><table class="wb_tb" border="1" cellpadding="4" style="width:500px"><tr><td width="80px" class="wb_gray">姓名</td><td obj="{itemId:'name',xtype:'textfield',allowBlank:false,width:160}"></td><td width="80px" class="wb_gray">性别</td><td obj="{itemId:'sex',xtype:'radiogroup',width:160,items:[{boxLabel:'男'},{boxLabel:'女',checked:true}]}"></td></tr><tr><td class="wb_gray">出生日期</td><td>##{itemId:'birthdate',xtype:'datefield',width:160}</td><td class="wb_gray">民族</td><td obj="nation"></td></tr><tr><td class="wb_gray">住址</td><td colspan="3" obj="{itemId:'address',xtype:'textfield',width:'100%'}"></td></tr></table> </div>
获取值: Wb.info(Wb.encode(Wb.getValue(app.viewport1)));
设置值: Wb.setValue(app.viewport1, { name: 'Your name', sex: 0, birthdate: new Date() });
验证: Wb.verify(app.viewport1);
修改:
app.viewport1.update("<table><tr><td>这是动态生成的页面:</td><td obj=\"{itemId:'name',xtype:'textfield',allowBlank:false,width:160}\"></td><tr></table>"); app.viewport1.updateObject(); //根据dom的obj属性动态生成控件
6、国际化
@str.name方式,实现方式简单,此处不加以介绍