flex系列文章：第一章. Flex概念和工具初步

第一章. Flex概念和工具初步

1.1 RIA(Rich Internet Application)

我们已经非常熟悉当前标准的WEB应用的触发方式, 客户端请求服务,服务端同步地响应请求并刷新客户端IE.这是一种标准的瘦客户胖服务端的概念.RIA的概念正好相反,RIA应用运行在传统标准的IE上,但是它建立了一套独立于标准Client/Server请求响应模式.请求发出后,客户端异步地侦听响应.在各种解决方案中客户端通常采用回调函数的方式异步地侦听处理响应.RIA减轻了Server处理业务逻辑的负载,加速了系统的并发.但同时对事务和数据管理提出了挑战.目前,业内较成熟的RIA方案有Ajax,Flex/Flash,OpenLaszlo,XUL,WPF等等。

1.1.1 Ajax

Ajax是Asynchronous JavaScript and XML的缩写,Ajax的提出者Jesse James Garrett是这样阐述的:

1. 使用XHTML和CSS标准化显示

2. 使用DOM(Document Object Model)动态显示和交互

3. 使用XML和XSLT进行数据交互和处理

4. 使用XMLHttpRequest进行异步数据获取

5. 使用JavaScript整合所有这一切(这部分被称为Ajax Engine)

Ajax并不是一门全新的技术，它所包含的技术可能5年前甚至更早就出现了.Ajax应用和传统Web应用运作机制上的不同见图1-1

传统的web应用程序一般是由客户端浏览器向服务器提交数据，服务器返回新的页面，再次在浏览器中显示，这意味着每次数据往返都需要刷新浏览器页面。
Ajax应用程序改变了这种模式。由Javascript编写的Ajax引擎(Ajax Engine)，在Ajax应用程序中担负着一个中间层的任务，当用户界面要向服务器提交数据时，由Ajax引擎负责收集数据并通过Http request(XMLHttpRequest)向服务器发送数据，服务器处理完成后返回XML，Ajax引擎将XML处理为便于用户界面显示的XHTML和CSS数据，并更新用户界面相应部分的显示，而非刷新整个页面，从而避免了不必要的数据往返，只有必要的数据在必要的时刻才在浏览器和服务器之间传输。

1.1.2 OpenLaszlo

OpenLaszlo和Flex一样，首先编译成swf，运行时被flashplayer解析。她目前完全opensource,编程主要用JavaScript和XML编码原文件扩展名为LZX。它的有些特点和flex挺像的，不仅可以被编译成swf，而且提供了和flex类似的组件库但是数量和质量比起Flex都远远不及。在Flex1.5时它曾因开源吸引了无数人的目光。前景值得关注。
1.1.3 WPF

WPF包括一个引擎和预装在Windows Vista系统中的架构以及一个名字叫XAML的基于标签的脚本语言组成。XAML和MXML很相象都是标签封装对象的设计。WPF可以开发基于桌面或者WEB的应用。WPF比Flex强壮的地方是本身对三维数据展示的支持，相比之下Flex则暂时只能在2D上游荡。
1.1.4 RIA的优点

首先富客户端的思想使加强用户操作体验而不频繁的装载刷新数据成为可能；另外RIA是基于用户事件出发的，较好的实时反馈和用户验证特性；丰富的组件资源可以利用；可以集成音频视频，增加用户体验等。

1．2 Flex 概览
2004年，Macromedia发布了Flex1.0。2005年，1.5发布。它比上一个版本在功能和稳定性上有很大的提高。在这个版本中首次加入了图表Charting组件，改进了DataGrid组件，首次加入了控件外观Skinning技术。1.5主要面对的是大型公司，因其价格昂贵，所以没有很好地得到普及。2006年2.0的发布改变了这一现状。License价格也降到中小公司可以接受的水平，并且重构了FlashPlayer8，应用运行效率得到很大的提高。Flex2更新了MXML和ActionScript语言，使开发者能够方便地利用MXML或者ActionScript3开发和扩展现有的标准组件。Adobe同时还提供了和Eclipse集成的Flex Builder 插件 IDE。与1.5不同，这个版本还提供FDS应用服务器，对数据Model这一块提供更健壮的封装。另外，Charting组件被单独隔离成一个独立于Flex SDK的产品。最后，FlashPlayer9的改进也是很激动人心的。FlashPlayer9就整体架构而言与历史版本完全不同，内置的AVM虚拟机能够更快的解析应用程序，并且对ActionScript3的面向对象编程模式提供完全支持。支持正则表达式，标准事件模型，二进制套接字等。
1. 3Flex开发工具介绍

