BlogJava-喵本聪-随笔分类-Flex3.0

Spring+Hibernate+Flex 实现登录

Ying-er — Mon, 29 Mar 2010 05:39:00 GMT

摘要: 1.使用MyEclipse+Flex插件整合Java&Flex的方法： https://docs.google.com/fileview?id=0B5pwJS1Mq71jMzM5ZDUwOGMtN2FjNS00Njc2LTlkMjItOTY4ZDU5MDVmNDIx&hl=en 我使用的是第一种。 2.搭建SSH框架不多说，详见整个工程：http://other.sote... 阅读全文

Ying-er 2010-03-29 13:39 发表评论

使用Flex构建树状结构

Ying-er — Sat, 13 Mar 2010 01:25:00 GMT

1使用XMLList构建自己的一棵树：

<mx:XMLList id = "myTree">
        <node label="Google">
            <node label = "Gmail">
                <node label = "inbox"/>
                <node label = "outbox"/>
                <node label = "buzz"/>
            node>
            <node label = "reader">
                <node label = "sitinspring"/>
                <node label = "grandenough"/>
            node>
            <node label = "YouTube"/>
            <node label = "wave"/>
            <node label = "App Engine"/>
        node>
    mx:XMLList>

2在Tree组件中指定数据源、所显示的域名、是否显示根节点、以及相应事件等。

<mx:Tree id = "TestTree" height="196" width="243" dataProvider="{myTree}" labelField="@label" showRoot="true"
change="treeChanged(event)">mx:Tree>

完整代码：

<mx:Script>

            [Bindable]
            public var selectedNode:XML;
            public function treeChanged(evt:Event):void{
                selectedNode = Tree(evt.target).selectedItem as XML;
            }
        ]]>
    mx:Script>
    <mx:XMLList id = "myTree">
        <node label="Google">
            <node label = "Gmail">
                <node label = "inbox"/>
                <node label = "outbox"/>
                <node label = "buzz"/>
            node>
            <node label = "reader">
                <node label = "sitinspring"/>
                <node label = "grandenough"/>
            node>
            <node label = "YouTube"/>
            <node label = "wave"/>
            <node label = "App Engine"/>
        node>
    mx:XMLList>
    <mx:Panel x="34" y="957" width="559" height="290" layout="absolute" title="My Tree Test" backgroundColor="#F6EEEE" borderColor="#74FFFD" fontSize="10">
        <mx:Label x="39" y="10" text="Select a node in the Tree control." width="370" color="#0E42EA" fontWeight="bold" fontSize="12"/>
        <mx:HDividedBox x="27" y="36" width="90%" height="198" borderColor="#B7EBEC">
            <mx:Tree id = "TestTree" height="196" width="243" dataProvider="{myTree}" labelField="@label" showRoot="true"
                 change="treeChanged(event)">mx:Tree>
            <mx:TextArea height="196" width="213" text="{selectedNode.@label}" backgroundColor="#FFFFFF"/>
        mx:HDividedBox>
    mx:Panel>

效果：

Ying-er 2010-03-13 09:25 发表评论

flex控件（有图有真相）

Ying-er — Mon, 08 Mar 2010 02:25:00 GMT

Ying-er 2010-03-08 10:25 发表评论

Flex 数据绑定【动态】

Ying-er — Sat, 06 Mar 2010 13:03:00 GMT

xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">

    <mx:Script>


            import mx.binding.utils.BindingUtils;
            import mx.controls.Label;

            internal var mylabel:Label=new Label();

            internal function init():void{

                this.addChild(mylabel);
                mylabel.x=300;
                mylabel.y=100;
                mylabel.width=200;
                mylabel.height=50;
                mylabel.text="10";

                BindingUtils.bindProperty(mylabel,"text",fsize,"value");
            }

        ]]>
    mx:Script>

    <mx:HSlider x="47" y="170" width="283" id="fsize" minimum="10" maximum="50" />
mx:Application>

等同方法：

xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">

    <mx:Script>



            import mx.binding.utils.BindingUtils;
            import mx.controls.Label;

            internal var mylabel:Label=new Label();

            internal function init():void{

                this.addChild(mylabel);
                mylabel.x=300;
                mylabel.y=100;
                mylabel.width=200;
                mylabel.height=50;
                mylabel.text="10";

                BindingUtils.bindSetter(setTxt,fsize,"value");
            }

            internal function setTxt(txt:String):void{
                mylabel.text=txt;
            }

        ]]>
    mx:Script>

    <mx:HSlider x="47" y="170" width="283" id="fsize" minimum="10" maximum="50" />
mx:Application>

Ying-er 2010-03-06 21:03 发表评论

Flex 动态对象

Ying-er — Sat, 06 Mar 2010 08:28:00 GMT

Object对象是一个动态对象
var o:Object=new Object();
o.name=“Jack”;
o.age=20;
o.address=“火星”;
Model中的节点数据默认是Object类型，作数据源必须转换成ObjectProxy类型。
1

public var o:Object=new Object();
internal function init():void{
o.name="zhangsan";
o.age=20;
trace(o.name+":"+o.age);

package com.classes
{
    public dynamic class DymObject
    {
        public function DymObject()
        {
        }

    }
}

import com.classes.DymObject;
public var a:DymObject=new DymObject();
a.address="dalian";
trace(a.address);

Ying-er 2010-03-06 16:28 发表评论

Flex 数据绑定【静态】

Ying-er — Sat, 06 Mar 2010 06:48:00 GMT

数据绑定定义：
幻灯片 2 当数据源对象的数据发生变化时，目标对象的数据会自动更新，而不需要我们再编写代码去强制更新
绑定实际也是借助事件机制来完成的，当目标使用了数据绑定的时候，目标对象就会监听数据源对象的某一固定事件。当数据源发生变化时，数据源会派发改变事件（ChangeEvent），通知目标对象更新数据。这个过程由Flex完成，不用我们手动干预。
绑定的前提条件：
源对象的数据和目标对象的数据格式相同。

方法：
1 在对象的属性标签中,使用{ }把数据源直接绑定到对象的某个属性上。

xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:HSlider x="47" y="170" width="283" id="fsize" minimum="10" maximum="50" />
<mx:Label x="47" y="34" text="Bingo" fontSize="{fsize.value}" width="306" height="91" id="msg" color="#F15906" fontWeight="bold"/>
mx:Application>

2 在对象的属性标签中,使用{ }把某个函数的返回值作为数据源绑定到对象属性上。函数的参数要使用[Bindable]绑定符号
[Bindable]，[Bindable(event=“eventname”)]Event表示当数据源发生变化时，数据源所在对象派发的事件类型，它是可选项，默认的事件名是“propertyChange”，一般情况下只需要使用[Bindable]标签

1 xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3
4     <mx:Script>
5
6
7             [Bindable]
8             private var n:int;
9
10             internal function square(num:int):int{
11                 return num*num;
12             }
13         ]]>
14     mx:Script>
15
16
17     <mx:HSlider x="66" y="103" width="264" minimum="1" maximum="10"
18          snapInterval="1" id="s_num" change="{n=s_num.value}"/>
19     <mx:TextInput x="122" y="53" id="txt" fontSize="12" text="{square(n)}"/>
20     <mx:Label x="66" y="53" text="结果" width="48" fontSize="12" fontWeight="bold"/>
21
22 mx:Application>
23

仿Java Getters&Setters

package com.classes
{

    [Bindable]
    public class BindClass
    {
        public var n:int;

        public function BindClass()
        {
        }

        //[Bindable]
        public function get N():int{
                return n;
        }


        public function set N(x:int):void{
                n=x;

        }


    }
}

1 xml version="1.0" encoding="utf-8"?>
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3
4     <mx:Script>
5
6
7             import com.classes.BindClass;
8             internal var bc:BindClass=new BindClass();
9
10
11             internal function square(num:int):int{
12                 return num*num;
13             }
14         ]]>
15     mx:Script>
16
17
18     <mx:HSlider x="66" y="103" width="264" minimum="1" maximum="10"
19          snapInterval="1" id="s_num" change="{bc.n=s_num.value}"/>
20     <mx:TextInput x="122" y="53" id="txt" fontSize="12" text="{square(bc.n)}"/>
21     <mx:Label x="66" y="53" text="结果" width="48" fontSize="12" fontWeight="bold"/>
22
23 mx:Application>
24

