使用 Rational Application Developer 创建窗口小部件(不推荐)

您可以使用 Rational® Application DeveloperIntegration Designer 来帮助创建定制的窗口小部件。

开始之前

要开发窗口小部件,您需要了解以下各项:
  • Dojo 1.6.1
  • 可扩展标记语言 (XML)
  • 超文本标记语言 (HTML)
  • iWidget 2.1 规范
  • JavaScript
根据您正在开发的窗口小部件的功能,可能需要了解以下各项:
  • 如果未使用 Dojo 编写 JavaScript,需要了解窗口小部件的编程或脚本语言
  • Java™ 2 Enterprise Edition (J2EE)
  • Representational State Transfer (REST)
开始之前,需要通过安装以下软件来设置开发环境:
  • Rational Application Developer V7.5.4 或更高版本,或 Integration Designer V7.0 或更高版本。使用 Integration Designer 开发窗口小部件所执行的步骤与使用 Rational Application Developer 进行开发所执行的步骤相同。
  • 如果要测试窗口小部件,请确保安装 Business Space 组件,或者确保可以使用包含 Business Space 应用程序的概要文件来访问独立应用程序服务器。 在独立服务器上开发并测试窗口小部件之后,可以使用不推荐:打包并部署定制窗口小部件中的指示信息,在集群上部署该窗口小部件。

关于此任务

可检查 stockdeploy.zip 中的文件,以获取有关如何构造窗口小部件的更多信息。 还可以检查 iWidget 定义等过程中提到的重要文件的内容,以获取有关可如何对方式编码的简单示例。

