BlogJava-勇敢的心-随笔分类-flex学习之路

调整组件z轴坐标

谁用我名字啦？ — Fri, 09 Nov 2012 08:54:00 GMT

cav1.setChildIndex(event.currentTarget as DisplayObject, cav1.numChildren - 1);

参数一：cav1为容器，event.currentTarget 是容器中的一个组件，而as DisplayObject可能是因为容器中的组件式spark的，而容器式mx的，所以需要转换一下。

参数而：cav1.numChildren - 1的值越小，该组件就越接近最上面。

谁用我名字啦？ 2012-11-09 16:54 发表评论

使组件可以拖动的startDrag和stopDrag

谁用我名字啦？ — Fri, 09 Nov 2012 08:48:00 GMT

1.普通组件的拖动：

    添加mouseDown和mouseUp事件，在down事件中写入startDrag()，在up事件中写入stopDrag()

2.spark的Panel组件的拖动：

    添加id为pan，添加pan.titleDisplay.mouseDown和pan.titleDisplay.mouseUp事件如下，然后分别在down和up事件中写入startDrag()和stopDrag()

    pan.titleDisplay.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
    pan.titleDisplay.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

谁用我名字啦？ 2012-11-09 16:48 发表评论

FusionCharts基于flex的图表组件

谁用我名字啦？ — Wed, 24 Oct 2012 08:57:00 GMT

版本v3.2.2

首先来个介绍：http://baike.baidu.com/view/2153728.htm，FusionCharts是一个非常之方便能够动态生成多样化图表的组件。

网上对于FusionCharts的资料不是很多，而大部分都只是官方英文的，对于我这种英文白痴很是头疼。下面将自己的使用心得分享并留作以后的查阅。内容不多，但绝对实用！

路径结构
    1.Gallery 自带的图表示例，非常全面

创建图表
    下例中在项目下新建FusionCharts路径，存放图表所需的swf、js文件

    1.在Charts路径下复制swf文件到FusionCharts路径。FusionCharts提供了2D、3D、地理、天气等多种SWF文件，可以根据使用情况选择。下例中使用3D图表Column3D.swf。

    2.在SourceCode\JavaScript\Legacy路径下复制FusionCharts.js脚本文件到FusionCharts路径。

    3.在FusionCharts路径下创建xml数据文件Data.xml

<chart yAxisName="Sales Figure" caption="Top 5 Sales Person"
    numberPrefix="$" showBorder="1" imageSave="1">
    <set label="Alex" value="25000" />
    <set label="Mark" value="35000" />
    <set label="David" value="42300" />
    <set label="Graham" value="35300" />
    <set label="John" value="31300" />
chart>

4.编写index.html测试代码

<html>
    <head>
        <title>My First chart using FusionCharts XTtitle>
        <script type="text/javascript" src="FusionCharts/FusionCharts.js">script> //引入的FunsionCharts脚本
    head>
    <body>
        <div id="chartContainer">
            FusionCharts XT will load here!
        div>
        <script type="text/javascript">

        script>
    body>
html>

5.运行index.html，你将看到如下结果

如何使用配置参数
    参数可以到百度搜索，有比较全面的中文介绍。

    在Gallery 路径下有很多例子供参考。而FusionCharts的参数设置都是在数据文件xml中完成，就是上例中的数据源Data.xml，在不同的标签中写入相应的属性及参数既能得到不同的效果，参数大致包括图表样式的修改、文字样式、数值显示方式、动态效果等。（参数中的布尔值用1或0代替true或false）

动态XML数据（重点）
    上例中给出的是静态的XML文件，对于项目来说数据往往是由后台动态生成的。那么如何使用动态数据呢，例子如下：

    使用jquery ajax异步调用动态xml数据并展示

    js代码，不必理会其他部分，注意：

        1.dataType : 'text'，请求的返回数据类型一定是'text'字符串文本类型FusionCharts才能识别，json、xml格式都不可以。但返回的字符串必须是标准的xml格式，至于字符串形式的json格式是否能够识别我没有测试。
         （苦于英文不好，所以我在这里调试了1个多小时，因为FusionCharts能够接收json、xml形式的静态数据源，所以一直没有想到在动态赋值只能接收字符串形式的数据源）

        2.chart.setDataXML(data)，对于动态数据源不能使用上例中的setXMLUrl()方法。

