对 Flex 的总体认识

    作者：Flyingis

    本文严禁用于商业目的，如需转载请注明作者及原文链接，其他疑问请联系：dev.vip#gmail.com

    Flex用于RIA应用开发，有数以万计的开发者将Flex作为项目UI界面的构建，UI构建是一个比较大的话题，里面也融入了MVC分层架构思想，有如ajax应用模式一样。目前对Flex了解甚浅，一周内零零散散花了一些的时间学习了Flex基础，写几篇文章作为小结，如果挨砖，绝对是受之无愧！

    Flex应用程序引入了两种不同的语言：MXML和ActionScript。MXML属于XML标记语言的一种，AS也早有所闻，有点类似于Javascript，经过学习后，发现完全没有太多联系，其OO思想更加接近于传统OO语言，JS精髓在于prototype原型，AS中压根儿就找不到prototype身影，反而是语法稍感别扭，可能大家容易将MXML+AS和HTML+JS类比，所以才产生这种印象，并且两者开发方式的区别还是很大的，所以还是专心于MXML+AS学习吧，不要左顾右盼了。

    1.Flex-SWF-AIR

    Flex开发出的应用程序，可以编译为基于Adobe Flash Player的swf，也可以编译为基于Adobe AIR的air，两者之间最大区别在于air能够直接和本地资源进行交互，更多信息请直接Google吧。

    2.MXML-AS

    之前提到了MXML和AS，我们写一两个demo例子就能明白两者之间的关系，除此之外，文档中有关于两者的一些描述。

    MXML filenames must adhere to the following naming conventions:
    Filenames must be valid ActionScript identifiers, which means they must start with a letter or underscore character (_), and they can only contain letters, numbers, and underscore characters after that.
    Filenames must not be the same as ActionScript class names, component id values, or the word application. Do not use filenames that match the names of MXML tags that are in the mx namespace.
    Filenames must end with a lowercase .mxml file extension.

    ActionScript is an object-oriented procedural programming language, based on the ECMAScript (ECMA-262) edition 4 draft language specification. You can use a variety of methods to mix ActionScript and MXML, including the following:
    Use ActionScript to define event listeners inside MXML event attributes.
    Add script blocks using the tag.
    Include external ActionScript files.
    Import ActionScript classes.
    Create ActionScript components.

    3.基本开发流程

    首选IDE非Flex Builder莫属，不用去google其他的了，那是浪费时间，Flex Builder给我们提供了非常优秀的开发调试环境，至于重构，似乎没有找到比较好的方法，这点需要注意。程序完成后，所有资源编译为SWF，然后就在可以嵌入到网页中发布到互联网，这里不难发现，Flex中的组件和HTML DOM进行交互将会有很大的障碍，因为交给HTML的仅仅是一个完整的swf，虽然Flex提供了和JS相互调用的方式，但要实现复杂的关联和调用，肯定会感觉心有余而力不足。

    一个最基本的hello MXML应用程序代码：

<?xml version="1.0"?>
<!-- mxml\HellowWorld.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/>
    </mx:Panel>
</mx:Application>

    嵌入到网页中的主要代码：

<noscript>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        id="hello" width="100%" height="100%"
 codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
 <param name="movie" value="hello.swf" />
 <param name="quality" value="high" />
 <param name="bgcolor" value="#869ca7" />
 <param name="allowScriptAccess" value="sameDomain" />
 <embed src="hello.swf" quality="high" bgcolor="#869ca7"
     width="100%" height="100%" name="hello" align="middle"
     play="true"
     loop="false"
     quality="high"
     allowScriptAccess="sameDomain"
     type="application/x-shockwave-flash"
     pluginspage="http://www.adobe.com/go/getflashplayer">
 </embed>
    </object>
</noscript>

 

    运行效果：


    联想到ArcGIS Flex API，如果只是想做一个单独的WebGIS应用，或希望基于Flex技术重新开发一套WebGIS+MIS系统，ArcGIS Flex API可以实现非常绚丽的效果，但如果已有一套业务系统，并希望引入WebGIS和原有业务系统进行交互，ArcGIS Javascript API更合适，JS去处理传统网页逻辑结构和页面显示的方法是再成熟不过了。

    4.MVC

    Model-View-Control模式已经成为经典了，早年从Struts刚出来时跳入我的视线，分层、解耦成为过去几年B/S开发的热点关键字，Flex开发同样可以遵循这一经典思想。

    Flex用户接口组件为View，分为两种类型：控件和容器。数据和业务规则为Model，如控件中的数据来源，在什么情况下显示什么数据等。Flex没有提供像Struts这么清晰的ActionServlet控制器，但可以根据应用需求去设计自己的控制器。

    以后会分析一个完整的例子。

    5.flex-config.xml和mxml-manifest.xml

    flex-config.xml在flex_install_dir/frameworks下，可用于基于命令行进行Flex编译，flex-config.xml涵盖flex编译及其他控制的所有选项，对于命令行编译来说，mxmlc复杂的编译选项对于命令行的输入简直就是噩梦，而使用flex-config.xml可以方便的修改编译选项，并且一次修改就可以在后续的所有mxmlc编译过程中保存下来，并且flex-config.xml文件是一个xml文件，易读易用，其中每个参数都有详细的注释，对于编译参数的调整也更方便。

    详细方法：http://blog.eshangrao.com/2007/01/30/335/

    同样在flex_install_dir/frameworks目录下，mxml-manifest.xml包含了Flex所有组件类和id之间的对应关系。