＊Flex 的基础架构

关于 flex 基本上常被问到的不外乎就是“如何可以学好它？”，要了解这个问题的答案基本上只要看懂下面这个图就OK了。

＊Actionscript 该学的重点

从最底层看起，最下面的 actionscript 3是一切的基础，它是 flash/flex 编程使用的唯一程式语言，因此任何人想学好 flex 第一件事绝对是先摸熟 actionscript 这个语言，包含：

1. 它的基本语法与结构(array, hash, loop, if else…)
2. DisplayList (DisplayObject, DisplayObjectContainer)与 Event system(bubbling, propagating…)
3. Sound, Video, NetConnection 与 Graphics class

掌握 as3 的精华后，接下来就可以进入 flex framework。

＊Flex framework 的重点

基本上 flex framework 就是用 actionscript 写成的框架，因此也可以把它看成是 as3的最好示范，看着 framework source 学 actionscript 也是挺不错的，只是路会变很长。

Flex Framework 整个体系非常博大精深，通常一般人不太可能完整把它学完，只需要针对最常用到的部份熟悉就好，图中列出的那三块(component, managers, style/skin)就是我个人认为所有初学者最优先该学会的。

＊Component 该学些什么

Component 是整个 flex framework 的基础，几乎80% 的元素都是由 UIComponent 继承而来，例如最根本的它本身就是一个 UIComponent，因此，熟悉 component 就成为学好 flex framework 最根本也最重要的基本功

Flex 内建了 二十几个 UI controls, 例如 Button, DataGrid, HBox等，以种类来分，这些 components 可以概分为三大类：

• Controls: Button, DateChooser, Slider…
• Containers: Box, DividedBox, Panel…
• List: DataGrid, Tree, TileList…

初学者第一步至少该学会怎么用这些元件，了解每个元件的 properties, events, styles, effects…，知道怎么在手册里查它的 API 文件，以及何时该用何种元件。

进一步，则是学会怎么修改这些元件，例如继承一个 Button 下来加上不同的功能，或是写不同的 skin border 来改变它的外观。

再进一步，则是开始研究元件的生命周期，了解每个元件是何时初始化，元件内部有那些关键指令与它们个别的功能，然后可以试着建立自已的 custom component。

这一关看起来容易但实际上最困难，因为 flex 的 component framework 写的非常庞大，虽然乱中有序但要在混沌中看出隐藏的架构然后抓住重点整串提起，就非得有人带着指引正确的途径才比较可能完成。

＊manager 是什么

图中最上方的第二块就是 manager。

flex 里有很多的 managers，负责做各种不同的工作(废话…)，几个比较重要的包含：

• SystemManager:
  它是每个 flex 程序的根源，最先被下载，也最早启动，由它进行一连串的 app boot流程
• StyleManager:
  它负责整支app 的 css style 套用与 skin 生成，如果想玩动态 css 载换也靠它
• DragManager:
  Flex最大的卖点就是 drag and drop（拖放），这个 manager 就是背后的英雄，初学者至少要学会怎么处理 drag 行为的五个事件，以及如何在不同元件间做拖放；进阶的玩家则应该深入研究这支 manager 是怎么写成的，详细阅读它的 source 会得到意想不到的无穷乐趣(如果你读完却没有这种感觉，呃，那代表你该再多读几次，如果还是没有，那请私下联络我 )
• ModuleManager:
  使用 Flex 开发大型应用程式时，往往会将程式切割成许多小的 module, 这个 manager 就是负责载入并管理所有的 module (包含它的 class partition)，初心者或许用不到，但有志深入的玩家一定要很熟。
• CursorManager:
  这个用到的时机不是很多，但偶尔要换一下 cursor 时还是会用到，初学者至少要知道怎么用指定的图案去换掉系统cursor。

＊Style/Skin 的重点

CSS style 与 skinning 是 Flex 最大的卖点之一，也是开发过程中较为麻烦也最耗时的部份。

初学者应该要彻底了解如何使用 CSS style 来打点一支 flex app 的外观，换颜色、素材，使用外部 assets 修饰介面。

中阶玩家则应该了解 skinning 的系统，包含 programmatic skinning 与 graphical skin，它们俩的差别？使用时机？如何客制化（zrong注1）？

更高阶的玩家则应该熟悉整个 Styling system 的运作模式，外加如何动态载入 css 在 runtime 换掉整个介面。

简而言之，flex app 写的好不好，外行人其实看不太出来，但一支 app UI 美不美则是一翻两瞪眼，比较漂亮的那就先加十分

(当然，有一种情况是刻意用心去美化了介面结果弄巧成拙搞的怨声载道人人喊打，但那种比较不多见，也不是每家公司都会搞到这步田地，就先不讨论)

＊学完基本功后下一步

在我的标准里，当一个 developer 对上图内每一块都有中等程度的了解后，就算是完成 flex 养成教育，可以迈向下一个阶段。