3 使用标签

<mx:Binding>

source=“…” destination=“…”

xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" creationComplete="init()">

    <mx:Model id="books">
        <books>
            <book>
                <name>城市name>
                <author>张悬author>
            book>
            <book>
                <name>鱼name>
                <author>陈绮贞author>
            book>
        books>
    mx:Model>

    <mx:Binding source="books.book[0].name" destination="txt_name.text"/>
    <mx:Binding source="books.book[0].author" destination="txt_author.text"/>
    <mx:Panel x="44" y="24" width="379" height="178" layout="absolute" title="专辑信息" fontSize="12">
        <mx:Label x="58" y="36" text="专辑" fontSize="12" fontWeight="bold"/>
        <mx:Label x="58" y="71" text="作者" fontSize="12" fontWeight="bold"/>
        <mx:TextInput x="111" y="36" id="txt_name" fontSize="12"/>
        <mx:TextInput x="111" y="71" id="txt_author" fontSize="12"/>
    mx:Panel>
mx:Application>

Ying-er 2010-03-06 14:48 发表评论

使用Flex实现简单的表单验证

Ying-er — Wed, 03 Mar 2010 13:35:00 GMT

LoginFormEvent.as 自定义事件

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

    public class LoginFormEvent extends Event
    {

        public var loginName:String = "";
        public var loginPassword:String = "";
        public function LoginFormEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable);
        }

    }
}

1 使用源元素的方式给整个表单加一个事件：
<mx:Metadata>
        [Event(name = "loginEvent",type = "com.events.LoginFormEvent")]
mx:Metadata>

2 给button注册onClick事件
<mx:Button x="132" y="139" label="登录" fontSize="12" width="103" click="onClick(event)"/>
3 发出事件
internal function onClick(evt:MouseEvent):void{
                var ev:LoginFormEvent = new LoginFormEvent("loginEvent");
                ev.loginName = login_name.text;
                ev.loginPassword = login_password.text;
                dispatchEvent(ev);
4 给应用程序注册LoginFormEvent事件，事件响应函数为login
<ns1:loginPanel id="loginForm" loginEvent="login(event)" horizontalAlign="center" verticalAlign="middle">
ns1:loginPanel>
5 书写login函数，完成登录验证
internal function login(evt:LoginFormEvent):void{
                if((evt.loginName=="test") && (evt.loginPassword=="123")){
                Alert.show("登录成功","提示");
                }
                else Alert.show("登录失败","提示");
            }

自定义的Panel组件：即表单
loginPanel.mxml

xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="244" borderColor="#10CAE0" title="用户登录" fontSize="12">

    <mx:Metadata>
        [Event(name = "loginEvent",type = "com.events.LoginFormEvent")]
    mx:Metadata>

    <mx:Script>

        import com.events.LoginFormEvent;
            internal function onClick(evt:MouseEvent):void{
                var ev:LoginFormEvent = new LoginFormEvent("loginEvent");
                ev.loginName = login_name.text;
                ev.loginPassword = login_password.text;
                dispatchEvent(ev);
            }
        ]]>
    mx:Script>

    <mx:Label x="71" y="34" text="用户名：" fontSize="12"/>
    <mx:Label x="71" y="90" text="密码：" fontSize="12"/>
    <mx:TextInput x="132" y="34" id="login_name"/>
    <mx:TextInput x="132" y="90" id="login_password" displayAsPassword="true"/>
    <mx:Button x="132" y="139" label="登录" fontSize="12" width="103" click="onClick(event)"/>

mx:Panel>

主页面：

xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:ns1="*" creationComplete="init()">
    <mx:Script>

            import mx.controls.Alert;
            import com.events.LoginFormEvent;
            internal function login(evt:LoginFormEvent):void{
                if((evt.loginName=="test") && (evt.loginPassword=="123")){
                Alert.show("登录成功","提示");
                }
                else Alert.show("登录失败","提示");
            }
        ]]>

    mx:Script>

    <ns1:loginPanel id="loginForm" loginEvent="login(event)" horizontalAlign="center" verticalAlign="middle">

    ns1:loginPanel>

mx:Application>

Ying-er 2010-03-03 21:35 发表评论

Flex的事件机制

