云自无心水自闲

Flex是一个事件驱动的编程模型, 任何事情的发生, 其背后必然存在一个事件. 而开发者第一次看到MXML时, 很难体会到一个Xml标记的应用的事件流和实例化的生命周期. 这个对于HTML和Flash的开发者尤其会感到困惑, 因为其熟悉的方式与Flex的一点也不相似. HTML的实例化是从上到下的, Flash的执行是从Frame0开始一帧帧运行的. 而Flex则又有不同.

从我们开始学习Flex时, 我们就需要了解事件流和MXML的实例化. 我非常困惑因为我实在难以理解什么样的事件会被触发或者事件什么时候会被触发. 关键是要理解事件的基础并亲自观察事件流的初始化.

我们来看一个简单的MXML的应用.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    backgroundGradientColors="[#67cbff, #fcffff]"
    color="#000000"
    fontSize="12"   
    preinitialize="report( event , 'preinitialize' )"
    initialize="report( event , 'initialize' )"
    creationComplete="report( event , 'creationComplete' )"
    applicationComplete="report( event , 'applicationComplete' )"
    >
   
    <mx:Script>
        <![CDATA[   
                   
            [Bindable]
           
            public var outTextData:String="";
           
            public function report( event:Event , value:String ):void
            {
                outTextData += String( flash.utils.getTimer() ) + 'ms >> '
                + event.currentTarget + '.' + value + '\n';   
            }
           
        ]]>
    </mx:Script>
   
    <mx:TextArea
        id="outTextArea"
        text="{ outTextData }"
        right="10" left="10" top="50" bottom="10" alpha="0.5"
        wordWrap="false"
        initialize="report( event , 'initialize' )"
        creationComplete="report( event , 'creationComplete' )"
        />
   
    <mx:Button
        y="10" height="30" left="168" width="150"
        id="HelloButton"
        label="Say Hello"
        initialize="report( event , 'initialize' )"
        creationComplete="report( event , 'creationComplete' )"
        rollOver="report( event , 'rollOver' )"
        rollOut="report( event , 'rollOut' )"
        click="report( event , 'click > Hello!' )"
        />
       
    <mx:Button
        id="GoodByeButton"
        label="Say Goodbye"
        y="10" left="10" height="30" width="150" color="#000000"
        initialize="report( event , 'initialize' )"
        creationComplete="report( event , 'creationComplete' )"
        click="report( event , 'click > Goodbye!' )"
        />
       
    <mx:Button
        id="ClearButton"
        label="Clear"
        y="10" left="326" height="30" color="#000000" right="10"       
        initialize="report( event , 'initialize' )"
        creationComplete="report( event , 'creationComplete' )"
        click="outTextData='';report( event , 'click' )"
         />
   
</mx:Application>

这个应用运行时, 输出了实例流程和事件流. 这校我们就能够看到所有事件的触发顺序. 可以发现应用启动后, 事件的顺序是一定的. 下面是输出的内容:

167ms >> EventFlow0.preinitialize
183ms >> EventFlow0.outTextArea.initialize
187ms >> EventFlow0.HelloButton.initialize
188ms >> EventFlow0.GoodByeButton.initialize
189ms >> EventFlow0.ClearButton.initialize
189ms >> EventFlow0.initialize
243ms >> EventFlow0.outTextArea.creationComplete
243ms >> EventFlow0.HelloButton.creationComplete
243ms >> EventFlow0.GoodByeButton.creationComplete
244ms >> EventFlow0.ClearButton.creationComplete
244ms >> EventFlow0.creationComplete
246ms >> EventFlow0.applicationComplete

一旦applicationComplete事件触发后, 组件就会在鼠标事件派发后触发自己的事件.

1807ms >> EventFlow0.HelloButton.rollOver
2596ms >> EventFlow0.HelloButton.rollOut
2954ms >> EventFlow0.HelloButton.rollOver
3170ms >> EventFlow0.HelloButton.rollOut
3543ms >> EventFlow0.HelloButton.rollOver
4052ms >> EventFlow0.HelloButton.click > Hello!
4267ms >> EventFlow0.HelloButton.click > Hello!
4474ms >> EventFlow0.HelloButton.click > Hello!
4569ms >> EventFlow0.HelloButton.rollOut
4907ms >> EventFlow0.GoodByeButton.click > Goodbye!
5130ms >> EventFlow0.GoodByeButton.click > Goodbye!