1.2 UI编程技术

Internet已经日益成为应用程序开发的默认平台。用户对应用程序复杂性要求日增，但现在的Web应用程序对完成复杂应用方面却始终跟不上步伐。用户与今天中等复杂程度的Web应用程序交互时，其体验并不能令人满意。Web模型是基于页面的模型，缺少客户端智能机制。而且，它几乎无法完成复杂的用户交互（如传统的C/S应用程序和桌面应用程序中的用户交互）。这样的技术使得Web应用程序难以使用，支持成本高，并且在很多方面无法发挥效应。因此，Web 2.0的最大挑战是如何定义和提升用户体验。目前有两种比较流行的解决方案：一种是在传统的B/S编程中融入JavaScript/Ajax的技术（当前流行的技术热点，也是本书内容的基础）；另外一种是RIA（或许未来可能成为主流的UI技术）。也有将JavaScript/Ajax作为RIA的一种方式，也归在RIA的技术体系范畴中。

1.2.1 Rich Client Internet编程

Rich Internet Applications（RIA）这些应用程序结合了桌面应用程序的反应快、交互性强的优点，以及Web应用程序的传播范围广及容易传播的特性。RIA简化并改进了Web应用程序的用户交互，这样，用户开发的应用程序可以提供更丰富、更具有交互性和响应性的用户体验。RIA将桌面型计算机软件应用的最佳用户界面功能性与Web应用程序的普遍采纳和低成本部署，以及互动多媒体通信的长处集于一体，终于成就了一种可以提供更直观、响应性和有效的用户体验应用程序。它所具备的桌面型计算机长处包括了在确认和格式编排方面提供互动用户界面；在无刷新页面之下提供快捷的界面响应时间；提供通用的用户界面特性如拖放式（Drag and Drop），以及在线和离线操作能力。Web应用程序的长处如立即部署、跨越平台可用性、采用逐步下载来检索内容和数据、拥有杂志式布局的网页，以及充分利用被广泛采纳的互联网标准；通信的长处则包括双向互动声音和图像。

客户机在RIA内的作用不仅是展示页面，它还可以在后台与用户请求异步地进行计算、递送和检索数据，重新画出屏幕的一部分和密切综合使用声音和图像，这一切都可以在不依靠客户机连接的服务器或后端的情况下进行。RIA提供一个强劲的技术平台，使客户机的能力复原到差不多与桌面型计算机软件应用或传统的C/S系统中的客户机能力相似。它适合传统的N层开发过程，同时也能够和遗旧的环境集成以延展现有的应用程序而无须进行修改。它也可以作为基础网络服务的互动表现层，允许用户在线和离线工作。RIA有能力解决各种复杂性问题，使需要复杂性的应用得以开发并且减少开发成本，同时在很多时候这类应用之所以能够成型主要是拜RIA所赐。目前，比较流行的RIA技术如下。

1.2.1.1 WPF/Silverlight

WPF的全称是Windows Presentation Foundation，是微软新发布的Vista操作系统的三大核心开发库之一，其主要负责图形显示，所以叫做Presentation（呈现）。

作为新的图形引擎，WPF是基于DirectX的新增加了很多新的功能。其2D和3D引擎的强大之处，可以通过Vista的界面得以了解，再加上其对Aero图形引擎的支持，将图形渲染功能更是增加到极致。顺便提一下，Aero是专门为3D桌面开发的引擎，可以让桌面实现神奇的3D翻转，这是操作系统有史以来的一次神奇尝试；虽然对硬件设定的要求也是惊人的，此前已有相关报道称，Vista对显卡十分挑剔就是出于执行Aero的考虑。

WPF其实不仅仅是图形引擎而已，它将给Windows应用程序的开发带来一次革命，因为新的架构提供了一种全新的开发模式。当然对于普通使用者而言，最直观的就是界面越来越漂亮，看起来越来越舒服了；但对于开发人员而言，界面显示和程序将得到更好地分离，这与从前的桌面应用程序开发有很多不同（界面显示和程序是融合在一起的），这是比较具有革命性的改变之一。还有就是桌面应用程序和浏览器应用程序的融合，即Silverlight，将为基于WPF的应用程序提供全面的浏览器支持，这意味着未来开发出的应用程序将可以基于浏览器在不同的操作系统上执行。当然，由于目前还在开发中，我们并不确定会不会有一定的限制，根据Silverlight开发组的定义，Silverlight仍然是WPF的子集，而不是后继版本。总体而言，WPF的前景应该是一片光明。