Ying-er — Wed, 03 Mar 2010 08:16:00 GMT

采用观察者模式
即首先要注册事件，事件分发后通过事件响应函数进行处理。
XXX.addEventListener(“注册事件类型”,事件响应函数);

理解事件流：
1.捕获阶段（从根节点到子节点，检测对象是否注册了监听器，是则调用监听函数）
2.目标阶段（调用目标对象本身注册的监听程序）
3.冒泡阶段（从目标节点到根节点，检测对象是否注册了监听器，是则调用监听函数）
注：事件发生后，每个节点可以有2个机会（2选1）响应事件，默认关闭捕获阶段。
从上到下（从根到目标）是捕获阶段，到达了目标后是目标阶段，然后从目标向上返回是冒泡阶段。
图示：
（假设该Button注册了监听：button.addEventListener(“click”,onClick);）
点击按钮之后出发了click事件，以此来分析事件流：

cav1Canvas：cav1

cav2Canvas：cav2

btnButton：点击我

当点击 btn时，
终端-->cav1-->cav2-->btn（捕获阶段）
-->调用btn的监听程序（目标阶段）
-->btn-->cav2-->cav1-->终端（冒泡阶段）

每个事件对象都有以下属性：
target：事件的派发者
currentTarget：当前正在检测的的对象，帮助跟踪事件传播的过程。

当事件发生时，FLEX通过事件的分发器EventDispatcher进行事件分发，分发的顺序是：从上往下到达目标，然后从下往上，从目标开始返回。
在事件的流经过程中，不是目标的对象如果注册了事件，也有了相应的事件响应函数，使得不是目标的对象也响应了事件的处理
addEventListener在只有如上两个参数的情况下是关闭捕获阶段的，也就是说事件流是从目标阶段开始的，然后是冒泡阶段，
当出现容器包含控件的时候，可以使用判断
if(evt.target == evt.currentTarget)
来确定当前事件流上的当前流经对象是否就是目标对象，如果是就进行相应的处理。

事件只在bubbles 属性为true 时才进行冒泡，可以冒泡的事件包括：change、click、doubleClick、keyDown、keyUp、mouseDown、 mouseUp。并且不能在一个监听器中同时打开捕获和冒泡功能，要做到这一点，只能注册两个监听器，分别实现。

移除对象的事件流：

cav1.addEventListener(MouseEvent.MOUSE_OVER,onMOver);
btn.addEventListener(MouseEvent.CLICK,onRemove);
internal function onRemove(evt:MouseEvent):void{
cav1.removeEventListener(MouseEvent.MOUSE_OVER,onMOver);
}

阻断事件流中目标对象的后继事件
即通过了目标阶段后阻止冒泡阶段：
event类的方法：public function stopImmediatePropagation():void
即：

evt.stopImmediatePropagation();

自定义事件
1.创建自定义事件名称的Event
dispatchEvent(new Event(“myEvnet”,true,false));
2.创建自定义事件类
Public class MyEvent extends Event{
….
}

package com.events
{
  import flash.events.Event;
  public class NewEvent extends Event{
   public static const NEWCLICK:String="newevent";
   public var data:String;
   public function NewEvent(type:String,data:String){
    this.data=data;
    super(type,false,false);
    }
  }
}

dispatchEvent是EventDispatcher的方法：public function dispatchEvent(event:Event):Boolean将事件调度到事件流中。事件目标是对其调用 dispatchEvent() 方法的 EventDispatcher 对象。
这句话就是说是哪个对象调用 dispatchEvent() ，那么该事件就会被分发到那个对象的事件流中，如果没有指明对象，那么默认为this对象，即应用程序。这时该事件被分发到应用程序对象的事件流中，而没有分发到特定对象的事件流中。一旦两个对象的不是父子关系（控件树），那么事件流不会在这两个对象之间有联系，那么事件不会被响应；如果是，则还是要响应。（这种情况dispatchEvent的参数Event对象的参数必须是三个，如上）。dispatchEvent就是说明有了新的事件，只要注册了该事件，就可以响应。

Ying-er 2010-03-03 16:16 发表评论

遍历Flex中某个对象的所有属性值

Ying-er — Wed, 03 Mar 2010 02:22:00 GMT

方法1：

