基于 Web 2.0 技术的网上银行前端架构及开发，第 1 部分: 基本元素和架构

在“iwidget”的子节点中，“resource”节点会指定 Widget 定义所需的 JavaScript 文件和 CSS 文件，“itemSet”指明定义 Widget 定义中所包含的数据项，“id”为“attributes”的“itemSet”会给出 Widget 的属性，这里的 Widget 包含两个属性：“url”和“height”，“content”节点定义了 Widget 的展现内容。

图 6. Widget 的展现转换模式

开发 Widget 的资源文件

Widget 的资源文件包括 JavaScript 文件、CSS 文件、图片文件、HTML 文件、视频文件和音频文件等，其中 JavaScript 文件和 CSS 文件会在 Widget 定义中通过“resource”节点指定出来，而其余的文件则是通过 Widget 的 XML 定义文件、JavaScript 文件和 CSS 文件中的引用来表明其与 Widget 定义的关系。这些 JavaScript 文件中包含着 Widget 定义中的大部分的逻辑内容，而 Widget 定义中所指定的 scope 对象也会被定义在这些 JavaScript 文件中。在这个例子中，Widget 的定义只需要一个 JavaScript 文件 HTMLWgt.js，列表 2 给出了这个文件的内容，里面定义一个 simpleHTMLWget 的 JavaScript 类型，这与前面 Widget 的 XML 定义中的“iScope”的属性值是匹配的。Widget 容器会为 Widget 实例生成一个对应的 JavaScript 对象，就是前文所提到的 Widget 的 scope 对象。这个类重载了两个方法“onLoad”和“onSave”，Widget 容器会负责在适当的时候回调它们，“onLoad”会在 Widget 实例初始化的时候被调用，而“onSave”会在用户完成 Widget 实例在线的属性编辑触发保存动作的时候调用。