Freddie's Ria World

flex cookbook学习—1.11使用事件冒泡机制

发表时间：18. 12月, 2009 作者：Freddie.

我们需要通过几个类来了解冒泡事件，很多类型的事件都可以冒泡：mouse-down事件，click
事件，keyboard 事件。术语“向上冒泡”指的是事件通过其自身的处理方式从显示列表传递
到应用程序容器，这就像水里的气泡上升到水面那样。当用户点击任何组件时，其事件就会
通过层级向上传递，也就意味着父组件也能监听到click事件，无论哪个子组件发出事件，父
组件都能收到。要想父组件监听所有子组件发出的某一类型的事件，父组件只需添加一个事
件监听器即可收到子组件传递过来的事件。
BubbleComponent:
<mx:HBox xmlns:mx=”http://www.adobe.com/2006/mxml” width=”400″ height=”300″>
    <mx:Script>
        <![CDATA[
            private function sendClick():void{
                trace("BubbleComponent::Click");
            }
        ]]>
    </mx:Script>
    <mx:Button click=”sendClick()”/>
</mx:HBox>
BubbleHolder:
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml”
    width=”400″ height=”300″ xmlns:ns1=”*”>
    <mx:Script>
        <![CDATA[
            private function handleClick():void{
                trace("BubbleHolder::click");
            }
        ]]>
    </mx:Script>
    <ns1:BubbleComponent x=”0″ y=”0″ click=”handleClick()”>
    </ns1:BubbleComponent>
</mx:Canvas>
BubbleTest(主程序，MXML application)
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” xmlns:ns1=”*”>
    <mx:Script>
        <![CDATA[
            private function handleClick():void{
                trace("main prog");
            }
        ]]>
    </mx:Script>
    <ns1:BubbleHolder x=”10″ y=”10″ click=”handleClick()”>
    </ns1:BubbleHolder>
</mx:Application>
BubbleComponent.mxml中的click事件将被广播一直传到应用程序层。
MouseEvent类中的事件序列发出关于此事件的信息，比如click事件和click时鼠标的位置，通
过显示列表到达所有的子节点，接着子节点接收此事件，然后从显示列表返回到Stage。
Stage 检测MouseEvent 并传递它到显示列表，直到找到此事件的目标，这就是用户与之交互
的目标组件，这被称之为捕获阶段。接着，事件目标对象的事件处理函数被调用，这称之为
目标阶段，最后，冒泡阶段触发，发送事件返回给显示列表给其他监听器,所有方式重新回
到Stage [...]

详细内容

1.12使用代码隐藏模式分离MXML和ActionScript

发表时间：18. 12月, 2009 作者：Freddie.

标题还真够长的， 说得通俗点，就是把原本要写在mxml里的代码写到as里面去。

其实我个人觉得就是JAVA里面的封装的思想，把代码写到AS里，加上访问限制修饰符，隐藏具体的实现细节。
看代码吧：
CodeBehindComponent.as(as代码):
package com.tub
{
    import mx.containers.Canvas;
    import flash.events.Event;
    public class CodeBehindComponent extends Canvas
    {
        public function CodeBehindComponent()
        {
            super();
            addEventListener(Event.ADDED_TO_STAGE, addedToStageListener);
        }
        protected function addedToStageListener(event:Event):void
        {
            trace(“Added to Stage from Code Behind”);
        }
        protected function clickHandler(event:Event):void
        {
            trace(“click from” + event.target);
        }
    }
}
 
CodeBehindComponent.mxml(mxml代码):
<?xml version=”1.0″ encoding=”utf-8″?>
<cookbook:CodeBehindComponent xmlns:mx=”http://www.adobe.com/2006/mxml”
                              width=”200″
                              height=”400″
                              xmlns:cookbook=”com.tub.*”>
    <mx:Button click=”clickHandler(event)”/>
</cookbook:CodeBehindComponent>
 
asf.mxml(主程序，我这里随便取了个名字，这里把CodeBehindComponent组件拖进去就可以了)
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” xmlns:ns1=”*”>
    [...]

详细内容

1.8在MXML中创建数组或对象

发表时间：18. 12月, 2009 作者：Freddie.

