FlexBuilder学习教程

开发 后端
你对FlexBuilder的概念是否熟悉,本文向大家简单介绍一下FlexBuilder教程,Flex语言包含了一个丰富的用户界面组件库,主要包括MXML和ActionScript。

本文和大家重点学习一下FlexBuilder教程,FlexBuilder实现了代码与界面分开,Flex的类程序扩展名为*.as,语法与java/c++很象,Flex程序文件扩展名为.mxml,其实就是拥有很多特殊元素的XML文件。

FlexBuilder教程

一、概述

Flex语言包含了一个丰富的用户界面组件库,MXML(一种基于XML的标记语言)和ActionScript(基于ECMA262的、强类型面向对象编程语言)。MXML用于排布用户界面和处理应用中其他方面的问题,而ActionScript用来处理用户交互逻辑。由于Flash平台的普及,Flex使开发者可以开发广泛的应用程序。开发者可以使用工业标准(如XML,CSS和SVC)和他们所熟悉的模式和范例来创建应用。Flex的分离协作方式和Flex公用组件模型也使得开发者和界面设计者能更好的进行协作,在可靠的、易于维护的架构上生产出在用户体验方面有突破性的产品。
FlexBuilder(FlexBuilder)之于MXML就如DREAWEAVER之于HTML。FlexBuilder实现了代码与界面分开,Flex的类程序扩展名为*.as,语法与java/c++很象,Flex程序文件扩展名为.mxml,其实就是拥有很多特殊元素的XML文件。

二、使用MXML组件构建用户界面

MXML语言支持两种用户界面组件类型:控件和容器。容器是包含控件和其他容器的屏幕的矩形区域。FlexBuilder控件是表单元素,如按钮、文本字段和列表框。
可以使用FlexComponentExplorerFlexMXML组件浏览工具来查看所有控件的代码和样例。

1,加入常用可视控件:使用可视控件组织界面,可以定义组件属性供外部访问

◆基于文本的控件(Textcontrols):Label(单行文本显示)、Text(多行文本显示)、TextInput(单行文本显示与输入)、TextArea(多行行文本显示与输入)和RichTextEditor(富文本显示与输入)控件。用于显示文本和/或接收来自用户的文本输入,都有一个text属性用于设置要显示的文本。使用RichTextEditor控件可以输入文本、编辑文本和设置文本格式。用户通过使用位于RichTextEditor控件底部的子控件,应用文本格式和URL链接。

◆基于按钮的控件组件(Button系列,Formcontrols):Button(激活时会发出click和buttonDown事件)、LinkButton(用于打开URL)、CheckBox(标签会被自动裁剪以适合控件边界。)、RadioButton(指由标签创建的组)和PopupButton控件(常用于打开List控件或Menu控件签。)。

2,加入基于列表的控件,并获取数据

基于列表的控件:是在其继承层次结构内的某些点上扩展ListBase类的那些控件。它们包括ComboBox、List、HorizontalList、DataGrid、Tile、Menu和Tree控件。都可从某数据提供程序的数据获得数据列表。
另:许多标准控件(包括ColorPicker和MenuBar控件)也是数据提供程序控件。

◆可以使用两种方法设置组件的数据提供程序:

