FLEX元标签_style

sinkingboat 发表于 2011-12-22 08:54

1.概述 
       当你创建自定义组件的时候，有可能你想创建一个style属性定义样式。        元标签格式如下 
                     )] 下面的表格描述了元数据标签的各种属性：
<table border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td valign="top">Option</td>
<td valign="top">Type</td>
<td valign="top">Description</td>
</tr>
<tr>
<td valign="top">name</td>
<td valign="top">String</td>
<td valign="top">(必填) 定义style的名称.</td>
</tr>
<tr>
<td valign="top">type</td>
<td valign="top">String</td>
<td valign="top">定义你写入的这个style属性的值类型。如果这个类型不是一个actionScript类型。如果是你自定义的类型，请使用类路径全名，比如： packageName.className.</td>
</tr>
<tr>
<td valign="top">arrayType</td>
<td valign="top">String</td>
<td valign="top">如果type是Array类型，则arrayType定义了其内的元素(Array elements)数据类型。如果是你自定义的类型，请使用类路径全名，比如： packageName.className.</td>
</tr>
<tr>
<td valign="top">format</td>
<td valign="top">String</td>
<td valign="top">定义这个属性的单位。比如，如果type为”Number”,则你可以定义format=”Length”,或者，如果你定义了type=”uint”, 你可以定义format=”Color”.</td>
</tr>
<tr>
<td valign="top">enumeration</td>
<td valign="top">String</td>
<td valign="top">为这个style的属性定义了它的值列表enumerated list.</td>
</tr>
<tr>
<td valign="top">inherit</td>
<td valign="top">String</td>
<td valign="top">定义这个属性是否可以继承.你可以输入yes and no. 这个属性指的是CSS继承, 而不是对象继承. 所有的子对象自动的继承对象的style属性。</td>
</tr>
<tr>
<td valign="top">states</td>
<td valign="top">String</td>
<td valign="top">对于皮肤属性，你可以用style来为组件的多个状态定义各种皮肤状态。比如:Slider.thumbSkin style 使用了下面的元数据标签:。</td>
</tr>
</tbody>
</table>
下面的例子为 textSelectedColor 样式属性的定义:        下面的例子为 verticalAlign 样式属性的定义:        2.自定义样式举例        比如你创建了一个组件StyledRectangle，使用了一个渐变的颜色，如下所示 <div align="center"><a href="http://livedocs.adobe.com/flex/3/html/images/gradientRect.png" target="_blank" target="_blank"><img src="http://livedocs.adobe.com/flex/3/html/images/gradientRect.png" .load="imgResize(this, 650);" ;="" border="0"></a> </div>       这个渐变色使用了两个颜色，你可以设置一个新的style属性称之为fillColors，fillColors style可以由两个颜色的数组构成。代码详见 StyledRectangle.as ，演示代码如下 <div id="codeText" class="codeText"><ol style="margin:0 1px 0 0;padding:5px 0;" start="1" class="dp-css"><li><?xml version="1.0"?> </li><li>
 </li><li>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" </li><li>
    xmlns:MyComp="myComponents.*"> </li><li>
  </li><li>
     </li><li>
    <mx:Style> </li><li>
        StyledRectangle {fillColors: #FF00FF, #00FFFF} </li><li>
    </mx:Style> </li><li>
 </li><li>
     </li><li>
    <MyComp:StyledRectangle id="mySR1"/> </li><li>
 </li><li>
     </li><li>
    <MyComp:StyledRectangle id="mySR2"/> </li><li>
 </li><li>
     </li><li>
    <mx:Button label="Set gradient" </li><li>
        click="mySR2.setStyle('fillColors', );"/> </li><li>
 </li><li>
     </li><li>
    <MyComp:StyledRectangle id="mySR3" fillColors=""/> </li><li>
</mx:Application></li></ol></div>       本例中，对于组件StyledRectangle 的selector的默认值为 #FF00FF 和 #00FFFF。通过使用setStyle()，可以改变fillColor 的样式。最后一个组件说明可以通过使用MXML的tag标签设置style属性。 2.1 定义一个样式属性 (1) 在类的定义之前插入一个元标签        插入一个元标签，定义一个MXML tag 样式属性。如果你没有使用标签，编译器将给出一个语法错误。 (2) 重载styleChanged() 方法，检测属性值的变化。详见 <a href="http://livedocs.adobe.com/flex/3/langref/mx/core/UIComponent.html#styleChanged%28%29" target="_blank" target="_blank">styleChanged()</a> (3) 重载updateDisplayList()方法合并自定义组件样式的显示。详见 <a href="http://livedocs.adobe.com/flex/3/langref/mx/core/UIComponent.html#updateDisplayList%28%29" target="_blank" target="_blank">updateDisplayList()</a> (4) 定义一个static 初始化函数，设置默认的样式属性值。详见<a href="http://livedocs.adobe.com/flex/3/html/skinstyle_3.html#184171" target="_blank" target="_blank">Setting default style values</a>. 下面定义了一个自定义组件StyledRectangle ，包含了自定义属性fillColors 和 alphas ，可以设置两种颜色的渐变和透明度。 <div id="codeText" class="codeText"><ol style="margin:0 1px 0 0;padding:5px 0;" start="1" class="dp-css"><li>package myComponents </li><li>
{ </li><li>
    // skinstyle/myComponents/StyledRectangle.as </li><li>
    import mx.core.UIComponent; </li><li>
    import mx.styles.CSSStyleDeclaration; </li><li>
    import mx.styles.StyleManager; </li><li>
    import flash.display.GradientType; </li><li>
 </li><li>
    // 定义了两个样式属性 </li><li>
    [Style(name="fillColors",type="Array",format="Color",inherit="no")] </li><li>
    [Style(name="alphas",type="Array",format="Number",inherit="no")] </li><li>
 </li><li>
    public class StyledRectangle extends UIComponent </li><li>
    { </li><li>
        // 定义一个静态变量. </li><li>
        private static var classConstructed:Boolean = classConstruct(); </li><li>
     </li><li>
        // 定义一个静态方法. </li><li>
        private static function classConstruct():Boolean { </li><li>
            if (!StyleManager.getStyleDeclaration("StyledRectangle")) </li><li>
            { </li><li>
                // 如果 StyledRectangle组件的CSS定义为空，则创建一个默认的, </li><li>
                var myRectStyles:CSSStyleDeclaration = new CSSStyleDeclaration(); </li><li>
                myRectStyles.defaultFactory = function():void </li><li>
                { </li><li>
                    this.fillColors = [0xFF0000, 0x0000FF]; </li><li>
                    this.alphas = [0.5, 0.5]; </li><li>
                } </li><li>
                StyleManager.setStyleDeclaration("StyledRectangle", myRectStyles, true); </li><li>
 </li><li>
            } </li><li>
            return true; </li><li>
        } </li><li>
     </li><li>
        // 构造器 </li><li>
        public function StyledRectangle() { </li><li>
            super(); </li><li>
        } </li><li>
     </li><li>
        // 定义一个默认 100 x 100 pixels 大小. </li><li>
        override protected function measure():void { </li><li>
            super.measure(); </li><li>
 </li><li>
            measuredWidth = measuredMinWidth = 100; </li><li>
            measuredHeight = measuredMinHeight = 100; </li><li>
        } </li><li>
 </li><li>
        // 定义一个标志，表示style属性的值改变了 </li><li>
        private var bStypePropChanged:Boolean = true; </li><li>
 </li><li>
        // 定义一个变量保存colors的值. </li><li>
        private var fillColorsData:Array; </li><li>
 </li><li>
        // 定义了一个变量保存当前lapha值. </li><li>
        private var alphasData:Array; </li><li>
 </li><li>
        // 定义变量用于额外的填充控制 </li><li>
        private var ratios:Array = [0x00, 0xFF]; </li><li>
         </li><li>
        // 重载了 styleChanged()方法检测style的改变. </li><li>
        override public function styleChanged(styleProp:String):void { </li><li>
            super.styleChanged(styleProp); </li><li>
 </li><li>
            // 检测style是否改变. </li><li>
            if (styleProp=="fillColors" || styleProp=="alphas") { </li><li>
                bStypePropChanged=true; </li><li>
                invalidateDisplayList(); </li><li>
                return; </li><li>
            } </li><li>
        } </li><li> </li><li>
        // 重载updateDisplayList() 方法更新组件</li><li>
        override protected function updateDisplayList(unscaledWidth:Number, </li><li>
                unscaledHeight:Number):void { </li><li>
            super.updateDisplayList(unscaledWidth, unscaledHeight); </li><li>
 </li><li>
            if (bStypePropChanged==true) </li><li>
            { </li><li>
                // 如果style改变，则重新填充 </li><li>
                fillColorsData=getStyle("fillColors"); </li><li>
                alphasData=getStyle("alphas"); </li><li>
                 </li><li>
                graphics.beginGradientFill(GradientType.LINEAR, </li><li>
                    fillColorsData, alphasData, ratios); </li><li>
                graphics.drawRect(0, 0, unscaledWidth, unscaledHeight); </li><li>
                 </li><li>
                bStypePropChanged=false; </li><li>
            } </li><li>
        } </li><li>
    } </li><li>
}</li></ol></div> 2.2 创建一个默认的style属性值        当你为组件创建一个style属性时，必须决定如何设置默认值，这不象在构造函数内调用setStyle()那么简单，你必须考虑FLEX如何处理style，以及style的处理次序。        当FLEX编译你的应用程序，在创建任何组件之前，FLEX首先检查<mx:Style> 中的定义标签。因此，如果你在构造函数内调用setStyle()，则在处理<mx:Style> 标签之后调用，意味着将在组件的每个实例化对象中都设置了style属性。这样的重载与<mx:Style>中的声明将发生冲突。        最简单的方式是通过一个静态函数给style属性设置默认值。静态函数一旦执行，FLEX首先创建一个组件的实例对象。因此，在定义一个style属性时，你可以在自定义组件类中使用classConstructed 变量和classConstruct()定义一个初始化静态函数。        当FLEX创建一个StyledRectangle 组件时，调用classConstruct()方法。这个方法决定自定义组件使用<mx:Style> 时，是否为style设置默认值。如果没有定义style，classConstruct()将创建一个，为style属性设置默认值。        因此，如果你的应用程序忽略了<mx:Style>标签，通过classConstruct()将自动创建一个默认的style定义。例如                  <MyComp:StyledRectangle/>        如果使用了<mx:Style>标签，<mx:Style>将创建默认的style定义，如下所示 <div id="codeText" class="codeText"><ol style="margin:0 1px 0 0;padding:5px 0;" start="1" class="dp-css"><li>    <mx:Style> </li><li>
        StyledRectangle {fillColors: #FF00FF, #00FFFF} </li><li>
    </mx:Style> </li><li>
    <MyComp:StyledRectangle/></li></ol></div> 3. 为皮肤定义一个style        FLEX允许你使用style属性设置组件皮肤。自定义组件也可以设置皮肤。        设置皮肤与设置style属性的原理是一样的，为皮肤设置一个style属性触发器以调用styleChanged()。styleChanged()检测皮肤的改变，在updateDisplayList() 中执行组件的更新。        设置皮肤与设置style属性的不同之处在于如何描述标签。当style属性为skin时，如下例所示                 参考文献 1.Example: Creating style properties . http://livedocs.adobe.com/flex/3/html/help.html?content=skinstyle_3.html 2.Flex Style 元数据标签 . http://www.myflexhero.com/share/flex-hero-flex4/flex-metadata-tag/323

页: [1]

Chinaunix's Archiver

FLEX元标签_style