使用flex也很久了,也改过别人写的flex自定义组件,但是就是没有系统的研究下flex组件的编写步骤,和要注意的东西,在这里我参照一本书中的例子,好好的理解下,也为了巩固下自己对flex的理解!
1,重写一个组件系统依次调用Constructor(构造方法)-->createChildren()-->commitProperties()==>measure()==>updateDisplayList() ;
a,Constructor构造方法,初始化属性,默认值 在这个方法中使用最好。
b,createChildren() 创建子对象,在组件中添加子对象。是使用addChild方法添加子对象
c,commitProperties 用在处理属性值和更新。(多个属性值更新后统一处理入口和单值多次修改后处理入口)
d , measure()设置组件的默认大小(以便Flex布局管理器能正确知道该组件的大小,给其分配适当空间)
e,updateDisplayList()用来重绘组件,子对象布局逻辑等
2,添加自定义组件实际上就是将一个基本的组件的组合起来,这样的情况下就必须要重写createChildren() 和 updateDisplayList()方法
当自定义组件要对属性的变化作出反应的时候必须要重写commitProperties()方法(触发调用这个方法的是invalidateProperties)
当自定义的组件和基类组件大小不一致的情况下就要调用measure 保证正确的大小显示。(调用invalidateSize方法)
当组件需要调整子对象全局显示逻辑,重写updateDisplayList,调用invalidateDisplayList
commitProperties measure 和 updateDisplayList 都有自己的用处
在下面写个例子 一个button 和 TextArea 组合的自定义组件
package cn.tsoft
{
import flash.events.Event;
import flash.text.TextLineMetrics;
import mx.controls.Button;
import mx.controls.TextArea;
import mx.core.UIComponent;
/**
* 当子组件textArea中文件变化时,ModelText派发一个change事件
* 当ModelText的text属性被设置时,派发一个textChange事件
* 当改变Modeltext的textplacement属性后,会派发一个placementChanged事件
* **/
[Event(name="change",type="flash.events.Event")]
[Event(name="textChanged",type="flash.events.Event")]
[Event(name="placementChanged",type="flash.events.Event")]
public class ModelText extends UIComponent
{
public function ModelText()
{
super();
}
private var text_mc:TextArea;
private var mode_mc:Button;
private var bTextChanged:Boolean =false;
private var _text:String="ModelText";
public function set text(t:String):void{
this._text =t;
bTextChanged = true;
invalidateProperties();
dispatchEvent(new Event("textChanged"));
}
[Bindable(event="textChanged")]
public function get text():String{
return text_mc.text;
}
override protected function createChildren():void{
super.createChildren();
if(!text_mc){
text_mc =new TextArea();
text_mc.explicitWidth =80;
text_mc.editable =false;
text_mc.addEventListener("change",handleChangeEvent);
addChild(text_mc);
}
if(!mode_mc){
mode_mc = new Button();
mode_mc.label ="mylabeljieji";
mode_mc.addEventListener("click",handleClickEvent);
addChild(mode_mc);
}
}
//处理有子组件派发的时间
private function handleChangeEvent(eventObj:Event):void{
dispatchEvent(new Event("change"));
}
private function handleClickEvent(eventObj:Event):void{
text_mc.editable = !text_mc.editable;
}
override protected function commitProperties():void{
super.commitProperties();
if(bTextChanged){
bTextChanged =false;
text_mc.text = _text;
invalidateDisplayList();
}
}
/**
* 组建的默认宽度是文本宽度加上按钮的宽度
* 组件的默认高度由按钮的高度决定
*/
override protected function measure():void{
super.measure();
var buttonWidth:Number = mode_mc.getExplicitOrMeasuredWidth();
var buttonHeight:Number =mode_mc.getExplicitOrMeasuredHeight();
//组件默认的最小宽度和默认宽度为textArea控件的measureedWidth宽度与buttonWidth之和
measuredWidth = measuredMinWidth =text_mc.measuredWidth+buttonWidth;
//组件的默认高度 和最小高度问textArea 和Button 中measuredHeight中的最大值加上10个像素的边框
measuredHeight = measuredMinHeight = Math.max(text_mc.measuredHeight,buttonHeight)+10;
}
private var _textPlacement:String="left";
public function set textPlacement(p:String):void{
this._textPlacement = p;
invalidateDisplayList();
dispatchEvent(new Event("placementChanged"));
}
[Bindable(event="placementChanged")]
public function get textPlacement():String{
return _textPlacement;
}
/**
* Button控件的尺寸是Button上的label文本尺寸加上10像素的边框区域
* textarea控件的尺寸是组件的剩余区域,TextArea的位置取决于textPlacement属性的设置
* **/
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth,unscaledHeight);
//为左右边框各减去1像素 , 为左右边白各减3像素
var usableWidth:Number=unscaledWidth -8;
//为上下边框各减去1像素 , 为上下边白各减3像素
var usableHeight:Number = unscaledHeight -8;
//根据按钮上的文本计算按钮的尺寸
var lineMetrics:TextLineMetrics = measureText(mode_mc.label);
//按钮文本尺寸加上10像素作为按钮的尺寸
var buttonHeight:Number = lineMetrics.height+10;
var buttonWidth:Number = lineMetrics.width+10;
mode_mc.setActualSize(buttonWidth,buttonHeight);
//计算文本的尺寸,允许按钮和TextArea文本之间有5个像素的间隙
var textWidth:Number = usableWidth-buttonWidth-5;
var textHeight:Number = usableHeight;
text_mc.setActualSize(textWidth,textHeight);
//根据textPlacement的属性确定控件的位置
if(textPlacement == "left"){
text_mc.move(4,4);
mode_mc.move(4+textWidth+5,4);
}else{
mode_mc.move(4,4);
text_mc.move(4+buttonWidth+5,4);
}
graphics.lineStyle(1,0xffff00,1.0);
graphics.drawRect(0,0,unscaledWidth,unscaledHeight);
}
}
}
分享到:
相关推荐
Flex自定义组件是Adobe Flex框架中的一个重要特性,它允许开发者创建具有特定功能和外观的UI元素,以满足项目中独特的用户界面需求。Flex是一个开源的、基于MXML和ActionScript的开发框架,主要用于构建富互联网应用...
根据自定义组件的具体需求来决定从哪个基类开始扩展,可以有效地减少不必要的代码编写,并提高组件的复用性。 #### 五、构建自定义组件的步骤 1. **确定组件的功能需求**:首先明确自定义组件需要实现哪些功能。 2...
在IT行业中,自定义组件是提升用户体验和满足特定需求的重要手段。标题提到的"flex 自定义进度条",指的是利用Flex布局技术来设计一个可定制的进度条组件。Flex布局,全称为Flexible Box布局,是一种在CSS3中引入的...
在IT行业中,自定义组件是开发用户界面时的一项重要技能,特别是在使用Flex或Flash进行富互联网应用程序(RIA)开发时。本示例聚焦于创建一个自定义组件——搜索栏,这是许多网站和应用中常见的功能元素。让我们深入...
在Flex中,我们可以使用MXML和ActionScript来创建自定义组件。对于DataGrid的列头,我们通常需要继承`mx.controls.DataGridColumnHeader`类,并在其上覆盖或扩展相关方法和属性,以实现自定义的功能。比如,我们...
总的来说,FLEX自定义的日历组件带有日志记录功能,为开发者提供了一种强大且灵活的方式来处理日期选择,并能有效地监控应用的运行状态。通过深入理解这些组件和日志机制,开发者可以创建出更加用户友好且健壮的RIA...
2. 数据适配器:在Java后端,可以编写数据适配器,处理来自Flex的请求,查询或操作MySQL数据库,然后返回结果。 3. 安全性:确保数据传输的安全性,可以使用HTTPS协议,以及在服务器端实现身份验证和授权机制。 综...
3. **自定义组件**:Flex3支持创建自定义组件,这意味着开发者可以根据需求定制或扩展已有的组件功能。这极大提高了灵活性和可重用性。 #### 三、创建自定义Flex3组件 1. **继承现有组件**:创建自定义组件最简单...
在Flex4中,创建自定义组件通常涉及以下步骤: - 定义组件类:继承自Spark的UIComponent或相关的基类,如SkinnableComponent或SkinnableContainer。 - 创建MXML表示层:可以通过MXML来声明组件的属性、事件和子...
在开发Coverflow组件时,可能会依赖于Flex SDK中的某些组件或自定义的库,以便扩展功能或简化代码。 知识点深入: 1. **组件设计模式**:Coverflow组件是基于Flex的组件模型设计的,这包括MXML和ActionScript的结合...
Flex组件的源代码通常使用ActionScript编写,这是一种面向对象的编程语言。通过阅读源代码,开发者可以了解组件的工作原理,以及如何自定义和扩展组件。 最后,标签“工具”可能指的是Flex Builder或Flash Builder...
- 在弹出的对话框中输入自定义组件名称,并选择该组件要继承的类型。常见的基类包括`Canvas`、`DataGrid`、`ComboBox`等。 - 根据需要设置组件的大小,完成后点击`Finish`。 2. **组件设计**: - **基于`Canvas`...
#### 二、Flex自定义控件概述 在Flex中,自定义控件是指根据特定需求构建的新控件,这些控件可以基于现有的Flex标准控件进行扩展,也可以完全从头开始创建。自定义控件的主要优势在于能够提供更符合特定业务场景的...
6. 自定义组件:学习如何创建自定义组件,扩展Flex的内置组件以满足特定需求。 通过学习和实践,你可以掌握创建和使用Flex轮弹组件的技巧,并将其应用到自己的项目中,提升用户体验。同时,理解源码和利用相关工具...
在Flex编程中,Tooltip是用户界面中一个非常实用的功能,它会在鼠标悬停在某个组件上时显示相关信息提示。默认的Tooltip通常只提供简单的文本信息,但为了提升用户体验和界面美观性,我们可以对其进行自定义,实现...
### Flex3组件拖放教程知识点总结 #### 一、关于组件拖放 拖放功能是Flex3中一种非常实用的功能,它可以实现用户界面元素的直观交互。通过拖放操作,用户能够选择一个对象(例如`List`控件或Flex中的`Image`控件)...
本篇文章将深入探讨Flex中的数据Grid组件以及如何自定义显示列,这对于提升用户体验和增强数据展示功能至关重要。 Flex DataGrid是MXML组件库中的一个控件,它允许开发者以网格形式展示数据集合。这种组件特别适用...
- **自定义样式**:允许用户自定义组件的颜色、大小和样式,以适应不同的界面设计。 综上所述,这个Flex分页组件提供了一套完整的分页解决方案,包括前后翻页、直接跳转到指定页等功能,同时通过`Comp_Page_...