快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

伟德国际官方app下载安卓版_酒文化网进入



简介

我们为本系列开拓的定制小部件是基于 WebSphere V7.0 支持的 Business Space(以下简称 Business Space)中附带的 Dojo 版本,已经在 Mozilla Firefox 3.0.11 中测试过了。只是,我们开拓的通用框架观点以致可以利用到应用 Dojo 的利用法度榜样中,但却不能用于 Business Space。进修本系列必要具备 DOJO 和 iWidget 框架的基础常识。

我们将评论争论在基于 Dojo 的利用法度榜样中常常碰到的主题。本系列分为以下几部分:

第 1 部分:应用通用的 markup 处置惩罚法度榜样天生 DOJO markup

第 2 部分:应用通用的网格处置惩罚法度榜样创建具有分页功能的 Dojo DataGrid 组件

第 3 部分:在 iWidget 中应用多个模板和从基础小部件承袭

第 4 部分:应用通用的 REST 处置惩罚法度榜样从 iWidget 发出可设置设置设备摆设摆设的 REST 调用

在第 3 部分,我们将向您展示若何应用一个基础小部件来使您的全部用户界面达到同等的外不雅和感到。所有 iWidgets 都可以应用这个基础模板来使界面维持同等,包括头伟德国际官方app下载安卓版部,注脚和主要内容区。

除了这个基础模板之外,每个 iWidget 应用一个特定于小部件的模板来显示针对此部件的信息。

本文也向您显示了一个利用法度榜样中的所有 iWidgets 若何从一个基础小部件中承袭。基础小部件经由过程供给 iWidgets 常用措施来防止代码重写。

以下文件在 Part3SampleCode.zip 中供给 下载:

Base_iWidget.js:从所有小部件中承袭的基础部件。

base-widget-template.html:基础小部件模板 HTML 文件。

BaseWidgetTemplate.js:基础小部件模板 Javascript 文件。

resources_iwidgets.js:NLS 属性文件。

testWidget.xml:小部件 XML 文件。

testLoader.js:小部件加载文件。

testWidget.js:小部件 javascript 类。

test.html:特定于小部件的 HTML 模板。

testMarkupHandler.json:用于天生小部件内容的 JSON 文件。

stylesheet.css:用于界面的样式表文件。

我们也供给了一个完成的事情样例代码,fullWorkingCode.zip,适用于全部系列。

实现基础模板

首先,将向您先容基础模板是若何实现的。基础模板包括一个 BaseWidgetTemplate Jav伟德国际官方app下载安卓版ascript 类和一个 base-widget-template.html 文件。

BaseWidgetTemplate Javascript 类加载基础小部件模板 HTML 文件,如清单 1 所示:

清单 1. BaseWidgetTemplate Javascript 类

dojo.provide("com.ibm.bcgex.common.BaseWidgetTemplate");

dojo.declare("com.ibm.bcgex.common.BaseWidgetTemplate",[dijit._Widget,dijit._Templated], {

templatePath: dojo.moduleUrl("com.ibm.bcgex.common.templates",

"base-widget-template.html"),

postCreate: function() {

},

postMixInProperties : function(){

}

});

基础小部件 HTML 模板(base-widget-template.html)包孕以下内容:

header:包括贯穿所有界面通用的头部信息,例如,导航或界面名的链接和按钮。HTML 文件包孕以下头部占位符:

body1:界面的主要部分,特定于小部件的 HTML 所在之处。HTML 文件包孕以下 body1 占位符:

Footer:包孕贯穿所有界面的通用脚注信息。文件包孕以下占位符脚注:

接下来,我们看一下基础小部件类(Base_iWidget.js)的实现。

实现基础小部件类

基础小部件类的设计使用了 Dojo 供给的承袭特点,以下是基础小部件实现的一些功能:

加载 NLS 属性文件和利用法度榜样中应用的 CSS 文件,如清单 2 和清单 3 所示:

清单 2. 加载 NLS 文件

//Load the NLS properties file

try{

dojo.requireLocalization("com.ibm.bcgex", "resources_iwidgets", this.getLocale());

this.iwidget_messages = dojo.i18n.getLocalization("com.ibm.bcgex",

"resources_iwidgets", this.getLocale());

}catch(exp){

djConfig.locale='en';

dojo.requireLocalization("com.ibm.bcgex", "resources_iwidgets伟德国际官方app下载安卓版",

this.getLocale());

this.iwidget_messages = dojo.i18n.getLocalization("com.ibm.bcgex",

"resources_iwidgets", this.getLocale());

}

清单 3. 加载 CSS 文件

// Check if it is Bidi locale

if (!dojo._isBodyLtr())

{

isBidi = true;

cssPath=this.getRootContext()+"com/ibm/bcgex/css/stylesheetBidi.css";

} else {

cssPath=this.getRootContext()+"com/ibm/bcgex/css/stylesheet.css";

}

