flex页面跳转及数据绑定

1、Flex页面跳转Flex中实现Flex页面跳转以下几种方式：Flex页面跳转方式一：使用ViewStack组件，把要跳转的页新建成MXMLComponent,然后通过ViewStack组件把这些页包含进来，然后再通过改变ViewStack的selectedItem或者selectedChild来切换这些页。1 <mx:ViewStackidmx:ViewStackid="storeViews"width="100%"height="550" 2 creationPolicy="all"> 3 <s

2、houyeidshouyeid="homeView"label="首页"showEffect="WipeDown"hideEffect="WipeUp"/> 4 <leixingidleixingid="pView"label="模板类型"showEffect="WipeDown"hideEffect="WipeUp"/> 5 <makeidmakeid="supportView"label=

3、"立即制作"showEffect="WipeDown"hideEffect="WipeUp"/> 6 </mx:ViewStack> 7 <mx:Buttonclickmx:Buttonclick="storeViews.selectedChild=homeView;"/> 8 Flex页面跳转方式二：使用navigateToURL，主要方式如下：9 varurl:String="http:/localhost:8080/Flex_Java_Demo/ welcome.htm

4、l "var request:URLRequest=new URLRequest(url); 10 navigateToURL(request,"_blank"); <A href="这个方法实现Flex页面切换时会弹出新的页面，而不是只变换urlFlex页面跳转方式三：引用flash中的importflash.external.ExternalInterface这个接口，它能提供像jsp中window.location.href方法一样方便，主要代码为： 11 ExternalInterface.call("function()wind

5、ow.location. 12 href='http:/localhost:8080/Flex_J2eeDemo 13 /bin/Welcome.html'"); 14Flex页面跳转方式四：使用组件技术，把不同的页面做成component，然后通过TabNavigator等进行切换，通过使用state实现跳转。Flex页面跳转方式五：把不同的页面做成Module，然后使用ModuleLoder来进行加载切换。Flex数据绑定 现在数据库或是某个文件里有一些数据需要显示在界面上该怎么办呢？我们的目的就是将这些数据设法放到界面上去可以显示出来，这个将数据放到界面上去的过

6、程可以叫住Flex数据绑定。在Flex应用中程序中，Flex数据绑定的实际是借助事件机制来完成的，当目标使用Flex数据绑定的时候，目标对象就会监听数据源对象的某一固定事件。当数据源发生变化时，数据源会派发改变事件通知目标对象更新数据。实际开发中我们不需要去关注具体的实现过程，这个过程Flash/Flex会自动去完成。在Flex中，Flex数据绑定主要有四种方式，分别为：""绑定表达式、Bindable绑定符号、<mx:Binding>标签和BindingUtils动态绑定，下面一一对这四种Flex数据绑定方式进行详细介绍。一、""绑定表达式

7、Flex开发中，""绑定表达式的应用是最为常见的，简单、方便。好比ASP.NET中的"<%>"一样的功效。这里我就简单介绍下，在Flex下怎么使用""绑定表达式来绑定数据。如有这样一个简单的需求，我们定义一个变量，通过""绑定表达式将变量的值绑定到文本框或是按扭等类似的UI组件上，变量定义如下：<A href="1 1<mx:Script> 2 2<!CDATA 3 3Bindable 4 4internalvartext:String="嗨，这是通过&quo

8、t;"表达式绑定的!" 5 5> 6 6</mx:Script> 如上定义了一个字符串的变量text，我们通过""绑定表达式将其绑定在UI组件上呢？如下：7 1<mx:Buttonxmx:Buttonx="97"y="122"label="this.text"fontSize="12"/> 8 2<mx:Labelxmx:Labelx="97"y="152"text="this.text&q

9、uot;fontSize="12"/> 9 3<mx:Textxmx:Textx="97"y="178"text="this.text"fontSize="12"/> 简洁、简单、方便且适用。OK，已经学到手了，那下面继续看看另一种绑定使用方式-绑定方法返回值。例如需要将一个方法的返回值通过""绑定表达式进行Flex数据绑定，让其在UI组件上呈现该怎么做呢？如下方法定义：10 1privatefunctionBindText():String 11 2 12

10、 3return"通过""表达式绑定方法！" 13 4 其实和上面一样，直接将""里的变量改为方法便OK，如下代码段：<mx:Labelx="114"y="277"text="BindText()"fontSize="12"/>如上便完成了对方法的绑定，既将BindText()方法的值绑定在了Label组件上。二、Bindable绑定符号Bindable绑定符号在上面就已经出现过了，他的使用和作用也很容易掌握。如上示例，我们的目的是将定义的变量

11、值绑定在UI组件上，如果要实现这个功能，直接将定义的变量通过""绑定表达式进行Flex数据绑定是不能完成功能的，我们必须为所定义的变量标记Bindable。在Flex中，只有标记有Bindable的数据源才能进行Flex数据绑定（函数除外，上面示例中也证实了这一点），当然也可以是其他的数据源（xml,数据库,文件等不同地方不同类型的数据源）。上面这样使用确实很简单，但还是需要更加深入的了解Bindable。当指定了Bindable的数据源发生改变的时候，仍然是通过所监听的事件方法来处理的“通知”，默认为"propertyChange"事件。如之前定义的变

12、量text，那么完整的定义应该如下所示：1Bindable(event="propertyChange")2internalvartext:String="嗨，这是通过""表达式绑定的!"“propertyChange”事件为默认事件，通常我们只需要使用简写形式Bindable就OK了。除此之外还需要注意两点（这里就不做介绍，在后续文章里我会详细介绍）：1、Bindable标签用于函数时，只能在setter和getter方式定义的函数前使用，这种绑定称之为函数级绑定。2、Bindable标签用于公有类时，这个类的所有公共变量，sett

13、er和getter方式定义的函数都可以用于绑定。这种绑定称为对象级绑定。三、<mx:Binding>标签<mx:Binding>标签也是使用非常频繁的Flex数据绑定方式。到底怎么个用法呢？下面以两个小示例使用不同的数据源来进行Flex数据绑定演示。首先用<mx:Model>标签定义一个数据源（<mx:Model>标签就相当于的定义一个临时数据，这里不做详细介绍，不清楚它的作用的朋友请查阅相关资料学习）。<mx:Model>标签定义数据源如下：1 1<mx:Modelidmx:Modelid="books"&

14、gt; 2 2<Books> 3 3<Book> 4 4<Name>ActionScript3.0</Name> 5 5<Author>张三</Author> 6 6</Book> 7 7<Book> 8 8<Name>FlashCS3</Name> 9 9<Author>李四</Author> 10 10</Book> 11 11</Books> 12 12</mx:Model> 如上定义的数据源，通过<mx

15、:Binding>标签来进行Flex数据绑定是很简单的，如下代码段：13 1<mx:Bindingsourcemx:Bindingsource="books.Book0.Name"destination="txtName.text"/> 14 2<mx:Bindingsourcemx:Bindingsource="books.Book1.Name"destination="txtAuthor.text"/> 15 3 16 4<mx:TextInputxmx:TextInputx

16、="95"y="71"id="txtName"fontSize="12"/> 17 5<mx:TextInputxmx:TextInputx="95"y="115"id="txtAuthor"fontSize="12"/> <mx:Model>标签可以用来定义XML式的数据源，另外还可以通过编程的方式定义数据源或从数据库、文件或各种数据服务接口来获取数据源，下面是使用xml的数据源定义：18 1privat

17、evarxml:XML=<Books> 19 2<Book> 20 3<Name>ActionScript3.0</Name> 21 4<Author>张三</Author> 22 5</Book> 23 6<Book> 24 7<Name>FlashCS3</Name> 25 8<Author>李四</Author> 26 9</Book> 27 10</Books> 绑定xml对象的数据和通过<mx:Model>

18、标签定义的数据源没什么区别，详细如下代码块：28 1<mx:Bindingsourcemx:Bindingsource="xml.Book0.Name"destination="txtXmlName.text"/> 29 2<mx:Bindingsourcemx:Bindingsource="xml.Book1.Name"destination="txtXmlAuthor.text"/> 30 3<mx:TextInputxmx:TextInputx="95"y=&

19、quot;177"id="txtXmlName"fontSize="12"/> 31 4<mx:TextInputxmx:TextInputx="95"y="225"id="txtXmlAuthor"fontSize="12"/> 四、BindingUtils与动态绑定在Flex数据绑定中，动态绑定主要是通过BindingUtils类提供的两个静态方法来实现。该类位于包mx.binding.utils下，它提供了bindProperty()和bin

20、dSetter()两个静态方法来实现数据的动态绑定。bindProperty（）方法根据名称就可以看出大概意思，绑定属性。那实际开发中我们应该怎么应用他呢？其实很简单，一句话概括就是：将xx的YY属性绑定到AA的BB属性。更清楚的理解这句话的意思见下面代码片段：1 1<?xmlversionxmlversion="1.0"encoding="utf-8"?> 2 2<mx:Applicationxmlns:mxmx:Applicationxmlns:mx=" 3 3<mx:Script> 4 4<!CDATA

21、 5 5importmx.binding.utils.BindingUtils; 6 6 7 7privatevarmyName:String="张三" 8 8 9 9internalfunctiononClick():void 10 10 11 11BindingUtils.bindProperty(nameText,"text",btn,"label"); 12 12 13 13> 14 14</mx:Script> 15 15<mx:TextInputxmx:TextInputx="84&quo

22、t;y="83"id="nameText"text=""/> 16 16<mx:Buttonxmx:Buttonx="102"y="153"label="动态绑定"id="btn"click="onClick()"/> 17 17</mx:Application> 这段代码很简单，在界面上分别放置了输入组件和一个按扭组件，然后定义了一个字符串(String)类型的变量myName，最后通过按扭的单击事件将按

23、扭的"label"属性绑定到输入组件的"text"属性上。其实onClick()方法里的代码和下面这一句代码是完全等价的：18 1Text.text=this.btn.label; bindSetter（）方法的使用也很简单，该Flex数据绑定方法绑定数据需要与setter类似的方法结合，将外部传递进去的参数进行方法委托实现数据的动态绑定，拿上面将按扭显示值绑定到文本输入组件的值的示例来说，只需要定义一个setter的方法，该bindProperty()方法为bindSetter()方法既可，详细见下面代码片段：19 1<?xmlversionxmlversion="1.0"encoding="utf-8"?> 20 2<mx:A