也就是开始熟悉 application 的制作手法，这包含

• 了解至少一种以上的开发框架，例如 Cairngorm，老实说我对这个框架没什么好感(因为手法太复杂，只适合超复杂登月计画或火星探勘时使用)，但它结构设计良好，又是业界公认的圣杯， 等于是专家们共通的语言，因此至少要先了解它在做什么，将来在专业场合才好沟通(俗话说 know the rules so you know what you are breaking, 就是指这情况)
• 接着可以看看比较简单的手法，像 Riawave, Model-Glue:Flex, PureMVC…等，基本上这些框架设计方式都大同小异，每个都有不同的应用场合，可以挑一个喜欢的再自行修改。
• 了解基本的概念，例如 Value Object, DAO, MVC 等，它们在大部份的程式框架里都会出现，早点学会日子比较轻松。
• 接着就是开始实际 coding，写一个中小型规模的app，不论是单纯的 CRUD (zrong注2)程序，或是留言版、电话簿、进销存管理都可以，籍由多写来强化编程的概念，然后透过大量的 peer code review 来找出可改进的地方。

＊结论

结论还是老话一句：要入门 flex 超级简单，只要不是白痴应该一小时就行，但要成为可独当一面的专业开发者，路就很长，如果没有走对方向很容易就迷失甚至最后放弃。

换句话说，要能成为职场上真正需要的 professional developer，并不如表面上想象的容易(其实我想每种技术领域跟产业都一样吧)，这也是我过去半年来协助很多公司做 recruiting 后的感想。

==========================================================================================
修订记录:
     2007/06/07 :  创建     
     2007/07/02 : 修改了一个错误: getMouseTarget参数event为MouseEvent, 而不是MenuEvent类型
==========================================================================================

完全屏蔽FLEX右键菜单比当初想象的要难一些,因为大多数FLEX文档中仅仅介绍了如何隐藏一部分FLEX右键菜单,例如:

var contextMenu : ContextMenu = new ContextMenu();
contextMenu.hideBuiltInItems(); // 隐藏一些内建的鼠标右键菜单项

但 是这个功能不能隐藏"设置"和"关于"右键菜单,而在一些应用中,希望能够利用鼠标右键完成一些操作功能,例如绘图程序和游戏等,这时候右键菜单就是"欲 除之而后快"了.但在FLEX中监听mouseDown捕获不了右键事件,而在ContextMenu的Select事件也无法屏蔽.

在网上发现了一篇相关的BLOG,地址如下:
http://www.flex-flex.net/blog/article.asp?id=12

其基本思路为:
 
 1,在FLEX中利用外部接口注册一个函数, 作为接收外部(HTML)右键事件的入口
 2,在FLEX应用所在的HTML中拦截鼠标右键事件,调用FLEX外部函数,并取消事件的广播,以阻止事件到达FLEX应用.
 3,在FLEX应用程序上监听mouseOver事件,并记录当前鼠标所在对象
 4,当入口函数接收到HTML发送的右键事件后,模拟生成一个鼠标右键事件(buttonDown = false), 并发送到当前对象
 5,在对象的mouseDown处理函数中,根据buttonDown的标志,分别处理鼠标左右键事件

这个思路比较清晰可行, 鼠标右键事件的流程为:

 HTML鼠标右键事件----FLEX外部函数-----模拟的鼠标右键事件------相应的处理函数

具体的实现为:
 
1, 在FLEX所在的HTML增加(注意根据自己的OBJECT ID更改"FlexTest")
<script>
function onNsRightClick(e){
 if(e.which == 3){
  FlexTest.openRightClick();
  e.stopPropagation();
 }
 return false;
}

function onIeRightClick(e){
 if(event.button > 1){
  FlexTest.openRightClick();
  parent.frames.location.replace('javascript: parent.falseframe');
 }
 return false;
}

if(navigator.appName == "Netscape"){
 document.captureEvents(Event.MOUSEDOWN);
 document.addEventListener("mousedown", onNsRightClick, true);
}
else{
 document.onmousedown=onIeRightClick;
}
 
</script>

2, 修改FLEX的MXML

增加初始化和MOUSEOVER事件处理函数

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  initialize="init()" mouseOver="getMouseTarget(event)" >

增加MX SCRIPT

import mx.events.MenuEvent;
import mx.controls.Alert;
 
private var mouseTarget:DisplayObject;
function init()
{
 ExternalInterface.addCallback("openRightClick", openRightClick);
}

function getMouseTarget(event:MouseEvent):void
{
   mouseTarget = DisplayObject(event.target);
}

function openRightClick():void
{
 var e:MouseEvent = new MouseEvent(MouseEvent.MOUSE_DOWN, true, false, mouseTarget.mouseX, mouseTarget.mouseY);
 mouseTarget.dispatchEvent(e);
}