$.ajax( {
        type : 'POST',
        contentType: "application/json; charset=utf-8",
        url : 'year.action',
        data : parameters,
        dataType : 'text',

        success : function(data) {
            var chart = new FusionCharts("js/compare/MSColumn3D.swf", "ChartId", "560", "400", "0", "0");
            chart.setDataXML(data);
            chart.render("chartContainer");
        },

        error : function(xhr) {
            alert('页出错\n\r' + xhr.responseText);
        }
    });

3.数据源格式

待续……

这里有英文的API和一些FAQ提示，英语好的可以看看：
http://kb.fusioncharts.com/questions/426/What+is+FusionCharts+JavaScript+API%3F

谁用我名字啦？ 2012-10-24 16:57 发表评论

绑定自定义属性——[bindable]和事件

谁用我名字啦？ — Sat, 20 Oct 2012 07:00:00 GMT

xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>

    fx:Declarations>
    <fx:Script>
        [CDATA[

            //绑定属性
            [Bindable]
            private var _product:String;

            //在set方法中创建属性更新事件，并触发该事件，以通知Flex属性被更新
            public function set product(value:String):void
            {
                _product = value;
                dispatchEvent(new Event("productChanged"));
            }

            //在get方法声明前，加入[Binndable]元素定义属性绑定。这样，当触发属性更新事件是，
            //Flex将会修改对应的属性

            //没弄明白这个绑定事件在什么情况下能用到.
            [Bindable(event="productChanged")]
            public function get product():String
            {
                return _product;
            }

        ]]>
    fx:Script>
s:Application>

谁用我名字啦？ 2012-10-20 15:00 发表评论

图形拖动（二）Sprite方式

谁用我名字啦？ — Sat, 20 Oct 2012 06:41:00 GMT

package
{
    import flash.display.Sprite;
    import flash.display.Shape;
    import flash.events.Event;
    import flash.events.MouseEvent;

    public class dashias extends Sprite
    {
        private var mySprite1:Sprite = new Sprite();
        private var mySprite2:Sprite = new Sprite();

        public function dashias()
        {
            //画圆
            var circle:Shape = new Shape();
            circle.graphics.lineStyle(0, 0x7B7B7B); //方法签名: lineStyle(thickness, color)
            circle.graphics.beginFill(0xFF0000);
            circle.graphics.drawCircle(0, 0, 20);
            circle.graphics.endFill();

            //吧circle对象加入到舞台中
            mySprite1.addChild(circle);
            this.addChild(mySprite1); //吧circle对象加入到舞台中，this指stage
            mySprite1.x = 100; //设置显示列表构造对象mySprite的x坐标为100
            mySprite1.y = 100; //设置显示列表构造对象mySprite的y坐标为100

            //画线
            var line:Shape = new Shape();
            line.graphics.lineStyle(4, 0x00FF00);
            line.graphics.lineTo(20, 20);
            line.graphics.endFill();
            line.x = 0;
            line.y = 0;

            mySprite2.addChild(line);
            this.addChild(mySprite2);
            mySprite2.x = 100;
            mySprite2.y = 100;

            //添加监听事件
            //ENTER_FRAME事件一位置Flash播放头进入新的一帧，此时调用rotateRectObject侦听器
            mySprite2.addEventListener(Event.ENTER_FRAME, rotateRectObject);

            //实现对mySprite1的拖拽
            mySprite1.addEventListener(MouseEvent.MOUSE_UP, mouseReleased);
            mySprite1.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);

            //在mySprite1这个显示列表基本构造元素上显示手型鼠标光标
            mySprite1.buttonMode = true;
            mySprite1.useHandCursor = true;
        }

        function rotateRectObject(evt:Event):void {
            //rotation si a property to rotate the respective object
            mySprite2.rotation += 1;
        }

        function mouseDown(event:MouseEvent):void {
            mySprite1.startDrag();
        }

        function mouseReleased(event:MouseEvent):void {
            mySprite1.stopDrag();
        }
    }
}

