Flex技术在企业级开发中的应用-网页设计

转自：http://www.samhy.com/article/560.htm

从我个人的从业经历来看，在长达十几年的软件研发过程中，无论是研发的产品或实施的项目，大部分是在为企业客户提供服务。当然，期间我还从事过两年左右的互联网应用的开发。早期的互联网应用开发和企业级应用开发的区别还是很明显的，无论是技术、架构、业务和用户体验，都有很大的不同。举个简单的例子，比如开发语言，最早在2000年左右，大家都用Perl和Asp做网站，后续陆续开始使用PHP、Ruby和Python这样的动态语言来构建丰富多彩的互联网应用，当然这其中也少不了Flex技术。而为企业客户构建的应用，则更多地倾向于静态语言，比如Java和C#等。当然随着技术的发展，这两者之间的交集越来越多，大家会越来越多的发现，很多大规模的互联网站点是基于Java或C#构建的，也有一些企业应用开始使用动态语言。这一点也很明显地展示了企业级应用与互联网的融合。

说了这么多，需要为企业级应用系统做一个定位。事实上这个概念在业界并不是十分清晰，没有一个明确的定义，什么是企业级，为什么叫企业级呢？有的观点是从系统规模上划分，有的是从团队规模上划分，有的是从开发周期上划分。我个人对企业级应用系统的定义比较简单，主要是用来区分互联网应用和个人软件。什么是互联网应用呢，四大门户（如新浪、网易等）、百度和淘宝、各种SNS网站、博客系统和微博系统等等；个人软件呢，就是指安装在个人PC上的客户端软件，例如编辑器、绘图软件、开发工具等。这两种类型的应用和软件受众都是普通大众，而企业级应用系统的受众是企业客户，是为企业服务的，企业级应用系统的使用者是企业内外部客户以及与企业业务关联的人员。

2009年，在技术层面可以说是一个风起云涌的年份，互联网像一条巨大而充满吸力的纽带，把各种IT服务相关的技术、应用和实现都吸引过来，形成了一个完整而庞大的互联网生态圈。那身处其中的我们认识到了什么呢？随着我们持续的通过技术、平台、产品和项目为企业客户提供服务，我们发现企业应用不再局限在Intranet内部，企业应用系统的互联网化趋势越来越明显，主要体现在以下三个方面：

1. Intranet到Internet的转变：企业应用系统由局域网转到互联网，企业应用开始要求多浏览器支持，国际化的支持，全球业务的互联互通。同时企业应用不再满足简单的表单和表格界面，富互联网应用（RIA）的需求应运而生，企业客户越来越倡导用户体验，RIA也是我们后续要重点讨论的话题。
2. 企业应用的内容转变：除了企业的核心业务系统，这样一些需求渐渐浮出水面：交互性门户系统、电子商务平台、企业级2.0（博客、Wiki、RSS和微博等）、企业级SNS（社区平台）和无线企业应用等。
3. 需求的转变：除了功能需求，客户对于安全、性能、大容量和大并发等特性愈发关注，在可预见的未来，企业应用一定是构建在互联网而非局域网，可能是在云端，也可能在其他的新技术上实现

作为现阶段的IT服务提供商，必须从技术层面和业务层面去适应和支撑这样的趋势变化，否则我们会变得步履艰难。
好了，谈了这么多，主要讲了一个趋势的变化。下面我们来看一下在互联网和企业应用中都能发挥巨大作用的RIA技术。

RIA技术的全称是富互联网应用（Rich Internet Application），RIA首先应该是一个网络应用程序，其次它还要具有桌面应用程序的特征和功能。可以这样理解，如果你的桌面程序能在网络上（目前主要是基于浏览器）运行，并且能保持其原来的功能和特征，那么我们就可以称它们为RIA应用（富互联网客户端应用）。

目前RIA的主流技术主要包括Adobe公司的Flex，微软公司的Silverlight和Java阵营的JavaFX。Flash由于Flex SDK的支撑，很早就从单纯的动画展示转入RIA领域，而且由于Flash的普及，Flex目前应该是三大技术体系中市场份额最大、应用最广泛的技术；Silverlight是微软推出的跨浏览器和跨平台的插件，能在微软的.NET上交付炫目的多媒体体验和有丰富交互功能的Web应用，已经对Flex有了很大的冲击；JavaFX是未被收购前的Sun公司在2007年推出的用来对抗Flex和Silverlight的桌面应用，但由于起步较晚，目前应用并不广泛，但其Java的原生性和开源性质对Java社区的开发人员还是有很大的吸引力。

基于以上三种技术，我们最终选了Flex做企业级的富客户端应用开发，虽然苹果公司的CEO乔布斯老师已经开始公开表示不在苹果的移动设备上支持Flash，尽管HTML5和CSS3来势汹汹，但是在企业应用开发这样一个不是非常激进的领域，考虑到Flash广泛的群众基础，最终我们还是选择了Flex。

