Flex 自定义Style属性

Metadata Tags in Custom Components

You insert metadata tags into your MXML and ActionScript files to provide information to the Adobe® Flex® compiler.
Metadata tags do not get compiled into executable code, but provide information to control how portions of your code
get compiled.

Metadata statements are associated with a class declaration, an individual data field, or a method. They are bound to
the next line in the file. When you define a component property or method, add the metadata tag on the line before
the property or method declaration.

 

Metadata tags in ActionScript

In an ActionScript file, when you define component events or other aspects of a component that affect more than a
single property, you add the metadata tag outside the class definition so that the metadata is bound to the entire class,

 

MoreDetail

 

Style         Metadata

 

name  String (Required)

       

Specifies the name of the style.

 

type  String  

  

Specifies the data type of the value that you write to the style property. If the type is 
not an ActionScript type such as Number or Date, use a qualified class name in the 
form packageName.className.

 

arrayType  String

 

If type is Array, arrayType specifies the data type of the Array elements. If the data
type is not an ActionScript type such as Number or Date, use a qualified class name in
the form packageName.className.

 

format  String

 

Specifies the units of the property. For example, if you specify type as "Number" , 
you might specify format="Length" if the style defines a length measured in pixels. 
Or, if you specify type="uint", you might set format="Color" if the style defines
an RGB color.

 

enumeration  String

 

Specifies an enumerated list of possible values for the style property.

 

inherit  String

 

Specifies whether the property is inheriting. Valid values are yes and no. This property refers to CSS inheritance, not object-oriented inheritance. All subclasses automatically use object-oriented inheritance to inherit the style property definitions of their superclasses.

Some style properties are inherited using CSS inheritance. If you set an inheritable style property on a parent container, its children inherit that style property. For example, if you define fontFamily as Times for a Panel container, all children of that container will also use Times for fontFamily, unless they override that property.

If you set a noninheritable style, such as textDecoration, on a parent container, only the parent container and not its children use that style. For more information on inheritable style properties, see About style inheritance.

 

states  String

 

For skin properties, specifies that you can use the style to specify a stateful skin for multiple states of the component. For example, the definition of the Slider.thumbSkin style uses the following [Style] metadata tag:

[Style(name="thumbSkin", type="Class", inherit="no", states="disabled, down, over, up")]This line specifies that you can use the Slider.thumbSkin style to specify a stateful skin for the disabled, down, over, and up states of the Slider control. For more information, see Creating Halo Skins.

 

theme String

 

If the style is only valid for a specific theme, specifies the name of the theme. For example, some styles on Flex components are only valid if you are using the Spark or Halo theme. For more information, see About themes

 

Demo：

1· ColourComponent  Class

ActionScript 3语言:

package
{
  import mx.core.UIComponent;
  /**
   * This Class is use to Test the Style stuff
   *
   * name               this one is to set the styleName , so later we can call
   *                    getStyle(name) to get the styleValue
   * type               define the type for the style
   * enumeration        define the possible value for the style
   *                    WARNING: the possible means the value can be one of in the enumeration ,or you can set new value
   *                    which is not include in
   * inherit            set this style can be extends or not
   */

  [ Style( name = "valueOne" , type = "String" , enumeration = "one,two,three,four" , inherit = "no" )]
  public class ColourComponent extends UIComponent
  {
    private var styleReceive : String;

    public function ColourComponent (){ super(); }

    override public function styleChanged( styleProp : String ): void
    {
      trace( "StyleProp :" + styleProp + " Changed");
      styleReceive = getStyle( "valueOne");
      trace( "styleReceive = " + styleReceive);
    }
  }
}

 

2· App.mxml

MXML语言:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx= "http://ns.adobe.com/mxml/2009"
         xmlns:s= "library://ns.adobe.com/flex/spark"
         xmlns:mx= "library://ns.adobe.com/flex/halo"
         minWidth= "640"
         minHeight= "480"
         xmlns:local= "*" >
  <fx:Script>
    <![CDATA[
      import mx.events.ListEvent;

      protected function onChange( event : ListEvent ): void
      {
        target . setStyle( "valueOne" , box . selectedLabel);
      }
    ]]>
  </fx:Script>

  <fx:Style>
    @namespace local "*";
    @namespace mx "library://ns.adobe.com/flex/halo";
    @namespace s "library://ns.adobe.com/flex/spark";
    local|ColourComponent
    {
      value-one:one
    }

  </fx:Style>
  <mx:VRule x= "182"
        y= "0"
        height= "480"
        width= "10" />
  <s:Group x= "187"
       y= "1"
       width= "454"
       height= "478" >
    <local:ColourComponent id= "target" >
    </local:ColourComponent>
  </s:Group>
  <mx:ComboBox id= "box"
         x= "9"
         y= "11"
         dataProvider= "{['one','two','three','four','five']}"
         editable= "true"
         change= "onChange(event)" />
</s:Application>

 

More Info Plaease See 为自定义Flex Component定义Style