谁用我名字啦？ 2012-10-20 14:41 发表评论

图形拖动（一）副本的方式

谁用我名字啦？ — Sat, 20 Oct 2012 06:40:00 GMT

xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Script>

            import mx.controls.*;
            import mx.core.IVisualElement;
            import mx.core.UIComponent;
            import mx.graphics.ImageSnapshot;

            [Embed(source="E:/flex/45.png")]
            [Bindable]
            private var bookImage:Class;

            public var uiComponent:Object;
            public var targetImage:Object;
            public var Ax:int = 0;
            public var Ay:int = 0;
            public function mouseDown(event:MouseEvent):void{
                //在原地生成图片副本，然后将移动图片。
                this.uiComponent = event.currentTarget;
                //生成图片
                var bd:BitmapData = ImageSnapshot.captureBitmapData( UIComponent( uiComponent ) );
                targetImage = new Image();
                targetImage.source = new Bitmap(bd);
                targetImage.x = uiComponent.x;
                targetImage.y = uiComponent.y;
                Ax = event.localX;
                Ay = event.localY;
                this.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
                this.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
                this.addElement(targetImage as IVisualElement);// as DisplayObject
            }

            public function mouseMove(event:MouseEvent):void{
                targetImage.x = event.stageX-Ax;
                targetImage.y = event.stageY-Ay;
            }

            public function mouseUp(event:MouseEvent):void{
                this.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
                this.removeEventListener(MouseEvent.MOUSE_UP, mouseUp);

                //当鼠标移动到预定位置，将图片删除，并且移动源控件。
                uiComponent.x = event.stageX-Ax;
                uiComponent.y = event.stageY-Ay;
                this.removeElement(targetImage as IVisualElement);
                targetImage = null;

            }
        ]]>
    fx:Script>
    <mx:Image x="331" y="127" source="{bookImage}" mouseDown="mouseDown(event)"/>

s:Application>

谁用我名字啦？ 2012-10-20 14:40 发表评论

辅助理解“显示列表（Display List）”的AS例子

谁用我名字啦？ — Fri, 19 Oct 2012 03:04:00 GMT

谁用我名字啦？ 2012-10-19 11:04 发表评论

MXML（一）在MXML中调用AcitionScript的方式

谁用我名字啦？ — Thu, 18 Oct 2012 07:14:00 GMT

Flex支持三种在MXML中调用AcitionScript的方式和一种引用外部AS：

1.内联方式

内联方式，就是直接在ＭＸＭＬ标签中编写ＡＳ代码。这种方式通常用来定义事件侦听方法或者数据绑定。可以用分号（;）分隔多个AS语句例如：

<s:Button click="mx.controls.Alert.show('welcome');trace('welcome');"/>

2.标签内嵌代码方式

<s:Button id="myButton" label="welcome">
        <s:click>

                var greetWord:String = "welcome";
                mx.controls.Alert.show(greetWord);
                trace("DONE!");
            ]]>
        s:click>
s:Button>

3.使用Script表签

<fx:Script>

            //ActionScript代码

            import mx.controls.Alert;

            private function welcome():void() {
                Alert.show("欢迎");
            }
        ]]>
fx:Script>

4.使用标签方式

也可以通过在标签中制定source属性来引用外部ActionScript文件。

<fx:Script source="AS_name.as" />

谁用我名字啦？ 2012-10-18 15:14 发表评论

flex事件（四）Flex自定义事件

谁用我名字啦？ — Thu, 18 Oct 2012 02:30:00 GMT

　　自定义事件只是一个"特别"的ActionScript类。开发者创建自定义事件无外乎完成如下几个任务：继承flash.events.Event、定义事件属性、编写类构造器、重载clone方法。

一　继承Event带参数自定义事件

　　1.创建AS事件类SwitchLightEvent

　　2.创建事件触发组件LightConsole

　　3.创建应用CustomTraficLight

创建自定义事件5个步骤

1.使用ActionScript创建自定义事件　　

　　定义属性
　　开发者通常希望"消息"能够携带更多的信息，提供更多的数据。在自定义事件中，通过定义属性，可以让事件携带更多的信息。

　　编写构造器

　　类当然离不开构造器。事件类的构造器要完成两项任务。