1),直接在MXML标签中加入数据,将Array或Collection定义为取得数据提供程序的控件的子标签。该方法具有实施快速的优点,适合与静态数据一起使用及用于原型设计。
 

  1. <mx:ComboBoxidmx:ComboBoxid="userRating"width="100%"> 
  2.  
  3. <mx:Array> 
  4. <mx:Objectdatamx:Objectdata="0"label="Zero"/> 
  5. <mx:Objectdatamx:Objectdata="1"label="One"/> 
  6. mx:Array> 
  7. mx:ComboBox> 

 2),使用数据绑定:使用[Bindable]元数据标签(属性非默认绑定,必须明确的声明被绑定的属性),将控件绑定到使用ActionScript定义的现有Array或Collection。

  1. <mx:Script> 
  2.  
  3. [Bindable]  
  4. privatevarsubscriptions:ArrayCollection=  
  5. newArrayCollection  
  6. (  
  7. [  
  8. {data:0,label:"Print"},  
  9. {data:1,label:"Website"},  
  10. ]  
  11. );  
  12.  
  13. ]]> 
  14. mx:Script> 
  15. <mx:FormItemlabelmx:FormItemlabel="Subscriptions:"width="100%"> 
  16. <mx:List 
  17. id="userSubscriptions"rowCount="3"  
  18. allowMultipleSelection="true"width="100%"  
  19. dataProvider="{subscriptions}" 
  20. /> 
  21.  

 3,使用REPEATER:是非可视控件,类似于编程语言里的For循环,可在执行期复制其它组件。的卷标要自己输入,而dataProvider可在区段之中,以[Bindable]的Metadata定义之数组作连结。REPEATER还可嵌套使用。
 

  1. <mx:Script> 
  2.  
  3. [Bindable]  
  4. publicvardp:Array=[1,2,3,4];  
  5. ]]> 
  6. mx:Script> 
  7. <mx:ArrayCollectionidmx:ArrayCollectionid="myAC"source="{dp}"/> 
  8.  
  9. <mx:Repeateridmx:Repeaterid="r"dataProvider="{myAC}"> 
  10. <mx:Buttonidmx:Buttonid="repbutton"label="button{r.currentItem}"/> 
  11. mx:Repeater> 
  12.  

 4,加入数据验证:数据模型支持自动数据验证,这就意味着你可以很方便地使用Flex验证器。as3.0验证的类包为mx.Validators.包中有一个基类Validator,其他的类都为其子类:
1),用标签实现验证://绑定验证对象:source:表示验证的对象,property:表示验证对象的属性
 

  1. <mx:PhoneNumberValidatoridmx:PhoneNumberValidatorid="pnV"source="{phoneInput}"property="text"/> 
  2. <mx:TextInputidmx:TextInputid="phoneInput"/> 

2),用AS编程实现验证
 

  1.  
  2. importmx.validators.PhoneNumberValidator;  
  3. //创建验证器  
  4. privatevarv:PhoneNumberValidator=newPhoneNumberValidator();  
  5. privatefunctioncreateValidator():void{  
  6. //设置验证器  
  7. v.source=phoneInput;  
  8. v.property="text";  
  9. }  
  10. ]]> 
  11. mx:Script> 
  12. <mx:TextInputidmx:TextInputid="phoneInput"creationComplete="createValidator();"/> 
  13.  
  14. 还可以加入按钮触发器,并修改默认提示错误//trigger:表示触发验证事件的对象  
  15. //triggerEvent:表示对象触发验证事件的时机(如click,mouseOver等)  
  16. //requiredFieldError属性表示必填项没填入数据的时的提示错误信息  
  17. //wrongLengthError:表示输入的数据阿拉伯数字长度小于10时提示的错误信息  
  18. //invalidCharError:表示输入数据不是阿拉伯数字时提示的错误信息  
  19. <mx:PhoneNumberValidatoridmx:PhoneNumberValidatorid="pnV"source="{phoneInput}"property="text" 
  20. trigger="{btn}"triggerEvent="click"  
  21. requiredFieldError="此项为必填"invalidCharError="请输入阿拉伯数字"wrongLengthError="请至少输入请输入10个阿拉伯数字"/> 
  22. <mx:TextInputidmx:TextInputid="phoneInput"/> 
  23. <mx:Buttonlabelmx:Buttonlabel="Button"id="btn"/> 
  24.  

 3),高级用法:使用正则表达式创建自定义验证器

5,加入资源(图片,音频,视频,程序):运行时外载和编译时直接内嵌两种方式,外载方式要多花一段载入时间,但使用简单;内嵌方式可直接调用资源,但加重了程序的负担(体积变大,且图片编辑后需要重新编译)

