转自 http://www.ibm.com/developerworks/cn/rational/10/createdashboardviewletsinrationalteamconcert/
您可以使用 IBM® Rational Team Concert™ 的 Web 用户界面(UI)来创建仪表板。您可以选择从 Viewlet Selector 中添加什么视图来定义一个新的仪表板并配置它,或者您可以按本文中所述的那样从一个模板中创建一个仪表板。每一个视图都显示了关于某个项目、团队、工作项、构建等等的信息。视图是在代码中定义的,并添加有一些扩展点。本文关注于创建带有定制视图的仪表板。它描述了怎样使用 JavaScript. 以及您想要添加至视图的 REST 服务以及 Dojo 工具,来以编程的方式地定制一个视图。
- 切换至 Jazz(https://localhost:9443/jazz/web)服务器的 Rational Team Concert Web UI 上,并选择 Dashboard 页面,然后点击页面上的 Create Dashboard(参见图 1)。
- 确定您拥有 Project Configuration 许可证中的 创建并保存仪表板 许可权限(参见图 2)。
- 点击 Dashboards 页面中最右边的 Add Viewlet 按钮。
注意:
如果出现的仪表板并没有一个 Add Viewlet 链接,那么这意味着您所登录的用户并没有编辑仪表板的权限。您需要启动 Eclipse Rich Client Platform(RCP)客户端,作为管理员登录到本地的储存库中,并在项目区域编辑器中过程规格项中更新许可证。
- 选择您想要添加至仪表板的视图,并点击 Add Viewlet(图 4)。
- 然后关闭对话框窗口。
现在视图就会出现在仪表板中了。
这些步骤概括了将插件声明为 Web 绑定(Web Buildle)所需要的操作。在完成操作之后,插件将不会对 Web UI 做任何的修改,但是它会在服务器中添加一些资源以确保它能发挥适当的作用。
- 选择 File > New > Project > Plug-in Development > Plug-in Project,然后点击 Next 。
- 取消 创建一个 Java 项目 选项的选择。
- 为项目输入一个以 in .web 结尾的名字(例如:c om.example.web )。
- 点击 Next 然后点击 Finish 。
- 切换至新插件 插件声明编辑器 的 Dependencies 项。
- 点击 Add 按钮,选择 net.jazz.ajax 插件,然后点击 OK。
- 切换至 Extensions 项。
- 点击 Add 按钮,选择 net.jazz.ajax.webBundles 扩展点,并点击 Finish。
- 点击工具栏上的 Save 按钮或者点击 Ctrl + S 以保存更改。
注册视图
视图需要在 plugin.xml 文件中作为扩展点注册,如代码清单 1 所示。
<!-- Web bundle marker --> <!-- Viewlets and categories --> This is the description of the AFWorkPacketMgmtViewlet entry that appears in the viewlet chooser. |
Web 绑定标记扩展简单地声明该束拥有 Web UI 代码。Web UI 代码需要它以了解搜索什么束以得到代码、CSS 之类。
类别:用于 Viewlet Selector 中的 “AFWorkPacketMgmtViewlet”根节点(如图 4 所示)。名字是标签而 ID 是语言中心的标识符,用于引用该类别。
视图:这是视图定义(实施)。这不是在选择器中出现的条目(也就是视图条目);它是与条目相关的后端代码。工具属性就是 JavaScript. 中的视图类,它实施了视图的逻辑。它就像是一个完全合格的 Java™ 类名,除了它是一个通用的 Dojo 工具以外。
视图条目:这就是在选择器中出现的条目。视图 ID 指向了视图元素,而类别则指向了类别元素以将所有的项目联系起来。概述与视图会在 Viewlet Selector 中显示出来。
视图实施(JavaScript)
以前,在 plugin.xml 文件中,视图实施会指向该类:
com.ibm.af.workpktmngmt.viewlet.web.ui.internal.AFWorkPacketMgmtViewlet |
这会响应以下路径中的文件:
com.ibm.af.workpktmngmt.viewlet.web /resources/ui/internal/ AFWorkPacketMgmtViewlet.js |
资源片段是 Web 绑定中的一个特定的文件夹,它包含了所有的 Web 资源,而内部片段用于内部的(非 API)的代码,这样其他的开发员就不需要对该代码创建任何的附件了。
该插件的包结构大体上如图 5 所示。
JavaScript(.js)文件以 dojo.provide 声明开始以支持以下 Dojo 的访问:
dojo.provide("com.ibm.af.workpktmngmt.viewlet.web.ui.internal.AFWorkPacketMgmtViewlet"); |
按照以下方式,来扩展基类视图(这类似于 Java 中的导入声明):
dojo.require("com.ibm.team.dashboard.web.ui.Viewlet"); |
为了让您使用短一点的表格名字,使用 Java™ 技术,您就可以声明一个别名,它是一个指向函数中所含全名的本地变量(见于代码清单 2)。这可以确保本地变量不与全局名中的任意项目发生冲突。
function() { var Viewlet = com.ibm.team.dashboard.web.ui.Viewlet; dojo.declare("com.ibm.af.workpktmngmt.viewlet.web.ui.internal.AFWorkPacketMgmtViewlet", Viewlet, { constructor: function() { this._widget = null; }, templatePath: dojo.moduleUrl("com.ibm.af.workpktmngmt.viewlet.web", "ui/internal/templates/AFWorkPacketMgmtViewlet.html"), //functions related to events on the viewlet }); })(); |
dojo.declare 声明将第二个参数设置为 Viewlet 来给工具声明,这就是它所扩展的基类的别名 。
对于这个包含有 HTML 代码基于模板的 Dojo 工具来说,模板路径是对 HTML 文件的路径。
为了显示工具(在本例中,是您的仪表板视图),HTML 模板文件会作为设计模板进行使用,如代码清单 3 所示。
它会是一个简单的模板,将链接赋值为“Export Factory WorkItems”。这就是完全合格的 CSS 类名,其范围仅限于这个视图:
com-ibm-af-workpktmngmt-viewlet-web-ui-internal-AFWorkPacketMgmtViewlet |
我们有一个特定的链接,它会运行脚本而不是链接到一个 HREF 标签:(href=#)。
dojoAttachEvent 就是联系事件与处理器的 Dojo Toolkit 方式。当您点中它时,它将会在一个合适的范围内调用适当视图的给定功能 。
通过为每一个形式编写完全合格的类名,CSS 文件也要限定范围于这个视图中。
CSS 会作为 CSS 优化器挑出,搜索所有的 Web 绑定以得到全部的 .css 文件并将其包含到发送至浏览器的形式中。下面是一个 .css 文件内容的范例:
.com-example-star-widget .star { width:auto; height: 20px; position: relative; left: 4px; } |
模板文件还可以包含 Dojo 附属点以拥有对 Dojo 构件 JavaScript. 文件的链接。然后该模板就会作为一个设计模板来操作,以分配所有的 Dojo 构件。代码清单 4 显示了一个范例。
清单 4. Viewlet 模板文件元素与 dojoAttachPoint
|
JavaScript(.js)文件会向 projectAreaListBox dojoAttachPoint 添加工具,如代码清单 5 所示。
清单 5. 在工具 JavaScript. 文件中链接 dojoAttachPoint
this.projectAreaButton = new dijit.form.Button({ id: projectAreaButton", label: "Project", }); this.projectAreaListBox.appendChild(this.projectAreaButton.domNode); |
视图可能含有构件或者需要调用 REST 服务(参见图 6),或者发送特定的参数或者提交一个表格来得到数据 。
var handler = { _success: function(done){ console.log("success + done); } }, _failure: function(done){ console.log("failure + done); } }; var srh = new ServiceResponseHandler(handler, "_success", "_failure"); var reqParms= { param1: value1, param2: value2, }; var serviceRequest = new ServiceRequest("com.ibm.af.template.common.IAFTemplateService", "postImportWorkItems",reqParms ); TeamServerClient.invokeService(serviceRequest, srh); |
其中 com.ibm.af.template.common.IAFTemplateService 就是服务的界面, postImportWorkItems 就是上面提到过的 Request 参数所调用的。
这些变量应该在 ,js 文件中得到声明(见于代码清单 7)。
var ServiceRequest = com.ibm.team.repository.web.transport.ServiceRequest; var ServiceResponseHandler = com.ibm.team.repository.web.transport.ServiceResponseHandler; var TeamServerClient = com.ibm.team.repository.web.transport.TeamServerClient; |
这些变量还可以声明为如代码清单 8 所示 .js 文件中 Dojo Toolkit 中所需要的。
dojo.require("com.ibm.team.repository.web.transport.ServiceRequest"); dojo.require("com.ibm.team.repository.web.transport.ServiceResponseHandler"); dojo.require("com.ibm.team.repository.web.transport.TeamServerClient"); |
您可能想要发送整个的输入表作为参数来调用一项服务,这样服务就可以获得表格中的输入区域了。代码清单 9 是一个这样操作的范例。
var service_uri = net.jazz.ajax._contextRoot+/service/ com.ibm.af.util.common.IAFFileUploadService?param1=+value1; var responseVar=; dojo.io.iframe.send({ form. form1, url: service_uri, handleAs: "json", enctype: "multipart/form-data", method:"post", load: function(response, ioArgs) { }, error: function(response, ioArgs){ }, timeout: 120000 // in milli seconds }); |
如果您想要在对话框中调用其他的工具或者显示其他的工具,那么您可以使用代码清单 10 中的代码。
this._dialog = new dijit.Dialog({ id: "detailDialog", style. "height:500px;width:500px;overflow:hidden", }); this._ dialog.domNode.appendChild(new Widget().domNode); dijit.byId('detailDialog').show(); |
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/14780873/viewspace-665633/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/14780873/viewspace-665633/