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

核心提示： resources_iwidgets.js：NLS 属性文件，testWidget.xml：小部件 XML 文件，使用 Dojo 开发定制 Business Space 小部件，第 3 部分: 在 iWidget 中使用多个模板和从基本小部件继承(2)，testLoader.js：小部件加载文件

resources_iwidgets.js：NLS 属性文件。

testWidget.xml：小部件 XML 文件。

testLoader.js：小部件加载文件。

testWidget.js：小部件 javascript 类。

test.html：特定于小部件的 HTML 模板。

testMarkupHandler.json：用于生成小部件内容的 JSON 文件。

stylesheet.css：用于界面的样式表文件。

我们也提供了一个完成的工作样例代码，fullWorkingCode.zip，适用于整个系列。

实现基本模板

首先，将向您介绍基本模板是如何实现的。基本模板包括一个 BaseWidgetTemplate Javascript 类和一个 base-widget-template.html 文件。

BaseWidgetTemplate Javascript 类加载基本小部件模板 HTML 文件，如清单 1 所示：

清单 1. BaseWidgetTemplate Javascript 类

dojo.provide("com.ibm.bcgex.common.BaseWidgetTemplate");　
　
dojo.declare("com.ibm.bcgex.common.BaseWidgetTemplate",[dijit._Widget,dijit._Templated],　{　
　
　templatePath:　dojo.moduleUrl("com.ibm.bcgex.common.templates",　
"base-widget-template.html"),　
　　　
　postCreate:　function()　{　
　
　},　
　postMixInProperties　:　function(){　
　}　
　
});　

基本小部件 HTML 模板（base-widget-template.html）包含以下内容：

header：包括贯穿所有界面通用的头部信息，例如，导航或界面名的链接和按钮。HTML 文件包含以下头部占位符：

<div id="header" style="border-bottom: 1px solid#E3E6E3;"/>

body1：界面的主要部分，特定于小部件的 HTML 所在之处。HTML 文件包含以下 body1 占位符：