- 浏览: 407796 次
- 性别:
- 来自: 济南
最新评论
-
nianshi:
slideDown就是show的滑动效果版本, slideUp ...
Jquery零碎代码收藏 -
nianshi:
以后编写JS代码,少写<div onclick=&quo ...
Jquery零碎代码收藏 -
nianshi:
获取匹配元素相对父元素的偏移var p = $("p ...
Jquery零碎代码收藏 -
nianshi:
获取匹配元素在当前窗口的相对偏移var p = $(" ...
Jquery零碎代码收藏 -
wuchu:
谢谢
Flex 读取XML配置文件总结
可以使用ActionScript创建可重用的组件,并且在你的Flex程序中可以作为标签引用这个组件。在ActionScript中创建的组件能够包含图像元素,自定义业务逻辑,或者扩展已经存在的Flex组件。
在ActionScript中,Flex组件实现了类层次结构。每一个组件,都是Action类的实例。下图展示了这种层次结构的一部分。
所有Flex可视组件都是源自于UIComponent类。要创建自己的组件,你可以创建一个继承UIComponent的类,或者继承UIComponent子类的类。
使用类作为自定义组件的超类,取决于你要实现的功能。例如,你或许需要一个自定义的按钮控件。你可以创建一个UIComponent类的子类,然后 重写Flex Button 类的所有功能。更好更快创建自定义按钮组建的方法是创建一个Flex Button组件的子类,然后在自定义类中进行修改。
创建一个简单的ActionScript组件
引用自定义组件的属性和方法
为自定义组件应用样式
创建一个高级的ActionScript组件
创建一个复合ActionScript组件
链接:你可以在MXML中创建自定义组件。更多的信息,参看Building components in MXML Quick Start.
创建一个简单的ActionScript组件
当你要在ActionScript 中定义一个组件时,不要创建一个组件,而是修改一个已经存在的组件的行为。在下边的例子中,创建一个ComboBox类的子类,来创建一个自定义的ComboBox,命名为CountryComboBox——重新组装的国家列表。
注意:
在MXML中实例化你的组件,要使用类名作为标签名。
你可以放置自定义组件在项目的根目录或者子目录中。Adobe推荐后者。在这个例子中,自定义被放置在叫做components的子文件夹中,在
ActionScript相当于components包。在主应用程序的MXML文件中,映射这个文件夹的命名空间为custom,并且使用完全合格的标
签名<custom:CountryComboBox>来引用这个组件。
注意:
在
真实世界的应用程序中,你可能会看到自定义组件被放置在倒置的域名结构的包结构中(例
如:xmlns:custom=”com.adobe.quickstarts.customcomponents.*”)。这种习惯可以避免命名空间冲
突,当不同的制造商,使用相同的名字。例如,在你的应用程序中,2个组件库也许都含有Map组件,如果一个在com.vendorA包中另一个在
com.vendorB包中,那么他们就不会起冲突
例子
components/CountryComboBox.as
package components
{
import mx.controls.ComboBox;
public class CountryComboBox extends ComboBox
{
public function CountryComboBox(){
dataProvider = [ "United States", "United Kingdom" ];
}
}}
应用程序MXML文件
<?xml version="1.0" encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml "
xmlns:custom="components.*"
width="220" height="115"
>
<custom:CountryComboBox /></mx:Application>
引用自定义组件的属性和方法
CountryComboBox类继承了ComboBox类,所以能够在初始化自定义组件的MXML标签中或者在<mx:Script>标签
中的ActionScript中,引用所有属性和方法。下边的例子指定了rowCount属性,并且为自定义组件的close事件指定了监听器。
例子
components/CountryComboBox.as
package components{
import mx.controls.ComboBox;
public class CountryComboBox extends ComboBox
{
public function CountryComboBox (){
dataProvider = [ "United States", "United Kingdom" ];
}
}}
应用程序MXML文件
<?xml version="1.0" encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml "
xmlns:custom="components.*"
width="270" height="170"
>
<mx:Script><![CDATA[
import flash.events.Event;
private function handleCloseEvent(eventObj:Event):void{
status.text = "You selected: \r" + countries.selectedItem as String;}
]]>
</mx:Script>
<mx:Paneltitle="Custom component inheritance"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
><custom:CountryComboBox
id="countries" rowCount="5"
close="handleCloseEvent(event);"
/><mx:Text id="status" text="Please select a country from the list above." width="136"/>
</mx:Panel>
</mx:Application>
为自定义组件应用样式
Style 属性定义了一个组件的感观,从字体大小到背景颜色。自定义的ActionScript组件继承了超类的所有样式,所以你也可以使用同样的方式来设置样式。
要在自定义组件中改变样式属性,可以在组件构造器中使用setStyle()方法。这样会应用相同的样式到所有的组件的实例中,但是组件的用户可以在MXML标记中覆盖setStyle()方法设置的样式。所有在组件类文件中为设置的样式均从超类继承。
在下边的例子中,创建了一个PaddedPanel自定义组件,它扩展了Panel组件,并且在组件四周一律使用10像素的边白。使用这个自定义组件,比
每次使用Panel组件都要设置4个样式属性(paddingLeft, paddingRight, paddingTop, and
paddingBottom)更简单,也就是说,结果是更少的编码,没有重复劳动。
例子
components/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);
}
}}
应用程序MXML文件
<?xml version="1.0" encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml "
xmlns:custom="components.*"
width="300" height="130"
>
<custom:PaddedPanel title="Custom component styles">
<mx:Text text="This is a padded panel component."/></custom:PaddedPanel>
</mx:Application>
创建一个高级的ActionScript组件
当使用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 框架的内部的机制,来使数据绑定正常工作。
连接:有些文章比这个引导性的快速指南更多的描述关于在
ActionScript中创建高级组件的应用。全面描述这一主题,可以查看” Creating Advanced Visual
Components in ActionScript”在Creating and Extending Adobe Flex 3
Components.
例子
components/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"?><mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml "
xmlns:custom="components.*"
viewSourceURL="src/MxmlComponentAdvanced/index.html"
width="260" height="200"
><mx:Panel
title="Advanced custom components"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"
><!-- Set a custom property on a custom component -->
<custom: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:Buttonlabel="Toggle Display"
click="countries.useShortNames = !countries.useShortNames;"
/>
</mx:ControlBar></mx:Panel>
</mx:Application>
创建复合 ActionScript 组件
例子
components/NumericDisplay.as
package components
{
import mx.containers.VBox;
import mx.containers.Tile;
import mx.controls.TextInput;
import mx.controls.Button;
import mx.events.FlexEvent;
import flash.events.Event;
import flash.events.MouseEvent;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;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;
}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 componentprivate 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);
}}
}
}components/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);
}}
}
应用程序 MXML 文件
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml "
xmlns:custom="components.*"
viewSourceURL="src/ASComponentComposite/index.html"
width="300" height="225">
<custom:PaddedPanel
title="Composite component"
>
<custom:NumericDisplay numButtons="10"/>
</custom:PaddedPanel>
</mx:Application>
发表评论
-
Flex小记录
2011-02-24 10:18 1262Flex读取XML: <mx:HTTPServic ... -
flex实现滑动显示隐藏效果
2010-12-30 15:30 1547鼠标划过的时候显示菜单栏 ,鼠标移开后隐藏菜单栏。比较常用 ... -
flex DataTimePicker时间控件
2010-12-27 11:54 1293两种DatatimePicker: 1.Datatim ... -
ActionScript 生成伪Guid
2010-12-24 09:52 1169在一个Flash制作的图片上传程序中(使用了FileRefer ... -
Flex中Image组件怎么才能非等比例拉伸图片
2010-12-23 15:49 1482Image组件怎么才能非等比例拉伸图片 设 ... -
Flex中Accordion用法
2010-12-23 11:45 3053<? xml version = & ... -
Flex(替代session过期)实现用户长时间不操作要求重新登录的处理
2010-12-23 11:08 1477flex(替代session过期)用户长时间不操作要求重新登录 ... -
ActionScript 3.0 Socket编程
2010-12-23 09:56 1138在使用ActionScript3.0进行编程 ... -
12个简单易用的flex函数
2010-12-21 10:10 11021.拷贝内容到剪贴板: ... -
Flex自定义控件——Pagebar分页控件
2010-12-20 09:41 5193开发时经常遇到用一个DataGrid分页显示 ... -
Flex资源,很全,很牛!
2010-12-20 09:30 14321、as3ebaylib http://code ... -
Flex 窗体 最大化、最小化实例
2010-12-20 09:28 2682---导入flexMdi.swc (http ... -
在Flex中复制文字到操作系统的剪贴板
2010-12-15 11:18 1206这个实例演示了怎么样使用System. ... -
Flex让Slider控件拖动时显示Tooltip
2010-12-14 16:10 1875格式化与自定义Slider中显示的Tooltip ... -
Flex给Alert加个Icon
2010-12-14 16:05 1258给Alert加个Icon 很简单只要先 Embed 一 ... -
在Flex中用Validator验证数字、字符串、Email、电话号码等
2010-12-14 09:54 4274mx.validators ... -
Flex中使用FileReference类下载文件
2010-12-14 09:47 1766下面的实例演示了Flex中的 File ... -
Flex使用ArrayCollection的filterFunction属性过滤DataGrid
2010-12-14 09:42 1770下面的实例演示了在Flex中怎样使用 ... -
Flex 树形控件(Tree )的使用
2010-12-13 16:24 3440一、树形控件的常用属性 1、dragMoveE ... -
FLEX3中应用CSS完全详解手册(下)
2010-12-13 11:40 847myTabs中的设置 cornerRadiusTab ...
相关推荐
创 建过Java多语言本地化应用的朋友应该都很熟悉Java的本地...要本地化Flex2应用,我们需要将本地化资源文件编译为SWC库文件,然后在Flex应用中使用ActionScript或者MXML访问资源集(resource bundles )中的本地化值。
Flex CSS简介 Flex 使用MXML设置样式 Flex 使用ActionScript设置样式 Flex 样式的继承与叠加 Flex 主题的使用 Flex 自定义皮肤 Flex 应用皮肤
Flex组件开发可分为两种. 一是在mxml中创建自定义组件.另一种则在actionscript class中创建,分别知道他们的含义。
自己写的实例,包括 ActionSctip的自定义事件及自定义组件!
Flex与ActionScript3程序开发》一书由易到难、由浅人深、循序渐进地介绍了Flex与ActionScript3程序开发的一般步骤与常用的程序技巧,内容通俗易懂,使用大量实例贯穿全书,力求以实战的形式让读者快速掌握知识点。...
Flex教程 flex快速入门 使用 使用 MXML 和 和 ActionScript进行编码 进行编码进行编码 Adobe® 将 Flex 实施为 ActionScript
本书由易到难、由浅人深、循序渐进地介绍了Flex与ActionScript3程序开发的一般步骤与常用的程序技巧,内容通俗易懂,使用大量实例贯穿全书,力求以实战的形式让读者快速掌握知识点。相信读者在学习完本书后,在...
ActionScript 3.0 语言和组件参考概述Adobe Flex 2 语言参考ActionScript 3.0 语言和组件参考是适用于 Flash® Player 应用程序编程接口 (API) 的参考手册。 Adobe Flex 2 语言参考ActionScript 3.0 语言和组件...
1. Flex3 入门培训ppt:介绍什么是flex,ActionScript 3.0,容器等 2. Flex3 入门培训pdf:来源于Adobe官方翻译资料
《Flex与ActionScript 3程序开发》适合广大的Flex初学者、Web应用开发者、在校学生等对Flex技术的入门与提高,也特别适合于中高级Flex开发人员作为实际开发时的代码备查手册。 编辑推荐 《Flex与ActionScript 3程序...
ActionScript 快速入门.pdf FlashActionScript3编程入门.pdf ActionScript3.0Cookbook中文完整版.pdf 跟我StepByStep学FLEX教程.pdf
FLEX开发入门的一本好书。讲解了actionscript的使用。
学习flex时在网上收集的资料 还不错 适合入门
《ActionScript 3.0 语言和组件参考》概述《ActionScript 3.0 语言参考》是 Flash® Player 和 Adobe AIR™ 应用程序编程接口 (API) 的参考手册。 此版本包括支持 Adobe AIR 运行时环境的新 ActionScript 类、方法...
在可能的情况下,特定于 AIR 的新项目都以其名称旁的这个小图标作为标志: 本手册提供了 ActionScript 语言中所支持元素的语法和用法信息。 其中包括以下部分: 下面的 《ActionScript 3.0 语言和组件参考》是 ...
ActionScript高级组件开发详解,主要介绍了如何快速运用ActionScript语言开发自定义的高级组件。
NULL 博文链接:https://schy-hqh.iteye.com/blog/1756582
flex 3 programming actionscript 3
ActionScript 是针对 Adobe Flash Player 运行时环境的编程语言,它在 Flash 内容和应用 程序中实现了交互性、数据处理以及其它许多功能。 ActionScript 是由 Flash Player 中的 ActionScript 虚拟机 (AVM) 来执行的...