ITPub博客

首页 > Linux操作系统 > Linux操作系统 > flex学习

flex学习

原创 Linux操作系统 作者:grazier 时间:2009-04-04 11:00:24 0 删除 编辑
小项目:http://2009.haiergame.com:8000/haier/home/home.php
一、心得:
1、flex组件是以event为基础,理解flex组件的event种类、属性、方法
转:事件机制

1.1. 事件简介
事件可以由外设触发, 比如:键盘,鼠标, 也可能是外部输入, 比如:web service的返回.
事件还能由组件的外观和生命周期发生变化时触发, 比如:组件的创建或者改变大小.
所有用户与应用交互都会产生事件.用户没有直接与应用交互也可能产生事件, 比如:数据装载完毕.
你可以在程序中使用事件监听器监听这些事件. 事件监听器是函数方法用于响应指定的事件. 有时也称之为事件处理器.
Flex的事件模型基于DOM3事件模型.
组件产生派发事件并消费(监听)其他事件.如果一个对象想要了解其他对象事件的信息, 可以注册一个监听器.
当事件发生时,对象派发此事件到所有注册过的监听器中.
组件有Flex提供的内建事件. 也可以使用派发-监听模型定义自己的事件监听器, 并指定监听器监听何种事件.
1.2. 事件流简介
当一个事件被派发出来时, 事件对象从根节点开始自上而下开始扫描display list, 一直到目标对象, 检查每个节点是否有相应的监听器.
目标对象指的是display list中产生事件的对象. 比如:

   
       
               
       

   


如何此时 resize了VBox, 则会从根(Application)开始, 下来检查Panel, HBox, 直到目标对象-产生resize事件的VBox为止.

1.3. 事件的派发
Flex中可以通过dispatchEvent()方法手工派发事件, 所有UIComponent的子类都可以调用此方法.
语法:
objectInstance.dispatchEvent(new Event("event_type"):Boolean
参数event_type是Event对象的type属性. 函数的返回值总是True.
可以使用此方法派发任意事件, 而不仅仅是用户自定义事件, 比如: 可以派发一个Button的Click事件.
var result:Boolean = buttonInstance.dispatchEvent(new Event(MouseEvent.CLICK));

在Flex应用中不是必须对新派发的事件进行处理, 如果触发了一个事件, 而没有对应的Listener时,Flex忽略此事件.
如果想给Event对象添加新属性, 就必须继承Event类,然后定义新属性

自定义事件的派发与监听

一个事件,肯定有两方: 抛出事件的对象 和 侦听这个事件的对象
如果这两个对象他们相互之间关联很少,或者自身各自嵌套在别人的容器里,再或者他们之间并不需要相互认识,相互通信就得用到自定义抛出事件。

自定义CustomEvent类,继承Event,并且给他增加一个dispatcher:EventDispatcher属性。
使用这个类,就可以抛出事件并附带数据。
因为使用了 static 设置为静态属性,所以其他任意地方只要注册有这个事件侦听,就能捕获到。

网友例子比较好:

--自定义事件

package
{
    import flash.events.Event;
    import flash.events.EventDispatcher;

    public class CustomEvent extends Event
    {
        public static const EVENT_NAME:String="event_name";
       
        public static const dispatcher:EventDispatcher=new EventDispatcher();
        public var data:Object;
       
        public function CustomEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false, data:Object=null)
        {
            super(type, bubbles, cancelable);
            this.data=data;
        }
        override public function clone():Event{
            return new CustomEvent(type, bubbles, cancelable, data);
        }
    }
}

--两个canvas

CustomCanvas1.mxml




            private function clickHandler(event:MouseEvent):void{
            var custom:CustomEvent=new CustomEvent(CustomEvent.EVENT_NAME);
            //custom.data is Object;//发送事件同时,可以传值(可传可不传)
            custom.data=mytxt.text;

//派发自定义事件
            CustomEvent.dispatcher.dispatchEvent(custom);
        }
    ]]>

   
   

CustomCanvas2.mxml



   
                    import mx.controls.Alert;
            private function init():void{

//初始化自定义事件,即注册监听
                CustomEvent.dispatcher.addEventListener(CustomEvent.EVENT_NAME,clickHandler);
            }
            private function clickHandler(event:CustomEvent):void{
                trace("I get it !");
                mylb.text=event.data.toString();
                Alert.show(event.toString()+"\n"+event.data.toString())
            }
        ]]>
   
   

--main.mxml






1.4.事件的传播:
事件触发后, Flex有3个检测事件监听器的阶段, 3个阶段的发生的顺序如下:
1. 捕获
2. 目标
3. 上浮
在任意一个阶段, 节点们都有机会操作事件. 比如: 用户点击了一个在VBox中的Button,
在捕获阶段, Flex检查Application对象(根节点)和VBox是否有监听器处理此事件. Flex然后在目标阶段触发按钮的监听器.
在上浮阶段, VBox和应用以与捕获阶段相反的顺序再次获得机会处理事件.
在ActionScript3.0中,你可以在任意目标节点上注册事件监听器. 但是部分事件会被直接传给目标节点,比如Socket类.
捕获阶段的节点顺序是从父节点到子节点的, 而上浮阶段刚好相反.
捕获事件缺省是关闭的,也就是说如果要捕获事件, 必须显式指定在捕获阶段进行处理.
每一个Event都有target和currentTarget属性, 帮助跟踪事件传播的过程.