开发Flex应用的时候，开发者可以选择集成开发环境Flex Builder2 或者利用Commandline Flex SDK. FDS是J2EE服务器内置flex web服务器。商业版FDS只对单CPU服务器有效。
1.4 FDS概要分析

FDS主要包括以下几个主要部件和功能。
1． FMS。 Flex消息服务，此功能主要支持实时消息服务，和后台java 消息服务JMS协作可以实现跨平台聊天应用等。
2． 发布订阅消息部件。此机制主要是采用生产者/消费者模式发布消息和订阅消息。
3． 数据自动更新（data push） 此机制的思想是在没有客户端触发的情况下自动刷新敏感数据到客户端，实现实时数据刷新。例如实时全球股票市场Charting展示。
4． 远程过程调用（RPC 服务）这一块主要是用来连接外部数据，一般说来也就是怎样和后台数据连接的功能模块。经典的数据存取和连接方式有以下几种：Web Service, HTTP Service, Remote Object 等。

1.5 Flex Builder 背景信息

毫无疑问，Flex Builder2是Flex产品库中非常重要的一员。最初版本的Flex Builder是Macromedia开发团队以Dreamwaver平台为蓝图开发的。实践证明这是一次非常失败的尝试。Adobe Flex开发组意识到这个问题，于是果断地扼杀了Flex Builder1以后，便尝试在以Eclipse IDE为基础的平台上，开发了Flex Builder2的Eclipse 单机版和Flex Builder2的插件版以适应不同开发者的需求。原因有若干，一是Eclipse是当前J2EE企业级开发人员非常熟悉并且也很稳定强大的集成开发环境；二是，选定Eclipse作为整体基本框架也是与Adobe未来的开源战略分不开的；最后就是Eclipse极其强大且灵活的扩展性。Flex Builder2有Eclipse的单机版和插件版两种，其实运作方式大同小异。单机版集成了Eclipse平台的一个子集，运行时比标准的Eclipse平台会消耗更少的内存资源。但是考虑到实际的情况，对已经在利用Eclipse标准平台做系统开发的人员可以考虑用插件版，操作上可以简单的把Flex Builder作为Eclipse的一个标准插件就可以了，十分方便。

1.6 创建一个项目

我想大家在安装Flex Builder2以后，根据创建项目向导就可以成功地创建一个项目。在这里我不想在重复这些具体的操作过程。不过，我认为很有必要说明一下在创建项目时的一些关键概念的理解。

1． 和Eclipse的其他类型项目一样，只能先创建一个项目，然后才能创建代码源文件mxml或者as。

2． 创建项目向导中关于存取数据的种类有三种，Basic类型是指从项目本地的XML文件或者是Web服务中存取数据。也就是说这种类型的项目部署时不需要FDS服务器Runtime提供存取数据服务。如果选择FDS类型那么你的这个Flex项目物理位置应该在J2EE WEB应用的WebContent文件夹下。

3． 向导中对于主应用文件的命名要慎重，不要与你系统中别的组件mxml文件名重名。输出文件路径系统默认路径是项目目录下Bin子文件夹，也可以自定义。

4． Flex Builder2在创建任何种类型的项目时都会默认地把若干标准swc库导入到项目BuildPath下面，也就是说如果你的项目中要索引到别的第三方库文件的话则必须手动地加入这些类库索引。或者可以手动编辑项目.actionScriptProperties文件将你的类库加入。

5． Flex编译器默认的编译参数为-locale en_US，如果你的项目中有对多语言的支持的话，那么你要把所有的参数都配上去，否则ResourceBundle类可能找不到所需要的多语言properties文件。

1．7 Flex Builder IDE的视图

Flex Builder的视图有开发视图和调试视图两种。对于开发视图开发者可以方便的在源代码编辑区手动写代码或者在设计模式选项卡中所见既所得的拖动Flex组件，代码会自动更新到代码模式选项卡中，并且这两种开发模式是保持代码同步的。当项目中已设置好断点，调试时Flex Builder会自动切换到调试试图，并停止运行到断点处，开发者可以在单步跟踪的过程中,watch 或者 display所感兴趣的变量。Flex Builder编译项目源文件时，首先会扫描所有源文件，遇到被修改的文件时才会重新编译这个文件，然后连接所有主文件mxml中索引到的所有资源。一般会消耗不少的内存资源，如果你不想每次改完源文件后都让系统重新build一遍项目，那么可以勾掉Flex Builder顶端project菜单中的build automatically选项。在你需要的时候可以手动地build项目。

Flex技术专栏 --by mervyn_lee