随着Vista RTM的发布，微软新一轮的技术推广已经开始。其实在此之前，WPF已经有很大的推广，因为CTP版本已经发布有一段日子了。当然很多开发人员主要以技术研究为主，也有少数公司已经开始从事基于WPF的产品研发工作。

目前已有很多人开始考虑或者已经转向WPF，一场新的学习热潮已经开始。但根据笔者最近的学习和了解，国内关于WPF的资料很少，除了MSDN提供的资料以外，基本都是来自国外的资料，有些则是国外开发人员Blog上的资料，当然都是英文的。

1.2.1.2 Flash/Flex/AIR

Flex是Macromedia（现已被Adobe公司收购）发布的Presentation Server（展现服务），它是Java Web Container或者.Net Server的一个应用，根据.mxml文件（纯粹的XML描述文件和ActionScript）产生相应的.swf文件，传送到客户端，由客户端的Flash Player或者Shockwave Player解释执行，给用户以丰富的客户体验。

Macromedia Flash是强大的矢量动画编辑工具，在做动画起家之后，Flash一直在谋求RIA，（Rich Internet Application，富网络应用）的霸主地位，最有影响的是，已经推出了面向对象的编程脚本ActionScript 3.0，并且建立起类似于Java Swing的类库和相应的Component（组件）。Flex是通过Java或者.Net等非Flash途径，解释.mxml文件组织Component，并生成相应的.swf文件。Flex的Component和Flash的Component很相似，但是有所改进和增强。

运用Flash是完全可以做到Flex的效果的，那为什么还需要Flex呢？这主要是为了吸引更多的程序开发人员。Flash天生是为Designer（设计者）设计的，界面还有Flash的动画概念和程序开发人员是格格不入的，为了吸引更多的JSP/ASP/PHP等程序开发人员，Macromedia推出的Flex用非常简单的.mxml来描述界面给JSP/ASP/PHP程序人员使用。

Adobe Integrated Runtime（AIR）是一个跨操作系统的运行时，利用现有的Web开发技术（Flash、Flex、HTML、JavaScript、Ajax）来构建富Internet应用程序并部署为桌面应用程序。换句话说，它可以将Web应用搬到浏览器之外，同样没有C/S笨重、部署不容易的特点，用户所做的只是下载一个air并安装即可。

AIR可以让你用最熟练的技术来开发你所见过的最具用户体验的RIA程序，例如，一个AIR程序可以使用如下一种或多种组合技术构建。

■ Flash/Flex/ActionScript；

■ HTML/JavaScript/CSS/Ajax；

■ PDF可嵌入任何应用程序中。

作为结果，AIR应用程序可以是：

■ 基于Flash或Flex，应用程序根内容（理解为容器）为Flash/Flex（SWF）；

■ 基于Flash或Flex的HTML或PDF，应用程序的根内容为基于Flash/Flex（SWF）的HTML（HTML、JS、CSS）或PDF；

■ 基于HTML，应用程序根内容为HTML、JS、CSS；

■ 基于HTML的Flash/Flex或PDF，应用程序根内容为基于HTML的Flash/Flex（SWF）或PDF。

用户使用AIR应用程序的方式和使用传统桌面应用程序是一样的，当运行时环境安装好后，AIR程序就可以和其他桌面使用程序一样运行了，如图1-2所示。

因为AIR是应用程序运行时环境，因此它很小且对用户来说不可见。运行时环境提供了一套一致的跨操作系统平台和框架来开发和部署应用程序，因此你的程序不必到每个平台上进行测试，在一个平台上开发好就可以在其他平台上运行了。这有很多好处：

■ 开发AIR应用程序不必做额外的跨平台工作，节省了时间，因为跨平台的工作AIR都帮我们做好了（只要其他平台能支持AIR）。

■ 比起Web技术及其设计模式，AIR应用程序开发迅速，它允许将Web开发技术搬到桌面上来而不用另外去学习桌面应用程序开发技术或复杂的底层代码，这比起低级语言如C和C++更容易学习，且不用去处理每个操作系统复杂的底层API。如果与微软的RIA技术相对照，Flex犹如Silverlight，AIR犹如WPF，MXML犹如XAML。

1.2.1.3 Laszlo

Laszlo是开发和将富Internet应用程序（RIA）发布到Web上的开源平台。

Laszlo平台由LZX标记语言和Laszlo表示服务器组成。

■ LZX是基于XML和JavaScript的描述语言，类似于XUL和XAML；LZX使能声明式、基于文本的开发过程，支持快速原型和软件开发最佳实践。