for(var item:String in studentObj){
trace(item+":"+studentObj[item]);
}

方法2：

for each(var value:* in studentObj){
trace(value);
}

Ying-er 2010-03-03 10:22 发表评论

Flex中四种访问权限

Ying-er — Wed, 03 Mar 2010 01:59:00 GMT

private:只能在类本身内部访问。
protected:可以由类本身或任何子类访问。
internal:可以由类本身或者相同包内的任何类访问。
public:可以在类内部访问,也可以由类实例访问,声明为static时,可以直接从类访问。

Ying-er 2010-03-03 09:59 发表评论

[转]Flex builder3执行Debug需要安装的Flash Player Debugger环境

Ying-er — Sat, 13 Feb 2010 02:13:00 GMT

Flash Player作为Flex程序运行环境，它的角色就是一个Flex程序的承载体。我们Flex程序在开发过程中需要不断的进行调试和完善，当然离不开 debug环境。Flash Player Debugger就专门是为我们准备的，我们可以在Adobe的官方网站下载。不过寻找起来还是有些难度的，所以西部e网(weste.net)就为大家整理好所有的版本，包括Flash Player 9 Debugger和Flash Player 10 Debugger，有Windows版、Mac版、Linux版，还有针对不同浏览器比如IE、Firefox等等。需要就下载吧！

Flash Player 10 Debugger下载

Flash Player 10 ActiveX control content debugger (for IE) (EXE, 2.12 MB)
http://download.macromedia.com/pub/flashplayer/updaters/10/flashplayer_10_ax_debug.exe

IE浏览器用这个就可以了。

使用方法：安装flashplayer_10_sa_debug.exe

就可以正常Debug了。

Flash Player 10 Plugin content debugger (for Netscape-compatible browsers) (EXE, 2.09 MB)
http://download.macromedia.com/pub/flashplayer/updaters/10/flashplayer_10_plugin_debug.exe

Firefox浏览器用这个。

使用Firefox浏览器flash player debug的方法

安装以上for Netscape-compatible browsers版本的插件或者

把C:"WINDOWS"system32"Macromed"Flash"中NPSWF32.dll复制到后者文件夹C:"Program Files"Mozilla Firefox"plugins"中。

重新启动Flex Builder，在Window->Preferences->General->Web Browser里选定Firefox。

Ying-er 2010-02-13 10:13 发表评论

Flex中Array相关操作整理

Ying-er — Fri, 12 Feb 2010 07:55:00 GMT

定义：

var tempArr:Array = new Array();

定义同时赋初值：

var company:Array = new Array("IBM", "APPLE", "SUN","ADOBE");

push：

//将“I”放入tempArr中，tempArr中内容为Enya
tempArr.push("Enya ");

unshift：

//将tempArr中“0”位置赋值为“I ”，tempArr中原有元素往后移，tempArr中内容为I Enya
tempArr.unshift("I ");

splice：

//将index为“1”的元素用“like”替换，原元素不删除（“0”），tempArr中内容为I like Enya
tempArr.splice(1, 0, "like");

//将tempArr中index为“2”以后的元素以"张悬","王菲","燕姿"填充，并将原数组中index为“2”的元素删除（“1”），tempArr中的内容为：I like 张悬王菲燕姿
tempArr.splice(2,1, "张悬","王菲","燕姿");

//若将该方法的参数改为
tempArr.splice(2,0, "张悬","王菲","燕姿");
//结果为I like 张悬王菲燕姿 Enya

pop：

//弹出index最大的那个元素，company中内容为IBM,APPLE,SUN
company.pop();

shift:

//弹出index为“0”的元素，company中内容为APPLE，SUN
company.shift();

关于数组排序：

var nums:Array = new Array(2,0,5);

//按照数字降序排列 nums变为5，2，0
nums.sort(Array.NUMERIC | Array.DESCENDING);

按照某个字段排序：

//Array.NUMERIC默认为升序
var students:Array = new Array(  );
                students.push({name: "Jake", age:20});
                students.push({name: "Tom", age:22});
                students.push({name: "Will", age:17});

                students.sortOn("age",Array.NUMERIC);

此外，数组还可作为List的数据源：

list1.dataProvider=company

Ying-er 2010-02-12 15:55 发表评论