本章总结：
本章主要介绍了RIA的基本概念以及业内比较成熟的RIA解决方案。然后介绍了Flex家族成员中的比较核心的部分。最后讲解了Flex Builder2集成开发环境的一些注意事项。下面的章节将详细介绍Flex各种开发环境配置初步的知识.

 

flex系列文章：第二章. Flex2 基础编程模式

概要：第一章我们主要介绍了有关RIA的背景知识以及简要地描述了一些Flex Builder2的基本知识。那么这一章我们将把目光锁定到Flex的开发模式上。在我们具体的了解怎么利用Flex开发项目之前，首先要明白MXML是什么样的一种语言和ActionScript3是怎么合作开发的，以及Adobe声称的ActionScript3已经完全实现的了面向对象编程是真的吗？以上的问题都是属于Flex编程模式的问题。Flex2编程元素包括MXML语言，ActionScript3脚本语言以及Flex2 类库。

2．1 MXML/ActionScript 说明

MXML从本质上说一种XML规范的标签语言，主要用来定义描述可视用户接口，如控件类DataGrid,Label,Button,Hslider等，但是也有时用来定义一些非可视的对象比如FDS数据源的封装和绑定，比如WebService连接，数据绑定Binding,还有一些效果类Effects.MXML基本上和HTML的语法很相象，都是利用标签来定义用户接口和基本组件，但是MXML有比HTML更庞大的标签库。HTML和MXML最明显的不同是MXML文件最终由FlashPlayer来编译解析和展示，而HTML是由IE来直接解析和展示。当我们学习任何一种语言是，第一个程序都是hell world。我们也不能免俗。

<?xml version="1.0"?>

<!-- 注释 -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

            <mx:Box>

<mx:TextInput text="Hello World!" />

               </mx:Box>

</mx:Application>

首先Flex MXML文件的注释方式为<!-- 注释 -->。一般一个MXML应用文件的根标签都是<mx:Application>，而xmlns:mx="http://www.adobe.com/2006/mxml" 则定义了Flex类库组件的名字空间，由此说开去，如果我们有自定义的类库或者是第三方类库时，这个地方名字空间的声明是必须的。<mx:Box>是一个容器类对象，<mx:TextInput text="Hello World!" /> 是一个控件类对象。MXML机制规定容器类对象内可以无限内嵌容器类对象或者控件类对象，而控件类对象不能嵌套容器类对象或别的控件类对象。同时无论容器类对象或者控件类对象都有各自所属的属性集合，方法集合，时间集合。TextInput中text就是其中的一个属性。

ActionScript3是被用来展示Flex2类对象的基础方式。因为所有的MXML标签对象都最终会被编译成AS类对象字节码的。FlashPlayer中的AVM(AS虚拟机)内置了as的所有基础标准类和方法，在运行时，AVM执行展示这些文件字节码。外表上AcitionScript和JavaScript是很相似的。实际上，JavaScript是基于ECMA-262标准的，而ActionScript是基于ECMA-262 Edition4规范的。和JavaScript一样，ActionScript也是一种弱类型的语言。在OO编程模式的实现上，ActionScript还远远不能让人满意，开发者可以把AS写成OO的样子，但是OO核心思想中的封装多态和继承却徒有其表。况且也没有足够的运行时Runtime处理高端需求的弹性，比如Java中的反射机制。作者认为，ActionScript3在OO的实现上还有空间可以拓展。

但从脚本语言的观点出发，ActionScript中我们的确可以方便的做很多东西。比如可以写组件事件侦听逻辑，创建新的类对象，处理回调函数，定义包package和组件等。在Flex2应用程序中利用ActionScript脚本的方法和场合有以下几种。

1．在 MXML文件的<mx:Script>标签中插入as代码，这里可以写事件处理函数，自定义事件，错误处理函数，以及任何你想写的as逻辑。

2． 在ActionScript文件定义组件类。另外考虑到组件重用，可以将此AS组件编译成swc库文件备用。

3．  在ActionScript文件中扩展标准组件。

4． 可以把所有的MXML文件<mx:Script>标签中的逻辑放到一个或者若干个AS文件中，用时可以import到MXML文件中。

上面提到在MXML文件中直接插入AS代码的方法时要用用到<mx:Script>标签，具体语法是

<mx:Script>

              <![CDATA[

                     import mx.controls.Button;

                     public function myHandler():void{

                            var myButton:Button = new Button();

                            myButton.label = "label";

                            ........

                     }

              ]]>

       </mx:Script>

在这个标签里，需要注意的地方有几点。

1． 标签要成对出现。

2． 你不能在标签内定义任何的的类或者接口，因为本身当前的MXML文件就是一个类，ActionScript并没有像Java一样支持内部类定义。

