免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
最近访问板块 发新帖
查看: 1546 | 回复: 0

FLEX元标签_style [复制链接]

论坛徽章:
0
发表于 2011-12-22 08:54 |显示全部楼层
1.概述
       当你创建自定义组件的时候,有可能你想创建一个style属性定义样式。
       [Style]元标签格式如下
                     [Style(name="style_name"[,property="value",...])]
下面的表格描述了[Style]元数据标签的各种属性:
Option Type Description
name String (必填) 定义style的名称.
type String 定义你写入的这个style属性的值类型。如果这个类型不是一个actionScript类型。如果是你自定义的类型,请使用类路径全名,比如: packageName.className.
arrayType String 如果type是Array类型,则arrayType定义了其内的元素(Array elements)数据类型。如果是你自定义的类型,请使用类路径全名,比如: packageName.className.
format String 定义这个属性的单位。比如,如果type为”Number”,则你可以定义format=”Length”,或者,如果你定义了type=”uint”, 你可以定义format=”Color”.
enumeration String 为这个style的属性定义了它的值列表enumerated list.
inherit String 定义这个属性是否可以继承.你可以输入yes and no. 这个属性指的是CSS继承, 而不是对象继承. 所有的子对象自动的继承对象的style属性。
states String 对于皮肤属性,你可以用style来为组件的多个状态定义各种皮肤状态。比如:Slider.thumbSkin style 使用了下面的 [Style] 元数据标签:

[Style(name="thumbSkin",, inherit="no", states="disabled, down, over, up")]。

下面的例子为 textSelectedColor 样式属性的定义:
       [Style(name="textSelectedColor",type="Number",format="Color",inherit="yes")]

下面的例子为 verticalAlign 样式属性的定义:
       [Style(name="verticalAlign", type="String", enumeration="bottom,middle,top", inherit="no")]

