WebSphere Business Space 6.2提供接口来使用户可以定制开发自己的Widget，Business Space中的Widget符合IBM的iWidget规范。Widget的开发主要可以分为以下几个方面：Widget定义、Widget实现和Widget的部署和注册。本文将从上面的几个方面分别介绍，同时给出一些最佳实践。

1 Widget定义

1.1 iWidget规范

1.1.1 简介

iWidget规范是IBM提出的一个关于Widget的定义规范，它现在的最新版本是1.0，可以使用XML或DHTML语言描述。它主要定义了Widget的属性和行为，并且给出了对Widget的管理模型定义。下图显示了iWidget的管理模型。

（1）iWidget：一个iWidget代表一个基于客户端浏览器的模块，一般用来封装服务端的一个功能模块，它可以同时提供对客户端的逻辑操作以及对用户的界面展示。

（2）iContext：iContext主要用来对一个页面上的所有Widget进行全局管理，包括页面级别的控制，展示布局的管理以及协调界面内部各元素之间的交互。

（3）Encapsulation wrapper：它是iContext的一部分，用来对某一特定的iWidget进行封装管理。

1.1.2 iWidget标签

下图为一个iWidget的定义文件示例。一个iWidget有了这些定义就算完整，当然，有些属性标签是可选的。

下面分别对iWidget定义文件里的各个标签的作用进行介绍：（详细介绍请参照iWidget规范1.0版本）

（1）标签

标签定义了Widget的一些基本信息，其中，name属性定义名字；iScope属性描述了这个widget的Encapsulation wrapper类的信息；supportedModes描述这个widget可以支持什么模式（最主要的两种模式是view和edit，view指的是这个widget的显示格式是不可以修改的，edit模式下则可以修改widget的显示格式）；mode标签定义的是默认的显示模式。

（2）标签和标签（可选）

标签表示的是Widget的属性变量集（attributes），里面的每一个标签分别代表一个属性变量，id表示属性的名，value表示属性的值。这些属性变量都会作为Widget的一部分，可以由iContext管理模块相调用。

（3）标签

标签指定用来处理这个Widget定义的具体实现代码，也就是Encapsulation wrapper的相关实现，可以包括JavaScript、CSS等文件。

（4）和标签（可选）

Event事件机制用来处理各个Widget之间的相互交互和通信，也就是说，Widget之间的交互和通信是通过事件机制来实现的。当一个Widget要发出某一个事件的时候，event标签需要设置published属性为true；同理，当一个Widget要接收某一个事件的时候，event标签需要设置handled属性为true，同时需要定义onEvent属性，这个属性的内容是指定Widget用来处理这个event的方法，这个方法需要在Widget的代码中进行实现。

每一个需要和一个进行对应。中定义了event的具体信息，payloadType属性就是用来声明信息交互中的具体参数类型。

（5）标签

标签主要来定义Widget提供给用户的展示内容，里面可以嵌入HTML的相关代码。不同的模式下可以定义不同的内容标签。

1.2 Business Space系统中的特定定义

（1）在Business Space中，当Widget模式为可编辑模式（edit）时，指的是可以通过Widget显示的下拉菜单选择“配置（config）”时出现的显示内容。

（2）在Business Space中，的定义通常都需要添加下面的一句：

具体这个文件的路径可以动态指定，需要将BSpaceCommonUtilityLoader.js拷贝到相应的路径下，这个文件的作用主要是加载Business Space需要的JavaScript工具类。

（3）在Business Space中，event事件传输是以页面为单位，一个页面内的所有Widget都可以通过发送和接收相同的事件描述来进行交互和通信。这些通信都是自动进行的，而不需要再去进行显式的连接（wire）操作。

最佳实践：通常情况下，在标签中只需要去定义最顶层的DOM节点，具体的整个显示结构放到具体的widget实现代码中去生成。

2 Widget实现

2.1 简介

在iWidget规范中定义Widget可以实现为HTML、JavaScript和Flex，HTML主要可以用来处理静态页面请求，JavaScript可以在客户端动态处理页面的展示，Flex则可以处理类似动画的效果。

Business Space使用Dojo框架进行Widget的实现，用户在实现的过程中，可以调用Business Space中已有的框架和API，这样可以大大地减少自己的实现时间和难度。

2.2 在Business Space环境下定制实现自己的Widget

