Jazz的Web UI开发流程
下面我们就来介绍PetStore的Web UI组件开发流程。
创建Web插件
创建Web插件项目com.ibm.petstore.web，我们将在其中定义Web UI的各个页面并与REST服务交互。需要注意的是在创建插件的Wizard中不要勾选“Create a Java project”。
下面我们创建与PetStore Web UI相关的文件夹和文件。图2显示了创建完成的文件夹和文件：
图2. PetStore Web UI文件目录
· resources文件夹是webBundles扩展点将页面内容注册到web服务的缺省目录。
· ui文件夹是用来存放所有与页面相关的文件。
· client文件夹存放与REST服务交互的文件。
· Internal文件夹说明当前目录下没有public API 或者可重用的公用widget。
· page文件夹存放与子组件对照的web页面。
另外需要注意的是我们创建Dojo widgets，还需要创建“internal/templates”文件夹，用于存放与Dojo widget相关的HTML和CSS文件。
添加Web页面
接下来我们需要为Web插件添加展示和控制Web页面的各个文件。整个页面由三个子页面构成：Catalog，Seller和Search。
1.resources/ui/internal/page/PetStore.js
PetStore.js是负责展示与控制整个页面的Dojo widget。它负责添加页面上方的navigation toolbar和页面的主体部分，如清单1所示：
清单1.
dojo.provide("com.ibm.petstore.web.ui.internal.page.PetStore");
//Require the ajax widget needed to show the content
dojo.require("net.jazz.ajax.ui.PlatformUI");
dojo.require("net.jazz.ajax.ui.PageContainer");
//Require the repository widget needed to show the navigation toolbar
dojo.require("com.ibm.team.repository.web.ui.internal.Navbar");
dojo.require("com.ibm.team.repository.web.client.internal.RepositoryClient");
dojo.require("com.ibm.team.repository.web.ui.internal._JazzApplication");
(function(){
dojo.declare("com.ibm.petstore.web.ui.internal.page.PetStore",
com.ibm.team.repository.web.ui.internal._JazzApplication, {
init: function(){
this.initUI();
//function in _JazzApplication, to start the whole page
this.start();
},
initUI: function(){
//create main content area
var container = document.createElement("div");
container.id = "outer-container";
var pageArea = new net.jazz.ajax.ui.PageContainer();
pageArea.domNode.insertBefore((
new com.ibm.team.repository.web.ui.internal.Navbar()).domNode, pageArea.domNode.firstChild);
container.appendChild(pageArea.domNode);
//add main content area to workbench
var workbenchRootNode = net.jazz.ajax.ui.PlatformUI.getWorkbench().rootNode();
workbenchRootNode.appendChild(container);
}
});
})();
其中，dojo.provide和 dojo.require是Dojo定义的APIs，负责JavaScript的模块化管理。Jazz Ajax Framework的优化器通过这个模块化管理系统了解各个模块之间的依赖关系，从而达到动态最优化的目的。
2.resources/ui/internal/page/templates/Catalog.html，resources/ui/internal/page/templates /Search.html，resources/ui/internal/page/templates /Seller.html
这三个文件分别对应三个子页面Dojo widget的模板。我们拿Catalog.js为例说明，如清单2所示：
清单2.
<div class="com-ibm-petstore-web-catalog">
<table class="table">
<tbody>
<tr>
<td width="25%">
<div dojoAttachPoint="_categories"/>
</td>
<td>
<div dojoAttachPoint="_detail"/>
</td>
</tr>
</tbody>
</table>
<div class="copyright">
Copyright(c) 2008 IBM
</div>
</div>
下面我们详细介绍其中的内容：
最外层的Div定义了当前的widget。我们通过class属性为此div元素添加CSS信息，其目的有两个：首先它限定了当前widget风格的范围，从而不会与其他widget产生命名空间的冲突；其次当开发人员使用浏览器调试工具检查DOM节点时，有利于当前widget的识别。如清单3所示：
清单3.
<div class="com-ibm-petstore-web-catalog">
table定义了一个表单节点。class属性指定了table元素的风格，其定义在相应的CSS文件中。而dojoAttachPoint属性是Dojo的专用属性，能被Dojo toolkit识别，其目的是使该widget相应的JavaScript文件能直接访问该节点，如清单4所示：
清单4.
<table class="table">
…
<div dojoAttachPoint="_categories"/>
…
<div dojoAttachPoint="_detail"/>
…
</table>
3.resources/ui/internal/page/Catalog.css，resources/ui/internal/page/Search.css，resources/ui/internal/page/Seller.css
这三个文件分别对应三个子页面widget的风格。我们拿Catalog.css为例，上面的Catalog.html中有两个class属性，因此其CSS文件如清单5所示：
清单5.
.com-ibm-petstore-web-catalog{
}
.com-ibm-petstore-web-catalog .table {
width: 50%;
height: 500px;
text-align: center;
}
.com-ibm-petstore-web-catalog .copyright {
text-align: center;
color: blue;
}
其中，.com-ibm-petstore-web-catalog定义了此文件的命名空间，而table和copyright则是具体风格的定义。