function showMouseEvent(event)
{
 if(event.buttonDown == true)
  Alert.show("Left");
 else
  Alert.show("Right");
}

<mx:Image x="0" y="10" id="bbb" name="bbb" source="res/15.jpg" mouseDown="showMouseEvent(event)" height="247"/>

在修改完后,满怀信心的进行测试,结果右键菜单还能够出现!试了很多办法也不行,幸亏我的同事赵辉发现了解决方法,在这里向他表示感谢!

具体的方法就是修改wmode参数, 将wmode设置为opaque或transparent都可以达到这个效果
AC_FL_RunContent(
  "src", "playerProductInstall",
  "FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
  "width", "100%",
  "height", "100%",
  "align", "middle",
  "id", "FlexTest",            //// OBJECT ID
  "wmode", "opaque",  //////////////////////注意:这里是关键
  "quality", "high",
  "bgcolor", "#869ca7",
  "name", "FlexTest",
  "allowScriptAccess","sameDomain",
  "type", "application/x-shockwave-flash",
  "pluginspage", "http://www.adobe.com/go/getflashplayer"
 );

ADOBE文档中对wmode的解释:
Sets the Window Mode property of the SWF file for transparency, layering, and positioning in the browser. Valid values of wmode are window, opaque, and

transparent.

Set to window to play the SWF in its own rectangular window on a web page.

Set to opaque to hide everything on the page behind it.

Set to transparent so that the background of the HTML page shows through all transparent portions of the SWF file. This can slow animation performance.

To make sections of your SWF file transparent, you must set the alpha property to 0. To make your application's background transparent, set the alpha

property on the <mx:Application> tag to 0.

The wmode property is not supported in all browsers and platforms.

现在就可以灵活的使用鼠标右键功能了!在IE6和FF2.0中测试通过

当然还有几个问题:
 1,据JOVE的介绍,在IE7中需要添加
  event.stopPropagation();
  event.cancelBubble = true;
  因此还需要对浏览器进行一下判断,我没有装IE7,也就没有测,需要的朋友可以测试一下
 2,一些有用的右键菜单,例如TEXT中能够自动弹出剪贴复制等功能的右键菜单,也没有了,真是有一利必有一弊啊! 不过这个还比较简单,可以再模拟一个ContextMenu的Select事件.
 3, 对初始化流程应再进行一些改进,以保证FLEX的加载和外部接口建立成功后,再加以使用.

当组件的实例发出某个事件时, 会通知您注册为该事件的监听器的对象。您在 ActionScript 中定义事件监听器 (也称为事件处理程序) 来处理事件。您在组件的 MXML 声明中或者在 ActionScript 中注册事件的事件监听器。

接收事件通知有三种方式:

• 在 MXML 中注册事件处理程序
• 在 MXML 定义中创建线上事件处理程序
• 通过 ActionScript 注册事件监听器

获得事件通知的第一个和使用最广泛的方法是在 MXML 中定义事件发生时会调用的事件处理程序。

在此示例中, 您为 Button 控件的 click 事件定义一个事件处理程序。用户单击 Button 控件时, 事件处理程序会将 Label 控件的 text 属性设置为“Hello, World!”。

示例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="300" height="200"
    horizontalAlign="center" verticalAlign="middle" 
    viewSourceURL="src/HandlingEventsEventHandler/index.html"

>
    <mx:Script>
        <![CDATA[
            import flash.events.MouseEvent;
        
            private function clickHandler ( event:MouseEvent ):void
            {
                myLabel.text = "Hello, World!";
            }
        ]]>
    </mx:Script>

    
    <mx:Panel 
        title="My Application" horizontalAlign="center"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" 
    >

        <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/>
        <mx:Button id="myButton" label="Click Me!" click="clickHandler(event);" />

    </mx:Panel>
</mx:Application>

结果

示例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/HandlingEventsInlineMethod/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="300" height="200"

>
    <mx:Panel 
        title="My Application" horizontalAlign="center"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
    >

        <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/>
        <mx:Button id="myButton" label="Click Me!" click="myLabel.text = 'Hello, World!'" />

    </mx:Panel>
</mx:Application>

结果

示例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
     viewSourceURL="src/HandlingEventsActionScript/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="300" height="200"
    creationComplete="creationCompleteHandler(event);"

>
    <mx:Script>
        <![CDATA[
            import flash.events.MouseEvent;
            import mx.events.FlexEvent;

            private function creationCompleteHandler(event:FlexEvent):void

            {
                // Listen for the click event on the Button control
                myButton.addEventListener (MouseEvent.CLICK, clickHandler);
            }
        
            private function clickHandler ( event:Event ):void

            {
                myLabel.text = "Hello, World!";
            }
        ]]>
    </mx:Script>

    
    <mx:Panel 
        title="My Application" horizontalAlign="center"
        paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
    >

        <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/>
        <mx:Button id="myButton" label="Click Me!" />

    </mx:Panel>
</mx:Application>

结果