最近开始自己学着写flex组件,于是开始参考flex原有自带的组件进行练习。当然,从比较简单的TextInput组件开始。参考着写组件其实问题倒还不大,目前就是里面出现的各种形形色色的标签把我绕晕了。整理了目前遇到的标签如下:
ArrayElementType:
这是指定自己定义的数组中元素的类型,应该类似java中的泛型,用的不多(至少我就没用过,找资料的时候顺便找到的),类似的代码如下:
[ArrayElementType("String")]
public var arrayOfStrings:Array;
这样,这个array就只能放String类型的对象。
Bindable:
毫无疑问这是最常用到的一个标签,几乎所有和数据打交道的地方都会用到这个标签。使用这个标签的属性一旦改变就会dispatch一个事件给监听器,可以选择后面带与不带参数两种方式:
[Bindable]:不带参数就表示使用默认事件,那么flex在满足触发条件是自动发送一个propertyChange事件。
[Bindable(event="eventname")]:带参数表示使用指定的事件,当然首先要把事件给注册好才行。
可以在3个地方使用[Bindable]标签:
1.在public class定义前,这个场景不太常用,这个时候[Bindable]会绑定所有作为变量定义的public属性,并且所有的public属性都定义有 getter和setter方法,[Bindable]没有参数,flex会自动创建一个propertyChange事件来处理所有的公有属性。类似代 码如下:
[Bindable]
public class SelfInput extends SimpleWidget
2.在public, protected 或 private 属性前,格式为:
[Bindable]
public var foo:String;
一旦foo值被改变,那么所有使用foo属性的地方都会触发propertyChange事件。
3.在getter和setter事件前定义[Bindable]标签。使用标签时,需要同时定义getter和setter方法,如:
[Bindable]
public function set width(val:Integer):void {
}
public function get width():Integer{
}
如果需要指定发送事件,则如下:
[Bindable(event="redraw")]
public function set width(val:Integer):void {
dispatchEvent(new Event("redraw"));
}
public function get width():Integer{
}
CollapseWhiteSpace
很郁闷的是这个标签没有找到文档,应该是属于adobe内部使用的标签,只好等摸索出作用后在补全了
DataBindingInfo
内部标签,暂无文档。
DefaultBindingProperty
内部标签,暂无文档。
DefaultProperty
这个标签也是很少使用的,主要是将一个组件的某一属性指定为他的默认属性,这样在使用该组件时不需要指定属性的名字而是使用该组件的子元素即可。类似代码如下:
定义一个默认属性
[DefaultProperty("text")]
public class SelfInput extends SimpleWidget
使用默认属性
<comp:SelfInput>
<mx:String>testText</mx:String>
</comp:SelfInput>
DefaultTriggerEvent
内部标签,暂无文档。
Embed
用来把图片,音乐,视频什么的导入到程序中去,可以用这个标签把资源直接整合到swf中去,类似代码如下:
//定义代码
[Embed(source="testIcon.gif")]
public var testIcon:Class
//使用代码
<mx:Button icon="{testIcon}"/>
这时候这个按钮上面就有一个小图标啦。
Event
这个标签主要在编写显示组件时使用,使用这个标签就能够为组件提供一个事件处理函数的接口。定义组件时,可以为该组件赋一个方法在事件触发时调用。类似代码如下:
//定义代码
[Event(name="textChanged", type="flash.events.Event")]
public class SelfInput extends SimpleWidget{
private var _text:String;
public function set text(s:String):void {
_text= s;
var eventObj:Event = new Event(“textChanged");
dispatchEvent(eventObj);
}
}
//调用代码
<mx:Script>
<![CDATA[
public function textChanged(eventObj:Event):void {
trace(eventObj.target.text);
}
]]>
</mx:Script>
<myComp:SelfInput textChanged="textChanged(event)"/>
Effect
用来定义事件触发时产生的效果,和Event标签一起使用。类似代码如下:
//定义代码
[Event(name="textChanged", type="flash.events.Event")]
[Effect(name="textChangedEffect", event="textChanged")]
public class SelfInput extends SimpleWidget{
}
//使用代码
<myComp:SelfInput textChanged="textChanged(event)" textChangedEffect="changeEffect"/>
此时,input组件的text改变时产生效果。使用effect可以制作许多花哨的效果,比如翻页什么的,效果的使用以后再开一篇文章记录。
IconFile
IconFile标签类似Embed标签,也是用来嵌入资源的,只是Embed标签可以嵌入图片、swf、视频、音频等,IconFile只能用来潜入图 片文件作为自定义类的图标,在FlexBuilder的Components视窗中找到该组件就能看到它所使用的icon。类似代码如下:
[IconFile(”inputIcon.png”)]
public class SelfInput extends SimpleWidget{
}
Inspectable
属性的代码提示和属性检查,在FlexBuilder中使用该组件时在properties视窗中可以看到该属性的值提示,主要用于一个属性的值为几个固定选项时。类似代码如下:
[Inspectable(category="General", enumeration="text,password", defaultValue="text",type="String")]
public var inputType;
InstanceType
似乎是可以用于模板模式,用于限定引用的对象的类型,与IDeferredInstance一起使用。类似代码如下:
//定义代码
[InstanceType("mx.controls.Button")]
public var uploadBtn:IDeferredInstance;
private function init():void{
addChild(UIComponent(topRow.getInstance()));
}
//使用代码
<myComp:SelfInput>
<myComp:uploadBtn>
<mx:Button label="upload"/>
</myComp:uploadBtn>
</myComp:SelfInput>
还没有遇见过使用场景,不明白为什么不直接使用Button对象引用。
NonCommittingChangeEvent
NonCommittingChangeEvent元数据标签在某个特定事件发生的时候可以防止变量在事件发生的过程中被更改。
示例代码:
[Bindable(event="valueCommit")]
[NonCommittingChangeEvent("change")]
function get text():String {
return getText();
}
function set text(t):void {
setText(t);
// Dispatch events.
}
这样,修改text的时敲入字符就不会触发组件的change事件,只有在所有字符输入完成后才能触发valueCommit事件,可以用于对输入字符进 行验证。目前主要遇到的使用场景为在输入框中输入选中组件的宽与高来改变组件的大小,此时不希望改变输入值立刻就改变组件的大小,而是希望改变输入值完成 时点击enter键后改变组件的大小,就可以绑定enter事件,不提交change事件。
RemoteClass
大用处。在使用远程调用时将flex的对象和java对象绑定起来,直接将pojo对象通过二进制的方式从前台传递到服务器端。实例代码如下:
package com.priv {
[Bindable]
[RemoteClass(alias="com.priv.UserDo")]
public class UserDo{
public var id:int;
public var name:String;
}
}
这时,java的UserDo对像需要有id和name两个属性的getter和setter,通过BlazeDs框架或是lds框架就能够实现和servlet容器之间的对象远程传递。
ResourceBundle
用于在运行态加载一些文件,目前主要用于做国际化。不过似乎这种国际化方式不能像java那样通过虚拟机的语言来自动指定使用哪个语言文件,需要在编译命令中人工指定使用哪个目录下的资源文件,如下:
-locale zh_CN -allow-source-path-overlap=true -source-path=d:\flex3_projects\wide\locale\zh_CN
之后就可以在d:\flex3_projects\wide\locale\zh_CN这个目录下建立properties文件用于保存国际化信息。properties文件和java的properties文件格式相同。都是如果key=name的键值对。
最后就可以在代码中引用它了:
[ResourceBundle("wide")]
public function init():void{
trace(resourceManage.getString("key"));
}
Style
用于给自定义组件添加样式属性。只需要将style标签添加到类的定义中去,就可以使用getStyle去获取这个样式的值。在as中也能使用setStyle去给组件设置一个样式。实例代码如下:
//定义代码
[Style(name="borderColor",type="uint",format="Color",inherit="no")]
public class SelfInput extends UIComponent{
public function init():void{
trace(getStyle("borderColor"));
}
}
//使用代码
<myComp:SelfInput borderColor="#000000"/>