【软件工程】Flex_Builder教程

FlexBuilder教程一，概述Flex语言包含了一个丰富的用户界面组件库，MXML（一种基于XML的标记语言）和ActionScript（基于ECMA262的、强类型面向对象编程语言）。MXML用于排布用户界面和处理应用中其他方面的问题，而ActionScript用来处理用户交互逻辑。由于Flash平台的普及，Flex使开发者可以开发广泛的应用程序。开发者可以使用工业标准（如XML，CSS和SVC）和他们所熟悉的模式和范例来创建应用。Flex的分离协作方式和Flex公用组件模型也使得开发者和界面设计者能更好的进行协作，在可靠的、易于维护的架构上生产出在用户体验方面有突破性的产品。FlexBuilder(FB)之于MXML就如DREAWEAVER之于HTML。FB实现了代码与界面分开，FLEX的类程序扩展名为*.as，语法与java/c++很象，FLEX程序文件扩展名为.mxml，其实就是拥有很多特殊元素的XML文件。二，使用MXML组件构建用户界面MXML语言支持两种用户界面组件类型:控件和容器。容器是包含控件和其他容器的屏幕的矩形区域。控件是表单元素,如按钮、文本字段和列表框。可以使用FlexComponentExplorerFlexMXML组件浏览工具来查看所有控件的代码和样例。1，加入常用可视控件:使用可视控件组织界面，可以定义组件属性供外部访问A,基于文本的控件(Textcontrols):Label(单行文本显示)、Text(多行文本显示)、TextInput(单行文本显示与输入)、TextArea(多行行文本显示与输入)和RichTextEditor(富文本显示与输入)控件。用于显示文本和/或接收来自用户的文本输入，都有一个text属性用于设置要显示的文本。使用RichTextEditor控件可以输入文本、编辑文本和设置文本格式。用户通过使用位于RichTextEditor控件底部的子控件,应用文本格式和URL链接。B,基于按钮的控件组件(Button系列,Formcontrols):Button(激活时会发出click和buttonDown事件)、LinkButton(用于打开URL)、CheckBox(标签会被自动裁剪以适合控件边界。)、RadioButton(指由mx:RadioButtonGroup标签创建的组)和PopupButton控件(常用于打开List控件或Menu控件签。)。2，加入基于列表的控件，并获取数据基于列表的控件:是在其继承层次结构内的某些点上扩展ListBase类的那些控件。它们包括ComboBox、List、HorizontalList、DataGrid、Tile、Menu和Tree控件。都可从某数据提供程序的数据获得数据列表。另:许多标准控件(包括ColorPicker和MenuBar控件)也是数据提供程序控件。可以使用两种方法设置组件的数据提供程序:1)，直接在MXML标签中加入数据，将Array或Collection定义为取得数据提供程序的控件的子标签。该方法具有实施快速的优点,适合与静态数据一起使用及用于原型设计。mx:ComboBoxid=userRatingwidth=100%!--Aninlinedataprovider--mx:Arraymx:Objectdata=0label=Zero/mx:Objectdata=1label=One//mx:Array/mx:ComboBox2)，使用数据绑定:使用[Bindable]元数据标签(属性非默认绑定,必须明确的声明被绑定的属性)，将控件绑定到使用ActionScript定义的现有Array或Collection。mx:Script![CDATA[[Bindable]privatevarsubscriptions:ArrayCollection=newArrayCollection([{data:0,label:Print},{data:1,label:Website},]);]]/mx:Scriptmx:FormItemlabel=Subscriptions:width=100%mx:Listid=userSubscriptionsrowCount=3allowMultipleSelection=truewidth=100%dataProvider={subscriptions}/3，使用REPEATER:是非可视控件，类似于编程语言里的For循环，可在执行期复制其它组件。mx:Repeater的卷标要自己输入，而dataProvider可在mx:Script区段之中，以[Bindable]的Metadata定义之数组作连结。REPEATER还可嵌套使用。mx:Script![CDATA[[Bindable]publicvardp:Array=[1,2,3,4];]]/mx:Scriptmx:ArrayCollectionid=myACsource={dp}/mx:Repeaterid=rdataProvider={myAC}mx:Buttonid=repbuttonlabel=button{r.currentItem}//mx:Repeater4,加入数据验证:数据模型支持自动数据验证，这就意味着你可以很方便地使用Flex验证器。as3.0验证的类包为mx.Validators.包中有一个基类Validator,其他的类都为其子类:1)，用标签实现验证://绑定验证对象:source:表示验证的对象，property:表示验证对象的属性mx:PhoneNumberValidatorid=pnVsource={phoneInput}property=text/mx:TextInputid=phoneInput/2)，用AS编程实现验证mx:Script![CDATA[importmx.validators.PhoneNumberValidator;//创建验证器privatevarv:PhoneNumberValidator=newPhoneNumberValidator();privatefunctioncreateValidator():void{//设置验证器v.source=phoneInput;v.property=text;}]]/mx:Scriptmx:TextInputid=phoneInputcreationComplete=createValidator();/还可以加入按钮触发器，并修改默认提示错误//trigger:表示触发验证事件的对象//triggerEvent:表示对象触发验证事件的时机(如click,mouseOver等)//requiredFieldError属性表示必填项没填入数据的时的提示错误信息//wrongLengthError:表示输入的数据阿拉伯数字长度小于10时提示的错误信息//invalidCharError:表示输入数据不是阿拉伯数字时提示的错误信息mx:PhoneNumberValidatorid=pnVsource={phoneInput}property=texttrigger={btn}triggerEvent=clickrequiredFieldError=此项为必填invalidCharError=请输入阿拉伯数字wrongLengthError=请至少输入请输入10个阿拉伯数字/mx:TextInputid=phoneInput/mx:Buttonlabel=Buttonid=btn/3)，高级用法:使用正则表达式创建自定义验证器5，加入资源(图片,音频,视频,程序):运行时外载和编译时直接内嵌两种方式，外载方式要多花一段载入时间，但使用简单；内嵌方式可直接调用资源，但加重了程序的负担(体积变大，且图片编辑后需要重新编译)1)，Image(图画)控件:可外载或内嵌多种富媒体资源:JPEG、GIF、PNG位图、SVG矢量图(只能内嵌),SWF动画(非Flex的SWF应用程序。),SWF库按钮(Button)，SWF库动画(MovieClip)，//外载一个富媒体，可使用绝对或者相对路径。但加入SWF文件时，可用use-network参数指定其使用网络或者本地文件二者之一。mx:Imageid=myLogo0source=assets/logo.png///简单地内嵌一个富媒体.png,.jpg,.gif,.swf(可将嵌入的SWF文件的实例当作MovieClip.MovieClipAsset类的实例处理,不能直接访问嵌入的SWF文件的属性或方法。但可用LocalConnection以允许SWF之间进行通信。)，.SVG(可将嵌入的SVG文件的实例当作Sprite.SpriteAsset类的实例处理。)mx:Imageid=myLogosource=@Embed('assets/logo.png')///在脚本中定义富媒体对象，然后在MXML中可以多次嵌入mx:Script![CDATA[[Embed(source=assets/logo.png)][Bindable]publicvarLogo:Class;]]/mx:Scriptmx:Imageid=myLogosource={Logo}/mx:Imageid=myLogo2source={Logo}///在脚本中定义图片的scale-9像框缩放功能就可以保持边框的清晰,(旋转嵌入的scale-9图像的实例会关闭该图像的scale-9功能。)。mx:Script![CDATA[[Embed(source=assets/fancy_border.png,scaleGridTop=55,scaleGridBottom=137,scaleGridLeft=57,scaleGridRight=266)][Bindable]publicvarFancyBorderImage:Class;]]/mx:Scriptmx:Imagesource={FancyBorderImage}width=146height=82///嵌入SWF库资源mx:Script![CDATA[[Embed(source=assets/library.swf,symbol=BadApple)][Bindable]publicvarBadApple:Class;]]/mx:Scriptmx:Imageid=badApplesource={BadApple}width=150height=151.8/2)设置翻转的图片:使用CSS为外观外载/内嵌翻转的图像可以定义一个现有的CSS类型选择器为该类型的所有组件设置外观。还可以进一步创建自定义CSS类。mx:StyleButton{upSkin:Embed(assets/box_closed.png);overSkin:Embed(assets/box.png);downSkin:Embed(assets/box_new.png);}/mx:Stylemx:Button/3),SWFLoader控件:通常用来加入Flex应用程序(可以使用AS与其通信)，当然也能用于加入Image控件所能加入的富媒体资源。//外载入SWF程序mx:SWFLoaderid=loader1source=FlexApp.swf///内嵌入SWF程序mx:SWFLoaderid=loader2source=@Embed(source='flexapp.swf')///还可以在FDS环境下加入MXML文件，要以buttonicon.mxml.swf形式加入，以提示FDS编译该文件。xmlversion=1.0mx:Applicationxmlns:mx=