2.自定义样式举例
       比如你创建了一个组件StyledRectangle,使用了一个渐变的颜色,如下所示

       这个渐变色使用了两个颜色,你可以设置一个新的style属性称之为fillColors,fillColors style可以由两个颜色的数组构成。代码详见 StyledRectangle.as ,演示代码如下
  1. <?xml version="1.0"?>
  2. <!-- skinstyle\MainRectWithFillStyles.mxml -->
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  4.     xmlns:MyComp="myComponents.*">
  5.  
  6.     <!-- 通过CSS selector设计style-->
  7.     <mx:Style>
  8.         StyledRectangle {fillColors: #FF00FF, #00FFFF}
  9.     </mx:Style>

  10.     <!-- 这里使用了默认的样式. -->
  11.     <MyComp:StyledRectangle id="mySR1"/>

  12.     <!-- 这里使用了默认的样式. -->
  13.     <MyComp:StyledRectangle id="mySR2"/>

  14.     <!-- 利用 setStyle() 方法改变默认的样式 -->
  15.     <mx:Button label="Set gradient"
  16.         click="mySR2.setStyle('fillColors', [0x000000, 0xFFFFFF]);"/>

  17.     <!-- Set fillColors in MXML. -->
  18.     <MyComp:StyledRectangle id="mySR3" fillColors="[0x00FF00, 0xFFFFFF]"/>
  19. </mx:Application>
       本例中,对于组件StyledRectangle 的selector的默认值为 #FF00FF 和 #00FFFF。通过使用setStyle(),可以改变fillColor 的样式。最后一个组件说明可以通过使用MXML的tag标签设置style属性。

2.1 定义一个样式属性

(1) 在类的定义之前插入一个[Style]元标签
       插入一个[Style]元标签,定义一个MXML tag 样式属性。如果你没有使用[Style]标签,编译器将给出一个语法错误。
(2) 重载styleChanged() 方法,检测属性值的变化。详见 styleChanged()
(3) 重载updateDisplayList()方法合并自定义组件样式的显示。详见 updateDisplayList()
(4) 定义一个static 初始化函数,设置默认的样式属性值。详见Setting default style values.

下面定义了一个自定义组件StyledRectangle ,包含了自定义属性fillColors 和 alphas ,可以设置两种颜色的渐变和透明度。
  1. package myComponents
  2. {
  3.     // skinstyle/myComponents/StyledRectangle.as
  4.     import mx.core.UIComponent;
  5.     import mx.styles.CSSStyleDeclaration;
  6.     import mx.styles.StyleManager;
  7.     import flash.display.GradientType;

  8.     // 定义了两个样式属性
  9.     [Style(name="fillColors",type="Array",format="Color",inherit="no")]
  10.     [Style(name="alphas",type="Array",format="Number",inherit="no")]

  11.     public class StyledRectangle extends UIComponent
  12.     {
  13.         // 定义一个静态变量.
  14.         private static var classConstructed:Boolean = classConstruct();
  15.     
  16.         // 定义一个静态方法.
  17.         private static function classConstruct():Boolean {
  18.             if (!StyleManager.getStyleDeclaration("StyledRectangle"))
  19.             {
  20.                 // 如果 StyledRectangle组件的CSS定义为空,则创建一个默认的,
  21.                 var myRectStyles:CSSStyleDeclaration = new CSSStyleDeclaration();
  22.                 myRectStyles.defaultFactory = function():void
  23.                 {
  24.                     this.fillColors = [0xFF0000, 0x0000FF];
  25.                     this.alphas = [0.5, 0.5];
  26.                 }
  27.                 StyleManager.setStyleDeclaration("StyledRectangle", myRectStyles, true);

  28.             }
  29.             return true;
  30.         }
  31.     
  32.         // 构造器
  33.         public function StyledRectangle() {
  34.             super();
  35.         }
  36.     
  37.         // 定义一个默认 100 x 100 pixels 大小.
  38.         override protected function measure():void {
  39.             super.measure();

  40.             measuredWidth = measuredMinWidth = 100;
  41.             measuredHeight = measuredMinHeight = 100;
  42.         }

  43.         // 定义一个标志,表示style属性的值改变了
  44.         private var bStypePropChanged:Boolean = true;

  45.         // 定义一个变量保存colors的值.
  46.         private var fillColorsData:Array;

  47.         // 定义了一个变量保存当前lapha值.
  48.         private var alphasData:Array;

  49.         // 定义变量用于额外的填充控制
  50.         private var ratios:Array = [0x00, 0xFF];
  51.         
  52.         // 重载了 styleChanged()方法检测style的改变.
  53.         override public function styleChanged(styleProp:String):void {
  54.             super.styleChanged(styleProp);

  55.             // 检测style是否改变.
  56.             if (styleProp=="fillColors" || styleProp=="alphas") {
  57.                 bStypePropChanged=true;
  58.                 invalidateDisplayList();
  59.                 return;
  60.             }
  61.         }

  62.         // 重载updateDisplayList() 方法更新组件
  63.         override protected function updateDisplayList(unscaledWidth:Number,
  64.                 unscaledHeight:Number):void {
  65.             super.updateDisplayList(unscaledWidth, unscaledHeight);

  66.             if (bStypePropChanged==true)
  67.             {
  68.                 // 如果style改变,则重新填充
  69.                 fillColorsData=getStyle("fillColors");
  70.                 alphasData=getStyle("alphas");
  71.                 
  72.                 graphics.beginGradientFill(GradientType.LINEAR,
  73.                     fillColorsData, alphasData, ratios);
  74.                 graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
  75.                 
  76.                 bStypePropChanged=false;
  77.             }
  78.         }
  79.     }
  80. }

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定义,如下所示
  1.     <mx:Style>
  2.         StyledRectangle {fillColors: #FF00FF, #00FFFF}
  3.     </mx:Style>
  4.     <MyComp:StyledRectangle/>

3. 为皮肤定义一个style
       FLEX允许你使用style属性设置组件皮肤。自定义组件也可以设置皮肤。
       设置皮肤与设置style属性的原理是一样的,为皮肤设置一个style属性触发器以调用styleChanged()。styleChanged()检测皮肤的改变,在updateDisplayList() 中执行组件的更新。
       设置皮肤与设置style属性的不同之处在于如何描述[Style] 标签。当style属性为skin时,如下例所示
                [Style(name="downSkin", type="Class", inherit="no")]


参考文献
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

您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

SACC2021中国系统架构师大会

【数字转型 架构重塑】2021年5月20日-22日第十三届中国系统架构师大会将在云端进行网络直播。

大会为期3天的议程,涉及20+专场,近120个主题,完整迁移到线上进行网络直播对会议组织来说绝非易事;但考虑到云端会议的直播形式可以实现全国各地技术爱好者的参与,也使ITPUB作为技术共享交流平台得到更好的普及,我们决定迎难而上。
http://sacc.it168.com/


大会官网>>
  

北京盛拓优讯信息技术有限公司. 版权所有 16024965号-6 北京市公安局海淀分局网监中心备案编号:11010802020122
中国互联网协会会员  联系我们:huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP