有没有办法为组件创建一个自定义的css值,并让组件正在使用的皮肤类可用?例如,如果我在一个CSS文件中定义的:flex 4:自定义css值
s|Panel{
skinClass: ClassReference("PanelSkin");
myCustomValue: #CCCCFF;
}
有没有一种方法,使myCustomValue
可供PanelSkin
?
有没有办法为组件创建一个自定义的css值,并让组件正在使用的皮肤类可用?例如,如果我在一个CSS文件中定义的:flex 4:自定义css值
s|Panel{
skinClass: ClassReference("PanelSkin");
myCustomValue: #CCCCFF;
}
有没有一种方法,使myCustomValue
可供PanelSkin
?
即使没有组件类[风格]元数据,似乎可以设置CSS属性,它们会在提供皮。作为测试,我创建了一个自定义外观并将其附加到SkinnableComponent,然后通过CSS设置属性“特殊颜色”。在皮肤中,我绑定了“{getStyle('specialColor')”,并且它检索了我设置的属性值。
通过省略元数据可能会牺牲的所有元素都是CSS上的自动完成。
我的测试代码:
SkinTest.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="1024" minHeight="768">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
s|SkinnableComponent {
skin-class: ClassReference("skins.CustomSkin");
special-color: blue;
}
</fx:Style>
<s:SkinnableComponent width="300" height="300"/>
</s:Application>
CustomSkin.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" width="400" height="300">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Rect left="0" top="0" right="0" bottom="0">
<s:fill>
<s:SolidColor color="{getStyle('specialColor')}"/>
</s:fill>
</s:Rect>
</s:SparkSkin>
您必须使用[风格]元数据,这里是这方面的更多信息:Style metadata tag
你必须定义你的主机组件类在MXML皮肤文件。 [HostComponent( “your.component.class”)
在此之后,你就可以通过使用 hostComponent.getStyle获得在CSS文件中定义的任何样式( “myCustomValue”)
完美的作品,谢谢! – greggreg 2009-11-20 15:59:37
你可以做到这一点,没有皮肤? – HDave 2011-09-15 19:35:47