Flex3企业级Web应用系统设计与实现

Flex3企业级Web应用系统设计与实现姜天格企业级Web应用系统需要多人团队并行开发，如何能够适应这种开发模式是设计系统架构的重点。设计良好的系统架构应该像拆积木那样能够拆分成为不同的部分，这些部分功能上相对独立，便于多人开发而不会相互影响。同时，又能够像搭积木那样方便地组合，完成复杂的功能。本书从企业级Web应用系统设计中实际需要解决的独立技术问题出发，提出问题，分析问题，解决问题。然后又将独立的技术要点结合起来，搭建企业级Web应用系统的开发框架雏形。本书的实例采用Flex2，AmfPHP，PHP，MySQL技术。本书适合有Web应用系统开发经验的系统设计人员和软件工程师参考第1章接触Flex技术Flex技术作为开发Web应用的利器，近年来越来越被重视。在本章中，我们将从Web应用发展的角度，阐述Flex技术在其中发挥的作用。同时说明Flex技术中一些重要的概念。1．1Flex与Web应用的发展互联网的普及不过短短十几年的光景，其由最初的浏览静态信息快速发展到动态搜索和多媒体应用。随着网络软硬件技术的进步，大多数的数字信息化应用可以通过网络模式来实现。在网络上运行着的各种网络应用程序，我们可以统称其为Web应用。下面从使用者（用户）和开发者两个群体的角度，阐述Web应用的发展方向。1．1．1用户对Web应用的期待通过网络获取信息，是目前大多数网民上网的主要目的。随着网络技术的进步，获取信息已经不是问题，我们开始关注网络体验，要让上网的过程成为一种享受，特别是在视觉和操作方面。如何提供更具魅力的Web应用视觉效果，如何让操作更加人性化，更加有趣味性，都是需要改进的地方。用户对网络生活充满了期待，我们可以大胆地想象：随着科技的进步，未来的Web应用可以提供给人们日常生活所需要的绝大部分内容。而且，我们可以从Web应用中得到视觉、听觉、味觉、嗅觉等全方位的感官体验。1．1．2开发者对开发技术的期待PHP、ASP、JSP等是开发Web应用的常用客户端（浏览器）技术。它们都是脚本语言，需要依赖浏览器的动态解释才能够正常显示和执行。非所见即所得的开发方式给代码调试带来难度。在Web应用的开发过程中，界面外观的调试非常耗费工时，而且往往同一代码在不同的浏览器、同一浏览器的不同版本下会有不同的外观和不同的动作效果。开发者非常期待能够解决上述问题的方法的出现。脚本语言编写的界面外观表现力有限，且多为静态效果，这也是Web应用需要改善的地方。1．1．3Flex带来的新气象Flex技术能够为Web应用带来哪些改进呢？就目前Web应用所处的发展阶段而言，网络技术能够做到的事情还有限，不可能大跃进似的发展。着眼现在，我们更多地是从丰富Web应用的内容、提高用户操作体验着两方面来考虑改进Web应用。丰富Web应用的内容是永远的课题，不在本书内容之列。我们主要说说如何通过技术手段，提高用户操作体验。如果你接触过Flash，就知道它有很强的视觉表现力，动态效果非常好。Flex是Flash的姊妹，同样具有非常强大的功能。作为开发Web应用的利器，非常值得期待。对于开发者而言，采用Flex开发Web应用，能够彻底地实现MVC的架构思想，把用户操作部分的逻辑完全地从服务器端代码中分离出来。这能够大大简化系统架构的复杂性，对今后Web应用的设计产生本质的影响。Flex开发出的对象是扩展名为swf的文件，通过浏览器的插件FlashPlayer（运行时环境）解释执行。由于swf文件是经过编译的中间代码，所以源代码不可见，安全性又提高了一个级别。Flex技术的种种优点，使它进入了开发者的视野。实际的Web应用中也越来越多地看到它的身影1．2Flex技术相关概念Flex是Adobe公司的产品，它是Web应用的开发平台和工具。Flex是一系列发展中的技术和产品线的概括词,包括FlexFramework,FlexBuilder和服务器端产品（FDS）等。2006年6月，Flex2正式版发布，标志着Flex技术已经成熟，加速进军Web应用领域。细心的你也许发现周围采用Flex技术的Web应用越来越多。但是，由于Flex产品价格昂贵和占用网络带宽资源的缺陷，在网络带宽还是一种稀缺资源的今天，Flex技术并没有得到大范围的普及。目前中国的市面上甚至没有几本介绍Flex的书籍。Adobe公司也充分意识到了Flex产品的不足和缺陷，在持续改进中。并于2008年的2月推出了最新版本Flex3，免费开源了FlexSDK。同时，Flex3中的很多新技术某种程度上解决了带宽资源占用大的问题。对于很多Web应用的开发人员而言，Flex仍然是一项新技术，对其中很多概念的理解可以说是仁者见仁，智者见智。在本节随后的内容中，我们将对一些重要的概念一一进行阐述和说明，对这些概念的理解非常重要。1．2．1RIA与FlexRIA是RichInternetApplications的缩写，译为富互联网应用程序（或富Web应用）。富与瘦是相对的概念。互联网发展至今，呈现给用户的界面外观仍然非常单调。通过诸如PHP、JSP等脚本语言描绘的界面外观需要由浏览器解释执行。这些脚本语言本身的处理能力有限，浏览器能够解释的脚本也有限，这大大限制了用户的操作体验。对于这种不丰富的表现力和操作能力，我们称其为瘦。这样的互联网应用程序就是瘦互联网应用（我们身边的绝大部分网络应用是瘦的）。RIA就是在这种背景下提出的改进Web应用现状的概念。富互联网应用程序富在哪里呢？主要是两个方面的体验：丰富的视觉体验。丰富的界面操作体验。Flex、Flash、SilverLight（微软产品）都是实现RIA的技术。1．2．2RIA既是C/S又是B/SRIA是纯粹的B/S（浏览器/服务器）模式的系统，但是为什么又说它是C/S（客户端/服务器）模式的系统呢？C/S模式的系统最大的优势在哪里？在于客户端程序能够分担服务器的大部分的功能，从而降低服务器负载，降低系统架构的复杂程度。RIA是否也具备C/S系统的优势呢？当然具备。1．2．3RIA的未来对RIA应用持否定态度的人主要有两个理由：Flex等技术实现的RIA应用程序的体积都较PHP，JSP界面程序大很多（通常有数量级的差别）。界面程序的下载不但严重占用了有限的带宽资源，还使下载时间增加。由于用户不愿意长时间等待，可能造成用户放弃使用RIA。Flex还没有免费。对此，让我们思考如下事实：大家都知道摩尔定律，从我们接触计算机开始，其性能便发生着日新月异的变化。网络曾经只属于科研院所和一些特定的机关单位，现在已经是飞入寻常百姓家。目前国内有限的带宽资源的确束缚了RIA的发展，但是应当了解到中国的网络还处于发展水平，欧美国家早已走在前面。我们的邻国日本已经把光纤入户作为2010年要实现的目标之一。带宽，这个目前还在困扰着中国RIA应用发展的拦路虎，在不久的将来，必定不再成为问题。从另外一个角度来看，RIA的一个重要应用领域是企业内部，目前的企业内网通常非常快，其带宽足以满足企业内部RIA应用的需求。至于Flex的费用问题，对于个人而言，的确是价格昂贵。但是对于有RIA需求的企业而言，软件的投入是必需的，投入的资金缔结了企业与软件厂商之间的法律关系，确保了一旦软件发生问题，将由软件厂商负责承担责任。对于企业，免费的午餐未必是最恰当的选择。Adobe公司也有其产品战略，在未获得市场垄断地位之前，调整产品定价，也必然遵从市场趋势，向消费者一边倾斜。Flex程序在客观上有着雄厚的群众基础。据统计，世界上超过9成的电脑安装的是Windows操作系统，而Flex程序的运行时环境FlashPlayer是预装在Windows操作系统中的。也就是说世界上绝大多数的电脑都已经具备了运行Flex程序的条件。需求引导着市场，RIA既具备C/S模式系统的优势，又兼备B/S系统容易部署的优点。我们还是应该乐观地看待以Flex为代表技术的RIA的发展。1．2．4Flex与Flash的关系Flex与Flash都是Adobe公司旗下产品。Flash最初的产品定位是二维矢量动画制作工具。随着产品功能的增强，Flash和Java等服务器端代码相互配合已经能够开发RIA系统。但是，由于Flash的产品定位，使得它更多体现的是如何开发二维矢量动画。贯穿开发过程中的最主要的概念是层、时间轴。开发二维矢量动画和开发Web应用程序是两个完全不同的领域。Flash中层、时间轴的概念对于Web应用程序的开发者而言，是完全陌生的。对层和时间轴的操作也是与Web应用程序通常的做法格格不入的。一个现实是：Flash程序的开发者不善于开发应用程序，而应用程序的开发者通常又不善于开发Flash程序。为了占领RIA的市场，Adobe公司推出了Flex。Flex和Flash采用了相同的底层技术，并增减了一些功能。Flex和Flash的操作界面完全不同，这是为了适应应用程序开发者的思维方式和使用习惯。对于Flex与Flash的关系，我们可以这样理解：它们的底层技术是相同的。Flex能够实现的功能，Flash同样能够实现；但是Flash能够实现的功能，Flex不一定能够实现。它们的应用方向是不同的：Flash主要是为了开发二维矢量动画；Flex是为了开发RIA。它们的使用者是两种不同的人群：Flash的使用者主要是二维矢量动画设计师；Flex的使用者主要是应用程序开发人员。因此两种工具表现风格和操作方法上有非常大的区别。Flex程序和Flash程序可以通过某种方式进行交互。1．2．5Flex是客户端技术RIA系统运行流程如图1-1所示：Flex程序能够完成大部分的功能。通常只是在需要的时候，与服务器端程序进行必要交互。交互的只是必要的数据。客户端的Flex程序能够完成相对独立的完成功能，服务器端程序只是起到一个数据保存者、数据提供者的角色。从这个意义上来说，Flex是客户端技术。有的开发者认为Flex不单是客户端技术，还包服务器端技术。没错，似乎Adobe公司目标要把Flex产品发展成为一个全能的RIA应用开发工具。例如，Flex可以直接操作某些数据库。但是请不要忘记，古话有云：术业有专攻。每一种开发工具都是经过长时间的完善才有可能在某一领域突出优势。以开发RIA系统客户端为卖点的Flex技术如果想染指.Net和Java等成熟技术的市场，未免有些贪心不足。况且，RIA客户端技术目前还有许多亟待解决的问题，不能说已经真正在RIA开发领域站稳了脚跟。对于开发者而言，采用成熟技术进行恰当的组合是目前明智的选择。1．2．6Flex三种通信方式Flex程序与服务器端程序进行数据交互，有三种通信方式：表1-1通信方式通信协议交互数据格式HttpService常用的http协议XMLWebServiceSOAP协议XMLRemoteObjectFlex自定义的高效二进制数据通讯协议：AMF任意（可以是数字，字符串，对象，图片等等）这三种通信方式的比较如下：表1-2通信方式优点缺点HttpService数据格式通用，便于不同应用系统间交换数据1．数据在发送前需要转换成XML格式，接收后要解析XML数据。哪怕是只发送一个简单的的数字也要如此2．在处理复杂数据类型如图片，对象的时候，非常不方便WebService同上同上RemoteObject能够处理各种类型的数据类型，速度快需要专门的服务器端软件LCDS（FDS）或AmfPHP。LCDS（FDS）是收费的，价格不菲1．2．7LCDS/FDS与AmfPHPFlex支持Adobe公司自定义的一种通信协议：AMF。这种通信协议能够把数据压缩后进行序列化，以二进制形式进行传输。具有数据安全性高，传输快的优点。当Flex程序采用AMF协议与服务器端程序进行数据交互的时候，服务器端程序也必须支持AMF协议，这样才能够解析AMF格式的数据。如果服务器端程序采用JAVA语言开发，那么需要安装Adobe公司的服务器端产品LCDS（FDS）。如果服务器端程序采用PHP语言开发，那么需要安装第三方软件AmfPHP。表1-3JavaPHP