2.2.1 widget的几个重要方法

在实现Widget的代码中，需要实现几个重要的方法：

（1） onLoad()方法会在widget被加载的时候被调用，可以在其中实现一些初始化的操作，包括加载依赖库，加载样式表等等操作。

（2） onview()方法用来处理view模式下的widget默认的初始化状态。

（3） onedit()方法用来处理edit模式下的widget默认的初始化状态。

（4） onUnload()方法用来处理widget销毁的操作。

2.2.2 iContext的使用

iContext是在widget实现中经常用到的对象，和iWidget定义相对应，iContext对象是用来获取widget管理信息的。通过调用iContext中的方法，widget可以与页面的其他模块相交互，并可以得到widget定义的属性状态。

（1） this.iContext.getiWidgetAttributes();可以用来获取widget中标签和标签定义的属性。

（2） this.iContext.widgetId;可以获得widget中标签定义的id信息。

（3） this.iContext.getElementById(“”);用来根据id来获得元素节点，这个方法通常用来获得标签中定义的节点。

（4） this.iContext.io.rewriteURI(“”);可以重定向服务器的路径，可以用于获取服务端的文件。

（5） this.iContext.iEvents;用来获得widget中和标签定义的event事件信息，可以用来发布或接收一个event事件。

2.2.3 Business Space中提供的实现框架

（1） Business Space有几个基本类，分别用来处理widget实现的不垃圾广告面。在onLoad()方法中需要去加载：

// Business Space的基本环境加载类

dojo.mixin(this, new com.ibm.bspace.common.util.widget.BSpaceCommonUtilityLoader());

// 处理Widget的注册

this.require("com.ibm.bspace.common.util.widget.BSpaceWidgetRegistry");

// 处理Widget的edit模式的显示面板

this.require("com.ibm.bspace.common.util.widget.BSpaceEditButtonPanel");

// 处理Business Space对话框相关操作

this.require("com.ibm.bspace.common.util.widget.BSpaceDialogs");

// 基本工具类库

this.require("com.ibm.bspace.common.util.widget.BSpaceGeneralHelper");

this.require('com.ibm.bspace.common.util.ui.Helper');

// 加载样式表

com.ibm.bspace.common.util.ui.Helper.loadStyleSheet();

（2）在edit模式下的显示面板下，需要实现如下的几个方法：onEditOk()，onEditApply()，onEditRestore()，onEditCancel()，分别用来处理点击“确定（OK）”、“应用（Apply）”、“重置（Restore）”和“取消（Cancel）”的操作。

（3）在Business Space的每个widget的下拉菜单中，都有刷新（Refresh）选项，这个操作需要在实现类中的onRefreshNeeded()方法中进行具体实现。

最佳实践：使用Dojo 的 XHR 框架来发起HTTP请求。XHR的框架包含xhrGet，xhrPost，rawXhrPost，xhrPut，rawXhrPut，xhrDelete 。这几个函数分别处理不同的 HTTP 请求类型，xhrGet 发送的是 Get 请求，xhrPost 发送的是 Post 请求，xhrPut 发送的是 Put 请求，xhrDelete 发生的是 Delete 请求。

3 部署和注册

在定义和实现了自己定制化的widget之后，必须要向Business Space提供两个文件：Endpoint挂接点文件和Widget注册描述文件。Business Space启动的时候会动态获取加载这两个文件，从而将Widget信息加载到系统中。在Business Space中，这两个文件应该手工被拷贝到/BusinessSpace/registryData目录中。

3.1 Endpoint挂接点文件

Endpoint挂接点文件用于定义挂接点，每个widget都需要通过一个挂接点来连接到Business Space的系统中来。一个Endpoint挂接点，实际上就对应着一个服务器端的上下文相对路径。

下图是一个Endpoint挂接点文件的示例，在一个挂接点文件中可以同时定义多个Endpoint挂接点，每一个挂接点可以用一个标签定义，在它之下，还有几个子标签分别定义不同属性：

（1）指定Endpoint挂接点的唯一标识，这个标识很重要，Business Space会根据这个标识来管理系统中的Endpoint挂接点。

（2）指定Endpoint挂接点的类型，没有什么特别大的具体意义。

（3）指定挂接点的版本，没有具体意义。

（4）指定的是挂接点在服务器段对应的上下文根路径（contextroot），这个路径很重要，系统会根据这个路径来寻找widget在服务端的挂接位置。

