使用 Dojo 开发定制 Business Space 小部件，第 3 部分: 在 iWidget 中使用多个模板和从基本小部件继承

核心提示： 基本小部件也实例化 BaseWidgetTemplate 类，并附加上 ID baseWidgetId 相关的 DOM 节点，使用 Dojo 开发定制 Business Space 小部件，第 3 部分: 在 iWidget 中使用多个模板和从基本小部件继承(4)，baseWidgetId 在小

基本小部件也实例化 BaseWidgetTemplate 类，并附加上 ID baseWidgetId 相关的 DOM 节点。baseWidgetId 在小部件 XML 文件中声明（见清单 5）。

清单 4. 实例化 BaseWidgetTemplate 并附加 DOM 节点

this._baseWidgetId　=　new　com.ibm.bcgex.common.BaseWidgetTemplate();　
var　thisWidgetId　=　this.iContext.getElementById("baseWidgetId");　
thisWidgetId.appendChild(this._baseWidgetId.domNode);　

实现特定于小部件的模板和小部件类

在这一小节，我们将向您展示特定于小部件的模板以及使用下列文件实现的小部件类：

小部件 XML 文件

小部件载入类

小部件 Javascript 类

小部件特有的 HTML 模板文件。

以下片段源自上述文件之一：

清单 5. 小部件 XML 文件（testWidget.xml）

<iw:iwidget　name="testWidget"　xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget"　
iScope="com.ibm.bcgex.iWidget.testLoader"　id="testWidget"　>　
　
　<iw:resource　src="../../iWidget/common/iwidgets/Base_iWidget.js"　/>　
　<iw:resource　src="testLoader.js"　/>　
　<iw:content　mode="view">　
　　　　<![CDATA[　　　
　<div　id="baseWidgetId"></div>　
　]]>　
　　　</iw:content>　
　
</iw:iwidget>　

清单 6. 小部件载入类（testLoader.js），继承基本小部件类 （Base_iWidget.js）

dojo.provide("com.ibm.bcgex.iWidget.testLoader");　
　
dojo.declare("com.ibm.bcgex.iWidget.testLoader",　
com.ibm.bcgex.iWidget.common.iwidgets.Base_iWidget,{　
　
　
　constructor　:　function(){　
　　
　this.rootContext=null;　
　this.widgetId　=　null;　
　this.restEndPoint　=　null;　
　},　
　
　onLoad:　function()　{　
　　
　this.inherited('onLoad',arguments);　
　dojo.registerModulePath("com.ibm.bcgex.iWidget.test",　
this.getRootContext()　
+"com/ibm/bcgex/iWidget/test");　
　this.loadEmployeeSearch();　
　},　
　
　loadEmployeeSearch:　function(){　
　
　var　body1DivId　=　this.iContext.getElementById("body1");　
　this.rootContext　=　this.getRootContext();　
　this.restEndPoint　=　this.getRestURLEndpoint();　
　dojo.require("com.ibm.bcgex.iWidget.test.testWidget");　
　this._testWidget　=　new　com.ibm.bcgex.iWidget.test.testWidget　
(this.iContext,this.iwidget_messages,this.rootContext,this.restEndPoint　,this);　
　body1DivId.appendChild(this._testWidget.domNode);　
　this._testWidget.showEmployeeSearch();　
　　
　}　
　
});