过程

  1. 使用 Web 透视图为定制的窗口小部件创建一个动态 Web 项目,并将该项目分配给一个 EAR。 当导出 EAR 时,动态 Web 项目会映射到 WAR。
    提示: 如果使用上下文根在窗口小部件上进行规划,以查找其资源,请注意是 Web 应用程序的上下文根。可保持缺省值或更改缺省值。使用向导的下一页更改上下文根。
  2. 在项目的 WebContent 目录(作为 Web 项目的一部分自动创建),创建目录结构以包含窗口小部件的代码。 WebContent 目录结构是您放置窗口小部件的可部署资源(如 HTML 和 JSP 文件)的位置。 放在 WebContent 目录结构之外的所有资源都是不进行部署的资源,例如,Java 和 SQL 文件。
    提示: 常见窗口小部件的结构如下:iWidget/widgets/widget_name。 您可以使用该路径以保持一致,也可以使用自己的结构:
  3. widget 目录中,创建定制窗口小部件的 iWidget 定义文件。请确保您的 iWidget 的标识唯一,并确保 iScope 与用于定义窗口小部件行为的 JavaScript 类的名称相匹配。 有关信息,请参阅 Rational Application Developer 帮助中的 Creating iWidgets
    提示: 窗口小部件定义文件的命名约定是 widgetName_iWidget.xml
  4. 使用 iWidget 编辑器,通过提供以下信息来定义窗口小部件:
    • 添加窗口小部件支持的方式并为每个方式添加数据或代码。

      必须定义 view 方式,以便显示某些内容。如果希望用户可(使用编辑设置菜单项)对窗口小部件的内容进行某种程度的修改,请添加 edit 方式。 edit 方式更改实例属性层中的窗口小部件属性(设置)。 如果希望特定用户(通常仅限管理员)可修改窗口小部件的缺省值,请添加 config 方式。 config 方式更改管理层中的窗口小部件属性。 如果希望用户可定制窗口小部件如何显示其数据,并将该更改仅应用于个别用户,请添加 personalize 方式。 personalize 方式更改用户层中的窗口小部件属性。 有关属性层以及这些属性层如何工作的信息,请参阅不推荐:窗口小部件属性层不推荐:支持窗口小部件定制和个性化

    • 通过添加项集及其所包含的项来添加窗口小部件的属性。这些属性提供窗口小部件的缺省值。 例如,如果窗口小部件显示 Web 站点,那么添加 url 属性以存储 URL。

      这些值作为字符串存储,因此您的实现可能需要转换这些值。

      请确保包含支持用户可在窗口小部件中进行的每个设置或个性化的属性。 例如,如果窗口小部件包含表,且希望支持个性化表用于排序信息的列,可具有 sort_column 属性来存储此信息。

    • 窗口小部件通过为每个事件添加定义和描述来发布和处理的事件。
    • 将声明 iScope 的文件的相对路径和名称作为资源添加。 iScope 是一个 Dojo 类,在运行时,它是 iContext 类的入口点。 该入口点是窗口小部件中通过 iContext 类与环境交互的那部分。 iContext 类是窗口小部件运行时环境的核心,提供所有环境服务,如访问全局变量、共享状态、局部变量存储、使用事件的窗口小部件通信、远程服务、方式支持以及许多其他功能。

      在该示例中,此文件与窗口小部件定义在同一个目录中,因此无需包含路径。

    • 将窗口小部件需要的任何其他文件的相对路径和名称作为资源添加。 例如,如果窗口小部件使用 .css 文件进行格式化,请将此文件的路径和名称作为资源添加。 但是,您在添加资源时,请考虑资源的太多请求会影响性能,并且该代码应该尽可能少地引用 JavaScript、CSS 和图像文件。设计您的窗口小部件时,考虑使用技术(例如,图像精灵)来组合并最小化 JavaScript 和 CSS 文件,并延迟装入资源(例如,等到 onEdit 事件发生后再装入 edit 方式的资源)。
    还可以使用“源代码”选项卡将代码或数据直接添加到 XML 文件中。 要了解有关窗口小部件定义及其元素和 iContext 的更多信息,请参阅 iWidget 2.1 规范
  5. 创建声明 iScope 的 JavaScript 文件,然后通过标识 iScope 的接口开始对它定义。 使用 JavaScript 或任何其他编程语言或脚本来创建窗口小部件实现。在开发窗口小部件实现的同时,继续开发 iScope。
    提示: 如果窗口小部件很简单,而且您希望使用 JavaScript 实现该窗口小部件,那么会在 iScope 文件本身中创建窗口小部件实现。
    1. 为在 iWidget 定义中添加的方式和在接口中定义的各种事件(包括 iWidget 规范中预定义的事件)创建处理程序。 对于下列预先定义的 iEvent(来自 iWidget 规范),存在缺省事件处理程序,您可以根据需要覆盖这些缺省事件处理程序:
      • onLoad,首次装入窗口小部件时以及浏览器刷新时调用。 窗口小部件可以在该处理程序中初始化初始视图。没有任何事件有效内容。可以使用类似以下内容的代码检索项值:
        var att = this.iContext.getiWidgetAttributes();
        this.name = att.getItemValue("name");
      • onReload,重新装入窗口小部件时调用。该事件处理程序与 onLoad 相似,但是,它的调用条件稍有不同。如果用户处于 edit 方式并且选择了设置窗口底部的某个按钮,那么在刷新 view 方式时将调用 onReload 事件处理程序。 这与 iWidget 规范调用事件处理程序在行为上有细微的差别,由于该规范请求在重新装入之前触发该事件,而不是在 iWidget 内容的 edit 方式刷新期间进行触发。 没有任何事件有效内容。
      • onUnload,要卸载窗口小部件时调用。没有任何事件有效内容。
        要点: 确保您创建的所有 Dojo 窗口小部件都在该事件处理程序执行期间得以清除。您需要调用 <widget>.destroyRecursive() 来确保清除了所有子 Dojo 窗口小部件,使其不再占用内存。
      • onRefreshNeeded,iContext 确定窗口小部件的数据是否过期时调用。如果适用,该事件将向 iWidget 发送信号使其刷新其数据。
    2. 对于在窗口小部件定义的 supportedModes 属性中指定的每个方式,创建方式处理程序。 例如,如果窗口小部件具有 view 方式和 edit 方式,请创建 onViewonEdit 方法。 可以如以下所示对 onView 方法进行编码:
      onView: function(){
      ... 
      }
    3. onSizeChanged 事件创建处理程序。 事件具有有效内容,其中包含 newWidthnewHeight 属性的值。 处理程序使用该信息,将窗口小部件大小调整到指定的宽度和高度。 如果用户使窗口小部件最小化,那么这些属性的值将为 0。

      以下代码显示如何使用 onSizeChanged 处理程序:

      onSizeChanged: function(iEvent) { 
            var data = iEvent.payload;
            if (data) { 
               alert("new height: " + data.newHeight); 
               alert("new width: " + data.newWidth); 
            } 
         }
    4. 可选: 如果窗口小部件正通过 REST API 访问数据,请在代码中使用“统一资源标识”(URI),如下例所示:
      dojo.xhrGet({ 
        url: this.iContext.io.rewriteURI(uri), 
        load: handler 
      }); 

      您可以对 PUTPOSTDELETE 之类的 HTTP 操作使用相似的方法。

  6. 创建图像文件,以用作定制窗口小部件的预览和图标图像,并将它们放到 WebContent 目录中的某处。 将图标图像设为 28×28 像素,将预览图像设为 160×128 像素(宽×高)。
  7. 可选: 如果定制窗口小部件将具有联机帮助,请创建一个或多个 HTML 文件以提供帮助文本。 您可以将这些文件与窗口小部件一起打包,也可以创建文档插件,然后将帮助文件放在该插件中。 有关更多信息,请参阅不推荐:创建文档插件
  8. 要注册定制窗口小部件,请在目录文件中创建该窗口小部件的定义。 您可以将条目放入现有目录文件中,也可以创建自己的目录文件。 请参阅不推荐:使用目录文件注册定制窗口小部件,以获取有关创建目录文件和窗口小部件注册定义的信息。 如果要创建目录文件,请将其放入 WebContent 目录以外的 catalog 目录。
    提示: 窗口小部件注册文件的命名约定是 catalog_catalogName.xml
  9. 打包并部署定制的窗口小部件。 如果包含 BSpace* 应用程序的概要文件不是本地文件,请按不推荐:打包并部署定制窗口小部件中所述,使用应用程序服务器上的 wsadmin 工具。BSpace* 应用程序包含监控仪表板的框架代码。如果概要文件是本地的,那么可以通过执行以下步骤,在您的开发环境中运行命令:
    1. 将目录文件夹导出到一个 JAR 文件,并将该文件的扩展名指定为 .zip.zip 文件必须具有 catalog 目录中的目录文件。
    2. 创建一个目录,在其中放入打包和部署脚本。确保脚本目录不在 WebContent 目录及其任何子目录中。
    3. 在脚本文件夹中创建 Jython 脚本文件,并将其命名为类似 installBSpaceWidget.py 的名称。
    4. 编辑脚本文件,添加以下代码:
      AdminTask.installBusinessSpaceWidgets('[-nodeName node_name -serverName server_name -widgets path/catalog_file.zip]')
    5. 保存并关闭该文件。
    6. 在资源管理器视图中,右键单击脚本,选择运行方式 > 管理脚本
    7. 在“编辑配置”窗口中,添加以下信息:
      • 对于脚本编制运行时环境,指定应用程序服务器的类型。
      • 对于概要文件名称,指定包含 BSpace* 应用程序的概要文件。
      • 对于 wsadmin 参数,输入 -conntype NONE
      • 如果启用了安全性,请指定管理员用户标识和密码。
      您可以在“控制台”视图中跟踪脚本的进展。 脚本将需要几分钟时间完成,具体时间取决于服务器。
  10. 通过执行以下步骤,测试窗口小部件:
    1. 在“服务器”视图中,右键单击并选择新建
    2. 使用新建服务器向导,创建指向包含 BSpace* 应用程序的概要文件的视图。
    3. 将针对您窗口小部件的 EAR 项目添加到所创建的服务器。 现在,您已将开发环境连接到 BSpace* 应用程序,可以测试和开发窗口小部件。您不必重新打包并部署窗口小部件,除非需要更改其目录文件或其文档插件。
    4. 在 Web 浏览器中,浏览至仪表板 URL。 URL 将类似于 http://localhost:9080/BusinessSpace
    5. 登录至监控仪表板,然后测试您的窗口小部件。

结果

完成开发和测试定制的窗口小部件之后,如果要将窗口小部件部署到不同服务器或集群,可导出针对该窗口小部件的 EAR 和目录文件。 然后,可以按照不推荐:打包并部署定制窗口小部件中的指示信息,部署窗口小部件。