转自 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）。

图 1. Create Dashboard 按钮
显示按钮的界面片段

确定您拥有 Project Configuration 许可证中的 创建并保存仪表板 许可权限（参见图 2）。

两边显示的 Configuration 与 Permissions 视图

点击 Dashboards 页面中最右边的 Add Viewlet 按钮。

注意：
如果出现的仪表板并没有一个 Add Viewlet 链接，那么这意味着您所登录的用户并没有编辑仪表板的权限。您需要启动 Eclipse Rich Client Platform（RCP）客户端，作为管理员登录到本地的储存库中，并在项目区域编辑器中过程规格项中更新许可证。

图 3. Add Viewlet 图标
管理员仪表板视图的顶部

选择您想要添加至仪表板的视图，并点击 Add Viewlet（图 4）。
然后关闭对话框窗口。

选中的“Application Factory Project Management”

现在视图就会出现在仪表板中了。

回页首

选项：以编程方式创建视图

这些步骤概括了将插件声明为 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 所示。

清单 1. plugin.xml 文件的扩展点

<!-- 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）。这可以确保本地变量不与全局名中的任意项目发生冲突。

清单 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 所示。

清单 3. 视图模板文件


 Work Packet Templating 

Export Factory WorkItems

它会是一个简单的模板，将链接赋值为“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





    
        
    
            Project Area :

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 服务

视图可能含有构件或者需要调用 REST 服务（参见图 6），或者发送特定的参数或者提交一个表格来得到数据。

清单 6. 调用带有参数的 REST 服务

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）。

清单 7. .js 文件中的变量声明

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 中所需要的。

清单 8. JavaScript. 文件中声明的变量

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 是一个这样操作的范例。

清单 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	              
        });

从视图中调用其他的 Dojo 工具

如果您想要在对话框中调用其他的工具或者显示其他的工具，那么您可以使用代码清单 10 中的代码。

清单 10. 调用其他的 Dojo 工具

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博客

怎样在 Rational Team Concert 中创建仪表板视图

最新文章