FlexBuilder教程.docx
- 文档编号:1483264
- 上传时间:2022-10-22
- 格式:DOCX
- 页数:23
- 大小:149.33KB
FlexBuilder教程.docx
《FlexBuilder教程.docx》由会员分享,可在线阅读,更多相关《FlexBuilder教程.docx(23页珍藏版)》请在冰豆网上搜索。
FlexBuilder教程
FlexBuilder教程
来源:
作者:
时间:
2008-09-15点击:
224
,概述
XML,CSS
ActionScript(基于ECMA262的、强类型面向对象编程语言)。
处理应用中其他方面的问题,而ActionScript用来处理用户交互逻辑。
由于Flash平台的普及,Flex使开发者可以开发广泛的应用程序。
开发者可以使用工业标准(如
户体验方面有突破性的产品。
FlexBuilder(FB)之于MXM就如DREAWEAVER于HTMLFB实现了代码与界面分开,FLEX
的类程序扩展名为*.as,语法与java/c++很象,FLEX程序文件扩展名为.mxml,其实就是拥有很多特殊元素的XML文件。
,使用MXM组件构建用户界面
MXML语言支持两种用户界面组件类型:
控件和容器。
容器是包含控件和其他容器的屏幕的矩形区域。
控件是表单元素,如按钮、文本字段和列表框。
可以使用FlexMXML组件浏览工具来查看所有控件的代码和样例。
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控件)也是数据提供程序控件。 可以使用两种方法设置组件的数据提供程序 FlexBuilder教程 来源: 作者: 时间: 2008-09-15点击: 224 1),直接在MXM标签中加入数据,将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定义之数组作连结。 REPEATE还可嵌套使用。 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),lmage(图画)控件: 可外载或内嵌多种富媒体资源: JPEGGIF、PNG位图、SVG矢量图(只能内嵌),SWF动画(非Flex的SWF应用程序。 ),SWF库按钮(Button),SWF库动画(MovieClip), //外载一个富媒体,可使用绝对或者相对路径。 但加入SWF文件时,可用use-network参数指定其使用网络或者本地文件二者之 Imageid="myLogo0"source="assets/logo.png"/> //简单地内嵌一个富媒体.png,.jpg,.gif, .swf(可将嵌入的SWF文件的实例当作MovieCIip.MovieCIipAsset类的实例处 理,不能直接访问嵌入的SWF文件的属性或方法。 但可用LocalConnection以允许SWF之间进行通信。 ), .SVG(可将嵌入的SVG文件的实例当作Sprite.SpriteAsset类的实例处理。 ) Imageid="myLogo"source="@Embed('assets/logo.png')"/> II在脚本中定义富媒体对象,然后在MXM中可以多次嵌入 Script> [CDATA[ [Embed(source="assetsIlogo.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; ]]
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- FlexBuilder 教程