- 浏览: 3011842 次
- 性别:
- 来自: 河南
文章分类
- 全部博客 (340)
- Java综合 (26)
- 程序人生 (53)
- RIA-ExtJS专栏 (18)
- RIA-mxGraph专栏 (4)
- RIA-Flex4专栏 (43)
- 框架-Spring专栏 (16)
- 框架-持久化专栏 (22)
- 框架-Struts2专栏 (11)
- 框架-Struts专栏 (12)
- SQL/NOSQL (12)
- 报表/图表 (2)
- 工作流 (5)
- XML专栏 (4)
- 日常报错解决方案 (5)
- Web前端-综合 (12)
- Web/JSP (14)
- Web前端-ajax专栏 (14)
- Web前端-JQuery专栏 (9)
- IDE技巧 (6)
- FILE/IO (14)
- 远程服务调用 (2)
- SSO单点登录 (2)
- 资源分享 (22)
- 云计算 (1)
- 项目管理 (3)
- php专栏 (1)
- Python专栏 (2)
- Linux (1)
- 缓存系统 (1)
- 队列服务器 (1)
- 网络编程 (0)
- Node.js (1)
最新评论
-
hui1989106a:
我的也不能解压,360和好压都试了,都不行
《Spring in Action》完整中文版分享下载 -
temotemo:
这些example有些过时了,官方建议使用HBase-1.0 ...
Java操作Hbase进行建表、删表以及对数据进行增删改查,条件查询 -
zy8102:
非常感谢~
HeadFirst系列之七:《深入浅出SQL》原版高清PDF电子书分享下载 -
zy8102:
重命名了一下搞定了
HeadFirst系列之七:《深入浅出SQL》原版高清PDF电子书分享下载 -
zy8102:
为什么下载以后老解压不了呢?
HeadFirst系列之七:《深入浅出SQL》原版高清PDF电子书分享下载
因为是专门针对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. 内联方式
<mx:Button label="Say Hello" click="mx.controls.Alert.show('Hello,Flying')"/>
2. 级联方式
<mx:Button label="Say Hello" click="sayHello('Flying')"/> <mx:Script> <![CDATA[ import mx.controls.Alert; private function sayHello(param_name:String):void { Alert.show("Hello, "+param_name); } ]]> </mx:Script>
3. 外联方式
<mx:Script source="myFunction.as"/>
<mx:Button label="Say Hello" click="sayHello('Flying');"/>
// 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 < _numButtons; i++)
{
var currentButton:Button = new Button();
currentButton.label = i.toString();
currentButton.addEventListener(MouseEvent.CLICK, buttonClickHandler);
buttonsTile.addChild (currentButton);
}
}
}
}
CountryComboBox.as
package components
{
import mx.controls.ComboBox;
import flash.events.Event;
public class CountryComboBox extends ComboBox
{
private var countryArrayShort:Array = ["US", "UK"];
private var countryArrayLong:Array = ["United States", "United Kingdom"];
// Determines display state. The inspectable metadata tag
// is used by 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
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955"
minHeight="600"
xmlns:components="components.*">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import flash.events.Event;
private function handleCloseEvent(eventObj:Event):void
{
status.text = "You selected: \r" + countries.selectedItem as String;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<components:PaddedPanel
title="Custom component inheritance"
>
<components:CountryComboBox
id="countries"
useShortNames="false"
/>
<!--
Use data binding to display the latest state
of the property.
-->
<mx:Label text="useShortNames = {countries.useShortNames}"/>
<mx:ControlBar horizontalAlign="right">
<mx:Button
label="Toggle Display"
click="countries.useShortNames = !countries.useShortNames;"
/>
<mx:Text id="status" text="Please select a country from the list above." width="136"/>
<components:NumericDisplay numButtons="10" />
</mx:ControlBar>
</components:PaddedPanel>
</s:Application>
当使用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 框架的内部的机制,来使数据绑定正常工作。
发表评论
-
10条寒冷的冷笑话【心情不好的人,进来看看吧】
2010-08-27 12:24 25911、小明:我说话从来不说第2遍小华:什么?小明:我说话从来不说 ... -
Flex4之事件详解
2010-08-26 15:39 9815第一、Flex事件简介事 ... -
Flex4之DataGrid增删改同步数据库及页面数据示例总结
2010-08-20 10:35 10493有关Flex的DataGrid文章的确不少,都是零零碎碎的,目 ... -
全面认识Flex六大要素
2010-08-19 15:25 2155在学习Flex应用程序的 ... -
Flex4之将Sprite控件添加到FLEX UI中
2010-08-13 09:24 6015在Flex的帮助文档 ... -
Flex4之元数据标签使用
2010-08-09 16:04 4703Flex 元数据标签 1、[ArrayElementTy ... -
Flex4之关于Embed外部资源的使用方法总结
2010-08-09 14:20 8358Flex软件中经常需要使用一些外部的资源,如图片、声音、S ... -
Flex4之获取各种颜色RGB值的例子
2010-08-09 10:03 4447接下来的例子演示了Flex中如何将颜色的值转化为字符串,根据R ... -
Flex4之简单菜单制作
2010-08-04 11:45 3659首先呢说明一下,我写的这个菜单呢,为了符合我的项目需要没有用到 ... -
Flex4之关于循环注册事件问题
2010-08-03 15:02 2077首先呢,标题说的有些 ... -
关于FLEX特效的几个网址
2010-07-27 13:01 8191在Tourde FLEX的Data Visualization ... -
FLEX4之内存释放优化原则
2010-07-27 10:17 23181. 被删除对象在外部的所有引用一定要被删除干净才能被系统当成 ... -
Flex4之Filters的用法【模糊,炽热,阴影、齿条】
2010-07-23 14:51 5580先上效果图 具体代码 <?xml versio ... -
Flex4之四种事件处理方式
2010-07-23 14:36 2581首先我这个示例是针对按钮来说的,其实其他的组件大致也都一样 ... -
Flex4之皮肤定制【Skin类和Skin类】
2010-07-23 10:01 22340第一、关于spark.skin.SparkSkin类的 ... -
Flex4之为ToolTip设置旋转特效及字体
2010-07-22 16:21 5199没想到ToolTip一个提示标签也可以加上动画,看来Flex真 ... -
Flex4之在Aert提示框中加入超链接
2010-07-22 16:02 2304闲话不说,贴上代码 <?xml version=&qu ... -
Flex4之在button上显示HTML内容
2010-07-22 15:28 2767HTMLButton.as package myas { ... -
Flex4之添加插件实现代码格式化
2010-07-22 15:13 4387首先到http://sourceforge.net/proje ... -
Flex4之通过iframe嵌入html网页
2010-07-22 14:36 8495想起之前在ExtJS中就涉及到嵌入网页问题,这次改用Flex肯 ...
相关推荐
标题中的"(十八)Flex4_自定义ActionScript组件"表明我们即将探讨的是关于Flex4框架中如何创建和使用自定义的ActionScript组件。Flex是一个基于Adobe Flash Player或Adobe AIR运行时的开源框架,用于构建富互联网应用...
《使用ActionScript 3.0组件》是Flex学习者必读的经典著作,它深入浅出地介绍了如何在Flex...配合压缩包中的"FLASH四宝贝之-使用ActionScript 3.0组件.pdf"阅读,相信你能更深入地理解和掌握Flex RIA开发的核心技术。
Flex4允许开发者在ActionScript中使用声明式语法,这扩展了ActionScript的功能,使其能与MXML一起工作。通过在ActionScript类中声明变量和属性,我们可以创建组件实例、设置属性并处理事件,无需像传统面向对象编程...
本篇文章将深入探讨如何使用ActionScript 3.0组件,这些组件为开发者提供了强大的功能,使得交互式内容的创建更为高效和便捷。 1. **ActionScript 3.0的增强** ActionScript 3.0相比于之前的版本,性能显著提升,...
Flex组件是基于MXML语言的,主要用于Flex框架,而Flash组件则直接在ACTIONSCRIPT中创建和使用。了解这两种组件的区别是学习ACTIONSCRIPT 3.0组件的关键。 2. **组件使用**:通过在舞台上添加组件实例,然后在...
1. **Flex SDK**:Flex 3.0 包含了Flex编译器和Flex框架库,开发者可以使用SDK中的MXML和ActionScript来构建用户界面。它支持CSS样式表,使得UI设计更加灵活和可定制化。 2. **MXML**:MXML是一种标记语言,类似于...
Flex4是一种基于ActionScript3和Flash Player的开源框架,用于构建富互联网应用程序(RIA)。它提供了丰富的组件库,包括MX和Spark两个主要组件集。在Flex4中,自定义组件皮肤是提升应用视觉效果和用户体验的重要...
了解如何使用和自定义这些组件对于构建交互性强、用户体验良好的Flash应用程序至关重要。 编程方面,ActionScript 3.0引入了许多新特性和改进,例如: 1. 类型系统:AS3.0采用了强类型系统,这意味着变量必须在...
Flex是用于构建富互联网应用程序(RIA)的开源框架,它结合了强大的MXML标记语言和ActionScript 3.0编程语言,为开发者提供了创建交互式、高性能的Web应用的能力。 ActionScript 3.0是Flex中的主要编程语言,相较于...
"riameeting_demo"可能是与Flex4组件开发相关的演示项目,可能是关于实时会议应用的实例,展示了如何使用Flex4构建这样的应用,包括自定义组件的使用、Spark架构的应用以及与其他服务(如服务器通信)的集成。...
Flex ActionScript 学习笔记是关于使用Adobe Flex技术并结合ActionScript 3.0进行开发的知识总结。ActionScript 3.0是随着Flash CS3一起推出的一种强大的编程语言,相较于之前的ActionScript版本,它有着显著的提升...
通过结合使用Flex和ActionScript,开发者能够构建出具有高度互动性和视觉吸引力的应用程序。 #### 二、Flex开发环境搭建 在开始学习Flex开发之前,我们需要搭建一个完整的开发环境。这包括以下几个主要步骤: 1. ...
4. **FLEX4源码项目**:这部分可能包含Flex项目的源代码,包括.mxml文件(定义组件结构和事件处理)和.as文件(编写ActionScript代码)。开发者可以通过查看这些源码学习如何在Flex4环境中创建组件,定义交互逻辑...
Adobe Flex是一种开源的框架,主要用于构建富互联网应用程序(RIA),它使用ActionScript编程语言和MXML标记语言。在处理数据交换时,特别是与服务器进行异步通信时,JSON(JavaScript Object Notation)格式因其轻...
4. **事件模型**:讲解Flex中的事件模型,包括事件的派发、监听和处理,以及使用EventDispatcher和EventListener接口。 5. **服务与数据访问**:探讨如何利用Flex与服务器进行通信,包括RemoteObject、WebService、...
Flex组件是Adobe Flex框架中的重要组成部分,主要用于构建富互联网应用程序(RIA)。在Flex中,组件是用户界面的基本构建块,可以是按钮、文本输入框、列表等可视元素。行为(Behaviors)和特效(Effects)组件则为...
在Flex 4中,最重要的变化之一是组件模型的改变,引入了Spark组件架构,它与原有的MX组件架构并行存在,但更注重设计和性能。Spark组件库提供了一套全新的UI组件,这些组件基于Flex 4的皮肤ning机制,允许开发者创建...
4. **组件和自定义组件**:Flex提供了一套丰富的预建组件,如按钮、文本框、面板等,开发者可以通过这些组件快速构建界面。源代码可能包含如何自定义这些组件或创建全新组件的示例。 5. **数据绑定**:Flex中的数据...