this.loadCss(cssPath);

loadCss: function(filename){

var fileref=document.createElement("link");

fileref.setAttribute("rel", "stylesheet");

fileref.setAttribute("type", "text/css");

fileref.setAttribute("href", filename);

if (typeof fileref!="undefined")

document.getElementsByTagName("head")[0].appendChild(fileref);

},

基础小部件也实例化 BaseWidgetTemplate 类,并附加上 ID baseWidgetId 相关的 DOM 节点。baseWidgetId 在小部件 XML 文件中声明(见清单 5)。

清单 4. 实例化 BaseWidgetTemplate 并附加 DOM 节点

this._baseWidgetId = new com.ibm.bcgex.common.BaseWidgetTemplate();

var thisWidgetId = this.iContext.getElementById("baseWidgetId");

thisWidgetId.appendChild(this._baseWidgetId.domNode);

实现特定于小部件的模板和小部件类

在这一小节,我们将向您展示特定于小部件的模板以及应用下列文件实现的小部件类:

小部件 XML 文件

小部件载入类

小部件 Javascript 类

小部件特有的 HTML 模板文件。

以下片段源自上述文件之一:

清单 5. 小部件 XML 文件(testWidget.xml)

清单 6. 小部件载入类(testLoader.js),承袭基础小部件类 (Base_iWidget.js)

dojo.provide("com.ibm.bcgex.iWidget.testLoader");

dojo.declare("com.ibm.bcgex.iWidget.testLoader",

com.ibm.bcgex.iWidget.common.iwidgets.Base_iWidget,{

constructor : function(){

this.rootContext=null;

this.widgetId = null;

this.restEndPoint = null;

},

onLoad: function() {

this.inherited('onLoad',arguments);

dojo.registerModulePath("com.ibm.bcgex.iWidget.test",

this.getRootContext()

+"com/ibm/bcgex/iWidget/test");

this.loadEmployeeSearch();

},

loadEmployeeSearch: function(){

var body1DivId = this.iContext.getElementById("body1");

this.rootContext = this.getRootContext();

this.restEndPoint = this.getRestURLEndpoint();

dojo.require("com.ibm.bcgex.iWidget.test.testWidget");

this._testWidget = new com.ibm.bcgex.iWidget.test.testWidget

(this.iContext,this.iwidget_messages,this.rootContext,this.restEndPoint ,this);

body1DivId.appendChild(this._testWidget.domNode);

this._testWidget.showEmployeeSearch();

}

});

小部件 Javascript 类 testWidget.js 应用 DojoMarkupHandler.js(详见 第 1 部分) 天生如清单 7 所示的界面:

清单 7. 加载小部件特定 HTML 模板(test.html)的小部件 Javascript 类

dojo.provide("com.ibm.bcgex.iWidget.test.testWidget");

dojo.declare("com.ibm.bcgex.iWidget.test.testWidget",

[dijit._Widget,dijit._Templated], {

templatePath: dojo.moduleUrl("com.ibm.bcgex.iWidget.test.templates",

"test.html"),

widgetsInTemplate: true,

constructor: function(ic,iwidget_messages,rootContext,restEndPoint, 伟德国际官方app下载安卓版thisVar){

this.iContext=ic;

this.iwidget_messages=iwidget_messages;

this.widgetId=this.iContext.widgetId;

this.rootContext=rootContext;

this.restURL = restEndPoint;

},

showEmployeeSearch: function(){

this._markUpHandler = new com.ibm.bcgex.common.DojoMarkupHandler

(this,this,this.rootContext,this.widgetId) ;

this._markUpHandler.loadConfigFile("testMarkupHandler");

},

onMSelect: function(){

},

on伟德国际官方app下载安卓版FSelect: function(){

},

search: function(){

},

reset: function(){

}

});

在 catalog.xml 中添加条款

对付本文中应用的 testWidget.js 样例,以下条款必要加入 catalog.xml 中:

清单 9. Entry in catalog.xml for testWidget.js

Test Widget

Test Widget

Test Widget

/testConsole/com/ibm/bcgex/iWidget/test/testWidget.xml

/BusinessSpace/iWidget/images/viewers/prev_doc.gif

/BusinessSpace/iWidget/images/viewers/icon_doc.gif

/BusinessSpace/iWidget/images/viewers/prev_doc.gif

7.0.0.0

International Business Machines Corp.

当您拖放 testWidget 之后,您可能会看到图 1 所示的界面:

图 1. 在 Business Space 测试小部件

停止语

经由过程本文,您进修了若何经由过程使用基础小部件和小部件特有的模板来应用 iWidgets 中的多个模板。您也看到了所有小部件若何承袭基础部件,使您可以重用 iWidgets 的通用代码。

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

您可能还会对下面的文章感兴趣: