Flex Builder教程
Flex Builder教程
一,概述
Flex语言包含了一个丰富的用户界面组件库,MXML(一种基于XML的标记语言)和ActionScript(基于ECMA 262的、强类型面向对象编程语言)。MXML用于排布用户界面和处理应用中其他方面的问题,而ActionScript用来处理用户交互逻辑。由于Flash平台的普及, Flex使开发者可以开发广泛的应用程序。开发者可以使用工业标准(如XML,CSS和SVC)和他们所熟悉的模式和范例来创建应用。Flex的分离协作方式和Flex公用组件模型也使得开发者和界面设计者能更好的进行协作,在可靠的、易于维护的架构上生产出在用户体验方面有突破性的产品。
Flex Builder(FB)之于MXML就如DREAWEAVER之于HTML。FB实现了代码与界面分开,FLEX的类程序扩展名为*.as,语法与java/c++很象,FLEX程序文件扩展名为.mxml,其实就是拥有很多特殊元素的XML文件。
二,使用MXML组件构建用户界面
MXML 语言支持两种用户界面组件类型: 控件和容器。容器是包含控件和其他容器的屏幕的矩形区域。控件是表单元素, 如按钮、文本字段和列表框。
可以使用Flex Component ExplorerFlex MXML组件浏览工具来查看所有控件的代码和样例。
1,加入常用可视控件: 使用可视控件组织界面,可以定义组件属性供外部访问
A, 基于文本的控件(Text controls): Label(单行文本显示)、Text(多行文本显示)、TextInput(单行文本显示与输入)、 TextArea(多行行文本显示与输入)和 RichTextEditor (富文本显示与输入)控件。用于显示文本和/或接收来自用户的文本输入,都有一个 text 属性用于设置要显示的文本。使用 RichTextEditor 控件可以输入文本、编辑文本和设置文本格式。用户通过使用位于 RichTextEditor 控件底部的子控件, 应用文本格式和 URL 链接。
B, 基于按钮的控件组件(Button 系列,Form controls):Button(激活时会发出click和buttonDown事件)、LinkButton(用于打开URL)、CheckBox(标签会被自动裁剪以适合控件边界。)、RadioButton(指由 <mx:RadioButtonGroup> 标签创建的组) 和 PopupButton 控件(常用于打开List控件或Menu控件签。)。
2,加入基于列表的控件,并获取数据
基于列表的控件: 是在其继承层次结构内的某些点上扩展 ListBase 类的那些控件。它们包括 ComboBox、List、HorizontalList、DataGrid、Tile、Menu 和 Tree 控件。都可从某数据提供程序的数据获得数据列表。
另: 许多标准控件 (包括 ColorPicker 和 MenuBar 控件) 也是数据提供程序控件。
可以使用两种方法设置组件的数据提供程序:
1),直接在MXML标签中加入数据,将 Array 或 Collection 定义为取得数据提供程序的控件的子标签。该方法具有实施快速的优点, 适合与静态数据一起使用及用于原型设计。
2),使用数据绑定: 使用[Bindable]元数据标签(属性非默认绑定,必须明确的声明被绑定的属性),将控件绑定到使用 ActionScript 定义的现有 Array 或 Collection。
3, 使用REPEATER: 是非可视控件,类似于编程语言里的For循环,可在执行期复制其它组件。<mx:Repeater>的卷标要自己输入,而dataProvider可在<mx:Script>区段之中,以[Bindable]的Metadata定义之数组作连结。REPEATER还可嵌套使用。
4, 加入数据验证:数据模型支持自动数据验证,这就意味着你可以很方便地使用Flex验证器。as3.0验证的类包为mx.Validators.包中有一个基类Validator,其他的类都为其子类:
1),用标签实现验证: //绑定验证对象:source:表示验证的对象,property:表示验证对象的属性
2),用AS编程实现验证 <mx:Script>
还可以加入按钮触发器,并修改默认提示错误 //trigger:表示触发验证事件的对象
//triggerEvent:表示对象触发验证事件的时机(如click,mouseOver等)
//requiredFieldError属性 表示必填项没填入数据的时的提示错误信息
//wrongLengthError:表示输入的数据阿拉伯数字长度小于10时提示的错误信息
//invalidCharError:表示输入数据不是阿拉伯数字时提示的错误信息
3),高级用法: 使用正则表达式创建自定义验证器
5, 加入资源(图片,音频,视频,程序):运行时外载和编译时直接内嵌两种方式,外载方式要多花一段载入时间,但使用简单;内嵌方式可直接调用资源,但加重了程序的负担(体积变大,且图片编辑后需要重新编译)
1),Image(图画)控件: 可外载或内嵌多种富媒体资源: JPEG、GIF、PNG位图、SVG矢量图(只能内嵌) , SWF动画(非Flex的SWF应用程序。),SWF库按钮(Button),SWF库动画(MovieClip), //外载一个富媒体,可使用绝对或者相对路径。
但加入SWF文件时,可用use-network参数指定其使用网络或者本地文件二者之一。
<mx:Image id="myLogo0" source="assets/logo.png"/>
//简单地内嵌一个富媒体.png,.jpg,.gif,
.swf(可将嵌入的SWF文件的实例当作 MovieClip.MovieClipAsset 类的实例处理,
不能直接访问嵌入的SWF文件的属性或方法。
但可用 LocalConnection以允许SWF之间进行通信。),
.SVG(可将嵌入的SVG文件的实例当作Sprite.SpriteAsset类的实例处理。)
<mx:Image id="myLogo" source="@Embed('assets/logo.png')"/>
//在脚本中定义富媒体对象,然后在MXML中可以多次嵌入
//在脚本中定义图片的scale-9像框缩放功能就可以保持边框的清晰,
(旋转嵌入的scale-9 图像的实例会关闭该图像的scale-9功能。)。
<mx:Script>
//嵌入 SWF 库资源
height="151.8"/>
2) 设置翻转的图片:使用 CSS为外观外载/内嵌翻转的图像
可以定义一个现有的CSS类型选择器为该类型的所有组件设置外观。还可以进一步创建自定义CSS 类。
3), SWFLoader控件: 通常用来加入Flex应用程序(可以使用AS与其通信),当然也能用于加入Image控件所能加入的富媒体资源。 //外载入SWF程序
<mx:SWFLoader id="loader1" source="FlexApp.swf"/>
//内嵌入SWF程序
<mx:SWFLoader id="loader2" source="@Embed(source='flexapp.swf')"/>
//还可以在FDS环境下加入MXML文件,要以buttonicon.mxml.swf形式加入,以提示FDS编译该文件。
<xml version="1.0">
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
</mx:Application>
4), 加入MP3音频: 您可以在 Flex 应用程序中通过使用[Embed]元数据标签嵌入MP3文件并播放它。注意音频文件的体积要优化。
5), 加入字体: 您希望在 Flex 应用程序中嵌入一种字体并将它用作基于文本的组件的样式。
下面的示例创建引用嵌入的字体的 font-family 名称的一个类选择器。 接着它会创建一个 Text 控件并将其样式设置为该类选择器。
提示: 您在嵌入字体以节省文件大小时仅可以从字体添加某些字符, 方法是指定您的 @font-face 声明的 unicode-range 属性。
三,数据绑定
以MXML标记来描述UI,数据绑定(Data binding)来连接数据,这样就真正实现了UI和程序逻辑的分离。Data binding可以一绑多或者多绑一。
1, 在MXML中使用大括号{}语句: 格式为:{源对象.属性}。可直接传送给目标对象;高级用法是在{}中包含AS表达式、AS函数或者E4X表达式
2, 在MXML中使用<mx:Binding>标签:这是{}语句的替代用法,格式为:<mx:Binding source="源对象.属性" destination="目标对象.属性"/>;高级用法是在标签中包含AS表达式或者E4X表达式
3, 使用AS类来绑定:使用mx.binding.utils.BindingUtils的bindProperty()或者bindSetter() 方法
Flex Builder教程
一,概述
Flex语言包含了一个丰富的用户界面组件库,MXML(一种基于XML的标记语言)和ActionScript(基于ECMA 262的、强类型面向对象编程语言)。MXML用于排布用户界面和处理应用中其他方面的问题,而ActionScript用来处理用户交互逻辑。由于Flash平台的普及, Flex使开发者可以开发广泛的应用程序。开发者可以使用工业标准(如XML,CSS和SVC)和他们所熟悉的模式和范例来创建应用。Flex的分离协作方式和Flex公用组件模型也使得开发者和界面设计者能更好的进行协作,在可靠的、易于维护的架构上生产出在用户体验方面有突破性的产品。
Flex Builder(FB)之于MXML就如DREAWEAVER之于HTML。FB实现了代码与界面分开,FLEX的类程序扩展名为*.as,语法与java/c++很象,FLEX程序文件扩展名为.mxml,其实就是拥有很多特殊元素的XML文件。
二,使用MXML组件构建用户界面
MXML 语言支持两种用户界面组件类型: 控件和容器。容器是包含控件和其他容器的屏幕的矩形区域。控件是表单元素, 如按钮、文本字段和列表框。
可以使用Flex Component ExplorerFlex MXML组件浏览工具来查看所有控件的代码和样例。
1,加入常用可视控件: 使用可视控件组织界面,可以定义组件属性供外部访问
A, 基于文本的控件(Text controls): Label(单行文本显示)、Text(多行文本显示)、TextInput(单行文本显示与输入)、 TextArea(多行行文本显示与输入)和 RichTextEditor (富文本显示与输入)控件。用于显示文本和/或接收来自用户的文本输入,都有一个 text 属性用于设置要显示的文本。使用 RichTextEditor 控件可以输入文本、编辑文本和设置文本格式。用户通过使用位于 RichTextEditor 控件底部的子控件, 应用文本格式和 URL 链接。
B, 基于按钮的控件组件(Button 系列,Form controls):Button(激活时会发出click和buttonDown事件)、LinkButton(用于打开URL)、CheckBox(标签会被自动裁剪以适合控件边界。)、RadioButton(指由 <mx:RadioButtonGroup> 标签创建的组) 和 PopupButton 控件(常用于打开List控件或Menu控件签。)。
2,加入基于列表的控件,并获取数据
基于列表的控件: 是在其继承层次结构内的某些点上扩展 ListBase 类的那些控件。它们包括 ComboBox、List、HorizontalList、DataGrid、Tile、Menu 和 Tree 控件。都可从某数据提供程序的数据获得数据列表。
另: 许多标准控件 (包括 ColorPicker 和 MenuBar 控件) 也是数据提供程序控件。
可以使用两种方法设置组件的数据提供程序:
1),直接在MXML标签中加入数据,将 Array 或 Collection 定义为取得数据提供程序的控件的子标签。该方法具有实施快速的优点, 适合与静态数据一起使用及用于原型设计。
2),使用数据绑定: 使用[Bindable]元数据标签(属性非默认绑定,必须明确的声明被绑定的属性),将控件绑定到使用 ActionScript 定义的现有 Array 或 Collection。
3, 使用REPEATER: 是非可视控件,类似于编程语言里的For循环,可在执行期复制其它组件。<mx:Repeater>的卷标要自己输入,而dataProvider可在<mx:Script>区段之中,以[Bindable]的Metadata定义之数组作连结。REPEATER还可嵌套使用。
4, 加入数据验证:数据模型支持自动数据验证,这就意味着你可以很方便地使用Flex验证器。as3.0验证的类包为mx.Validators.包中有一个基类Validator,其他的类都为其子类:
1),用标签实现验证: //绑定验证对象:source:表示验证的对象,property:表示验证对象的属性
2),用AS编程实现验证 <mx:Script>
还可以加入按钮触发器,并修改默认提示错误 //trigger:表示触发验证事件的对象
//triggerEvent:表示对象触发验证事件的时机(如click,mouseOver等)
//requiredFieldError属性 表示必填项没填入数据的时的提示错误信息
//wrongLengthError:表示输入的数据阿拉伯数字长度小于10时提示的错误信息
//invalidCharError:表示输入数据不是阿拉伯数字时提示的错误信息
3),高级用法: 使用正则表达式创建自定义验证器
5, 加入资源(图片,音频,视频,程序):运行时外载和编译时直接内嵌两种方式,外载方式要多花一段载入时间,但使用简单;内嵌方式可直接调用资源,但加重了程序的负担(体积变大,且图片编辑后需要重新编译)
1),Image(图画)控件: 可外载或内嵌多种富媒体资源: JPEG、GIF、PNG位图、SVG矢量图(只能内嵌) , SWF动画(非Flex的SWF应用程序。),SWF库按钮(Button),SWF库动画(MovieClip), //外载一个富媒体,可使用绝对或者相对路径。
但加入SWF文件时,可用use-network参数指定其使用网络或者本地文件二者之一。
<mx:Image id="myLogo0" source="assets/logo.png"/>
//简单地内嵌一个富媒体.png,.jpg,.gif,
.swf(可将嵌入的SWF文件的实例当作 MovieClip.MovieClipAsset 类的实例处理,
不能直接访问嵌入的SWF文件的属性或方法。
但可用 LocalConnection以允许SWF之间进行通信。),
.SVG(可将嵌入的SVG文件的实例当作Sprite.SpriteAsset类的实例处理。)
<mx:Image id="myLogo" source="@Embed('assets/logo.png')"/>
//在脚本中定义富媒体对象,然后在MXML中可以多次嵌入
//在脚本中定义图片的scale-9像框缩放功能就可以保持边框的清晰,
(旋转嵌入的scale-9 图像的实例会关闭该图像的scale-9功能。)。
<mx:Script>
//嵌入 SWF 库资源
height="151.8"/>
2) 设置翻转的图片:使用 CSS为外观外载/内嵌翻转的图像
可以定义一个现有的CSS类型选择器为该类型的所有组件设置外观。还可以进一步创建自定义CSS 类。
3), SWFLoader控件: 通常用来加入Flex应用程序(可以使用AS与其通信),当然也能用于加入Image控件所能加入的富媒体资源。 //外载入SWF程序
<mx:SWFLoader id="loader1" source="FlexApp.swf"/>
//内嵌入SWF程序
<mx:SWFLoader id="loader2" source="@Embed(source='flexapp.swf')"/>
//还可以在FDS环境下加入MXML文件,要以buttonicon.mxml.swf形式加入,以提示FDS编译该文件。
<xml version="1.0">
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
</mx:Application>
4), 加入MP3音频: 您可以在 Flex 应用程序中通过使用[Embed]元数据标签嵌入MP3文件并播放它。注意音频文件的体积要优化。
5), 加入字体: 您希望在 Flex 应用程序中嵌入一种字体并将它用作基于文本的组件的样式。
下面的示例创建引用嵌入的字体的 font-family 名称的一个类选择器。 接着它会创建一个 Text 控件并将其样式设置为该类选择器。
提示: 您在嵌入字体以节省文件大小时仅可以从字体添加某些字符, 方法是指定您的 @font-face 声明的 unicode-range 属性。
三,数据绑定
以MXML标记来描述UI,数据绑定(Data binding)来连接数据,这样就真正实现了UI和程序逻辑的分离。Data binding可以一绑多或者多绑一。
1, 在MXML中使用大括号{}语句: 格式为:{源对象.属性}。可直接传送给目标对象;高级用法是在{}中包含AS表达式、AS函数或者E4X表达式
2, 在MXML中使用<mx:Binding>标签:这是{}语句的替代用法,格式为:<mx:Binding source="源对象.属性" destination="目标对象.属性"/>;高级用法是在标签中包含AS表达式或者E4X表达式
3, 使用AS类来绑定:使用mx.binding.utils.BindingUtils的bindProperty()或者bindSetter() 方法
Flex Builder教程相关推荐
- Flex系列教程——flex的下载与安装
首先需要说明几个问题, 1.flex的最新版本是flex4,是adobe公司最近才发布的,我的这套教程是基于flex3版本 2.flex的安装程序分为两种,一种是独立安装的版本,另外一种是基于ecli ...
- Flex Builder 开发语言切换问题
1.Flex Builder 4.6切换语言 打开\Adobe\Adobe Flash Builder 4.6\FlashBuilder.ini -nl zh_CN -startup eclipse/ ...
- ActionScript 3.0 Step By Step系列(一):工欲其善,先利其器(Flex Builder)
"砍柴需先磨柴刀"这是长辈们从小就对我们说的话,对于一个从小在贫穷的农村长大的我来说,我决对肯定这句话是对的,大人们上山砍柴前都会先磨柴刀,眼见为识,哈哈!!很明显这就是所谓的&q ...
- Flex 布局教程:实例篇
上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇&g ...
- Flex 布局教程实例
Flex 布局教程实例 一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 F ...
- Adobe宣布Flex Builder将更名为Flash Builder
呵呵 虽然是老新闻了,不过还是copy过来纪念一下吧.Adobe越来越迎合社区了- 日前,Adobe官方正式发布公开消息:下一代 Flex Builder 4 将改名为 Flash Builder 4 ...
- 学习使用RIA Framework Flex创建MySQL管理UI(初学Flex实例教程)
引言:一直想学习Flex来着,平时都是因为太懒的缘故,没有去实践,在csdn上无意看到这篇博文,觉得对自己挺有帮助的,就引过来了~ PHPMyAdmin的出现震撼了业界,这毫无疑问.它当然是基于PHP ...
- 有用的Flex Builder快捷键
Adobe在开发Flex最有利的工具就是Flex Builder,然而,工欲善其事,必先利其"键",快速键对一般开发者来说都非常有用,非但如此,很多快速键与组合键是会与其他软体或系 ...
- flex builder method
找到安装目录,如 D:\Program Files\Adobe\Flex Builder 3\plugins\com.adobe.flexbuilder.project_3.0.190133 这个目录 ...
- 技巧:让Eclipse或Flex Builder 支持自动换行。(转)
今天找一半天,发现功能超强的Eclipse竟然没有自动换行的功能.真的是让人郁闷呀.. 而Visual Studio的自动换行功能却做得很棒!! Google了N分钟,发现Eclipse要装上一插件才 ...
最新文章
- TF-IDF与余弦相似性的应用
- Anti-dump的原理
- matlab2018无法使用qcat,解决Matlab 2018a源代码的中文支持问题
- 不用第三方库,也能用 Python 作图,效果还不错
- Js中数组去重的几种方法
- Java类类getDeclaredMethod()方法及示例
- Angle Admin Template介绍
- 【转载】飞鸽传书2013【绿色版】
- 继续畅通工程(HDU-1879 )
- POJ1061 青蛙的约会【扩展欧几里得算法】
- linux 远程连接工具
- Kettle使用教程(一)—— 在MacOS系统中安装 Kettle
- Tomcat乱码情况完美解决
- wps生成正态分布的随机数_如何用excel批量生成正态分布的随机数?
- python发微信给手机充值话费_微信充话费如何自定义金额?最低1元起充的技巧...
- pwnable.kr wp passcode
- python查找联系人_python ---简易联系人
- 明日之后服务器崩了最新消息,《明日之后》崩了是什么原因?明日之后崩了怎么登陆服务器...
- plsql odbc导入器dsn没有下拉选项
- 数据分析-如何搭建业务指标体系
热门文章
- 全链路日志追踪系统介绍与思考
- JAVA-工作流-Activiti7入门demo
- python动态人脸识别_Python动态人脸识别
- C# matlab中标准差计算方法
- DELPHI中MessageBox的用法
- 服务器内存条故障显示器,内存故障与分析
- QCon上海2015精彩回顾和总结
- Java Applet及其应用
- php cimage类,强大的多功能的用VB编写的高速图像处理库Cimage简介! - 小志的日志 - 电子工程世界-论坛...
- 【金猿技术展】PLC电力载波通信技术——电力系统特有通信方式