`
柴秉承
  • 浏览: 87586 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

Flex元数据标签

    博客分类:
  • FLEX
 
阅读更多

Flex 中的元数据标签

     Flex 元数据标签——告诉编译器如何编译
     虽然多数Flex开发者都使用过[Bindable]标签,但是很多人都不知道这个标签的作用甚至不知道该标签为何物。
     [Bindable]就是所谓的元数据标签。元数据标签是一种 特殊的标签,它在代码中的作用就是向编译器提供如何编译程序的信息。实际上,这些标签并没有被编译到生成的SWF文件中,而只是告诉编译器如何生成SWF 文件。文档中列出的元数据标签共有12个,本文将讲解这些元数据标签的定义并给出使用它们的示例,在看完这篇文章之后,你就会明白应该在何时何处在你的 Flex 应用程序中使用元数据标签了。

     [ArrayElementType]
      实际上,定义一个数组通常来说是一件很平常的事情,因为数组中的元素可以是任何类型的。
      不过,使用ArrayElementType元数据标签可以让你定义数组元素的数据类型。下面的例子展示了如何使用    [ArrayElementType]:
      [ArrayElementType(”String”)]
      public var arrayOfStrings:Array; 
    [ArrayElementType(”Number”)]
      public var arrayOfNumbers:Array;
      [ArrayElementType(”mx.core.UIComponent”)]
      public var arrayOfUIComponents:Array;

     [Bindable]
      Bindable元数据标签是最经常用到的一个元数据标签,因为它使程序组件之间的数据同步变得很容易。Bindable可以用来绑定简单数据类型、类、复杂数据类型以及函数。绑定数据的时候,你必须先使用元数据标签定义一下数据,正如Listing 1中所示的那样。图1是Listing 1的代码运行结果。
      图1:
     
Listing 1 A simple use of [Bindable]

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#FFFFFF">
<mx:Script>
<![CDATA[
[Bindable]
private var me:String="Rich Tretola";
]]>
</mx:Script>
<mx:Panel title="Simple Binding" width="500" height="90"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom=" 10" layout="horizontal">
<mx:Label text="{me}"/>
</mx:Panel>
</mx:Application>

      Bindable也可以用来绑定到事件。Listing 2展 示了如何使用getter和setter函数将一个属性绑定到一个事件上。这个例子中有一个叫做phoneNumber的私有变量,还有一个公有的 setter和getter函数。使用Bindable标签将这个getter方法绑定到了一个叫做phoneNumberChanged的事件上,只要 数据发生改变setter方法就会分派phoneNumberChanged事件。通过使用setter方法,可以在数据赋予私有变量之前对其进行操作。 在这个例子中,数据只有在长度大于等于10的时候才会被格式化。当phoneNumberChanged事件被分派的时候,第二个TextInput组件 会被更新,因为他的text属性绑定到了phoneNumber变量上。
      图2和图3显示了Listing 2代码的运行结果。
      图2:
     

      图3:
     

Listing 2 Using [Bindable] with getters and setters

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
private var _phoneNumber:String = "";
// Bind getter function to phoneNumberChanged event
[Bindable(event="phoneNumberChanged")]
public function get phoneNumber():String {
return _phoneNumber;
}
// Setter method.
public function set phoneNumber(value:String):void {
if (value.length<10) {
_phoneNumber = value;
} else {
_phoneNumber = phoneFormatter.format(value);
}
// Create and dispatch event
var eventObj:Event = new Event("phoneNumberChanged");
dispatchEvent(eventObj);
}
]]>
</mx:Script>
<mx:PhoneFormatter id="phoneFormatter"
formatString="(###)###-####" validPatternChars="#-()"/>
<mx:Panel title="Bind with Getters and Setters" width="500" height="90" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" layout="horizontal">
<mx:TextInput id="ti1" change="phoneNumber=ti1.text" maxChars="10" restrict="0-9"/>
<mx:TextInput id="ti2" text="{phoneNumber}"/>
</mx:Panel>
</mx:Application>


     [DefaultProperty]
      DefaultProperty元数据标签用来将一个单一属性设定为某个类的默认属性。它允许在一个容器标签内设定属性,而不用定义属性的名字。一个简单的例子就是一个自定义Button类。Listing 3展示了一个简单的Button类,它将label属性设定为了DefaultProperty。Listing 4展示了label属性是如何在自定义Button标签中作为一个字符串定义的。
Listing 3 Custom Button class named MyButton

package
{
import mx.controls.Button;
[DefaultProperty(“label")]
public class MyButton extends Button
{
}
}

Listing 4 Using the MyButton class wih [DefaultProperty]

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comps="*">
<comps:MyButton>
<mx:String>Test</mx:String>
</comps:MyButton>
</mx:Application>

     [Embed]
      Embed元数据标签用来导入图片到程序。可以通过两种方式使用Embed。你可以将图片嵌入到ActionScript中并将其指派给一个变量(如同下面代码中的第一个例子),或者你也可以将图片直接指派给组件的属性(使用下面代码中的第二个例子所示的语法规则)。
      例1:
      [Embed(source=”myIcon.gif”)]
      [Bindable]
      public var myIcon:Class;<mx:Button label=”Icon Button 1″ icon=”{myIcon}”/>
      <mx:Button label=”Icon Button 2″ icon=”{myIcon}”/>
      例2:
      <mx:Button label=”Icon Button 1″ icon=”@Embed(source='myIcon.gif’)”/>
     <mx:Button label=”Icon Button 2″ icon=”@Embed(source='myIcon.gif’)”/>
      上面这两个例子产生的结果是一样的。创建myIcon类的好处是,它在一个类中只定义一次并可以绑定到程序中的多个组件。


      [Event]
      Event元数据标签用来声明那些被自定义类分派的事件。将这个元数据标签添加到类定义中之后,你就可以在MXML标签中添加事件处理函数来初始化该自定义类。Listing 5创建了一个自定义Button类,每当它的label属性改变的时候就会分派一个事件。Listing 6所显示的主程序文件初始化了这个自定义Button并创建了事件处理函数,该函数将新的labe属性值赋给了一个TextArea组件以显示当前发生的更改。
      图4显示了Listing 5 和 Listing 6中的代码运行结果。
      图4:
     

 

Listing 5 Custom ButtonLabel class using 

package
{
import mx.controls.Button;
import flash.events.Event;
// Define the custom event
[Event(name="labelChanged", type="flash.events.Event")]
public class ButtonLabel extends Button {
// property to hold label value
private var _myLabel:String;
// public setter method
public function set myLabel(s:String):void {
_myLabel = s;
this.label = s;
// Create and dispatch custom event
var eventObj:Event = new Event(“labelChanged");
dispatchEvent(eventObj);
}
}
}

Listing 6 Using the ButtonLabel class with the labelChanged [Event]

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comps="*"
backgroundColor="#FFFFFF">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import flash.events.Event;
// method to handle custom event
public function labelChanged(eventObj:Event):void {
myTA.text= myTA.text + “\n"+ eventObj.target.label;
myTA.verticalScrollPosition = myTA.verticalScrollPosition +
20;
}
]]>
</mx:Script>
<mx:Panel title="Event Sample" width="500" height="275"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom=" 10" layout="absolute">
<mx:TextInput id="buttonLabelTI"
change="myButton.myLabel=buttonLabelTI.text" x="10" y="9"/>
<!--Instantiate custom class and define method to handle label-
Changed event-->
<comps:ButtonLabel id="myButton" labelChanged="labelChanged(event)
;"
x="10" y="39"/>
<mx:TextArea id="myTA" width="200" height="200" x="249" y="10"/>
</mx:Panel>
</mx:Application>

[Event(name="load_complete",type="com.eastcomsw.rpc.event.RemoteDataLoaderEvent")]

new RemoteDataLoaderEvent(RemoteDataLoaderEvent.LOAD_COMPLETE,e,typeID);

跟在RemoteDataLoaderEvent类里定义一个静态变量一个效果

[Event]

     [Effect]
      Effect元数据标签用来定义一个自定义效果,当某个事件发生的时候该效果会被分派。这个示例可以基于前面Event的例子来创建,通过简单地更改ButtonLabel类(Listing 7)中的一行代码,就定义了一个效果,该效果可以在MXML标签中直接使用(Listing 8)。

Listing 7 Add the Effect metadata tag

...
// Define the custom event
[Event(name="labelChanged", type="flash.events.Event")]
[Effect(name="labelChangedEffect", event="labelChanged")]
public class ButtonLabel extends Button {
...
Listing 8 Add labelChangedEffect to the Component

Instantiation MXML Tag
<comps:ButtonLabel id="myButton" labelChanged="labelChanged(event);"
labelChangedEffect="myEffect" x="10" y="39"/>

<mx:Blur id="myEffect" blurXFrom="100" blurYFrom="100" blurXTo="0" blurYTo="0"/>
     [IconFile]
      IconFile 是用来定义一个jpg,gif或者png文件的文件名的,它在你的自定义类中作为图标来使用。[Embed]元数据标签可以用来嵌入图片、SWF文件、音 乐文件以及视频文件等,而IconFile则只是用来嵌入用来作为自定义类图标的文件。下面是一个IconFile的例子:
      [IconFile(”icon.png”)]
      public class CustomButton extends Button{}


     [Inspectable]
      在使用Flex Builder 2的时候,你可能会希望某些自定义组件的属性在代码提示和属性检查器(property inspector)中显示,Inspectable元数据标签就是用来定义那些属性的。Listing 9展示的例子定义了一个inspectable的ccType变量,它定义了Visa为默认值、Credit Card为类别并将取值范围定义为包含了Visa, Mastercard, Discover, 和 American Express的枚举。
      图5展示了当将组件添加到程序中的时候所显示的代码提示。
      图5:
     

Listing 9 Custom component with [Inspectable] defined

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Inspectable(defaultValue="Visa",
enumeration="Visa,Mastercard,Discover,American Express"
category="Credit Card" type="String")]
public var ccType:String;
]]>
</mx:Script>
</mx:HBox>

      图6与上面展示的是同样的代码,但是这次是设计视图,所以我们能看到属性检查器。你可以看到属性ccType的类别为Credit Card,它的所有可选的值都在下拉列表中。
      图6:
     

     [InstanceType]
      当在一个模板对象中声明一个像IDeferredInstance这样的变量时,InstanceType元数据标签就用来声明对象的类型。下面是InstanceType的用法:
      [InstanceType(”package.className”)]
      [NonCommittingChangeEvent]
      NonCommittingChangeEvent元数据标签在某个特定事件发生的时候可以防止变量在事件发生的过程中被更改。Listing 10展 示了它是如何工作的。一个名为s的字符串类型的私有变量被绑定到了名为ti2的TextInput组件上。另外一个id为ti1的TextInput组件 在它的text发生更改的时候就会将s的值设置为它的text属性的值。另外,当triggerBinding 事件被分派的时候,附加在s变量上的Binding元数据标签就会进行绑定。只有在Enter键在ti1 TextInput组件中被按下时才会分派triggerBinding事件。
Listing 10 Using [NonCommittingChangeEvent]

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#FFFFFF">
<mx:Script>
<![CDATA[
import flash.events.Event;
private var eventObj:Event;
[Bindable(event="triggerBinding")]
[NonCommittingChangeEvent(“change")]
private var s:String;
private function triggerBinding():void{
eventObj = new Event(“triggerBinding");
dispatchEvent(eventObj);
}
]]>
</mx:Script>
<mx:Panel title="NonCommittingChangeEvent Sample" width="500"
height="90"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom=" 10" layout="horizontal">
<mx:TextInput id="ti1" change="s=ti1.text" enter="triggerBinding()"
/>
<mx:TextInput id="ti2" text="{s}" />
</mx:Panel>
</mx:Application>

     [RemoteClass]
      RemoteClass 可以用来将一个ActionScript类绑定到一个Java类或一个ColdFusion CFC。这样做可以自动转换数据类型。下面的例子将包com.mydomain中的名为MyClass的ActionScript类绑定到了同一个包中名为MyClass的Java类:
      package com.mydomain {
      [Bindable]
      [RemoteClass(alias=”com.mydomain.MyClass”)]
      public class MyClass {
        public var id:int; public var myText:String;
         }
      }


     [Style]
      Style元数据标签用来为组件定义自定义样式属性的。只需要简单地将Sytle元数据标签添加到类的定义当然,然后就可以使用getSytle方法获取它的值了。Listing 11 和 12中的例子定义了两个样式,分别为borderColor 和fillColor,它们的数据类型都是uint。当类初始化的时候这两个样式就会在标签中被设定。代码中覆写了updateDisplayList函数,用自定义的样式画了一个圆形边框并将其填充。
      图7展示了Listing 11 和 Listing 12中代码运行的结果。
      图7:
     

Listing 11 Custom Class CustomCircle using [Style] tags

package
{
import mx.core.UIComponent;
[Style(name="borderColor",type="uint",format="Color",inherit="no")]
[Style(name="fillColor",type="uint",format="Color",inherit="no")]
public class CustomCircle extends UIComponent {
public function CustomCircle(){
super();
}
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
graphics.lineStyle(1, getStyle(“borderColor"), 1.0);
graphics.beginFill(getStyle(“fillColor"),1.0);
graphics.drawEllipse(0,0,100,100);
}
}
}

Listing 12 Using CustomCircle and assigning custom style properties

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comps="*"
backgroundColor="#FFFFFF">
<mx:Panel title="Style Sample" width="200" height="200"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom=" 10" layout="horizontal">
<comps:CustomCircle borderColor="#000000" fillColor="#FF0000" />
</mx:Panel>
</mx:Application>

      现在你应该会有这样的感觉了:“喔,现在我知道在哪里可以使用它们了”或者“嗯,我想我会在新的项目中尝试使用这些元数据标签”。如果你没有,那么你可能需要回过头去再看一遍这篇文章。OK,我想说的是Adobe Flex小组提供给我们的元数据标签不只是非常的强大,可以让我们扩展或自定义我们要做的东西,而且它还非常易于使用。通过使用它们,仅仅几行代码就可以完成一大堆事情。如果不使用这些标签,你会发现在Flex 2中实现一些东西是很辛苦的。

文件上沒記載的

[SWF]
[SWF(width="300", height="200", frameRate="18", backgroundColor="#FFFFFF")]

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comps="*" frameRate="31" width="400">
<mx:Metadata>

     [SWF(width="200", height="200", frameRate="31", backgroundColor="#FFFFFF")]

</mx:Metadata>

<mx:Script>
<![CDATA[

---------------------------------------- [RemoteClass] [RemoteClass(alias="flex.messaging.io.ArrayCollection")] [RemoteClass(alias="flex.messaging.io.ArrayList")] [Frame] [Frame(factoryClass="mx.managers.SystemManager")] [Frame(factoryClass="mx.core.FlexApplicationBootstrap")] [Frame(extraClass="Obj")] [ExcludeClass] [DefaultBindingProperty] [DefaultBindingProperty(destination="dataProvider")] [DefaultTriggerEvent] [DefaultTriggerEvent("itemClick")] [DefaultTriggerEvent("scroll")] [Exclude] [Exclude(name="defaultButton", kind="property")] [Exclude(name="horizontalScrollPolicy", kind="property")] [Exclude(name="icon", kind="property")] [Exclude(name="label", kind="property")] [Exclude(name="tileHeight", kind="property")] [ResourceBundle] [ResourceBundle("validators")] [ResourceBundle("SharedResources")] [ResourceBundle("foo")] [PercentProxy] [PercentProxy("percentHeight")] [RequiresDataBinding] [RequiresDataBinding(true)] [CollapseWhiteSpace] [MaxChildren] [MaxChildren(0)] [AccessibilityClass] [AccessibilityClass(implementation="mx.accessibility.PanelAccImpl")] [AccessibilityClass(implementation="mx.accessibility.TitleWindowAccImpl")]

分享到:
评论

相关推荐

    Flex 中的元数据标签

    Flex 中的元数据标签的用法和详细介绍

    Flex 2 中的元数据标签

    ### Flex 2 中的元数据标签 在Flex 2中,元数据标签是用于提供类、方法或属性的额外信息的一种特殊标记。这些标签通常位于类定义或成员声明之前,并被ActionScript编译器用来控制类的行为或者为开发工具提供有关...

    flex as3 元数据标签综合

    ### Flex AS3 元数据标签综合解析 #### 一、元数据标签概述 在Flex与AS3(ActionScript 3)开发中,元数据标签(Metadata Tags)是一种重要的语法结构,用于向编译器提供有关类或成员的额外信息。这些标签能够帮助...

    Flex_2_中的元数据标签

    ### Flex 2 中的元数据标签 元数据标签在 Flex 2 开发中扮演着重要的角色,它们为编译器提供了必要的信息以更好地理解和编译应用程序。这些标签并不直接参与 SWF 文件的生成,而是作为指导编译过程的重要工具。 ##...

    flex数据绑定的原理

    当我们使用`[Bindable]`元数据标签标记一个类的成员变量时,Flex编译器会自动为这个变量生成相关的访问器(getter和setter)。例如,在提供的代码段中,`list`变量被标记为`[Bindable]`: ```actionscript public ...

    flex 绑定元数据

    在Flex编程中,[Embed]标签属于元数据标记之一,它的作用是将外部的资源(如图片、声音、视频等)嵌入到应用程序中。嵌入后,这些资源可以通过类的形式在应用程序中被引用。具体来说,[Embed]标签通过指定资源的路径...

    FLEX数据绑定专题

    例如,通过使用Bindable元标签或Bindable类修饰符,可以实现输入控件(如TextInput)与数据模型间的双向绑定: ```mxml ``` 在Flex中,数据绑定是提高开发效率、简化代码的关键特性。结合Java后端,开发者可以...

    Flex DataGrid从XML文件中加载数据

    7. **数据绑定**:`[Bindable]`元标签用于声明变量`users`是可绑定的,意味着当`users`的值改变时,任何绑定到`users`的UI组件都会自动更新。 ```actionscript [Bindable] private var users:XML; ``` 总结来说,...

    FLEX数据绑定四种方式

    [Bindable]是一个元数据标签,用于标记那些可以进行数据绑定的变量或方法。当数据源发生变化时,Flex会自动触发相应的事件,使得UI能够实时更新。 **使用方法** 例如,标记一个变量为可绑定: ```xml &lt;![CDATA[ ...

    Flex中采用Flex-config.xml进行命令行的编译

    通过`&lt;metadata&gt;`标签,可以添加自定义元数据,如作者、版权信息等。 4. **库路径和依赖项**: `&lt;library-path&gt;`标签用于指定库文件的路径,例如引入外部库或SWC文件,这对于项目依赖管理至关重要。 5. **错误和...

    flex笔记 flex笔记 flex笔记

    - 元数据(`&lt;mx:metadata&gt;`)用于为组件提供额外的信息或配置选项。 #### ActionScript 1. **网络通信**: - Flex使用ActionScript来处理网络通信。例如,`&lt;mx:HTTPService&gt;` 标签可以用于发起HTTP请求。 - 在...

    flex map

    "Flex Map"是一个在IT行业中涉及的...通过阅读提供的博客文章和研究压缩包内的`library.swf`和`catalog.xml`文件,开发者可以学习如何在Flex项目中创建和自定义地图功能,以及如何利用资源库和元数据进行更有效的开发。

    flex 使用swc 包

    4. **元数据**:关于组件或类的元信息,例如元数据可以指定组件的外观和行为。 描述中提到的“flex3引用的swc包”,表明这是一个适用于Flex 3版本的SWC库。Flex 3是Flex框架的一个早期版本,它引入了许多特性,比如...

    Flex 项目安装备份文件

    项目文件包括源代码、资源配置、元数据以及库引用等。 在“Flex项目安装备份文件”中,备份至关重要,因为源代码是任何项目的核心。源码备份能防止意外的数据丢失,例如计算机故障、病毒攻击或代码误删。定期备份...

    Flex分页技术

    `[Bindable]`元标签用于标记变量,使其在改变时能触发视图的自动更新。例如,`_xmllistCollection`被标记为可绑定,当数据源发生变化时,DataGrid会自动更新显示。 综上所述,Flex开发Flex dataGrid分页技术涵盖了...

    flex3去水印简单实用的方法

    总的来说,Flex 3的水印去除是一个相对简单的过程,主要通过创建一个特定的类并将其添加到MXML文件的元数据中。然而,这种方法应该谨慎使用,因为可能涉及到版权和许可问题。如果需要完全自定义界面,考虑购买无水印...

    FLEX 数据绑定专题一(转)

    2. ActionScript数据绑定:在ActionScript代码中,可以使用Bindable元标签声明类的属性为可绑定的,然后使用`bindable`关键字定义绑定表达式。 数据绑定的应用场景: 数据绑定在FLEX中广泛应用于各种场景,包括但不...

    FLEX从入门到精通.pdf

     6.5 非正式的SWF元数据标记  6.6 本章小结   第7章 MXML基础  7.1 语言原则  7.1.1 MXML是XML  7.1.2 命名约定  7.1.3 MXML语法  7.1.4 显示层次  7.1.5 MXML名称空间  7.2 使用MXML  7.2.1...

    Baidu-Mobile-Flex.rar_flex_flex mobile

    3. **SWC文件**: SWC是Flex的库文件格式,可以包含ActionScript类、资源、元数据和库元数据。开发者可以将SWC文件作为库引入到他们的项目中,以便重用代码和组件。 4. **百度地图API**: 百度地图提供了丰富的API...

    FLex文档教程

    使用`[Bindable]`元数据标签声明可绑定的属性,这样当数据源发生变化时,UI会自动更新,无需手动刷新。 **五、Flex组件模型与协作** Flex的组件模型允许开发者和设计师进行分离式协作。组件设计可以独立于业务逻辑...

Global site tag (gtag.js) - Google Analytics