　　（1）. 调用Super()

　　通过Super()调用父类的构造器，以初始化从父类继承的属性等。通常情况下，子类构造器应该首先调用Super()方法。当然，如果没有为子类编写构造器（不添加构造器方法），编译器会自动添加一个构造器，并且也会调用Super()。但是，我们仍然推荐编写构造器，并且显式地调用Super()方法。

　　（2）. 设置属性

　　事件类型是最常用到的事件属性。Super()可以接受String类型的参数，由此设置父类事件中继承来的事件类型属性（event.type）。

除了事件类型外，事件的其他自定义属性可以作为构造器的参数传入，在构造器中完成初始化。更灵活的是，这些属性类型不仅仅局限于String、Number等基本类型，还可以是任何自定义类。

　　重载clone方法

　　创建自定义事件的最后一步是重载父类的clone方法，返回新的Event对象。当触发事件时，即dispatchEvent(event)时，EventDispatcher会自动调用clone方法获取新的Event对象。

重载clone方法将复制自定义类的所有属性。如果你没有对自定义事件类中添加的所有属性进行赋值的话，那么当侦听器处理触发的自定义事件时，就不会获得正确的属性值。

2.使用元数据[Event]定义事件

　　通过[Event]元数据，开发者可以为组件定义事件。编译器能够把这些自定义的事件识别为MXML标签属性。使用[Event]既可以为ActionScript组件定义事件，也可以为MXML组件定义事件。
　　

//[Event(name="eventName",type="package.eventType")]

//name说明了事件的名称，而type表明了该名称对应的事件类型。事件侦听器使用name进行注册。

　　为ActionScript组件定义事件

//[Event]元数据必须置于包（package）定义之内，类（class）定义之上

            package events{

                [Event(name="sampleEvent", type="myEvents.SampleEvent")]

                public class MyComponent extends UIComponent{
                    //
                }
            }

　　为MXML组件定义事件

<fx:Metadata>
[Event(name="SwitchLightEvent", type="CustomTraficLight.events.SwitchLightEvent")]
fx:Metadata>

３.触发事件

４.创建事件侦听器

谁用我名字啦？ 2012-10-18 10:30 发表评论

flex事件（三）Flex应用启动的事件序列

谁用我名字啦？ — Wed, 17 Oct 2012 09:05:00 GMT

Flex应用启动的事件序列（1）

　　Flex的事件可以分为系统事件和用户事件。

　　由用户操作触发的事件，就是用户事件。Flex的用户事件遵循了W3C DOM Level3（W3C文档对象模型Level3）事件规范。具体可参见http://www.w3.org/TR/DOM-Level-3-Events/ 。用户事件是应用中最常见的事件类型，比如鼠标点击、键盘输入等都属于用户事件。除了用户直接触发的事件，在Flex应用运行过程中，Flex架构本身也会自动触发一些事件，也就是所谓的系统事件。在信号灯应用中，creationComplete事件是系统事件，而MouseEvent.CLICK事件则是用户事件。

　　所有的Flex可视化组件都继承自基类mx.core.UIComponent，同时也继承了UIComponent的系统事件。当Flex应用启动时，会触发一系列事件，这些事件表明了组件在启动过程中的不同时间点，比如被创建、布局完成或者在屏幕上完成绘制等。这些启动序列事件帮助开发者更好的监控并控制应用运行生命周期的各个环节。实际上，这"一系列"事件都由一个事件类mx.events. FlexEvent表示。FlexEvent类的不同类型反映了启动过程中不同阶段发生的事件。

　　在Flex应用中，容器和组件启动时的事件序列不同。

　　在组件所属的容器内，组件被实例化、加入到父容器的显示列表中，然后设置外观尺寸，最终完成容器中的布局，并被绘制出来。图3-1显示了组件的启动事件序列：

图3-1

　　由于容器包含了子组件，因此容器启动时的序列不同于单一组件，图3-2显示了包含子组件的容器的启动过程。不仅容器本身要完成创建的全过程，所包含的子组件也要依次序地完成自身的创建。当然如果容器中嵌入了子容器，其启动过程与此类似。

图3-2

Flex应用启动的事件序列（2）