1),Image(图画)控件:可外载或内嵌多种富媒体资源:JPEG、GIF、PNG位图、SVG矢量图(只能内嵌),SWF动画(非Flex的SWF应用程序。),SWF库按钮(Button),SWF库动画(MovieClip),//外载一个富媒体,可使用绝对或者相对路径。
但加入SWF文件时,可用use-network参数指定其使用网络或者本地文件二者之一。
 

  1. <mx:Imageidmx:Imageid="myLogo0"source="assets/logo.png"/> 
  2. //简单地内嵌一个富媒体.png,.jpg,.gif,  
  3. .swf(可将嵌入的SWF文件的实例当作MovieClip.MovieClipAsset类的实例处理,不能直接访问嵌入的SWF文件的属性或方法。  
  4. 但可用LocalConnection以允许SWF之间进行通信。),  
  5. .SVG(可将嵌入的SVG文件的实例当作Sprite.SpriteAsset类的实例处理。)  
  6. <mx:Imageidmx:Imageid="myLogo"source="@Embed('assets/logo.png')"/> 
  7. //在脚本中定义富媒体对象,然后在MXML中可以多次嵌入  
  8. <mx:Script> 
  9.  
  10. [Embed(source="assets/logo.png")]  
  11. [Bindable]  
  12. publicvarLogo:Class;  
  13. ]]> 
  14. mx:Script> 
  15. <mx:Imageidmx:Imageid="myLogo"source="{Logo}"/> 
  16. <mx:Imageidmx:Imageid="myLogo2"source="{Logo}"/> 
  17. //在脚本中定义图片的scale-9像框缩放功能就可以保持边框的清晰,  
  18. (旋转嵌入的scale-9图像的实例会关闭该图像的scale-9功能。)。  
  19. <mx:Script> 
  20.  
  21. [Embed(  
  22. source="assets/fancy_border.png",  
  23. scaleGridTop="55",scaleGridBottom="137",  
  24. scaleGridLeft="57",scaleGridRight="266"  
  25. )]  
  26.  
  27. [Bindable]  
  28. publicvarFancyBorderImage:Class;  
  29. ]]> 
  30. mx:Script> 
  31. <mx:Imagesourcemx:Imagesource="{FancyBorderImage}"width="146"height="82"/> 
  32. //嵌入SWF库资源  
  33.  
  34. <mx:Script> 
  35.  
  36. [Embed(source="assets/library.swf",symbol="BadApple")]  
  37. [Bindable]  
  38. publicvarBadApple:Class;  
  39. ]]> 
  40. mx:Script> 
  41. <mx:Imageidmx:Imageid="badApple"source="{BadApple}"width="150" 
  42. height="151.8"/> 
  43.  

 2)设置翻转的图片:使用CSS为外观外载/内嵌翻转的图像

可以定义一个现有的CSS类型选择器为该类型的所有组件设置外观。还可以进一步创建自定义CSS类。
 

  1. <mx:Style> 
  2. Button  
  3. {  
  4. upSkin:Embed("assets/box_closed.png");  
  5. overSkin:Embed("assets/box.png");  
  6. downSkin:Embed("assets/box_new.png");  
  7. }  
  8. mx:Style> 
  9.  
  10. <mx:Button/> 
  11.  

 3),SWFLoader控件:通常用来加入Flex应用程序(可以使用AS与其通信),当然也能用于加入Image控件所能加入的富媒体资源。

  1. //外载入SWF程序  
  2. <mx:SWFLoaderidmx:SWFLoaderid="loader1"source="FlexApp.swf"/> 
  3. //内嵌入SWF程序  
  4. <mx:SWFLoaderidmx:SWFLoaderid="loader2"source="@Embed(source='Flexapp.swf')"/> 
  5. //还可以在FDS环境下加入MXML文件,要以buttonicon.mxml.swf形式加入,以提示FDS编译该文件。  
  6. <xmlversionxmlversion="1.0"> 
  7. <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
  8. <mx:SWFLoadersourcemx:SWFLoadersource="buttonicon.mxml.swf"scaleContent="false"/> 
  9. mx:Application> 
  10.  

 4),加入MP3音频:您可以在Flex应用程序中通过使用[Embed]元数据标签嵌入MP3文件并播放它。注意音频文件的体积要优化。

  1. <mx:Script> 
  2.  
  3. importmx.core.SoundAsset;  
  4. importflash.media.*;  
  5. [Embed(source="assets/pie-yan-knee.mp3")]  
  6. [Bindable]  
  7. //MP3的一个新实例  
  8. publicvarSong:Class;  
  9. //将该实例创建为一个SoundAsset  
  10. publicvarmySong:SoundAsset=newSong()asSoundAsset;  
  11. publicvarchannel:SoundChannel;  
  12. //使用SoundAsset类的play()方法来播放MP3文件的实例  
  13. publicfunctionplaySound():void  
  14. {  
  15. //先消音,防止同时多次播放  
  16. stopSound();  
  17. //播放该音频,并存储返回的SoundChannel对象结束播放。  
  18. channel=mySong.play();  
  19. }  
  20.  
  21. publicfunctionstopSound():void  
  22. {  
  23. //当音频播放时,调用SoundChannel对象的stop()方法以停止播放  
  24. if(channel!=null)channel.stop();  
  25. }  
  26. ]]> 
  27. mx:Script> 
  28. <mx:Buttonlabelmx:Buttonlabel="play"click="playSound();"/> 
  29. <mx:Buttonlabelmx:Buttonlabel="stop"click="stopSound();"/> 
  30.  

 5),加入字体:您希望在Flex应用程序中嵌入一种字体并将它用作基于文本的组件的样式。