事实上在互联网应用中，RIA技术早已散发出夺目的光辉和迷人的魅力，无论是电子商务中的产品展示，还是SNS网站上的交友，亦或是游戏和教育领域里的交互性设计，已经为广大互联网用户带来了无以伦比的客户体验。那么在企业应用系统中，企业客户还在满足于呆板的树形结构、简单的表格和文字性质的描述吗？就我们的经验来说，2008年开始，企业客户就开始向我们提出这样的需求了，例如操作复杂的表单、图形化内容展示、动态报表绘图、图形化流程配置、流媒体视频播放和文档播放等，这一切都是在浏览器上进行的。对于大部分这样的需求，我们都是笨手笨脚的使用了Javascript、Extjs、Jquery和Activex等前端技术勉强实现了，对于不能实现的需求，我们只能腼腆的告诉客户，这些功能我们还实现不了，或者说浏览器不应该有这样的操作等等，当然这种话事实上也很难说服我们自己。

直到我们决定采用Flex技术来实现富客户端操作之后，我们才发现很多问题在Flex面前迎刃而解了。在Full-Stack系统中，如果Ajax技术和Flex技术配合形成前端组件体系，将大大提高开发效率、系统性能和改进客户体验。

Flex是Adobe公司开发的可以输出成基于Flash Player来运行的互联网应用程序。Flex 基于标准的语言，与各种可扩展用户界面及数据访问组件结合起来，使开发人员能够快速构建具有丰富数据演示、强大客户端逻辑和集成多媒体的应用程序。Flex目前最新版本是4，一个Flex应用程序应该有两种语言代码完成，那就是ActionScript和MXML。ActionScript是一种面向对象的脚本语言，MXML则是一种标记语言，非常类似于大家所熟悉的超文本标记语言(HTML)，扩展标记语言(XML)。简单来说MXML用来描述界面，ActionScript用来处理业务逻辑。

以下是Flex的一些基本特点，也是我们采用Flex的重要原因之一：

1. 可视化开发，通过拖拽方式开发界面
2. 对于有XML和脚本开发经验的人员，很容易上手
3. 可实现表现层与后台的真正分离
4. 丰富的媒体支持和动画效果，良好的用户体验
5. 支持多种通讯方式和数据格式
6. 同时支持客户端和浏览器模式
7. 跨平台，支持各种操作系统和浏览器

与普通开发者使用Flex技术不同的是，我们采用了一种组件化的方式引入Flex，这是因为我们对这部分技术的引入并不是从零开始，为了应对企业级应用开发的需求，我们很早就构建了一个企业级应用开发平台——GAP（Global Application Platform）平台，这是一个Full-Stack的应用开发平台，除了底层框架、组织权限、工作流引擎、数据字典等等，还包括界面框架、通用Web控件，Ajax控件等，Flex的引入是对现在平台的补充和完善。

基于以上考虑，我们对Flex的应用分为三个阶段。

首先，进行Flex与GAP平台的整合，包括组件化集成、前后台通信机制的设计，在这一阶段我们主要采用了ant和xdoclet技术进行组件的打包、资源文件的合并，采用Spring BlazeDS Integration技术与GAP平台框架进行交互访问，通信方式采用了Felx提供的RemoteObject。（Spring BlazeDS Integration是Adobe与Spring共同联合开发一个开源项目，其目标是开发者可以利用Spring开发模型通过Flex、BlazeDS、Spring以及Java技术创建RIA ）。

其次，构建Flex图形组件框架，对Flex提供的控件进行封装、扩展，形成针对企业应用的个性化RIA控件库。在这一阶段我们主要是基于Adobe的开源项目Cairngorm进行构建的。Cairngorm是一个基于Flex技术的微内核的MVC框架，设计简洁而易于扩展，非常适合构建自己的RIA控件库。

第三，使用Flex技术解决企业应用中的实际问题。

下面我们主要从实际应用的角度来看一下Flex在企业级系统开发中能够做什么。

一、企业组织结构的图形化展示

凡是为企业开发过系统的人都知道，企业的组织结构管理和权限管理几乎是每个项目或产品不可或缺的基础组件之一。从功能角度分析，GAP平台的组织权限系统已经非常完善了，无论是多关系的组织结构、细粒度的权限控制，都可以非常好地满足客户对于组织管理和安全的需求。直到有一天一个客户提出，能不能把那棵呆板的组织机构树变成组织结构图，如果能支持图形化操作就更好了。听到项目组给我们反馈的这个需求，第一个反应就是拒绝，因为实现起来太麻烦了。

原有的组织结构树如下图所示：

客户需要的展示方式可能是：

也可能是：

同时企业客户还希望能够进行图形化操作管理，这种功能如果通过Javascript来实现无疑是困难的，而Flex技术在处理类似的功能时则具备先天的优势。首先Flex是一种可以运行在网络上的客户端技术，它提供了一套成熟的图形化控件和类库，可以很容易的实现图形和布局控制。同时，Flex可以通过多种通讯方式（HttpService、RemoteObject、WebService）与Server端的服务进行数据交互，使得图形化操作变得非常简单，例如把人员拖到另一部门，双击显示该机构的详细信息等。最终我们也是通过Flex技术实现了客户的需求。