■ Laszlo表示服务器（LPS）是一个编译LZX应用程序为目标运行环境中可执行二进制的Java Servlet；Laszlo目前的目标是Flash Player，LPS将LZX应用程序编译成SWF字节码，为任何使能Flash 5及其以后版本的Web浏览器提供这些被编译应用程序的服务和缓存，同时为后端的XML数据源和Web服务代理应用程序请求。Laszlo应用架构如图1-3所示。

Laszlo的主要特征如下：

（1）使用基于XML和JavaScript的代码开发标准的RIA。

（2）发布后运行在Linux、UNIX、Windows或Mac OS X下的任何J2EE应用服务器或Java Servlet容器中。

（3）运行在Flash 5及其以后版本的Web浏览器中，达到所有Web使能桌面系统的97%。

1.2.1.4 JavaFX

2008年12月5日，Sun微系统公司发布了JavaFX技术的正式版，利用JavaFX编程语言可以开发富Internet应用程序（RIA）。JavaFX Script编程语言（以下称为JavaFX）是Sun微系统公司开发的一种声明式、静态类型（declarative、statically typed）脚本语言。JavaFX技术有着良好的前景，包括可以直接调用Java API的能力。因为JavaFX脚本是静态类型，它同样具有结构化代码、重用性和封装性，如包、类、继承、单独编译和发布单元，这些特性使得使用Java技术创建和管理大型程序变为可能。

JavaFX脚本是一种声明式、静态类型编程语言，具有一等函数（first-class functions）、声明式的语法、列表推导（list-comprehensions）及基于依赖关系的增量式求值（incremental dependency-based evaluation）等特征。JavaFX脚本为多种多样的操作提供了声明式、无中间程序逻辑的语法，这些操作包括创建2D动画、设置属性或者声明在模式和视图对象之间的绑定依赖关系。JavaFX架构如图1-4所示。

1.2.2 Ajax编程

随着Ajax迅速地引人注目起来，开发人员对这种技术的期待也会迅速地增加。就如同任何新技术一样，Ajax的兴旺也需要一整套开发工具/编程语言及相关技术系统来支撑。

如名字所示，Ajax的概念中最重要也最容易被忽视的是，它也是一种JavaScript编程语言。JavaScript是一种黏合剂，使Ajax应用的各部分集成在一起。在大部分时间内，JavaScript通常被服务器端开发人员认为是一种企业级应用不需要使用的东西应该尽力避免。这种观点来来自于以前编写JavaScript代码的经历：繁杂而又易出错的语言。类似的，它也被认为将应用逻辑任意地散布在服务器端和客户端中，这使得问题很难被发现而且代码很难重用。在Ajax中JavaScript主要被用来将用户界面上的数据传递到服务器端并返回结果。XMLHttpRequest对象用来响应通过HTTP传递的数据，一旦数据返回到客户端就可以立刻使用DOM将数据放到网面上。

1.2.2.1 XMLHttpRequest

XMLHttpRequest对象在大部分浏览器上已经实现而且拥有了一个简单的接口，允许数据从客户端传递到服务器端，但并不会打断用户当前的操作。使用XMLHttpRequest传递的数据可以是任何格式，虽然从名字上建议是XML格式的数据。

开发人员应该已经熟悉了许多其他XML相关的技术。XPath可以访问XML文档中的数据，但理解XML DOM是必需的。类似的，XSLT是最简单而快速地从XML数据生成HTML或XML的方式。许多开发人员已经熟悉了XPath和XSLT，因此Ajax选择XML作为数据交换格式是有意义的。XSLT可以被用在客户端和服务器端，它能够减少大量的用JavaScript编写的应用逻辑。

1.2.2.2 CSS

为了正确地浏览Ajax应用，CSS是Ajax开发人员所需要的一种重要武器，CSS提供了从内容中分离应用样式和设计的机制。虽然CSS在Ajax应用中扮演着至关重要的角色，但它也是构建跨浏览器应用的一大阻碍，因为不同的浏览器厂商支持各种不同的CSS级别。

1.2.2.3 服务器端

不像在客户端，在服务器端Ajax应用还是使用建立在如Java、Net和PHP语言基础上的机制，并没有改变这个领域中的主要方式。

既然如此，我们对Ruby on Rails框架的兴趣也就迅速增加了。在一年多前，Ruby on Rails已经吸引了大量开发人员基于其强大功能来构建Web和Ajax应用。虽然目前还有很多快速应用开发工具存在，但Ruby on Rails看起来已经具备了简化构建Ajax应用的能力。

1.2.2.4 开发工具

在实际构建Ajax应用中，你需要的不只是文本编辑器。既然JavaScript是非编译的，它可以容易地编写和运行在浏览器中；然而，许多工具提供了有用的扩展，如语法高亮和智能完成。

