软件工程FlexBuilder教程.docx
《软件工程FlexBuilder教程.docx》由会员分享,可在线阅读,更多相关《软件工程FlexBuilder教程.docx(18页珍藏版)》请在冰豆网上搜索。
![软件工程FlexBuilder教程.docx](https://file1.bdocx.com/fileroot1/2022-12/7/03490099-1c79-413d-9dd0-8d72def32704/03490099-1c79-413d-9dd0-8d72def327041.gif)
软件工程FlexBuilder教程
【软件工程】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(指由RadioButtonGroup>标签创建的组)和PopupButton控件(常用于打开List控件或Menu控件签。
)。
2,加入基于列表的控件,并猎取数据
基于列表的控件:
是在其继承层次结构内的某些点上扩展ListBase类的那些控件。
它们包括ComboBox、List、HorizontalList、DataGrid、Tile、Menu和Tree控件。
都可从某数据提供程序的数据获得数据列表。
另:
许多标准控件(包括ColorPicker和MenuBar控件)也是数据提供程序控件。
能够使用两种方法设置组件的数据提供程序:
1),直截了当在MXML标签中加入数据,将Array或Collection定义为取得数据提供程序的控件的子标签。
该方法具有实施快速的优点,适合与静态数据一起使用及用于原型设计。
ComboBoxid="userRating"width="100%">
--Aninlinedataprovider-->
Array>
Objectdata="0"label="Zero"/>
Objectdata="1"label="One"/>
Array>
ComboBox>
2),使用数据绑定:
使用[Bindable]元数据标签(属性非默认绑定,必须明确的声明被绑定的属性),将控件绑定到使用ActionScript定义的现有Array或Collection。
Script>
[CDATA[
[Bindable]
privatevarsubscriptions:
ArrayCollection=
newArrayCollection
(
[
{data:
0,label:
"Print"},
{data:
1,label:
"Website"},
]
);
]]>
Script>
FormItemlabel="Subscriptions:
"width="100%">
List
id="userSubscriptions"rowCount="3"
allowMultipleSelection="true"width="100%"
dataProvider="{subscriptions}"
/>
3,使用REPEATER:
是非可视控件,类似于编程语言里的For循环,可在执行期复制其它组件。
Repeater>的卷标要自己输入,而dataProvider可在Script>区段之中,以[Bindable]的Metadata定义之数组作连结。
REPEATER还可嵌套使用。
Script>
[CDATA[
[Bindable]
publicvardp:
Array=[1,2,3,4];
]]>
Script>
ArrayCollectionid="myAC"source="{dp}"/>
Repeaterid="r"dataProvider="{myAC}">
Buttonid="repbutton"label="button{r.currentItem}"/>
Repeater>
4,加入数据验证:
数据模型支持自动数据验证,这就意味着你能够专门方便地使用Flex验证器。
as3.0验证的类包为mx.Validators.包中有一个基类Validator,其他的类都为其子类:
1),用标签实现验证:
//绑定验证对象:
source:
表示验证的对象,property:
表示验证对象的属性
PhoneNumberValidatorid="pnV"source="{phoneInput}"property="text"/>
TextInputid="phoneInput"/>
2),用AS编程实现验证Script>
[CDATA[
importmx.validators.PhoneNumberValidator;
//创建验证器
privatevarv:
PhoneNumberValidator=newPhoneNumberValidator();
privatefunctioncreateValidator():
void{
//设置验证器
v.source=phoneInput;
v.property="text";
}
]]>
Script>
TextInputid="phoneInput"creationComplete="createValidator();"/>
还能够加入按钮触发器,并修改默认提示错误//trigger:
表示触发验证事件的对象
//triggerEvent:
表示对象触发验证事件的时机(如click,mouseOver等)
//requiredFieldError属性表示必填项没填入数据的时的提示错误信息
//wrongLengthError:
表示输入的数据阿拉伯数字长度小于10时提示的错误信息
//invalidCharError:
表示输入数据不是阿拉伯数字时提示的错误信息
PhoneNumberValidatorid="pnV"source="{phoneInput}"property="text"
trigger="{btn}"triggerEvent="click"
requiredFieldError="此项为必填"invalidCharError="请输入阿拉伯数字"wrongLengthError="请至少输入请输入10个阿拉伯数字"/>
TextInputid="phoneInput"/>
Buttonlabel="Button"id="btn"/>
3),高级用法:
使用正那么表达式创建自定义验证器
5,加入资源(图片,音频,视频,程序):
运行时外载和编译时直截了当内嵌两种方式,外载方式要多花一段载入时刻,但使用简单;内嵌方式可直截了当调用资源,但加重了程序的负担(体积变大,且图片编辑后需要重新编译)
1),Image(图画)控件:
可外载或内嵌多种富媒体资源:
JPEG、GIF、PNG位图、SVG矢量图(只能内嵌),SWF动画(非Flex的SWF应用程序。
),SWF库按钮(Button),SWF库动画(MovieClip),//外载一个富媒体,可使用绝对或者相对路径。
但加入SWF文件时,可用use-network参数指定其使用网络或者本地文件二者之一。
Imageid="myLogo0"source="assets/logo.png"/>
//简单地内嵌一个富媒体.png,.jpg,.gif,
.swf(可将嵌入的SWF文件的实例当作MovieClip.MovieClipAsset类的实例处理,
不能直截了当访问嵌入的SWF文件的属性或方法。
但可用LocalConnection以承诺SWF之间进行通信。
),
.SVG(可将嵌入的SVG文件的实例当作Sprite.SpriteAsset类的实例处理。
)
Imageid="myLogo"source="@Embed('assets/logo.png')"/>
//在脚本中定义富媒体对象,然后在MXML中能够多次嵌入
Script>
[CDATA[
[Embed(source="assets/logo.png")]
[Bindable]
publicvarLogo:
Class;
]]>
Script>
Imageid="myLogo"source="{Logo}"/>
Imageid="myLogo2"source="{Logo}"/>
//在脚本中定义图片的scale-9像框缩放功能就能够保持边框的清晰,
(旋转嵌入的scale-9图像的实例会关闭该图像的scale-9功能。
)。
Script>
[CDATA[
[Embed(
source="assets/fancy_border.png",
scaleGridTop="55",scaleGridBottom="137",
scaleGridLeft="57",scaleGridRight="266"
)]
[Bindable]
publicvarFancyBorderImage:
Class;
]]>
Script>
Imagesource="{FancyBorderImage}"width="146"height="82"/>
//嵌入SWF库资源
Script>
[CDATA[
[Embed(source="assets/library.swf",symbol="BadApple")]
[Bindable]
publicvarBadApple:
Class;
]]>
Script>
Imageid="badApple"source="{BadApple}"width="150"
height="151.8"/>
2)设置翻转的图片:
使用CSS为外观外载/内嵌翻转的图像
能够定义一个现有的CSS类型选择器为该类型的所有组件设置外观。
还能够进一步创建自定义CSS类。
Style>
Button
{
upSkin:
Embed("assets/box_closed.png");
overSkin:
Embed("assets/box.png");
downSkin:
Embed("assets/box_new.png");
}
Style>
Button/>
3),SWFLoader控件:
通常用来加入Flex应用程序(能够使用AS与其通信),因此也能用于加入Image控件所能加入的富媒体资源。
//外载入SWF程序
SWFLoaderid="loader1"source="FlexApp.swf"/>
//内嵌入SWF程序
SWFLoaderid="loader2"source="@Embed(source='flexapp.swf')"/>
//还能够在FDS环境下加入MXML文件,要以buttonicon.mxml.swf形式加入,以提示FDS编译该文件。
Applicationxmlns:
mx=":
//adobe/2006/mxml">
SWFLoadersource="buttonicon.mxml.swf"scaleContent="false"/>
Application>
4),加入MP3音频:
您能够在Flex应用程序中通过使用[Embed]元数据标签嵌入MP3文件并播放它。
注意音频文件的体积要优化。
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();
}
]]>
Script>
Buttonlabel="play"click="playSound();"/>
Buttonlabel="stop"click="stopSound();"/>
5),加入字体:
您期望在Flex应用程序中嵌入一种字体并将它用作基于文本的组件的样式。
下面的例如创建引用嵌入的字体的font-family名称的一个类选择器。
接着它会创建一个Text控件并将其样式设置为该类选择器。
提示:
您在嵌入字体以节约文件大小时仅能够从字体添加某些字符,方法是指定您的@font-face声明的unicode-range属性。
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;
}
Style>
TextstyleName="MyTextStyle"text="Embeddedfontsrock!
"width="100%"/>
三,数据绑定
以MXML标记来描述UI,数据绑定(Databinding)来连接数据,如此就真正实现了UI和程序逻辑的分离。
Databinding能够一绑多或者多绑一。
1,在MXML中使用大括号{}语句:
格式为:
{源对象.属性}。
可直截了当传送给目标对象;高级用法是在{}中包含AS表达式、AS函数或者E4X表达式
2,在MXML中使用Binding>标签:
这是{}语句的替代用法,格式为:
Bindingsource="源对象.属性"destination="目标对象.属性"/>;高级用法是在标签中包含AS表达式或者E4X表达式 //在Model数据中使用{}语句来绑定数据
Modelid="thing1">
{input1.text}
Model>
//用Binding>标签来绑定数据
Bindingsource="input2.text"destination="thing1.part"/>
TextInputid="input1"/>
TextInputid="input2"/>
TextAreatext="{thing1.part}"/>
3,使用AS类来绑定:
使用mx.binding.utils.BindingUtils的bindProperty()或者bindSetter()方法
四,界面布局和导航
容器定义了FlashPlayer的绘图表面的一个矩形区域。
子容器包括控件和容器。
Container类是所有Flex容器类的差不多类。
扩展Container类的容器添加它们自己的功能以进行子组件布局。
Application容器是的Flex应用程序的唯独根部容器,代表整个FlashPlayer绘图表面。
1,布局容器:
使用布局容器可进行用户界面布局。
A,面板(Panel)容器 显示一个标题栏、一个标题、一个边框及其子级。
默认情形下,Panel容器会对子组件进行垂直布局,同时能够通过将布局属性设置为"absolute"或"horizontal"来覆盖此设置。
B,HDividedBox容器 对子组件进行水平布局,除了在子级之间插入一个可调整的分割线之外,它与HBox容器专门相似。
VDividedBox容器对子组件进行垂直布局,而且也在子级之间插入一个可调整的分割线。
C,平铺(Tile)容器 以多行或多列的形式排列其子级。
D,表单(Form)容器 以标准的表单格式排列其子级。
E,ApplicationControlBar容器 容纳提供全局导航和应用程序命令的组件,并能够停靠在Application容器的上边缘。
F,ControlBar容器将控件置于Panel或TitleWindow容器的下边缘。