1,MXML中创建一维数组：
<mx:Array>
<String>kevin</String>
<String>paul</String>
<String>simon</String>
</mx:Array>
2,MXML 中也可创建二维数组：
<mx:Array>
<mx:Array>
<mx:String>boy</mx:String>
<mx:String>girl</mx:String>
</mx:Array>
<mx:Array>
<mx:String>kevin</mx:String>
</mx:Array>
</mx:Array>
3,MXML中创建对象（Object）
可以使用<mx:Object>标签，并添加所有对象的属性及值
<mx:Object id=”person” firstName=”Kevin” lastName=”too” age=”24″ socialSecurity=”123-45-6789″/>
4,同样，在AS中也可以创建这两种类型的数据，并且可以创建更为复杂的object类型：
var
person:Object = {name:”John Smith”
, age:22,
position:{department:”Accounting”
,
salary:50000, title:”Junior
Accountant”
}, id:303};
 
5, AS中两种创建array的方法：
var arr:Array = new Array(“red”, “blue”, “white”, “black”, “green”, “yellow”);
var noConstructorArray:Array = [2, 4, 6, 8, 10, 12, 14, 16];

详细内容

1.8在MXML中创建数组或对象

发表时间：13. 12月, 2009 作者：Freddie.

1,MXML中创建一维数组：
<mx:Array>
<String>kevin</String>
<String>paul</String>
<String>simon</String>
</mx:Array>
2,MXML 中也可创建二维数组：
<mx:Array>
<mx:Array>
<mx:String>boy</mx:String>
<mx:String>girl</mx:String>
</mx:Array>
<mx:Array>
<mx:String>kevin</mx:String>
</mx:Array>
</mx:Array>
3,MXML中创建对象（Object）
可以使用<mx:Object>标签，并添加所有对象的属性及值
<mx:Object id=”person” firstName=”Kevin” lastName=”too” age=”24″ socialSecurity=”123-45-6789″/>
4,同样，在AS中也可以创建这两种类型的数据，并且可以创建更为复杂的object类型：
var
person:Object = {name:”John Smith”
, age:22,
position:{department:”Accounting”
,
salary:50000, title:”Junior
Accountant”
}, id:303};
 
5, AS中两种创建array的方法：
var arr:Array = new Array(“red”, “blue”, “white”, “black”, “green”, “yellow”);
var noConstructorArray:Array = [2, 4, 6, 8, 10, 12, 14, 16];

详细内容

1.6在MXML中添加事件监听器

发表时间：13. 12月, 2009 作者：Freddie.

事件监听的方式有很多种，最简单的就是 添加一个函数引用，用该函数来处理这个事件，这种方法就不多说了。
下面要说的是另一种：传递事件对象本身给这个函数，每次组件发出该事件时，组件也会发送Event类型
的对象给监听它的处理函数
<mx:HBox xmlns:mx=”http://www.adobe.com/2006/mxml” width=”400″
height=”300″>
<mx:Script>
<![CDATA[
private
function
buttonClick(event:Event):void
{
trace
(event.target.id);
if
(event.target.id == "buttonOne"
)
{
trace
("
button one was clicked"
)
}
else
{
trace
("
button two was clicked"
)
}
}
]]>
</mx:Script>
<mx:Button click=”buttonClick(event)”
label=”Click Me One” id=”buttonOne”/>
<mx:Button click=”buttonClick(event)” label=”Click Me Two”
id=”buttonTwo”/>
</mx:HBox>
Flex中的事件对象以及事件发送系统是一个非常重要的内容。所有事件都包含一个正在侦听该事件时所使用的类型，如果该事件是click事件，那么子对象的click事件就会加入事件监听方法
用户交互的通知，应用程序发送消息或定时发送给服务器，事件对象定义了一些任何监听函数都可以访问的属性，如下所示：
bubbles
指示事件是否是冒泡事件，即是否从已接收任何侦听器进一步沿事件链向上重新发送该事件对象。
cancelable
指示该事件是否是可取消的。
currentTarget
处于活动进程的事件对象。
eventPhase
事件流的当前阶段
Target
事件目标，即发出该事件的对象
Type
事件类型

详细内容