3． [CDATA[标签主要用来告诉编译器标签内的内容不要被解释成MXML语法，而是ActionScript.

4． <mx:Script>标签必须定义在MXML文件根标签的层次否则会出现编译期错误。另外Flex2语法上支持一个MXML文件中定义多个<mx:Script>标签。

下面举一个在MXML文件中使用AS标签的例子。

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

       <mx:Script>

              <![CDATA[

                     //import mx.controls.Button;

                     public function myHandler():void{

                            var temp:String = "Hello Flex2";

                            textInput.text = temp;

                     }

              ]]>

       </mx:Script>

       <mx:TextInput id="textInput" creationComplete="myHandler()" />

</mx:Application>

在MXML文件中标签对象都是用id属性来标识的,一个标签对象只能有一个唯一的id.另外

需要说明的是只有类的对象才可能有id，这个id就是当前类对象的名字。比如，我们上面定义的TextInput就可以有id属性，但是当我们用mxml语法自定义一个组件类时，组件类根标签是不能设置id属性的，否则会出现编译错误。原因很好理解，因为这个组件MXML文件只是一个类定义，不是一个类对象。只有对象才可能有id，不是吗？有了id我们就可以像MXML文件内全局变量一样任意控制当前类对象的所有属性和事件处理。就像

textInput.text = temp；

当你想索引另外的自定义类文件或者标准库文件时有可能会用到import或者include。如你想在as标签内索引Button标准组件可以用这个语法/import mx.controls.Button。另外如果你想用你自定义的一个AS文件中的一个函数，你可以这样写

              <mx:Script>

              <![CDATA[

                     include "myactionscript.as"

              ]]>

       </mx:Script>

2.2 Flex2项目源文件的编译过程

首先说明一下，一个完整的Flex应用可以包括MXML文件，ActionScript文件，SWF文件，和SWC文件等。Flex编译器工作的第一个步骤是将主MXML文件以及文件内include的所有子文件转换成一个单独的ActionScript类文件。连接所有被索引（imported）的的库或自定义类文件。最后形成一个可以被部署到服务器上的swf文件。

2.3 Flex2 类库架构

Flex2类库主要包括可视化组件类，行为类以及系统管理类。整个类库结构非常复杂。不过在我们的开发中主要用到的类包有，

1.mx.utils包，很多有用的工具类在这里定义。

2.mx.collections包，Flex2的数据容器类

3.mx.charts包，各种图形组件包

4.mx.controls包，所有的可视组件类都在这里；

5.flash.events包，flex 事件处理类定义。

6.flash.utils包，flash基础工具类定义，做一些底层控制时经常用到。

2.4 ActionScript自定义组件

本小结我们将简要地介绍自定义组件的相关基础概念，在哪里创建以及怎么创建的问题。在实际的项目中我们经常需要自己定义一些组件。那么自定义组件的好处主要有两个。首先，自定义组件可以很好的隔离和封装我们通用的表现层逻辑；第二，它可以使我们建立起针对应用的组件库，使我们以后方便的重用这些组件。

自定义一个组件可以有两种表示形式，一种是利用MXML标准库标签定义组件的形式，另一种在ActionScript中定义组件类。我们都知道任何Flex组件不论是标签形式还是AS形式都最终被FlashPlayer解释成类对象。组件类定义完成后，那么我们到底该怎么以类文件为模板new一个组件对象呢？首先可以说清楚的是，我们基本上有以下4种方式初始化一个组件对象。

1. 在MXML<mx:Script>标签外，创建MXML类对象。

2. 在MXML<mx:Script>标签外，创建AS类对象。

3. 在MXML<mx:Script>标签中，创建AS类对象。

4. 在MXML<mx:Script>标签中，创建MXML类对象。

举例分析如下

比如我们继承mx.containers.Panell基础类创建一个CustomPanel自定义组件，类文件定义有两种方式分别为CustomPanelAS.as和CustomPanelMXML.mxml

CustomPanelAS.as的代码为：

package demo.flexinaction.samples

{

    import mx.containers.Panel;

    public class CustomPanelAS extends Panel

    {

        public function CustomPanelAS(){

            super();

        }

    }

}

Package关键字表明了当前类所在的目录位置，这样做主要为在别的mxml或as文件中名字空间的定义提供索引。和Java的类定义很相像，要倒入类定义中需要索引的类文件 mx.containers.Panel。你不能把一个类声明成私有的，private关键字只有被用来定义类私有属性以及私有方法extends关键字说明当前类需要继承的父类。与类同名的方法CustomPanelAS()是当前类的构造器。Flex2不支持构造器的重载。super();说明调用父类的构造器。

CustomPanelMXML.mxml文件代码如下：

<?xml version="1.0" encoding="utf-8"?>

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" title="CustomPanel rendered by MXML" >

</mx:Panel>

<?xml version="1.0" encoding="utf-8"?>声明了当前mxml文件的schema以及按照utf-8标准编码。xmlns:mx=http://www.adobe.com/2006/mxml声明了Flex2标准类库的名字空间，这样我们才能在标签中利用mx前缀引用标准类库。当然也可以定义为别的名字。或者为空就像xmlns=http://www.adobe.com/2006/mxml，如果这样，那么在引用标准类库的时候就要这样。

<Panel xmlns:mx="http://www.adobe.com/2006/mxml" title="CustomPanel rendered by MXML" ></Panel>

类文件定义完了，我们看看Flex2中是怎么创建这个对象的。主应用文件是AdobeFlexInAction.mxml，源代码为：

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

    xmlns:panels="demo.flexinaction.samples.*" initialize="doInit()">

    <mx:Script>

        <![CDATA[

            import demo.flexinaction.samples.CustomPanelAS;

            import demo.flexinaction.samples.CustomPanelMXML;

            private function doInit():void{

                Application运行时(Runtime)动态创建对象

//1.利用ActionScript类CustomPanelAS创建

var panelC:CustomPanelAS = new CustomPanelAS();

                //设置对象title属性

                panelC.title = 'CustomPanel rendered by ActionScript';

                //将新创建对象加入父容器

                hbox.addChild(panelC);

//2.利用MXML组件类文件CustomPanelMXML创建

var panelD:CustomPanelMXML = new CustomPanelMXML();

                //将新创建对象加入父容器

                hbox.addChild(panelD);

            }

        ]]>

    </mx:Script>

    <mx:VBox id="hbox" width="407" height="414">

        <!--Application初始化时创建对象 -->

<!--在MXML标签中利用组件类文件CustomPanelMXML创建初始化对象 -->

<panels:CustomPanelMXML id="panelA" />

<!--在MXML标签中利用组件类文件CustomPanelAS创建初始化对象 -->

<panels:CustomPanelAS id="panelB" title="'CustomPanel rendered by ActionScript"/>

    </mx:VBox>

</mx:Application>

xmlns:panels="demo.flexinaction.samples.*"是我们自定义文件的名字空间，前缀为panels，名字空间的引入主要是为了避免大型应用的类文件名字冲突，利用名字空间，可以很好地避免这个问题。应用初始化时调用doInit()方法。Flex2标准的可视化组件都有initialize事件doInit()为事件处理函数。具体注释请参考代码中的说明。

总结：

本章主要概要地讲述了Flex2的编程模式方面的一些基础概念的理解。最后一节又小范围地解释了ActionScript自定义组件的一般过程。Flex2关键是对基本概念的理解，有了这一章的铺垫相信在后面的章节中，读者能够更加轻松的理解一些高级主题。下一篇将主要讲述Flex2真正项目实践中有可能会遇到的问题，以及目前Flex2针对特殊应用尚存的Bug以及参考解决方式。

最后，谢谢你能耐着性子继续读下去，好戏即将开始。。。。

第三章. Flex标准组件类分析和应用

在能够熟练地利用Flex各种组件开发具体应用之前，我们需要更详细地熟悉Flex开发的各个关键要素和来龙去脉。那么本章将详细的阐述这个过程并且还将彻底分析其中3个关键知识体系。一是，Flex组件的事件触发体系；二是，Flex中Data Provider和Collections等数据容器和迭代器类的详细理论；三是，ActionScript中在Flex应用的一系列关键角色等。笔者并不想按照Flex帮助文档中的知识阐述体系来讲解本章，而是针对Flex应用从总体上把握归纳和分析，在本章你不会看到某个具体的组件TextInput怎么用以及它的详细属性和方法，但是你会看到所有的Flex组件集合中共通的共性和个性，在理解了这些知识以后，读者可以轻松的利用所有的标准组件来开发各自的应用。Flex的帮助文档侧重产品和功能的介绍，从开发者的观点上没有足够的的功能归纳和分析，而这恰恰正是我们所需要的，相信本章将弥补这个空白。本章包含以下几个小节：

1．开发MXML应用的要素和必要理论基础。

2． 你打算在ActionScript中做点什么。

3． DataProvider和Collections数据容器类和迭代器类

4． 事件模型

5． 标准控件Controls类

6． 标准容器Containers类

7． 标准效果Effects类

8． 运行时Runtime特性