flex开发学习.docx
- 文档编号:8175402
- 上传时间:2023-01-29
- 格式:DOCX
- 页数:14
- 大小:21.15KB
flex开发学习.docx
《flex开发学习.docx》由会员分享,可在线阅读,更多相关《flex开发学习.docx(14页珍藏版)》请在冰豆网上搜索。
flex开发学习
开发Flex应用程序的典型步骤如下(通常是这样):
1.选取一系列预先定制好的、用于设计应用程序界面的组件(如表格、按钮等等)
2.布置组件以设计用户界面。
3.使用样式和主题来增强视觉方面的设计。
4.添加动态行为(例如程序部件之间的相互作用)。
5.定义并连接所需的数据库服务。
6.将源代码编译成SWF文件,然后在FlashPlayer中运行。
Json格式的数据交互
xmlversion="1.0"encoding="utf-8"?
>
Applicationxmlns: mx="layout="absolute"minWidth="955"minHeight="600"creationComplete="getData()" backgroundColor="#FFFFFF" > Script> [CDATA[ importcom.adobe.serialization.json.JSON; importcom.adobe.serialization.json.JSONDecoder; importcom.tang.Test3; importmx.controls.Alert; importmx.rpc.events.ResultEvent; importtt.util.JAVAInterFace; publicfunctiongetData(): void{ tt.util.JAVAInterFace.register(); tt.util.JAVAInterFace.url="http: //127.0.0.1: 8080/afm/gateway"; varamf: Test3=newTest3(); varparam: Object={name: '公司param',money: '40000'}; amf.test1(JSON.encode(param),functionfun(r: String): void{ vardata: String=r.replace(/\s/g,""); varjd: JSONDecoder=newJSONDecoder(data); dg.dataProvider=jd.getValue(); }); } ]]> Script> DataGridx="44"y="36"id="dg"> columns> DataGridColumnheaderText="公司名称"dataField="name"/> DataGridColumnheaderText="公司账户"dataField="money"/> columns> DataGrid> Application> packagecom.tang { importmx.controls.Alert; importtt.Amf; importtt.util.JAVAInterFace; publicclassTest3 { publicfunctionTest3() { } publicfunctiontest1(param: String,callback: Function): void{ varamf: Amf=newAmf(); try{ amf.ConnectRemotingV(tt.util.JAVAInterFace.url,"test.Test3.test",callback,param); }catch(e: Error){ Alert.show(e.getStackTrace()); }finally{ } } } } 在没有封装as时的交互 ﹤? xmlversion="1.0"encoding="utf-8"? ﹥ ﹤mx: Applicationxmlns: mx="layout="vertical" creationComplete="jsonservice.send()"﹥ ﹤mx: Script﹥ ﹤! [CDATA[ importmx.rpc.events.ResultEvent; importcom.adobe.serialization.json.JSONDecoder; privatefunctiononJSONResult(event: ResultEvent): void{ vardata: String=event.result.toString(); data=data.replace(/\s/g,''); varjd: JSONDecoder=newJSONDecoder(data); dg.dataProvider=jd.getValue(); } ]]﹥ ﹤/mx: Script﹥ ﹤mx: HTTPServiceid="jsonservice" url="http: //localhost: 8080/jsp-examples/flexds/json.jsp" resultFormat="text"result="onJSONResult(event)"/﹥ ﹤mx: Paneltitle="StockData"width="100%"height="100%"﹥ ﹤mx: DataGridid="dg"width="100%"height="100%"﹥ ﹤mx: columns﹥ ﹤mx: DataGridColumndataField="compa"/﹥ ﹤mx: DataGridColumndataField="compb"/﹥ ﹤/mx: columns﹥ ﹤/mx: DataGrid﹥ ﹤/mx: Panel﹥ ﹤/mx: Application﹥ Flex数据绑定 现在数据库或是某个文件里有一些数据需要显示在界面上该怎么办呢? 我们的目的就是将这些数据设法放到界面上去可以显示出来,这个将数据放到界面上去的过程可以叫住Flex数据绑定。 在Flex应用中程序中,Flex数据绑定的实际是借助事件机制来完成的,当目标使用Flex数据绑定的时候,目标对象就会监听数据源对象的某一固定事件。 当数据源发生变化时,数据源会派发改变事件通知目标对象更新数据。 实际开发中我们不需要去关注具体的实现过程,这个过程Flash/Flex会自动去完成。 在Flex中,Flex数据绑定主要有四种方式,分别为: "{}"绑定表达式、[Bindable]绑定符号、 Binding>标签和BindingUtils动态绑定,下面一一对这四种Flex数据绑定方式进行详细介绍。 一、"{}"绑定表达式 Flex开发中,"{}"绑定表达式的应用是最为常见的,简单、方便。 好比ASP.NET中的"<%%>"一样的功效。 这里我就简单介绍下,在Flex下怎么使用"{}"绑定表达式来绑定数据。 如有这样一个简单的需求,我们定义一个变量,通过"{}"绑定表达式将变量的值绑定到文本框或是按扭等类似的UI组件上,变量定义如下: 1 Script> 2 [CDATA[ 3[Bindable] 4internalvartext: String="嗨,这是通过\"{}\"表达式绑定的! "; 5]]> 6 Script> 如上定义了一个字符串的变量text,我们通过"{}"绑定表达式将其绑定在UI组件上呢? 如下: 1 Buttonx="97"y="122"label="{this.text}"fontSize="12"/> 2 Labelx="97"y="152"text="{this.text}"fontSize="12"/> 3 Textx="97"y="178"text="{this.text}"fontSize="12"/> 简洁、简单、方便且适用。 OK,已经学到手了,那下面继续看看另一种绑定使用方式--绑定方法返回值。 例如需要将一个方法的返回值通过"{}"绑定表达式进行Flex数据绑定,让其在UI组件上呈现该怎么做呢? 如下方法定义: 1privatefunctionBindText(): String 2{ 3return"通过\"{}\"表达式绑定方法! "; 4} 其实和上面一样,直接将"{}"里的变量改为方法便OK,如下代码段: Labelx="114"y="277"text="{BindText()}"fontSize="12"/> 如上便完成了对方法的绑定,既将BindText()方法的值绑定在了Label组件上。 二、[Bindable]绑定符号 [Bindable]绑定符号在上面就已经出现过了,他的使用和作用也很容易掌握。 如上示例,我们的目的是将定义的变量值绑定在UI组件上,如果要实现这个功能,直接将定义的变量通过"{}"绑定表达式进行Flex数据绑定是不能完成功能的,我们必须为所定义的变量标记[Bindable]。 在Flex中,只有标记有[Bindable]的数据源才能进行Flex数据绑定(函数除外,上面示例中也证实了这一点),当然也可以是其他的数据源(xml,数据库,文件等不同地方不同类型的数据源)。 上面这样使用确实很简单,但还是需要更加深入的了解[Bindable]。 当指定了[Bindable]的数据源发生改变的时候,仍然是通过所监听的事件方法来处理的“通知”,默认为"propertyChange"事件。 如之前定义的变量text,那么完整的定义应该如下所示: 1[Bindable(event="propertyChange")] 2internalvartext: String="嗨,这是通过\"{}\"表达式绑定的! "; “propertyChange”事件为默认事件,通常我们只需要使用简写形式[Bindable]就OK了。 除此之外还需要注意两点(这里就不做介绍,在后续文章里我会详细介绍): 1、[Bindable]标签用于函数时,只能在setter和getter方式定义的函数前使用,这种绑定称之为函数级绑定。 2、[Bindable]标签用于公有类时,这个类的所有公共变量,setter和getter方式定义的函数都可以用于绑定。 这种绑定称为对象级绑定。 三、 Binding>标签 Binding>标签也是使用非常频繁的Flex数据绑定方式。 到底怎么个用法呢? 下面以两个小示例使用不同的数据源来进行Flex数据绑定演示。 首先用 Model>标签定义一个数据源( Model>标签就相当于的定义一个临时数据,这里不做详细介绍,不清楚它的作用的朋友请查阅相关资料学习)。 Model>标签定义数据源如下: 1 Modelidmx: Modelid="books"> 2 3 4 5 6 7 8 9 10 11 12 Model> 如上定义的数据源,通过 Binding>标签来进行Flex数据绑定是很简单的,如下代码段: 1 Bindingsourcemx: Bindingsource="books.Book[0].Name"destination="txtName.text"/> 2 Bindingsourcemx: Bindingsource="books.Book[1].Name"destination="txtAuthor.text"/> 3 4 TextInputxmx: TextInputx="95"y="71"id="txtName"fontSize="12"/> 5 TextInputxmx: TextInputx="95"y="115"id="txtAuthor"fontSize="12"/> Model>标签可以用来定义XML式的数据源,另外还可以通过编程的方式定义数据源或从数据库、文件或各种数据服务接口来获取数据源,下面是使用xml的数据源定义: 1privatevarxml: XML= 2 3 4 5 6 7 8 9 10 绑定xml对象的数据和通过 Model>标签定义的数据源没什么区别,详细如下代码块: 1 Bindingsourcemx: Bindingsource="xml.Book[0].Name"destination="txtXmlName.text"/> 2 Bindingsourcemx: Bindingsource="xml.Book[1].Name"destination="txtXmlAuthor.text"/> 3 TextInputxmx: TextInputx="95"y="177"id="txtXmlName"fontSize="12"/> 4 TextInputxmx: TextInputx="95"y="225"id="txtXmlAuthor"fontSize="12"/> 四、BindingUtils与动态绑定 在Flex数据绑定中,动态绑定主要是通过BindingUtils类提供的两个静态方法来实现。 该类位于包mx.binding.utils下,它提供了bindProperty()和bindSetter()两个静态方法来实现数据的动态绑定。 bindProperty()方法根据名称就可以看出大概意思,绑定属性。 那实际开发中我们应该怎么应用他呢? 其实很简单,一句话概括就是: 将xx的YY属性绑定到AA的BB属性。 更清楚的理解这句话的意思见下面代码片段: 1 xmlversionxmlversion="1.0"encoding="utf-8"? > 2 Applicationxmlns: mxmx: Applicationxmlns: mx=" 3 Script> 4 [CDATA[ 5importmx.binding.utils.BindingUtils; 6 7privatevarmyName: String="张三"; 8 9internalfunctiononClick(): void 10{ 11BindingUtils.bindProperty(nameText,"text",btn,"label"); 12} 13]]> 14 Script> 15 TextInputxmx: TextInputx="84"y="83"id="nameText"text=""/> 16 Buttonxmx: Buttonx="102"y="153"label="动态绑定"id="btn"click="onClick()"/> 17 Application> 这段代码很简单,在界面上分别放置了输入组件和一个按扭组件,然后定义了一个字符串(String)类型的变量myName,最后通过按扭的单击事件将按扭的"label"属性绑定到输入组件的"text"属性上。 其实onClick()方法里的代码和下面这一句代码是完全等价的: 1this.nameText.text=this.btn.label; bindSetter()方法的使用也很简单,该Flex数据绑定方法绑定数据需要与setter类似的方法结合,将外部传递进去的参数进行方法委托实现数据的动态绑定,拿上面将按扭显示值绑定到文本输入组件的值的示例来说,只需要定义一个setter的方法,该bindProperty()方法为bindSetter()方法既可,详细见下面代码片段: 1 xmlversionxmlversion="1.0"encoding="utf-8"? > 2 Applicationxmlns: mxmx: Applicationxmlns: mx=" 3 Script> 4 [CDATA[ 5importmx.binding.utils.BindingUtils; 6 7privatevarmyName: String="张三"; 8 9internalfunctiononClick(): void 10{ 11//BindingUtils.bindProperty(nameText,"text",btn,"label"); 12BindingUtils.bindSetter(bindText,btn,"label"); 13} 14 15internalfunctionbindText(text: String): void 16{ 17this.nameText.text=text; 18} 19]]> 20 Script> 21 TextInputxmx: TextInputx="84"y="83"id="nameText"text=""/> 22 Buttonxmx: Buttonx="102"y="153"label="动态绑定"id="btn"click="onClick()"/> 23 Application> /**************************************************************/ 本文向大家简单介绍一下关于Flex的几种绑定,在Flex应用中程序中,Flex数据绑定的实际是借助事件机制来完成的,当目标使用Flex数据绑定的时候,目标对象就会监听数据源对象的某一固定事件。 关于Flex的几种绑定 在Flex应用中程序中,Flex数据绑定的实际是借助事件机制来完成的,当目标使用Flex数据绑定的时候,目标对象就会监听数据源对象的某一固定事件。 当数据源发生变化时,数据源会派发改变事件通知目标对象更新数据。 实际开发中我们不需要去关注具体的实现过程,这个过程Flash/Flex会自动去完成。 在Flex中,Flex数据绑定主要有四种方式,分别为: "{}"绑定表达式、[Bindable]绑定符号、 Binding>标签和BindingUtils动态绑定,下面一一对这四种Flex数据绑定方式进行详细介绍。 Flex数据绑定第一种,使用{}绑定 TextInputidmx: TextInputid="input"/> Labeltextmx: Labeltext="{input.text}"/> Flex数据绑定第二种, Binding>绑定 Applicationxmlns: mxmx: Applicationxmlns: mx= TextInputidmx: TextInputid="inputSource"/> Labelidmx: Labelid="labelTarget"/> Bindingsourcemx: Bindingsource="inputSource.text"destination="labelTarget.text"/> Application> Flex数据绑定第三种,使用BindingUtils工具类 BindingUtils.bindProperty ( target,"targetProperty",source,"sourceProperty" ); ◆target: Object-目标 ◆targetProperty: 目标属性,String类型 ◆source: Object-绑定源 ◆sourceProperty: 源属性,String类型 Applicationxmlns: mxmx: Applicationxmlns: mx= TextInputidmx: TextInputid="inputSource"/> Labelidmx: Labelid="labelTarget"/> Application> BindingUtils.bindProperty (labelTarget,"text",inputSource,"text"); flex中embed的用法 Flex软件中经常需要使用一些外部的资源,如图片、声音、SWF或字体,虽然你也可以在软件运行的时候引入和载入,但是也可能经常需要直接将这些资源编译(Compile)到软件中,也就是直接嵌入资源(EmbeddingAssets)。 Flex中可以直接嵌入图片image,影片movie,MP3,和TrueType文字。 嵌入资源的利处: 1、比起在运行时访问资源,对嵌入资源的访问速度更加快速; 2、可以用简单的变量访问方式,在多个地方引用所嵌入的资源。 这是变量就代表资源,提高写代码的效率; 嵌入资源的弊处: 1、增大了SWF文件的大小,因为是将资源直接包含; 2、由于SWF文件增大,将使得初始化的速度变慢; 3、当资源改变后,需要重新编译SWF文件; 嵌入资源的语法: 根据嵌入位置的不同,语法也各不同: 1、[Embed(parameter1,paramater2,...)]元数据标签 这主要在AS文件中,或MXML文件中的 Script>标签中使用。 2、@Embed(parameter1,paramater2,...)指令 这主要在MXML标签中使用。 3、Embed(parameter1,paramater2,...)指令 这主要在 Styl
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- flex 开发 学习
![提示](https://static.bdocx.com/images/bang_tan.gif)