捕获阶段:
在捕获阶段,Flex在显示列表中检查事件的祖先是否注册了事件的监听器. Flex从根节点开始顺序而下.
大多数情况中, 根节点是Application对象. 同时, Flex改变事件的currentTarget值.
缺省情况下, 在此阶段,没有容器监听事件. use_capture参数的值是False,在此阶段添加监听的唯一方法是在调用add_listener时,
传入一个为True值的use_capture参数, 比如:
myAccordion.addEventListener(MouseEvent.MOUSE_DOWN, customLogEvent, true);
如果是在Mxml中添加监听, Flex设置此参数为False, 没有办法进行修改.
    如果设置了use_capture为True, 那么事件将不会上浮. 如果既想捕获又想上浮就必须调用 addEventListener两次.
一次use_capture参数为true, 一次为false;
    捕获很少使用, 上浮的使用更为普遍.

   目标阶段:
在目标阶段, Flex激发事件的监听程序, 不检查其他的节点.

上浮阶段:
事件只在bubbles属性为True时才进行上浮. 可以上浮的事件包括: change, click, doubleClick, keyDown, keyUp, mouseDown, mouseUp.
在上浮阶段, Flex改变事件的currentTarget属性, 而target属性是初始派发事件的对象.

查询事件阶段:
使用事件的eventPhase可以获得事件当前的阶段,
1: CAPTURE_PHASE
2: AT_TARGET
3: BUBBLING_PHASE
示例: private function determineState(event:MouseEvent):Void { Debug.trace(event.eventPhase + ":" + event.currentTarget.id); }

停止传播:
使用下面两个函数停止事件的传播:
stopPropagation()
stopImmediatePropagation()
例子:

                layout="absolute"
                borderStyle="solid"
                creationComplete="init();">
   
                    private function init():void
            {
                cas2.addEventListener(MouseEvent.CLICK,clickCas2,true);
                //第一步测试:点cas2,理解捕获与目标不同
                //第二步测试:点button
                //第三步测试:将true改为false,重复以上两步
            }
       
            private function clickBtn(event:MouseEvent):void
            {
                trace("btn on click!");
                output.text += "事件阶段" + event.eventPhase + ";是否冒泡" + event.bubbles + "  btn on click!\n";
            }

            private function clickCas2(event:MouseEvent):void
            {
                trace("cas2 on click!");
                output.text += "事件阶段" + event.eventPhase + ";是否冒泡222:" + event.bubbles + "  cas2 on click!\n";
            }

            private function clickCas1(event:MouseEvent):void
            {
                trace("cas1 on click!");
                output.text += "事件阶段" + event.eventPhase + ";是否冒泡111:" + event.bubbles + "  cas1 on click!\n";
            }
        ]]>
   

                   borderColor="#EEC214" id="cas1" click="clickCas1(event)">
                           borderColor="#F14C36" id="cas2" >
           
           
       

   



二、问题
1、冒泡事件的机制?
事件阶段:1 捕获: 根节点-->子节点-->目标节点
                    2 目标:目标节点
                    3 冒泡:目标节点-->子节点-->根节点

             捕       ---根节点                                   ---根节点         冒
             获           ---子节点                           ---子节点             泡
                                                ---目标节点
                                                         目
                                                         标
2、mx:component中组件不能发现定义的公共function

                                                                   width="50"
                                       click="openEditWindow(data)"
                                       label="播放">
                               
                           

                       

上面代码不能发现openEditWindow function;

                                                                   width="50"
                                       click="outerDocument.openEditWindow(data)"
                                       label="播放">
                               
                           

                       


三、开发
1、flex builder当需要debug测试时,需要下载flash的debug版本,这时才能以debug方式运行,trace函数才能起作用。
2、flex的web应用与tomcat的工程配置
java web应用在tomcat的webapps下的工程名为flexWeb
1)选择application server type 为J2EE
2)Web root:tomcat的webapps目录下的web应用路径  d:\....\webapss\flexWeb
      Root URL:java web应用url  http://localhost:8085/flexWeb
3、关于FLEX生成的SWF设置stage.displayState问题

layout="absolute"
creationComplete="init()"
>

private function init():void{
stage.displayState = StageDisplayState.FULL_SCREEN;
}
]]>


此时报错,应用callLater()方法调用init()方法
callLater:进入下一帧的时候,执行函数

	layout="absolute"
creationComplete="callLater(init)"
>

private function init():void{
stage.displayState = StageDisplayState.FULL_SCREEN;
}
]]>

我们在creationComplete事件里,使用callLater(init)来调用init,让init在进入下一侦的时候再全屏..,问题解决
4、图层处理
swapChildren方法有问题,可以使用img.parent.setChildIndex(img, img.parent.numChildren - 1); 如果得知父组件则可以这样写:main.setChildIndex(event.currentTarget.valueOf(),main.getChildren().length-1);
基本原理:如果其中某一组件被设置为最大索引,即显示在最上层,则原来索引大于这个组件的其它组件索引自动减1。至于将某一组件的索引不是设置为最大索引,还需试验。用处不太大,没有试验。
5、Flex与Word和Excel文件格式的交流

