WB8使用说明-基础（引用）

1、静态引用链接：

通过设置如下属性来来静态引用CSS和JS

cssLinks : Array

需要在页面中引用的css链接列表。该属性仅在首页或在iframe中运行的模块内有效，内置模块页面引用css请使用Wb.addLink方法。

jsLinks : Array

需要在页面中引用的js链接列表。该属性仅在首页或在iframe中运行的模块内有效，内置模块页面引用js请使用Wb.addLink方法。

2、动态应用链接：

Wb.addLink(  [links], [callback], [recursive] )

动态在文档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为上级模块的容器上下文对象

View Code

 

前端调用被引用的模块方法，包括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，以方便查找指定card
  title: '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>

View Code

 

 获取值： 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方式，实现方式简单，此处不加以介绍

转载于:https://www.cnblogs.com/wychytu/p/7944817.html