使用 WebSphere Portlet Factory 构建基于 Web2.0 的灵活 SOA 前端

在许多门户的项目中,客户对门户的使用体验都有非常高的要求。基于现阶段的 portlet 技术对丰富的 Web 2.0 前端展现存在着一定的技术难度。WebSphere Portlet Factory (WPF) 利用 SOA 的构建方法,提供无需编写代码的开发环境进行基于 Web 2.0 技术的门户开发。使得开发人员可以快速地构建良好用户体验的门户应用。加速企业门户项目的成功实施。本文从 WebSphere Portlet Factory 的整体开发方式出发,完整地讲述了 WebSphere Portlet Factory 中支持 Web 2.0 技术的各项功能,为门户开发人员及用户提供一个指引及帮助。

概述

        根据以往的经验,开发 portlet、Web 服务和复合应用都需要某一方面的开发技术和项目经验。但是,在过去几年内,portlet 的开发社区内发展起了一套使用户界面 (UI) 和底层的业务应用与流程分离的开发方法。这种方法基于面向服务的体系架构 (SOA),使得关于业务的应用可以更加灵活,本文中的 WPF 正是此类开发方法的软件工具之一。IBM WebSphere Portal 软件是目前业界领先的门户软件。它可以允许企业的员工、合作方及最终用户通过安全可个性化定制的 Web 访问方式与企业内部所有的业务数据及流程进行交互。为了加速企业门户的开发速度,在 IBM WebSphere Portal 中提供了 IBM WebSphere Portlet Factory(WPF)这一自动化软件工具,帮助我们开发人员进行基于 SOA 的 Portlet 开发。它可以通过简单易用的向导配置出各种用户界面及访问后台业务系统的程序片段,并整合成可部署到 IBM WebSphere Portal 上的 Portlet 应用。在 2007 年推出的新版本中,该工具更提供了非常丰富的 Web 2.0 技术支持。大大的加快了开发人员开发良好用户体验的 Portlet 应用。

        本文将从整体上对这一工具进行介绍,并对 IBM WebSphere Portal 中 Web 2.0 技术的支持作了一个描述。在后半部分,本文详细的讲述了 WPF 中对 Web 2.0 技术的使用及开发的一些要点。以求抛砖引玉,让开发人员了解到这一快速开发工具的优势及如何更好的利用它来开发 IBM WebSphere Portal 的应用。





回页首


WPF 介绍

       WebSphere Portlet Factory (WPF) 提供了一个用于创建 portlet 和 Web 应用的框架和部署环境。框架指的是使用 Builder 模式构建我们的 portlet 以及 Web 应用的方法。部署环境指的是利用 WPF 的自动部署以及运行时提供的代码支持。WPF 的最新版本为 6.0.1.2。WPF 与其它 Portlet 开发工具的不同之处在于,它提供一个近于零编码的快速开发环境。可以迅速的以 SOA 的方式集成后台各种资源,如:Web 服务、关系型数据库和企业应用如:SAP、Domino 等。而且利用 WPF 开发出来的 Portlet 应用,可以很好的支持利用编辑和配置模式对应用进行定制化。这大大加快了企业构建个性化门户的建设。

