FlexBuilder入门指南

开发 后端
本文向大家介绍一下FlexBuilder教程中的一些基础知识,主要包括FlexBuilder概述,使用MXML组件构建用户界面等内容。

 本文和大家重点学习一下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语言支持两种用户界面组件类型:控件和容器。容器是包含控件和其他容器的屏幕的矩形区域。控件是表单元素,如按钮、文本字段和列表框。

可以使用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控件签。)。#p#

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

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

另:许多标准控件(包括ColorPicker和MenuBar控件)也是数据提供程序控件。

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

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

  1. <mx:ComboBoxidmx:ComboBoxid="userRating"width="100%"> 
  2. <!--Aninlinedataprovider--> 
  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. <![CDATA[  
  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循环,可在执行期复制其它组件。<mx:Repeater>的卷标要自己输入,而dataProvider可在<mx:Script>区段之中,以[Bindable]的Metadata定义之数组作连结。REPEATER还可嵌套使用。

 

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

 
4,加入数据验证:数据模型支持自动数据验证,这就意味着你可以很方便地使用Flex验证器。as3.0验证的类包为mx.Validators.包中有一个基类Validator,其他的类都为其子类:

1),用标签实现验证://绑定验证对象:source:表示验证的对象,property:表示验证对象的属性
 

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

 2),用AS编程实现验证<mx:Script>

 

  1. <![CDATA[  
  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.  
  13. <mx:TextInputidmx:TextInputid="phoneInput"creationComplete="createValidator();"/> 
  14.  
  15. 还可以加入按钮触发器,并修改默认提示错误//trigger:表示触发验证事件的对象  
  16. //triggerEvent:表示对象触发验证事件的时机(如click,mouseOver等)  
  17. //requiredFieldError属性表示必填项没填入数据的时的提示错误信息  
  18. //wrongLengthError:表示输入的数据阿拉伯数字长度小于10时提示的错误信息  
  19. //invalidCharError:表示输入数据不是阿拉伯数字时提示的错误信息  
  20. <mx:PhoneNumberValidatoridmx:PhoneNumberValidatorid="pnV"source="{phoneInput}"property="text" 
  21. trigger="{btn}"triggerEvent="click"  
  22. requiredFieldError="此项为必填"invalidCharError="请输入阿拉伯数字"wrongLengthError="请至少输入请输入10个阿拉伯数字"/> 
  23.  
  24. <mx:TextInputidmx:TextInputid="phoneInput"/> 
  25. <mx:Buttonlabelmx:Buttonlabel="Button"id="btn"/> 
  26.  

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

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

 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控件所能加入的富媒体资源。//外载入SWF程序
 

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

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

 

  1. <mx:Script> 
  2. <![CDATA[  
  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.  
  6. src:url("assets/copacetix.ttf");  
  7. unicode-range:  
  8. U+0020-U+0040,/*Punctuation,Numbers*/  
  9.  
  10. U+0041-U+005A,/*Upper-CaseA-Z*/  
  11. U+005B-U+0060,/*PunctuationandSymbols*/  
  12. U+0061-U+007A,/*Lower-Casea-z*/  
  13. U+007B-U+007E;/*PunctuationandSymbols*/  
  14.  
  15. }  
  16.  
  17. .MyTextStyle  
  18. {  
  19. font-family:Copacetix;  
  20. font-size:24pt;  
  21. }  
  22.  
  23. </mx:Style> 
  24.  
  25. <mx:TextstyleNamemx:TextstyleName="MyTextStyle"text="Embeddedfontsrock!"width="100%"/> 
  26.  

 【编辑推荐】

  1. 安装FlexBuilder开发利器的两种方式
  2. 从Flex Builder更名看Flash平台战略
  3. Flex及FlexBuilder2.0开发环境详解
  4. FlexBuilder3.0与Eclipse3.4的完美结合
  5. 学习笔记 FlexBuilder2.0中如何使用基于Lists的控件 
责任编辑:佚名 来源: javaeye.com
相关推荐

2010-08-06 09:06:26

FlexBuilder

2010-08-05 15:40:21

FlexBuilder

2010-07-27 08:59:19

FlexBuilder

2010-08-02 13:47:47

FlexBuilder

2010-07-27 09:24:21

2010-08-09 10:11:08

FlexBuilder

2010-08-09 09:56:12

FlexBuilder

2010-08-03 12:53:51

FlexBuilder

2011-03-08 09:22:37

2011-05-18 15:15:44

MySQL

2021-03-26 10:31:19

人工智能AIOps

2010-08-05 15:13:43

FlexBuilder

2010-07-20 16:13:25

Perl线程

2011-03-08 16:50:35

2022-05-08 16:42:27

Rust编程语言

2015-09-24 09:54:32

物联网

2019-07-18 07:52:01

路由策略IP路由

2011-01-10 13:21:45

linuxsamba

2010-12-31 13:30:12

2013-01-08 13:33:07

Android开发Activity入门指南
点赞
收藏

51CTO技术栈公众号