（5）可以用来对挂接点进行一些描述，增加可读性，没有具体的意义。

3.2 Widget注册描述文件

Widget注册描述文件中主要提供每个Widget需要的前提条件信息和Widget在Business Space系统中的Widget调色板（palette）中的显示信息。

下面是一个Widget注册描述文件的示例。在Widget注册描述文件中可以定义类别信息和widget信息，分别用标签和标签表示。一个描述文件里，可以只定义标签或者标签信息。

3.2.1 标签

在一个Widget的描述文件中，可以定义标签，一个标签对应Business Space系统中的一个Widget类别。一个描述文件可以定义多个标签，也可以不定义此标签，此时Widget则可以使用系统中已有的类别。

在标签下，有如下的几个子标签：

（1）标签定义了一个Widget类别的唯一标识，Business Space系统会通过这个属性来管理所有的类别。

（2）标签标识了一个Widget类别的名字，这个名字将在Widget调色板（palette）中显示。（如下图所示）

（3）标签标识了一个Widget类别的描述信息，这个描述信息将在Widget调色板（palette）中的扩展面板中显示。（如下图所示）

（4）标签指定的是widget类别的工具提示，当鼠标停留在widget类别名字的位置时，工具提示信息会显示出来。

（5）标签定义这个widget类别在整个Widget调色板中的位置，数字指定的越小，类别就会越靠前显示，靠后的类别可以通过点击下一页按钮找到。

3.2.2 标签

在一个Widget的描述文件中，可以定义标签，一个标签对应Business Space系统中的一个Widget。一个描述文件可以定义多个标签，也可以不定义此标签，此时此描述文件里没有Widget的描述信息。

在标签下，有如下的几个子标签：

（1）标签定义了一个Widget的唯一标识，Business Space系统会通过这个属性来管理所有的Widget。

（2）标签指定Widget的定义版本，没有具体意义。

（3）标签标识了一个Widget的名字，这个名字将在Widget调色板（palette）中显示。（如上图所示）

（4）标签定义Widget的类型，在Business Space系统中一般都需要填写{com.ibm.bspace}iWidget。

（5）标签标识了一个Widget的描述信息，这个描述信息将在Widget调色板（palette）中的扩展面板中显示。（如上图所示）

（6）标签指定的是widget的工具提示，当鼠标停留在widget名字的位置时，工具提示信息会显示出来。

（7）标签用来对应一个Widget的类别，此时，这个Widget就会显示在那个Widget类别下。（如上图所示）

（8）标签用来指定这个Widget对应的Endpoint挂接点信息，此时这个Widget就与前面介绍的Endpoint挂接点文件中的挂接点信息相对应和联系，也就是说，这个Widget是挂接到这个挂接点之下的。

（9）标签需要指定Widget的定义文件的位置。这个位置应该是相对于Widget相关的Endpoint挂接点的位置。

（10）标签用来指定用户帮助文档的位置。与上面类似，这个位置也是相对于挂接点的位置。帮助文档可以通过点击Widget上用户菜单的“帮助（Help）”选项得到。

（11）标签用来指定Widget图标的位置。与上面类似，这个位置也是相对于挂接点的位置。（如上图所示）

（12）标签用来指定Widget的预览图像的位置。与上面类似，这个位置也是相对于挂接点的位置。（如上图所示）

（13）标签用来指定Widget的所有者名称。（如上图所示）

（14）标签可以指定所有者的电子邮箱信息，没有具体意义。

（15）标签用来表明这个Widget需要依赖的其他挂接点信息。如果定义了依赖的挂接点，这些挂接点就会在加载Widget之前进行加载。如果一个Widget实现中需要依赖其他挂接点的功能，就需要在这里定义这个标签。这个标签含有1个required属性，这个属性定义这个挂接点是否是必需的；同时，它还有几个子标签：

l 指定挂接点的名称

l 指定挂接点的标识

l 指定挂接点的版本信息

3.3 注册并部署Widget

有了以上我们准备好的Widget各个功能的文件以后，我们需要将它们都拷贝到服务器端的某一指定位置，这个过程我们称之为注册和部署。

Widget中的4个重要的文件部分为：

（1） Widget Endpoint挂接点文件：一个Widget可以不存在挂接点文件，此时注册的Widget需要挂接到其它已存在挂接点。