下面的示例创建引用嵌入的字体的font-family名称的一个类选择器。接着它会创建一个Text控件并将其样式设置为该类选择器。
提示:您在嵌入字体以节省文件大小时仅可以从字体添加某些字符,方法是指定您的@font-face声明的unicode-range属性。
 

  1. <mx:Style> 
  2. @font-face  
  3. {  
  4. font-family:Copacetix;  
  5. src:url("assets/copacetix.ttf");  
  6. unicode-range:  
  7. U+0020-U+0040,  
  8. U+0041-U+005A,  
  9. U+005B-U+0060,  
  10. U+0061-U+007A,  
  11. U+007B-U+007E;  
  12. }  
  13. .MyTextStyle  
  14. {  
  15. font-family:Copacetix;  
  16. font-size:24pt;  
  17. }  
  18. mx:Style> 
  19. <mx:TextstyleNamemx:TextstyleName="MyTextStyle"text="Embeddedfontsrock!"width="100%"/> 

 三,FlexBuilder中数据绑定

以MXML标记来描述UI,数据绑定(Databinding)来连接数据,这样就真正实现了UI和程序逻辑的分离。Databinding可以一绑多或者多绑一。

1,在MXML中使用大括号{}语句:格式为:{源对象.属性}。可直接传送给目标对象;高级用法是在{}中包含AS表达式、AS函数或者E4X表达式

2,在MXML中使用标签:这是{}语句的替代用法,格式为:;高级用法是在标签中包含AS表达式或者E4X表达式//在Model数据中使用{}语句来绑定数据

  1. <mx:Modelidmx:Modelid="thing1"> 
  2. <data> 
  3. <part>{input1.text}part> 
  4. data> 
  5. mx:Model> 
  6. //用<mx:Binding>标签来绑定数据  
  7. <mx:Bindingsourcemx:Bindingsource="input2.text"destination="thing1.part"/> 
  8. <mx:TextInputidmx:TextInputid="input1"/> 
  9. <mx:TextInputidmx:TextInputid="input2"/> 
  10.  
  11. <mx:TextAreatextmx:TextAreatext="{thing1.part}"/> 
  12.  

 3,使用AS类来绑定:使用mx.binding.utils.BindingUtils的bindProperty()或者bindSetter()方法

【编辑推荐】

  1. Flex及FlexBuilder2.0开发环境详解
  2. Flex安全沙箱问题解决方法
  3. 技术前沿 看Flex客户端缓存技术如何使用
  4. FlexBuilder更名成FlashBuilder 其功能是否有更新
  5. Flex内存泄露解决方法和内存释放优化原则
责任编辑:佚名 来源: csdn.net
相关推荐

2010-08-03 15:54:43

FlexBuilder

2010-08-03 15:44:08

FlexBuilder

2010-08-03 16:13:01

FlexBuilder

2010-08-03 15:19:08

FlexBuilder

2010-08-03 15:30:00

FlexBuilder

2010-08-02 14:59:48

FlexBuilder

2010-07-27 09:24:21

2010-08-09 10:11:08

FlexBuilder

2010-08-03 16:03:00

FlexBuilder

2010-08-03 12:53:51

FlexBuilder

2010-08-09 09:56:12

FlexBuilder

2010-08-03 15:36:38

FlexBuilder

2010-08-06 09:06:26

FlexBuilder

2010-08-05 15:13:43

FlexBuilder

2010-08-02 15:39:10

FlexBuilder

2010-07-27 08:59:19

FlexBuilder

2010-08-05 15:40:21

FlexBuilder

2010-08-11 09:11:19

FlexBuilder

2010-08-03 13:20:53

FlexBuilder

2010-07-28 09:49:27

FlexBuilder
点赞
收藏

51CTO技术栈公众号