WPF 与其它开发工具的关系

       WebSphere Dashboard Framework 以及其上面的 KPI (Key performance Indicaiton) 包如 Sales Dashboard 与 Executive Dashboard 都是基于 WPF 的一整套构建器。其中更关键的是 Dashboard Framework 提供了许多易用的 UI 构建器可以迅速的将数据以各种图表的方式进行展现,以满足企业当中对业务状况监控等的需求。

       Rational Application Developer 7 (RAD7) 同样可以进行 Portlet 的开发。它提供了一个完整的 Java 开发环境。它的优势在于可以进行一个完整的端到端 Portal 应用的创建、测试与排错等工作,而且具有对 Portal 站点的视觉布局的编辑功能,即我们可以直接在 RAD7 中进行主题与皮肤的开发。但使用 RAD7 进行开发,则对开发人员的知识有更高的要求,我们开发人员需要对整个 Portal 的应用代码以及 Portlet 控制的代码进行完整的学习才能在 RAD7 上顺利的进行开发。RAD7 更适合于熟悉 Portal 原理以及 Portlet 代码的开发人员。与之相比,则 WPF 提供了一个近于零代码的开发环境,无需过多的涉及 Portlet 代码即可以开发出灵活的门户应用。当然,使用 WPF 则需要放弃对 Portlet 应用代码的完全控制,因为所有的代码都是由 WPF 的构建器动态生成的。

        另外一个可选的开发环境则是 Lotus Component Designer,此环境更适合于习惯使用脚本语言进行编程的开发人员。有兴趣的读者可以在参考资料的链接中找到相关的内容。

        我们可以从中看出 WPF 的定位在于迅速的构建各种系统的前端展现。这也是我们在以后的开发项目中选用 WPF 的基本原则,它是 Portal 强大的集成能力的一个重要技术支持。

WPF 开发的基本模式

        利用数据提供者与数据使用者模型。基于 SOA 的架构思想,我们利用数据提供者模型去包装所有前端可以提供的数据。前端可以利用用户界面(UI)的构建器对获取到的数据以不同的表现形式(如表、图等)进行展现。


数据提供者与数据使用者模型
WDF 基本原则

        数据提供者与数据使用者模型是利用 WPF 开发 Portlet 应用的核心模式。它表述了如何使用 SOA 的方法将后台系统的数据源进行有效整合的方法。利用这种开发模式,我们可以利用不同类型的构建器集成后台各类型的系统,用统一的表现形式展现给门户的用户。这种开发模式使得我们的开发重用性极高,数据的访问层与表现层相独立的方式,更能使得开发团队可以独立进行工作而不影响进度。这一模式是我们在利用 WPF 进行开发工作中需要掌握的基本原则。

WPF 的基本概念

       Builder(构建器):构建器提供易用的向导界面用于 Portlet 的开发。构建器的实质是利用向导中收集的数据生成应用中所有的代码,包括:Java 代码、XML、变量等。构建器贯穿我们利用 WPF 进行开发的整个生命周期。WPF 内建已经有超过 120 个可用的构建器,大大的提高了我们开发 Portal 应用的效率。

       Profile(概要文件):概要文件是应用程序中可变参数的集合。也就是说,概要文件将应用程序中所有可配置的信息进行参数化。如:用户身份、语言、地区、用户组别等。利用这些可配置的信息,我们可以自动的利用已有的构建器生成针对不同使用人群的应用。比如我们可以针对某些特定的用户修改后端访问的数据源、生成的图表形式等。概要文件给予我们开发人员的是强大的配置能力,使得我们只需要修改配置信息即可重新生成新的门户应用。

       Model(模型):模型是一个构建器的列表。例如,如果我们需要开发一个 Portlet,则需要新建一个模型,并将相应的构建器添加到模型当中去。


以上概念在开发环境中的体现
 基本概念




回页首


Web 2.0 介绍

       Web 2.0 是关于如何加强人与人之间的联系,如何提升我们的协作能力的概念与技术。它带来的是一系列因特网服务,这些服务加强了在线的资源共享与协作。其实 Web 2.0 并不是一门专有的技术,而是一些因特网社区内为加强协作与共享的技术或者一类应用的总称。这些技术包括 AJAX(Asynchronous JavaScript and XML)、REST、RSS、blog、wiki、mashup 等等。这里面包括了几个方面的内容:一是达到这一在线协作与共享目标的业务模型;二是如何实现这一模型所需要的服务和产品,IBM 的 portal 产品就属于这一类型;最后是如何更好的使用这些服务、产品当中的技术去开发实现我们所需要的应用,这就是本文所讨论的利用 WPF 中相关的工具去实现更好用户体验的应用。

请访问Web 2.0 技术资源中心,这是有关 Web 2.0 相关信息的一站式中心,包括大量 Web 2.0 技术文章、教程、下载和相关技术资源。您还可以通过Web 2.0 新手入门 栏目,迅速了解 Web 2.0 的相关概念。

RSS 订阅 Web 2.0 相关文章和教程的 RSS 提要

        我们这里重点讨论的是 AJAX 的技术。其在前端展现在扮演重要的角色。它的基本原理是使浏览器打开的页可以被分为许多的片段,这些页面的片段可以独立的根据后台不同的数据源进行更新而无须刷新整个布面。本文限于篇幅不去深入讲述 AJAX 的原理。这里强调的一点是,AJAX 的开发是需要有一定的 web 开发经验才能很好的掌握而且运用它的。如果您希望更多地了解 AJAX,可以访问 developerWorks 网站上的Ajax 技术资源中心,这里是有关 Ajax 编程模型信息的一站式中心。

        这里,我们很自然就会看到为什么我们需要 WPF。原因就是我们开发 portlet 应用的人员可能在业务集成方面有良好的技术基础,或者在使用 JAVA 语言编写业务逻辑代码方面有很好的技巧,但是他们不一定有非常丰富的 web 开发经验。基于这一点,WPF 提供了已经有良好 AJAX 支持的构建器给我们使用,这让我们不需要去学习许多 JaveScript 和 XML 的知识,即可以轻松的通过配置完成我们 Web 2.0 的 SOA 前端构建。





回页首


Portal 中的 Web 2.0

       IBM WebSphere Portal 是用户与企业内所有信息系统交互的一个入口。如何提升用户对信息系统的使用体验,Portal 6 版本中已包含有了许多 Web 2.0 的功能,例如:PDM and QuickPlace 的资源工享;WCM 的 inline editing 工具可以直接在发布页面上进行信息的创建;在线感知的功能,加强人与人之间的沟通。这里特别强调的是在 portal 中使用了一些 AJAX 的功能:上下文菜单,可以根据用户的角色权限等动态生成;Portlet 面板,支持直接的拖拽用于添加 Portlet;页面上直接的 Portlet 拖拽;单个 portlet 刷新功能。


WebSphere Portal 自身所带的 Web 2.0 功能
Portal Web20




回页首


使用 WPF 构建 Web 2.0 应用的方式

       WPF 对 AJAX 的支持在 6.0.1 版本中得到了新的增强。当我们需要在单个 portlet 的基础上进行,部分 portlet 页面的动态刷新时,我们可以利用三种方式在我们的应用中增加 Web2.0 的展现效果。这些功能都是集中在用户界面(UI)的构建器当中,即在开发数据使用者模型时进行配置。下面我们将详细讨论一下这三种方式。

操作后行为(post-action behavior)

        这种方式是 WPF 在新版中对原有构建器的增强,主要包括有按钮、链接、图形按钮、 HTML 事件操作、定时操作、客户端事件处理等构建器。与《在 Portlet Factory 中使用 Ajax 技术》一文描述相一致,这一类构建器(如图)提供了运行后刷新或者替换指定位置的功能,这一功能可以生成可工作的 JavaScript 代码,按照我们指定的位置进行更新操作。


操作后行为构建器
 操作后行为

        这里有一点需要注意的是,我们在使用这一刷新功能的时候,要么显式的执行一次页面呈现方法,要么在呈现方式中选择如下图。最佳实践告诉我们,在开发时候直接在构建器中选择呈现方式是推荐的做法。


需要注意的参数
 操作后行为注意点

        通过这种方式实行的效果是将特定区域的内容进行重新处理。举一个例子,我们可以将页面部分的内容与某变量相关联,那么在处理动作时候我们更新了这个变量,页面这个部分的内容随即改变。
        有一类特别的构建器这里需要提出的是事件声明构建器,该构建器现在可以支持指定事件是发送到服务器端进行处理或者是在客户端直接进行处理或者是两者都进行。在此基础上我们可以使用客户端事件处理或者事件处理构建器进行事件的处理。在事件处理程序中,我们仍然用操作后行为进行部分更新。


客户端事件构建
 客户端事件

        这种方式的好处是可以允许同时部分更新页面上多处位置,我们是利用多个客户端的事件处理程序进行处理。这种方式还可以用于 portlet 之间的通信而无需要整个页面进行刷新。这种方式大大的方便我们在使用 MVC(model/view/controller)的架构时,可以利用事件的触发,分别在客户端进行部分页面更新,而且将事件发送到服务器端进行服务器端的一个更新操作。这里面需要注意的是,服务器端的触发总是会在客户端事件触发之前的。

AJAX 区域

请访问Ajax 技术资源中心,这是有关 Ajax 编程模型信息的一站式中心,包括很多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。

RSS 订阅 Ajax 相关文章和教程的 RSS 提要

        这一构建器与是旧版本当中的 Asynchronous Client Loader builder ( 已取消 ) 的升级。这一构建器可以将页面上一个区域进行打包,在任何触发区域内发生的事件都会引起这个 AJAX 区域的更新。详细的说明可以参考《在 Portlet Factory 中使用 Ajax 技术》一文中对这一构建器的描述及其与操作后行为的对比。
       WPF 还包含了其它使用 AJAX 的高层构建器,如:动态验证(Dynamic Validation)和 Ajax 预输入构建器(Ajax Type-Ahead 前身为 Incremental Search)。


AJAX 区域构建器
AJAX 区域

支持 Dojo 的构建器

        另外一个用于构建 Web 2.0 应用的重要技术则是 Dojo。Dojo 是一整套纯 AJAX 的客户端开源库,它可以方便的与其它的技术集成,如 JSF、JSP、PHP 等等。它使用 AJAX 的客户端交互方式进行页面更新,其特点在于增加了一些扩展的包,里面包含有丰富的 widget 库以供使用。Dojo 的框架提供了相当方便的调用以支持客户端的事件处理、数据邦定、拖拽等功能的实现。Dojo Toolkit 当前版本为 0.4.x ( 包含 JavaScript, HTML,CSS)。在众多 web 开发中已经应用到了这一开源库。IBM 当前正是这一开源项目的主要贡献者。因此,在我们的 WPF 工具当中,也对 Dojo 这一工具包提供了良好的支持。
        需要使用 Dojo 的功能,我们必须在项目的功能组件中添加对 Dojo 的支持。


在项目中启用 Dojo
dojo support

在 WPF 中直接可以使用构建器支持的有以下三种: Drag/Drop 构建器:这类构建器允许我们直接在页面上添加拖拽的功能。 Dojo 内联编辑:这一构建器支持我们直接在数据页(如视图和表单构建器)上面增加内联编辑的功能。


Dojo 内联编辑构建器
dojoinline

内联编辑功能演示
dojoinlinedemo

Dojo 工具提示:该构建器支持显示一个小的提示块。


Dojo 提示工具
dojotips

功能演示
dojotipsdemo

除了以上提到的三种直接支持 Dojo 功能的构建器以外,我们还可以手动的添加 Dojo 的功能模块。我们会使用 Dojo 启用构建器(Dojo Enable Builder)直接编写 JavaScript 的代码。


需要其他 Dojo 功能的手工处理
dojoinit

开发过程当中的排错

        如果错误的现象比较明显,如在服务器的日志中发现一些代码中抛出来的错误,我们就可以直接进行排查。但往往使用 AJAX 技术应用,在出错的时候会比较难找到出错的信息。一般情况下,我们可能做的是点击后获得浏览器的 JavaScript 错误。另外我们可以使用 Firefox 上的 Firebug, 它支持强大的对 JavaScript 排错、跟踪的功能。在上面的截图中都有表使用 Firebug 的界面。有兴趣的读者可以参考文章后面的链接下载使用。





回页首


小结

       WebSphere Portlet Factory 软件提供了丰富的构建器用于日益增长的对 portal 作为 SOA 前端的应用需求的支持。WPF 支持我们在原有的信息系统基础上进行有效的集成。开发人员可以在合理使用构建器的情况下,灵活的面对业务上多变的需求。灵活的运用这些构建器,可以使得我们 portal 的用户在 Web 体验方面有一个大的提升。

 
posted @ 2007-12-26 21:04  springMVC3.1例子  阅读(195)  评论(0编辑  收藏  举报