不同的IDE提供了对JavaScript支持的不同等级。Microsoft Visual Studio的新版本中也改善了对Ajax的支持，来自JetBrains的IntelliJ IDEA是一个更好的JavaScript开发的IDE。Eclipse包含了两个免费的JavaScript编辑器插件和一个商业的来自ActiveStat的Komodo IDE。

JavaScript和Ajax开发中的另一个问题是调试困难。不同的浏览器提供不同的通常是隐藏的运行时错误信息，而JavaScript的缺陷如双重变量赋值（通常是由于缺少数据类型）使得调试更加困难。在Ajax的开发中，调试就更复杂了，因为需要标识究竟是客户端还是服务器端产生的错误。在过去，JavaScript的调试方法是删除所有代码，然后一行行地增加直到错误出现。现在，更多的开发人员使用为IE准备的Microsoft Script Debugger和为Mozilla浏览器准备的Venkman。

1.2.2.5 浏览器兼容性

JavaScript编程的最大问题来自于不同的浏览器对各种技术和标准的支持。构建一个运行在不同浏览器（如IE和火狐）上的框架是一项困难的任务，因此几种AjaxJavaScript框架或者生成基于服务器端逻辑或标记库的JavaScript，或者提供符合跨浏览器Ajax开发的客户端JavaScript库。一些流行的框架包括：Ajax.NET、Backbase、Bitkraft、Django、DOJO、DWR、MochiKit、Prototype、Rico、Sajax、Sarissa和Script.aculo.us。

这些框架给开发人员更多的空间，使得他们不需要担心跨浏览器的问题。虽然这些框架提升了开发人员构建应用的能力，但由于厂商已经开发了更细节的用户界面的打包组件解决方案，因此在Ajax组件市场中需要考虑其他一些因素。例如，提供通用用户界面的组件如组合框和数据栅格的几个厂商，都可以被用来在应用中创建良好的通过类似于电子数据表的方式来查看和编辑数据的体验。但这些组件不仅封装了组件的用户界面，而且包括了与服务器端数据的通信方式，这些组件通常使用基于标记的方式来实现如ASP.NET或JSF控件。

1.2.3 Ajax in JSF编程

Ajax是最火爆的Web 2.0技术之一，JSF是J2EE Web应用开发的标准，并且拥有最多的开发人员支持。如何将两种技术融合在一起，是非常受关注的一个问题。当第1篇关于在JSF中使用Ajax的文章在TheServerSide网站上发布时，受到了无数Ruby爱好者的嘲讽，因为在RoR中仅仅需要两三行代码就能实现的功能，而JSF程序员不得不花费大量的时间和精力来编写众多的基础性代码才能实现。再一个原因就是，由于JSF本身生命周期（Lifecycle）的影响，在JSF中使用Ajax技术并不像普通的Ajax + Servlet那样简单。还有，就是众多的标准JSF组件并不支持Ajax功能，要为这些组件重写一遍增加Ajax功能的话，可以想想任务是多么的庞大。

Ajax4jsf的出现令众多JSF爱好者眼前一亮，它的目标定位在用于JSF应用程序的丰富（Rich）用户界面开发，而更加关键的是Ajax4jsf完全与JSF生命周期紧密结合，其他框架只给你访问Managed Bean的能力，Ajax4jsf能够在Ajax请求响应（Request-Response）期间利用Action、值变化监听器（Value Change Listener）、调用服务器端校验和类型转换器。这个框架使用一个组件库来实现，它能够为现有的JSF页面添加Ajax功能，而不需要编写任何JavaScript代码或使用新的Ajax Widget来代替现有的组件。Ajax4jsf能够实现整个页面范围的Ajax支持，而不是传统的组件范围支持。

除了核心Ajax功能之外，Ajax4jsf还支持各种资源的管理，如图片、JavaScript代码和CSS样式表等，这个资源框架让你能够很方便地把这些资源与你自定义组件的代码一起打包到Jar文件中。这个资源框架还有另外一个特性就是能够快速生成图片，创建的方式类似于使用Java Graphic 2D包创建图片。

Ajax4jsf的巨大成功，使一些JSF框架实现速度的支持Ajax功能，其中比较成功的有Tomahawk、ICEfaces、QuipuKit和RichFaces。Ajax4jsf与RichFaces同出于JBoss实验室，而且目前两个项目已经合并为一个项目，仅从这一点就让笔者无法摆脱对RichFaces的钟爱。本书的第6章将向你展示RichFaces是如何让开发Ajax应用变得简单的。