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定义为取得数据提供程序的控件的子标签。该方法具有实施快速的优点,适合与静态数据一起使用及用于原型设计

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

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

 

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

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

 

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

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

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

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

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

 

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

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

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

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

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

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

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

 

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

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

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

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

 

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

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

下面的示例创建引用嵌入的字体的font-family名称的一个类选择器。接着它会创建一个Text控件并将其样式设置为该类选择器。

提示:您在嵌入字体以节省文件大小时仅可以从字体添加某些字符,方法是指定您的@font-face声明的unicode-range属性。

 

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

2011-03-08 09:22:37

2010-07-27 09:24:21

2010-08-09 10:11:08

FlexBuilder

2011-05-18 15:15:44

MySQL

2021-03-26 10:31:19

人工智能AIOps

2010-08-03 12:53:51

FlexBuilder

2010-08-09 09:56:12

FlexBuilder

2010-07-20 16:13:25

Perl线程

2019-07-18 07:52:01

路由策略IP路由

2010-12-31 13:30:12

2011-03-08 16:50:35

2022-05-08 16:42:27

Rust编程语言

2024-11-19 15:07:07

2015-09-24 09:54:32

物联网

2011-01-10 13:21:45

linuxsamba

2013-01-08 13:33:07

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

51CTO技术栈公众号