（2） Widget注册描述文件：在注册描述文件中必须指定Widget需要的特定挂接点。

（3） Widget定义文件：定义文件需要按照挂接点文件和注册描述文件描述的位置拷贝到服务器端相应的路径。

（4） Widget实现文件：和定义文件类似，实现文件也需要按照挂接点文件和注册描述文件描述的位置拷贝到服务器端相应的路径。同时，实现文件也需要按照定义文件中标签指定的文件路径存放。一个Widget可以有多个实现文件共同完成功能。

4 最佳实践：将widget打包

如何将我们做好的包含以上文件的Widget打包在一起，从而可以做到快速定义，开发，注册和部署呢？这里介绍几个最佳实践。

4.1 将Widget打包成J2EE工程包（EAR包）

如果你有J2EE的开发经验，如果你有类似RAD/WID的J2EE开发工具，那么我们可以将我们的Widget工程包装成一个J2EE工程。下图展示的是一个J2EE工程的结构。

（1）创建自己的企业级应用程序工程（Enterprise Application）

首先，需要创建一个企业级应用程序工程（Enterprise Application），如上图所示，CustomizedWidgetsProject就是这样的一个工程。在工程中，我们需要指定一个动态Web应用程序工程作为它的子模块。如下图所示，在工程的描述文件application.xml中，需要定义它的模块，也就是动态Web应用程序工程CustomizedWidgetsWebProject，指定它在服务器端的资源描述符和根路径，这个根路径应该对应着我们Widgets Endpoint挂接点文件中指定的挂接点位置，Business Space系统会在这个位置的相对路径下去查找注册描述文件。

同时，我们可以将Widget挂接点文件和Widget注册描述文件放在工程下面。建议在工程下创建BusinessSpace/RegistryData目录，然后将文件拷贝到这个目录，从而和服务器端的目录结构相一致。

注：在向服务器中部署了应用程序之后，需要手工地将这两个文件拷贝到下的相应目录。

（2）创建自己的动态Web应用程序工程（Dynamic Web Application）

在创建和定义完企业级应用程序的工程之后，我们需要创建动态Web应用程序工程--CustomizedWidgetsWebProject，来和上面的企业级应用程序相呼应。在这个工程中，可以用来存放Widget的具体定义，实现以及相关其它文件。

如上图所示，所有与Widget相关的文件都放在WebContent目录下，这个目录在工程被部署之后会被释放在服务器端的根路径下。所以，我们的Widget的具体定义，实现以及相关其它文件，都需要按照Widget注册描述文件中定义的位置相一致，Business Space系统会在这个位置的相对路径下去查找相应的文件。

4.2 编辑和调试JavaScript

现有的工具和IDE中，对JavaScript的支持都比较有限，在这里推荐两个工具，会对Widget的开发有所帮助。

4.2.1 Aptana Studio

Aptana Studio是我在开发中使用的编辑JavaScript的工具。它是一个适合JavaScript/Ajax项目开发的一个IDE，现有的稳定版本是1.2。它可以提供文件编辑，工程组织管理功能，支持JavaScript的关键字处理，并且有一定的代码辅助功能，基本可以满足对JavaScript的编辑需求。Aptana是一个开源项目，还有Jaxer和Cloud两个工具，也可以支持JavaScript/Ajax的应用开发。

4.2.2 FireBug

FireBug工具应该是Web应用调试的最佳工具，也是现在最流行的Web工具。它是FireFox浏览器的一个插件，对FireFox2和FireFox3都有不同的版本进行支持。它可以实现很多调试功能，包括服务器端的控制端输出、JavaScript代码调试、DOM对象调试和网络报文的截获等等很功能，是个很强大的工具。

5 REST API

REST是Representational State Transfer的简称，中文可以描述为表现性状态转移。它是一种推荐的Web应用的设计和开发方式，可以大大提高系统的标准性、可维护性和可伸缩性。

REST API就是服务器端暴露给客户端的可调用的网络URI接口，客户端可对这些接口发送HTTP请求，得到返回结果。

5.1 Business Space系统的REST API

Business Space的系统中就是采用这种方式进行设计和开发的。Business Space提供很多REST API提供很多方面的接口，包括用户接口，人工任务（Human Task）接口等等，具体的API信息和使用方法说明可以查阅Business Space 6.2的帮助文档中心（Information Center）。