作的一个项目,需要采用Flex的界面,导出word和excel格式,有如下解决方法:

对于word,可以将word模版文件存成xml格式,而此xml格式中的图片是以 “Base-64 encoded” ,而  Flex 3 可以将生成的图片快照下来转换成此格式,而flex能够操作xml文件,从而可以修改word xml模版文件中的内容,从而与word协作。

参考:http://blog.flexexamples.com/2007/12/07/converting-an-imagesnapshot-object-into-a-base-64-encoded-string-in-flex-3/

http://code.google.com/p/flexlib/wiki/ComponentList

另外一个方法是采用html格式。采用javascript来操作html文件。

而excel则要用到 as3xls, 可以参考:http://zhaoyl.垃圾广告.com/blog/200275

http://code.google.com/p/as3xls/

6、在AIR中使用HTML加载的网页,如果网页里的链接是在新窗口打开的那种,点击就无效了
1.在HTML标签中增加complete,代码如下


2.增加一个对页面链接处理的方法,代码如下
private function deal_blank(e:Event):void
{
    var document:Object = HTML(e.currentTarget).htmlLoader.window.document;
    var anchors:Object = document.getElementsByTagName("a");
    for(var i:Number=0; i < anchors.length; i++) {
        var a:Object = anchors[i];

        var targetAttr:Object = a.attributes.getNamedItem("target");
        if(targetAttr != null && targetAttr.nodeValue == "_blank")
        {
            var urlAttr:Object = a.attributes.getNamedItem("href");

            a.onmouseup = function(o:Object):void{
                o.preventDefault();
                //navigateToURL(new URLRequest(o.srcElement), "_blank");
                website.htmlLoader.load(new URLRequest(o.srcElement));
            };
        }
    }
}

7、flex读取本地文件

FLEX编译的SWF文件,只能选择访问本地文件或访问网络文件,二者只能取一(嗯,为什么?我也不知道,官方说是为了安全考虑),而FLEX编译的默认选项是只能访问网络文件,所以你将bin里的东西COPY到其他地方就不能读取了。而你在默认的bin目录下可以读取得到,是因为FLEX认为你是在IDE环境种,这时是没有这个所谓的安全限制的。
解决办法就是在编译时,加个参数 -use-network=false 就OK了 (FB里,选菜单Project>Properties>Flex Compiler输入这个参数)
但这样做的话,你的SWF就不能读取网络的数据了.

转自:http://snowyrock.spaces.live.com/blog/cns!B8CBEB7169880B1D!416.entry

8、文件下载时,文件下载第二次出错
用FileReference类的download方法下载同一个文件时,往往第一次是非阻塞的,第二次就是阻塞的了。

比如说,要在服务器下载一个100M的文件abc,第一次下载的时候,进度条还能正常显示,然后把下载好的文件abc删除了,在重新下载一次,问题就出来了,进度条不能正常显示了,一下就从0%跳到100%,这种问题怎么解决呢?
是缓存,下载的时候加上一个随机数,比如 abc.zip?123456877455
这个随机数,可以用UNIX时间戳就行
 四、资源
flex game: http://www.brighthub.com/internet/web-development/articles/11010.aspx
flex           :  http://blog.csdn.net/songhuanren/category/285151.aspx
flex open source :http://www.cnblogs.com/mjgforever/archive/2009/03/05/1403777.html
flex 基础知识点:  http://xinsync.xju.edu.cn/
google开源库:http://code.google.com/p/flexlib/

flex开源项目:http://www.adobe.com/devnet/flex/?navID=samples

推荐一个学习Flex chart的好网站 

最近在做一个与Flex chart相关的项目,特别搜索了一下Flex chart相关资源,,有一个网站特别值得推荐:Quietly Scheming。

其中特别推荐两个应用:

1. Interactive Bubble Chart:http://www.quietlyscheming.com/blog/charts/interactive-bubble-chart/

这个Bubble Chart特别出彩,原版是用Flash开发的,不提供源码,但其Flex版提供源码参考。

2. Flex Chart Explorer:http://demo.quietlyscheming.com/ChartSampler/app.html

这个就不用多说了,类似于Flex Component/Style. Explorer。

与java的socket通信教程

http://www.cnblogs.com/xxcainiao/archive/2009/02/17/1392516.html

工具:

反编译工具:Sothink

3.富文本编辑器

收费但很棒

http://www.flashloaded.com/flashcomponents/flashtexteditor/

开源as3,基于flash,部分适于flex

http://code.google.com/p/as3texteditor/

Flex教程网站

http://www.riameeting.com/


  

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/118838/viewspace-584628/,如需转载,请注明出处,否则将追究法律责任。

上一篇: java技术跟踪
下一篇: displaytag多选框
请登录后发表评论 登录
全部评论

注册时间:2008-10-20

  • 博文量
    53
  • 访问量
    219835