- 浏览: 41770 次
最新评论
Flex4之使用ActionScript构建组件
2011年05月19日
因为是专门针对ActionScript来写的篇章,所以,对于ActionScript大家有功夫最好去看看基础入门知识,其实很容易上手很多部分都与JAVA面向对象及以前的基础知识相似
首先来说下ActionScript常用的三种方式
Flex的核心是MXML和ActionScript 。
MXML 是用于为 Flex应用程序进行用户界面组件布局, 它属于表示层,最终要编辑成ActionScript 并生成ActionScript 类文件在Flash Player上运行。如果你是个Java开发者就很好理解这一点,MXML 就好比是JSP/Struts/JSF,它们最终都会编辑成Java 类文件并在具备JAVA虚拟机环境的浏览器上运行。
所以说,Flex 最核心的还是ActionScript 。在Flex中,ActionScript是 类库的方式出现的,该类库包含组件 (容器和控件)、管理器类、数据服务类和所有其他功能的类
1. 内联方式
2. 级联方式
3. 外联方式
// myFunction.asimport mx.controls.Alert; private function sayHello(param_name:String):void { mx.controls.Alert.show("Hello, "+param_name); }
上述方式为AS方法单独新建一个as文件,然后设置该方法为被调用文件的Script元素的source属性值,并可以在调用方法时传递参数,此文件可以在多个文件调用,从而实现了AS方法在多个文件中的重用。
其次呢就要说说今天重点的ActionScript构建组件了
可以使用ActionScript创建可重用的组件,并且在你的Flex程序中可以作为标签引用这个组件。在ActionScript中创建的组件能够包含图像元素,自定义业务逻辑,或者扩展已经存在的Flex组件。
在ActionScript中,Flex组件实现了类层次结构。每一个组件,都是Action类的实例。下图展示了这种层次结构的一部分。
所有Flex可视组件都是源自于UIComponent类。要创建自己的组件,你可以创建一个继承UIComponent的类,或者继承 UIComponent子类的类。
使用类作为自定义组件的超类,取决于你要实现的功能。例如,你或许需要一个自定义的按钮控件。你可以创建一个UIComponent类的子类,然后重写Flex Button 类的所有功能。更好更快创建自定义按钮组建的方法是创建一个Flex Button组件的子类,然后在自定义类中进行修改。
下面贴出代码【说明:一切都要从重用性来考虑,否则没有必要用构建组件】,仅供参考
PaddedPanel.as
package components { import mx.containers.Panel; public class PaddedPanel extends Panel { public function PaddedPanel() { // Call the constructor of the superclass. super(); // Give the panel a uniform 10-pixel // padding on all four sides. setStyle("paddingLeft", 10); setStyle("paddingRight", 10); setStyle("paddingTop", 10); setStyle("paddingBottom", 10); } } }
NumericDisplay.as package components { import flash.events.Event; import flash.events.MouseEvent; import mx.containers.Tile; import mx.containers.VBox; import mx.controls.Button; import mx.controls.TextInput; import mx.events.FlexEvent; public class NumericDisplay extends VBox { private var display:TextInput; private var buttonsTile:Tile; // Expose the _numButtons property to the // visual design view in Flex Builder 3. [Inspectable(defaultValue=10)] private var _numButtons:uint = 10; //原来主应用程序中的引用本类的组件属性是取决于改自定义组件类是否定了了set方法而已,当然属性名称与set方法名称一致 private var _max:int=90; public function set max(v:int):void{ } public function get max():int{ return _max; } public function NumericDisplay() { addEventListener(FlexEvent.INITIALIZE, initializeHandler); } // numButtons is a public property that determines the // number of buttons that is displayed [Bindable(event="numButtonsChange")] public function get numButtons():uint { return _numButtons; }// //当numButtons被赋值时,发出numButtonsChanage事件,通知所有被绑定的getter方法执行一遍 public function set numButtons(value:uint):void { _numButtons = value; dispatchEvent(new Event("numButtonsChange")); } // Gets called when the component has been initialized private function initializeHandler(event:FlexEvent):void { // Display the component paint(); } // Add the label of the clicked button to the display private function buttonClickHandler(event:MouseEvent):void { display.text += (event.target as Button).label; } // Display the component private function paint():void { // Create the number display display = new TextInput(); display.width=185; addChild(display); // Create a Tile container to // hold the buttons. buttonsTile = new Tile(); addChild (buttonsTile); // Create the buttons and add them to // the Tile container. for (var i:uint = 0; i Flex Builder 3. [Inspectable(defaultValue=true)] private var _useShortNames:Boolean = true; // Implicit setter public function set useShortNames(state:Boolean):void { // Call method to set the dataProvider based on the name length. _useShortNames = state; if (state) { this.dataProvider = countryArrayShort; } else { this.dataProvider = countryArrayLong; } // Dispatch an event when the value changes // (used in data binding). dispatchEvent(new Event("changeUseShortNames")); } // Allow other components to bind to this property [Bindable(event="changeUseShortNames")] public function get useShortNames():Boolean { return _useShortNames; } } }
主应用程序mxml
flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:components="components.*">
当使用ActionScript组件的普遍目的是创建可配置和可重用的组件。例如,创建一个ActionScript组件,它带有属性,分发时间,定义了新的样式,具有自定义的皮肤,或其他的个性化的设置。
当创建一个自定的ActionScript组件时,一个设计上要考虑的事情是可重用性。也就是说,你希望创建一个紧紧的绑定带你的应用程序的组件,还是能够在多个应用中可重用的组件?
编写与特定应用程序紧耦合的组件,经常是组件依赖于应用程序的结构,变量名或其他细节。如果你改变了应用程序,你可能需要修改紧耦合的组件来反映这种变化。一个紧耦合的组件,在没有重写的情况下很难应用到其他应用程序中。
设计一个松耦合的组件用于重用。松耦合的组件需要有清晰可辨的接口来指定如何向组件传递信息,如何将将结果传回应用程序。
典型的松耦合组件是使用属性来向组件传递信息。这些属性通过默认存取器(setter和getter方法)来定义,指定参数的类型。在下边的例子中,CountryComboBox自定义组件定义了公共的userShortNames属性,此属性通过使用get userShortNames()和set useShortNames()存取器方法暴露_ userShortNames私有属性。
私有属性_userShortNames的Inspectable 元数据标签定义了一个特性,这个特性出现在Adobe? Flex? Builder?中的属性提示和标签内省器中。也可以使用这个元数据标签限制允许的属性值。
注意:所有公共属性出现在MXML的代码提示和属性检查器中。如果你有关于属性的额外的信息,这些信息能够帮助代码提示或属性检查器(像枚举型的值,或这个字符串实际是文件路径),那么也把额外的信息添加到[Inspectable]元数据中。
MXML代码提示和属性检查器来于相同的数据,所以,如果在一个中显示出来那么在另一个中也应该一直显示出来。
在另一方面,ActionScript代码提示,不需要元数据也可以正常工作,所以你在ActionScript中依据所在的上下文一直都可以看待适当的代码提示。Flex Builder使用public/protected/private/static等等修饰符加当前所在范围计算出ActionScript代码提示。
定义组件向主应用程序返回信息的最佳实践是设计组件分发事件,事件中包含要返回的数据。那样,主函数能够定义时间监听器来处理时间,并且采取适当的行动。也可以使用数据绑定在事件中。在下边的例子中,使用Bindable元数据标签是userShortName编程一个被绑定的属性。隐含的 userShortName属性的setter发送改变事件,这个过程使用了的Flex 框架的内部的机制,来使数据绑定正常工作。
发表评论
-
“千年传承,再续辉煌”--广东阳江漠阳剑派
2014-10-31 00:33 1重剑无锋,大音希声,周星驰说折凳是最好的武器,我说看似嘻 ... -
数组、字符串
2012-07-06 09:51 7841 一维数组 数 ... -
java中正则表达式运用实例(用String类的matches方法演示)
2012-07-06 09:44 1473java中正则表达式运用实例(参看java中正则表达式运用 ... -
java 正则表达式
2012-07-06 09:37 728[b]Java [/b][b]正则表达式 [/b]在计算机 ... -
Flash CS5 用户自定义Button组件
2012-07-06 09:29 13152010/12/24 Flash CS5 用户自定义But ... -
自己写的自动完成js插件源码
2012-07-05 20:44 622经测试,此插件兼容ie,chrome,firefox。 / ... -
005_《Delphi6组件大全》
2012-07-03 13:42 999Delphi 教程系列书籍 (005) 《Delphi6组 ... -
005_《Delphi6组件大全》
2012-07-03 12:16 592Delphi 教程系列书籍 (005) 《Delphi6组 ... -
关于flexigrid一点用法
2012-07-02 10:12 811闲来无事在网上找了一个jquery的grid插件 flex ... -
jsp页面
2012-07-02 10:12 707做人,生活,学习,玩.... ... -
Mate-基于标签的框架
2012-07-02 10:12 775Mate 将会成为Flex领域的另一个热点。它使用设置(c ... -
Flex中要想使图表的横坐标轴标签成45度显示(2)
2012-07-02 10:11 837从外部引入样式 1.在外部src/assets目录文 ... -
Flex获取操作XML示例
2012-07-01 09:32 691/****** ".",&qu ... -
The architecture of Flex and Java applications two (Flex 和 Java 应用程序架构 2)
2012-07-01 09:31 948Flex and Java application ... -
Flex编程学习基础
2012-07-01 09:31 755Flex是Adobe公司推出 ... -
使用HTTPService读取远程XML文件为TREE赋值的例子
2012-07-01 09:31 717在FLEX4中 使用一个HTTPService 读取远程的 ... -
flex 通过HTTPService与php通信
2012-07-01 09:31 790最近研究HTTPService与php通信,去网上查了好多 ... -
解决Flex4 发布后访问 初始化极其缓慢的问题
2012-06-30 11:16 1382解决Flex4 发布后访问 初始化极其缓慢的问题 2011年 ... -
flex builder 3, flex builder 4下载与安装
2012-06-30 11:16 941flex builder 3, flex builder 4 ... -
flex 开源项目组件大全
2012-06-30 11:16 1115flex 开源项目组件大全 2010年09月13日 Fl ...
相关推荐
创 建过Java多语言本地化应用的朋友应该都很熟悉Java的本地...要本地化Flex2应用,我们需要将本地化资源文件编译为SWC库文件,然后在Flex应用中使用ActionScript或者MXML访问资源集(resource bundles )中的本地化值。
使用 ADOBE FLEX 45访问数据 目录 第 1 章: 访问数据服务概述 Flex 与其它数据访问技术的比较 使用 Flash Builder 访问数据服务 数据访问组件 第 2 章: 使用 Flash Builder 构建以数据为中心的应用程序 创建 Flex...
书中详细介绍了Flex 3的相关知识点,具体包括构建、部署和调试RIA,使用功能强大的MXML语言布置应用程序,使用MXML和ActionScript构建自定义的UI组件,使用XML、基于SOAP的Web服务和远程调用协议AMF连接到数据等。...
9.2.1 使用videoplayer组件 289 9.2.2 创建mediaplayer示例 290 9.3 小结 302 9.3.1 练习 302 9.3.2 本章所学内容 303 第10章 利用设备功能 305 10.1 使用设备的摄像头 305 10.1.1 使用cameraui类 306...
使用 Flash Builder 可以完成的工作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...
2.5.4 使用ActionScript创建自定义组件 62 2.6 异步调用 85 2.6.1 异步调用导致模型数据不一致 85 2.6.2 异步调用导致用户反复(误)操作 86 2.7 小结 87 第3章 Flex企业应用开发中的主要元素 88 3.1 企业应用...
使用Flex组件工具包创建组件 21.2节.在Flash中使用ContainerMovieClip创建Flex容器 21.3节.导入FlashCS3的组件 21.4节.认识Cairngorm小型结构 21.5节.创建Cairngorm视图、事件和模型 21.6节.创建Cairngorm命令和事务...
构建 ADOBE® AIR® 应用程序 目录 第 1 章: Adobe AIR 简介 第 2 章: Adobe AIR 安装 安装 Adobe AIR 删除 Adobe AIR 安装和运行 AIR 范例应用程序 Adobe AIR 更新 第 3 章: 使用 AIR API 特定于 AIR 的 ...
Flex 4.5 Android UI组件用于Flex 4.5移动开发的Android UI组件的集合。包含什么所有的皮肤都是为了最好地模仿Droid 2(我拥有的设备)而制造的皮肤按钮复选框组件AndroidButton:支持按住鼠标垂直步进AlertPopUp ...
构建器等进行了升级... - 流行的 AS3 / AIR 移动 UI 框架 - Actionscript 3 的 Razor UI 组件 - Flame 是一个 ActionScript 库,它提供了许多有用的 UI 控件、集合、加密服务和实用程序以与 Flex SDK 一起使用。 - ...
珠穆朗玛峰-flex everest-flex 是一个为... 此外,您需要将 flex 移动组件包包含到 Flex 构建路径中: ${FLEXSDK}/frameworks/libs/mobile/mobilecomponents.swc ${FLEXSDK}/frameworks/themes/Mobile/mobile.swc
第 4 章: 在 Flash Builder 中使用项目 在 Flash Builder 中创建项目 导出和导入项目 构建项目 运行和调试应用程序 导出应用程序的发行版 使用 Flash Builder 打包 AIR 应用程序 第 5 章: Flash Builder 中的...
构建Flex 应用程序 ................................................................................................................................... 8 体验Web 和桌面应用程序 ...........................
该项目使用 ColdFusion 管理 API 和数据库自省生成 ColdFusion 组件(即 bean、DAO、网关、服务)、ColdSpring XML、传输 XML 和 ActionScript 值对象。 UI 内置于 Flex 中,具有易于使用且直观的界面。 输出代码以...
从到字节码的编译器已在成功使用,以构建 (现在为旧组件) 它于2008年实施。请参见主要开发人员的。 贡献者 斯科特·威勒克 谢尔盖·托德雪夫(Sergey Todyshev) 尤里·卡什尼科夫(Yuriy Kashnikov) 奥列格...
这是一个 Flex 3.5 项目,使用 playerglobal.swc 为 10.1 编译。 您可以在以下下载并替换{YOUR_FLASH_BUILDER_PATH}\sdks\3.5\frameworks\libs\player\10\playerglobal.swc中的现有文件 Ravis 项目导入 Ravis 是用于...
1.14 从Classpath中扫描组件 50 1.14.1 问题 50 1.14.2 解决方案 51 1.14.3 工作原理 51 1.15 小结 56 第2章 高级Spring IoC容器 57 2.1 调用静态工厂方法创建Bean 57 2.1.1 问题 57 2.1.2 解决...
1.14 从Classpath中扫描组件 50 1.14.1 问题 50 1.14.2 解决方案 51 1.14.3 工作原理 51 1.15 小结 56 第2章 高级Spring IoC容器 57 2.1 调用静态工厂方法创建Bean 57 2.1.1 问题 57 2.1.2 解决...