`
JavaCrazyer
  • 浏览: 3011899 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类

Flex4之元数据标签使用

阅读更多

Flex 元数据标签
1、[ArrayElementType]
使用ArrayElementType元数据标签可以让你定义数组元素的数据类型。
程序代码:
[ArrayElementType("String")] 
 public var arrayOfStrings:Array;
 [ArrayElementType("Number")] 
 public var arrayOfNumbers:Array;
 [ArrayElementType("mx.core.UIComponent")] 
 public var arrayOfUIComponents:Array;

2、[Bindable]
Bindable可以用来绑定简单数据类型、类、复杂数据类型以及函数。绑定数据的时候,你必须先使用元数据标签定义一下数据。
A simple use of [Bindable]

 <fx:Script>
 <![CDATA[
  [Bindable]
  private var me:String="Rich Tretola";
 ]]>
 </fx: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>

Bindable也可以用来绑定到事件
Using [Bindable] with getters and setters

 <fx: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);
  }
 ]]>
 </fx: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>
3、[DefaultProperty]
DefaultProperty元数据标签用来将一个单一属性设定为某个类的默认属性。它允许在一个容器标签内设定属性,而不用定义属性的名字。
package comps
{
 import mx.controls.Button;
 [DefaultProperty("label")]
 public class MyButton extends Button
 {
  
 }
}
Using the MyButton class wih [DefaultProperty]
 <comps:MyButton>
  <mx:String>Test</mx:String>
 </comps:MyButton>

4、[Embed]
Embed元数据标签用来导入图片到程序。可以通过两种方式使用Embed。你可以将图片嵌入到ActionScript中并将其指派给一个变量,或者你也可以将图片直接指派给组件的属性。
方式一:
[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}"/>
方式二:
<mx:Button label="Icon Button 1" icon="@Embed(source=myIcon.gif')"/>
<mx:Button label="Icon Button 2" icon="@Embed(source=myIcon.gif')"/>
上面这两个例子产生的结果是一样的。创建myIcon类的好处是,它在一个类中只定义一次并可以绑定到程序中的多个组件。
 
5、[Event]
Event元数据标签用来声明那些被自定义类分派的事件。将这个元数据标签添加到类定义中之后,你就可以在MXML标签中添加事件处理函数来初始化该自定义类。
Custom ButtonLabel class using [Event]
package comps
{
 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);
  }  
 }
}
Using the ButtonLabel class with the labelChanged [Event]

  
 <fx: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;
  }
 ]]>
 </fx: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>

6、[Effect]
Effect元数据标签用来定义一个自定义效果,当某个事件发生的时候该效果会被分派。
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 {
...
Add labelChangedEffect to the Component
Instantiation MXML Tag
<comps:ButtonLabel id="myButton" labelChanged="labelChanged(event);"
labelChangedEffect="myEffect" x="10" y="39"/>
 
7、[IconFile]
IconFile是用来定义一个jpg,gif或者png文件的文件名的,它在你的自定义类中作为图标来使用。[Embed]元数据标签可以用来嵌入图片、SWF文件、音乐文件以及视频文件等,而IconFile则只是用来嵌入用来作为自定义类图标的文件。下面是一个IconFile的例子:
[IconFile("icon.png")]
public class CustomButton extends Button
{
 
}
 
8、[Inspectable]
Inspectable元数据标签可以用来定义那些能在代码提示和属性检测器(property inspector)中显示的属性。
 <fx:Script>
 <![CDATA[
  [Inspectable(defaultValue="Visa",
  enumeration="Visa,Mastercard,Discover,American Express",
  category="Credit Card", type="String")]
  
  public var ccType:String;
 ]]>
 </fx:Script>
</mx:HBox>

 <comps:MyComponent ccType=""/>

 

9、[InstanceType]
当在一个模板对象中声明一个像IDeferredInstance这样的变量时,InstanceType元数据标签就用来声明对象的类型。
用法:
[InstanceType("package.className")]
 

10、[NonCommittingChangeEvent]
NonCommittingChangeEvent元数据标签在某个特定事件发生的时候可以防止变量在事件发生的过程中被更改。
Using [NonCommittingChangeEvent]

 <fx: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);
  }
 ]]>
 </fx: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>

11、[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;
    }
}
 

12、[Style]
Style元数据标签用来为组件定义自定义样式属性的。只需要简单地将Sytle元数据标签添加到类的定义当然,然后就可以使用getSytle方法获取它的值了。
Custom Class CustomCircle using [Style] tags
package comps
{
 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);
  }
 }
}
Using CustomCircle and assigning custom style properties

 <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>

标签 描述
[ArrayElementType] 在数组中定义所有允许的数据类型。
[Bindable] 声明一个属性可以在代码中使用数据绑定表达式。
[DefaultProperty] 定义组件在MXML中使用时的默认属性的名称。
[Deprecated] 标识一个类或类的元素是不推荐使用的,这样编译器能认出他并在被调用时给出一个警告信息。
[Effect] 定义MXML的特效属性名称。
[Embed] 在编译时导入 JPED,PNG,SVG 或 SWF文件。也会导入SWC文件的图片资源。他的功能等同于MXML中的 @Embe 语法。
[Event] 定义MXML的事件属性的名称和类型。
[Exclude] 使 Flex Builder 的标签检查器忽略类元素。语法类似 [Exclude(name=”label”, kind=”property”)]
[ExcludeClass] 是 Flex Builder 标签检查器忽略类。这相当于ASDoc中的 @private 标签。
[IconFile] 定义一个图标文件,使组件在Adobe Flex Builder的插入面板中以该图标显示。
[Inspectable] 定义一个属性的列表,供组件使用者在 Flex Builder 的的属性提示和标签检查中使用。同时也定义了属性的可用值。
[InstanceType] 指定了 IDeferredInstance 中的,属性接受的数据类型。
[NonCommittingChangeEvent] 定义一个事件过渡触发器。
[RemoteClass] 把一个ActionScript对象映射到Java对象。
[Style] 为组件的样式属性定义一个MXML标签属性。
[Transient] 当一个 ActionScript 对象被映射到Java对象后,被该标签标识的属性,会从发送到服务端的数据中忽略掉。

分享到:
评论

相关推荐

    Flex 中的元数据标签

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

    AMF抓取flex页面数据

    本教程将详细介绍如何抓取使用AMF协议的Flex页面数据,并涉及模拟登录和页面抓取的相关知识。 1. **AMF简介** - AMF是一种高效的数据序列化格式,用于在Flex客户端和服务器之间传输数据。它比XML或JSON更快,因为...

    使用 Flex 4.5 访问数据

    使用 Flex 4.5 访问数据是构建动态应用程序的重要组成部分,它提供了多种技术来实现与后端服务的交互,如 HTTPService、WebService 和 RemoteObject 组件。 Flex 技术在数据访问方面提供了一种不同于传统基于 HTML ...

    Flex 2 中的元数据标签

    ### Flex 2 中的元数据标签 在Flex 2中,元数据标签是用于提供类、...合理使用这些元数据标签,可以显著提高Flex应用的开发效率和代码质量。对于Flex开发者来说,熟悉并掌握这些元数据标签的应用技巧是非常重要的。

    flex as3 元数据标签综合

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

    Flex 3D标签云

    Flex 3D标签云是一种在Flex平台上创建动态、立体效果的标签展示技术,它通过将传统的二维标签转换为三维空间中的旋转元素,为用户提供了更直观、更具视觉吸引力的交互体验。这种技术常用于网站、应用程序或者数据...

    flex与PHP数据交互教程

    Flex是Adobe公司开发的一种富互联网应用程序(RIA)框架,它主要使用ActionScript编程语言和MXML标记语言,用于创建交互式、动态的用户界面。PHP则是一种广泛使用的开源服务器端脚本语言,尤其适合Web开发,可以嵌入...

    flex显示数据库数据

    在本场景中,我们讨论的是如何在Flex 4中利用Myeclipse 9.0集成开发环境,从MySQL数据库中获取数据,并通过DataGrid组件在Flex页面上展示这些数据。这个过程涉及到多个技术栈,包括Java、Mysql数据库、Tomcat服务器...

    Flex使用json和xml数据交互

    ### Flex使用json和xml数据交互:深度解析与实践 #### 引言 在现代Web开发领域,数据交换格式的选择对于实现高效、灵活的前后端通信至关重要。JSON(JavaScript Object Notation)与XML(Extensible Markup ...

    flex数据绑定的原理

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

    Flex 3D云标签

    6. **数据绑定**:如果标签的内容来源于数据源,那么源代码中会有数据绑定的实现,将数据模型与视图(标签)关联起来,实现数据驱动的动态更新。 学习和研究Flex 3D云标签的源代码可以帮助你深入理解3D图形编程、...

    flex组件之数据可视化组件实例源码

    在Flex中,数据可视化组件是用于创建各种图表和图形的工具,使开发者能够将复杂的数据转化为易于理解的视觉表示。本实例源码提供了对数据可视化的深入理解和实际应用。 首先,我们要了解Flex中的数据绑定机制。在...

    flex [bindadle]标签数据绑定经典案例

    在探讨“Flex [Bindable]标签数据绑定经典案例”这一主题时,我们首先需要理解Flex框架以及数据绑定在其中的应用。Flex是一种用于构建跨平台富互联网应用程序(RIA)的软件框架,由Adobe Systems开发。它使用MXML...

    Flex数据共享与压缩

    在Flex开发中,数据管理是核心任务之一,尤其是在处理大量数据时。"Flex数据共享与压缩"的...通过使用数据压缩和分片存储技术,我们可以确保Flex应用在面对XMLList等大数据结构时仍能保持良好的运行效率和用户体验。

    flex图表展示数据源码

    在Flex中,我们可以使用各种图表组件来展示数据,这些图表能够以视觉化的方式帮助用户理解复杂的统计数据。"flex图表展示数据源码"指的是使用Flex进行数据可视化时,用于驱动图表的源代码。 在Flex中,数据图表主要...

    Flex与java交换数据 Flex数据交换 Flex与java交换数据教程

    4. **数据交换**:在Flex客户端调用服务时,数据会被自动序列化为AMF格式并通过网络发送。Java服务接收到AMF数据后,BlazeDS会将其反序列化为Java对象。反之,Java返回的结果也会被序列化为AMF,然后在Flex客户端解...

    flex与jsp结合使用

    4. **使用 TAGLIB 实现结合**:如描述中所示,将 Flex 与 JSP 结合的一种方法是使用 Adobe 提供的 TAGLIB。这需要下载 `flex-webtier-jsp.jar` 文件,并将其放在 `WEB-INF/flex/jars` 目录下。在 `WEB.XML` 配置文件...

    Flex 标签云 特效 漂亮

    在Flex中,我们可以使用数据绑定技术将这些数据绑定到UI组件上,使得数据的变化能实时反映在视图上。数据集(ArrayCollection)是Flex中常用的用来存储和操作数据的类,适合于与组件进行数据绑定。 **3. 动画和效果...

    flex4 简单增删改实例 使用mysql数据库

    flex4 简单增删改实例 使用mysql数据flex4 简单增删改实例 使用mysql数据flex4 简单增删改实例 使用mysql数据flex4 简单增删改实例 使用mysql数据flex4 简单增删改实例 使用mysql数据

Global site tag (gtag.js) - Google Analytics