基于Jazz技术构建企业级Web2.0应用(4)-技术开发专区

基于Jazz技术构建企业级Web2.0应用(4)

作者：IT168 马兵东崔晓玲编辑：李倩 2009-02-11 09:17 来源：IT168�

4.resources/ui/internal/page/Catalog.js，resources/ui/internal/page/Search.js，resources/ui/internal/page/Seller.js

这三个文件分别对应三个子页面的Dojo widget, 它们通过扩展点的方式自动加载Web应用。我们拿Catalog.js为例说明，如清单6所示：

清单6.

dojo.provide("com.ibm.petstore.web.ui.internal.page.Catalog");

dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("net.jazz.ajax.ui.PlatformUI");
dojo.require("com.ibm.team.repository.web.transport.ServiceResponseHandler");
dojo.require("com.ibm.petstore.web.client.PetStoreClient");
dojo.require("com.ibm.petstore.web.ui.internal.widget.CategoryItem");
dojo.require("com.ibm.petstore.web.ui.internal.widget.CategoryDetail");

(function(){

    //local variable, using in current widget namespace
    var ServiceResponseHandler = com.ibm.team.repository.web.transport.ServiceResponseHandler;
    var PetStoreClient = com.ibm.petstore.web.client.PetStoreClient;

    dojo.declare("com.ibm.petstore.web.ui.internal.page.Catalog", [dijit._Widget, dijit._Templated], {

        templatePath: dojo.moduleUrl("com.ibm.petstore.web", "ui/internal/page/templates/Catalog.html"),

        //inner variable
        detailPart: null,
        categories: [],
        items: [],

        // initialization
        postCreate: function(){
           …
        },

        catalogAction: function(){
           …
        }
    });
})();

其中dojo.provide声明了此widget的命名空间，它允许其他Dojo对象访问此widget。dojo.require用来通知Dojo去加载其他的类文件。例如当前widget需要加载一些Dojo widgets和用户自定义的widgets。

清单7.

(function() {
...
})();

清单7是Jazz Web UI中的编码惯例。它为当前widget创建单独的命名空间。

清单8.

dojo.declare("com.ibm.petstore.web.ui.internal.page.Catalog", [dijit._Widget, dijit._Templated], {
templatePath: dojo.moduleUrl("com.ibm.petstore.web", "ui/internal/page/templates/Catalog.html"),
});

如清单8所示,dojo.declare声明了一个widget。第一个参数是widget的名字，其前缀必须与其在resources结构中的位置一致。第二个参数定义了widget的基类。第三个参数由一对{}包围，是此widget的具体实现，也称作widget的原型。

清单9.

postCreate: function(){
      var ActionRegistry = net.jazz.ajax.ui.PlatformUI.getWorkbench().getActionRegistry();
      ActionRegistry.registerAction( "com.ibm.petstore.web.catalogAction", this, "catalogAction");
       this.detailPart = new com.ibm.petstore.web.ui.internal.widget.CategoryDetail();
}

如清单9所示，postCreate是Dojo widget的初始方法。在此它注册成为一个action，对应下文中扩展点的声明，其具体实现方法是catalogAction。而new com.ibm.petstore.web.ui.internal.widget.CategoryDetail 创建了一个新的Dojo widget对象。

清单10.

catalogAction: function(){
      var responseHandler = new ServiceResponseHandler(this, "_success", "_error");
      PetStoreClient.getAllCategoryDTOs(responseHandler, {});
},
_success: function(categories) {
      this.categories=categories;
      dojox.data.dom.removeChildren(this._categories);
      …
      this._categories.appendChild(item.domNode);
},
_error: function(e) {
      …
}

如清单10所示，catalogAction是action的具体实现方法，它负责调用REST服务，并将结果反映在Web UI中。开发人员也可以使用Dojo 提供的统一事件处理方法使得用户与站点进行交互。

5.将页面添加到Jazz Web UI扩展点中，如清单11所示：

清单11.

现在我们更新plugin.xml，将上述页面添加到Jazz Web UI中。此插件定义了五个扩展：

· net.jazz.ajax.webBundles通知Equinox将当前插件中的资源加载到web命名空间中，并依赖于prerequisites中定义的Jazz Web基础构造。需要注意的是，如果当前插件是一个Web插件，要在此声明net.jazz.ajax包作为依赖项

· net.jazz.ajax.applications定义当前Web应用的URI上下文信息application alias以及此应用的实现类。其实现类是上文介绍的com.ibm.petstore.web.ui.internal.page.PetStore。

· net.jazz.ajax.pages定义了具体的一个页面。当前插件中有三个页面：Catalog，Search和Seller。每个页面有唯一的id和显示在UI中的name，并声明其页面的具体实现widget。 applicationScope定义了当前页面的作用范围。action则与widget中具体的实现方法相对应，即3.4节中介绍的postCreate方法中，我们将com.ibm.petstore.web.catalogAction与catalogAction实现相关联。

第1页：Jazz Web UI Foundation与Jazz的数据封装和解封装第2页：创建Web插件第3页：创建Web插件第4页：调用REST服务

关注我们