　　在所有组件和容器被创建并最终绘制在屏幕上之后，Application对象将触发applicationComplete事件，该事件类型标志着应用启动完毕，是应用启动时触发的最后一个事件。

图3-2中描述的部分启动序列事件解释如下：

　　preinitialize：在初始化之前触发，对于容器来说，所有子组件尚未定义。一般来说，不会在该事件触发时配置组件；

　　initialize：当组件或容器完成构造，并设置初始化属性后触发。在这个阶段，对于容器，其所有的子组件的preinitialize事件已经触发，但是这些子组件还没有完成布局；

　　creationComplete：当应用或组件（包括所有子组件）完成构造、布局和绘制可见时触发。当creationComplete事件发生时，组件已经被创建出来，因此开发者也能够访问同组件相关的属性，比如height、width等属性。开发者通常使用这个事件来对应用进行初始化配置。比如为某些应用组件添加侦听器，调用Web服务等；

　　applicationComplete：所有的组件初始化完成并显示。

谁用我名字啦？ 2012-10-17 17:05 发表评论

flex事件（二）事件对象重要的属性和方法

谁用我名字啦？ — Wed, 17 Oct 2012 08:54:00 GMT

事件对象重要的属性和方法

　　flash.event.Event类的全部6个属性都是只读属性，这些属性提供了发生事件的基本信息。我们已经讨论过target和currentTarget属性（见6.2.1节的事件属性：target和currentTarget（见第103页）），并在"EventJourney的事件侦听器myEventhandler中使用eventPhase属性来获取事件旅程的阶段。Event类也提供了许多方法。我们只介绍事件对象常用的属性和方法，更详细信息请参考"Adobe FlexTM 3语言参考"（http://livedocs.adobe.com/flex/3/langref/）。

1．target和currentTarget属性

　　如我们刚才提到的，在事件被触发后，Flash Player就会创建事件对象，并逐一检查"事件旅程"上的节点是否针对发生的事件注册了侦听器，为事件对象赋值，并调用侦听器。事件对象源自flash.events.Event类。事件对象currentTarget属性的值会在事件流中改变，而target属性则不会变化。（关于事件对象，我们将在6.3节（见第106页）深入讨论）由此，开发者能够通过

　　currentTarget属性获知事件旅程现在停在了哪个节点上。

currentTarget属性：事件旅程中，currentTarget属性代表了Flash Player正在检查的节点对象。比如，当Flash Player遍历到ctnButtons对象，那么event.currentTarget就是ctnButtons对象。

　　target属性：target属性就是发生事件的对象。在信号灯应用中，event.target就是用户所点击的按钮对象，在事件旅程中，该属性的值始终不变。信号灯应用中，侦听器myEventHandler利用event.target来获取被点击按钮上的标签数据。此时赋给event.currentTarget属性的则是HBox容器对象ctnButtons。

２. type属性（String类型）

　　当用户进行鼠标操作时，Flash Player会自动调度鼠标事件MouseEvent。操作可能是鼠标点击、移动、滑动滚轮等。这些不同的操作都是通过事件类型来标记的。

type属性返回的字符串表明事件的类型。代表事件类型的字符串是大小写敏感的。Flex以常量的形式内置了许多事件类型，如Event.unloaded和MouseEvent.CLICK。

３. cancellable属性（String类型）和preventDefault()方法

　　默认情况下，许多事件都有 Flash Player 执行的关联行为。比如，如果用户在文本字段中键入一个字符，则默认行为就是在文本字段中显示该字符。如果需要取消TextEvent.TEXT_INPUT事件的默认行为，你可以使用preventDefault()方法来阻止显示所键入的字符。

不可取消行为的一个示例是与Event.REMOVED事件关联的默认行为，只要Flash Player从显示列表中删除显示对象，就会生成该事件。由于无法取消默认行为（删除元素），因此preventDefault()方法对此默认行为无效。

　　开发者可以使用Event.cancelable属性来检查是否可以阻止与特定事件关联的默认行为。如果属性Event.cancelable的值为true，则可以使用preventDefault()来取消默认行为，否则，preventDefault()无效。

谁用我名字啦？ 2012-10-17 16:54 发表评论