二、表单操作

Flex同样可以构造出复杂的表单功能，操作便捷，响应迅速，适应企业不同场景的需求。例如这样一个基于Flex技术的表格，看似简单，实际上是包含了排序、过滤、表头拖拽、表头固定、合并等功能，类似的功能如果用Ajax的方式来实现代码量会很大，但是在Flex中，这些特性基本上是原生的，或经过简单开发即可实现，代码量非常小，而且性能远远超过普通列表控件和Ajax列表控件。经测试，在同一场景下，通过Flex列表控件加载1000条数据，平均响应时间是0.1秒，Ajax控件0.5秒，普通刷新页面的方式最慢，从发出请求到返回并显示数据，大概需要1秒钟。

三、流程设计器

2004年我们开始研发工作流平台，其核心功能是工作流引擎和流程设计器。为了开发出Web-Based（基于Web）的流程设计器，我们投入了极大的人力物力，最终采用ActiveX控件实现了复杂的流程设计、流程监控等功能。到目前为止基于浏览器的流程设计和监控仍然是我们的功能特色之一。但是随着技术的发展，基于Activex控件的流程设计器越来越显示出局限性，例如不支持多浏览器，不支持国际化，在各种Windows和IE版本中的自动安装经常会出现问题，最重要的是扩展起来比较复杂。

下图就是基于ActiveX技术的流程设计器。看上去很美，但的确存在着问题。事实上我们正在积极准备基于Flex技术对流程设计器进行改造，改造完成后，上面提到的问题即可迎刃而解。技术的进步带来应用的改进，所以我一直强调，技术创新才是软件企业的原动力。

四、动态图表

通过图表描述业务数据，加强数据的展现能力。每个图表都可以支持参数的动态变化，响应点击事件，实现动态效果，而这些几乎不需要额外编写代码。传统的报表工具或制图工具，例如BIRT或JFreeChart等，处理报表图片时都是通过流的方式输入静态图片，一旦生成，就是静态页面，用户无法与之交互。而使用Flex进行图表的开发，则可以轻易突破 这一障碍，Flex提供了大量内置的图表控件，用来进行图表展示，在浏览器上的表现方式为Flash，可以在生成图表之后，继续实现前后台数据的交互和展示。例如使用CandlestickChart控件来实现蜡烛图的动态展示。从一下两张图可以很清楚的看出，通过选择不同的选项，可以显示不同的趋势变化，点击图元还可以显示该图元的相关数据。这些复杂的数据操作基本上是由CandlestickChart控件完成的，开发者只需要组装数据即可。事实上要实现这个功能样例，只需要100行左右的代码。

五、知识管理

企业信息化10年，积累了大量的数据、文件、视频需要进行展示，通过Flex可以构建通用的播放器，利用流媒体技术、全文检索技术实现企业内部的知识管理。类似的技术和功能在互联网上已经不是什么新鲜事了，例如slideshare、youtube，国内的豆丁、优酷等，这些网站要么是基于文档的管理，要么是基于视频的处理，但它们的共同点是核心技术都采用了Flex。对于互联网领域，领域的细分无疑是非常明智的，但是在企业级应用领域，企业客户更关注的是应用的整合，我们拟基于Flex技术开发通用的前台播放器，可以同事播放视频和文档，后台采用Flash Midea Server和文件服务器，结合内容管理、全文检索和标签云技术，实现企业信息数据的全流程管理。

六、动态商品展示

基于Flex技术的动态商品展示已经在很多中大型电子商务公司应用，通过Flex可以实现很多眩目的效果来进行商品展示，同时可以动态设置商品的属性，让客户更好的了解商品细节，增加客户粘度。这样的技术在企业级应用中同样适用，主要业务领域应该是企业的电子商务平台。

七、全键盘操作

某些特殊领域的客户，比如要快速录入大量数据，就会对全键盘操作有需求，要求在浏览器做的应用要能像Excel一样全键盘操作，除了支持Tab加Enter键之外，还需要能够支持四个方向键的操作支持，就像是Excel一样，当单元格中的文字处于全选状态的时候可以通过方向键进行导航。这样的功能用普通的Javascript实现一个是复杂，而是会降低网页性能。但用Flex来实现这种特殊场景就完全没由这些问题，本质上来说Flex还是客户端技术，可以很好的提供键盘支持。

企业客户越来越认识到RIA技术对于企业应用的重要性，而Flex就是实现RIA重要的选择之一。但是，无论技术也好，创新也好，有用的才是好的，不能因为技术而使用技术，因为创新而创新。就Flex而言，从根本上说它还是一个客户端程序，所以一定会比普通的Web页面更多的占用更多的客户端资源，所以我不建议大家在构建企业应用时大量采用Flex技术，一定要用其所长。Flex在互联网领域早已大放异彩，那么它是否能成功应用于企业应用的开发呢？不必拭目以待，我想这个答案无疑是肯定的。