实现一个自定义组件
如果要创建一个自定义组件,你需要重写UIComponent类的某些方法,最少需要重写如下方法:构造函数, createChildren(), commitProperties(), measure(), layoutChrome(), updateDisplayList() 。
基础语句结构如下:
package myComponents
{
public class MyComponent extends UIComponent
{ .... }
}
注意包名与你的磁盘目录结构一致。接下来一一讲解每个方法的重写。
构造函数
示例如下:
public function 类名() {
super();
}
注意,AS3中构造函数不支持重载。
createChildren()
此方法的作用是在此自定义组件中创建子组件。
此方法不用你去调用,Flex在你将此自定义组件使用addChild方法加入到父组件时自动调用。示例如下:
// Declare two variables for the component children.
private var text_mc:TextArea;
private var mode_mc:Button;
override protected function createChildren():void {
// Call the createChildren() method of the superclass.
super.createChildren();
// Test for the existence of the children before creating them.
// This is optional, but do this so a subclass can create a different
// child.
if (!text_mc) {
text_mc = new TextArea();
text_mc.explicitWidth = 80;
text_mc.editable = false;
text_mc.addEventListener("change", handleChangeEvent);
// Add the child component to the custom component.
addChild(text_mc);
}
// Test for the existence of the children before creating them.
if (!mode_mc) {
mode_mc = new Button();
mode_mc.label = "Toggle Editing";
mode_mc.addEventListener("click", handleClickEvent);
// Add the child component to the custom component.
addChild(mode_mc);
}
}
上例使用createChildren()在此自定义组件中加入了一个Label和一个Button。
commitProperties()
此方法是在修改组件属性时使用。
此方法不用你去调用。当你调用invalidateProperties()(刷新属性)、addChild()(增加子组件)方法时,Flex会自动调用此方法。这样组件在下次显示时,就能以新的属性来显示。
此方法还有一个作用是为measure()方法提供最新的属性信息。
measure()
此方法的作用是设置组件的默认尺寸。
此方法不用你去调用。当你调用invalidateSize ()(刷新尺寸)、addChild()(增加子组件)方法时,Flex会自动调用此方法。这样组件在下次显示时,就能以默认尺寸来显示。
如果你显式的设置了组件的尺寸,如<mx:Button height="10" width="10"/>,Flex就不用调用此方法了。要注意,measure()方法只是设置组件的默认尺寸,在updateDisplayList()方法中,组件具备的实际尺寸(actual size)与默认尺寸可能不同。
Flex中的每个组件都是有默认尺寸的。如这样写:<mx:Button />,Flex就会自动给一个尺寸。如果你想重写默认尺寸,可以重新设置measuredHeight 、measuredWidth、measuredMinHeight、measuredMinWidth。如下例:
package myComponents
{
// asAdvanced/myComponents/DeleteTextArea.as
import mx.controls.Button;
public class BlueButton extends Button {
public function BlueButton() {
super();
}
override protected function measure():void {
super.measure();
measuredWidth=100;
measuredMinWidth=50;
measuredHeight=50;
measuredMinHeight=25;
}
}
}
然后在MXML中使用:
<?xml version="1.0"?>
<!-- asAdvanced/ASAdvancedMainBlueButton.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:MyComp="myComponents.*" >
<mx:VBox>
<MyComp:BlueButton/>
<mx:Button/>
</mx:VBox>
</mx:Application>
此中的BlueButton就会以默认值100宽,50高来显示。
layoutChrome()
一些容器类(Container)或其子类采用此方法设置组件的border Area(边框区域)。
此方法不用你去调用。当你调用invalidateDisplayList ()(刷新显示)方法时,Flex会自动调用此方法。这样组件在下次显示时,就能以新的边框来显示。
典型的用法是你可以重写RectangularBorder类。
一个将组件的边框区域(border Area)和内容区域(content area)分开处理的原因是当Container.autoLayout=false时。
总括的来讲,layoutChrome()是用来处理边框区域的刷新显示,而updateDisplayList()用来处理内容区域的刷新显示。
updateDisplayList()
此方法不用你去调用。当你调用invalidateDisplayList ()(刷新显示)、addChild()(增加子组件)方法时,Flex会自动调用此方法。这样组件在下次显示时,就能以新的样子来显示。其实类似VC++中的PAINT消息处理。
此方法的主要作用为:
A.更改组件的尺寸和位置。要改变尺寸,在此方法中使用setActualSize()方法,而不是使用width和height属性来完成。要改变位置,在此方法中使用move()方法,而不是使用x和y属性来完成。
B.绘制可视元素,如皮肤、样式、边框。你可以使用Flash Drawing API来完成。
函数的原型为:
protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
两个参数分别为此自定义组件的宽度和高度。当然如果设置父容器设置scaleY=2,你设置unscaledHeight=100,那么最终呈现的是200高度的组件。
第一个功能示例:
package myComponents
{
// asAdvanced/myComponents/BottomUpVBox.as
import mx.containers.VBox;
import mx.core.EdgeMetrics;
import mx.core.UIComponent;
public class BottomUpVBox extends VBox
{
public function BottomUpVBox() {
super();
}
分享到:
相关推荐
Flex自定义组件和自定义事件的使用。 Flex自定义组件和自定义事件的使用。
flex自定义组件事件DEMO,一个简单的flex自定义组件的demo
研究Flex 组件声明周期,了解组件的生成步骤
flex4.5自定义组件介绍,自定义组件前提条件
FLex自定义写的控件,有时间,datagrid,tree,combox等,以及常用的处理字符串,弹出窗口
很通用的Flex 分页组件,经过本人测试,可以应用到项目中,很方便
Flex组件开发可分为两种. 一是在mxml中创建自定义组件.另一种则在actionscript class中创建,分别知道他们的含义。
Flex4自定义组件 介绍了flex中如何自定义组件以及相关应用
flex 高级自定义组件 需要重写的方法,以及为什么要重写,何时调用等。
flex flex组件 flex下拉组件
Flex3自定义组件类似于Fieldset
FLEX自定义的日历组件,带有日志记录功能FLEX自定义的日历组件,带有日志记录功能FLEX自定义的日历组件,带有日志记录功能FLEX自定义的日历组件,带有日志记录功能
你还在头痛flex4组件皮肤怎么自定义吗?看我给你们上传的吧;因皮肤中还是有部分mx组件,如果不能正常使用,请自己把所以mx组件改成sp组件
几经尝试发现是由于Flex控件在旋转后中文就不显示了,因此做了相应修改以支持中文,并添加了一些删除,增加子组件的方法,以方便编程式的使用。当然如果熟悉了Flex组件的生命周期,可以根据需求增添功能。 对于中文...
因为工作原因和个人兴趣原因,刚接触flex,遇到不少问题,这次花了一个早上的时间专门研究了一下组件件的拖拽,呵呵,还是很有成就感的。
一些flex组件的用法! flex组件用法。 自定义控件
NULL 博文链接:https://sy19861216.iteye.com/blog/669156
自己写的实例,包括 ActionSctip的自定义事件及自定义组件!