如何为Flex控件应用参数不兼容的皮肤
我最近要做一个Flex按钮,使用图标是类似于日期选择控件的前后箭头,DateChooser对于箭头的绘制是通过mx.skins.halo.DateChooserMonthArrowSkin皮肤类来实现的,但是按钮的皮肤类名同DateChooser的皮肤名不同,比如Button的皮肤名分别是upSkin,overSkin等,而DateChooser的箭头按钮皮肤名是nextMonthUpSkin,nextMonthOverSkin等,为了重用mx.skins.halo.DateChooserMonthArrowSkin,我们需要重新定义按钮的皮肤名,指定好皮肤名后,再使用setStyle方法来实现皮肤类名的绑定。代码如下
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="onCreateComplete()">
<mx:Script>
<![CDATA[
import mx.core.mx_internal;
import mx.skins.halo.DateChooserMonthArrowSkin
use namespace mx_internal;
private function onCreateComplete():void{
btn.upSkinName = "nextMonthUpSkin";
btn.overSkinName = "nextMonthOverSkin";
btn.downSkinName = "nextMonthDownSkin";
btn.disabledSkinName = "nextMonthDisabledSkin";
btn.skinName = "nextMonthSkin";
btn.setStyle("nextMonthUpSkin", mx.skins.halo.DateChooserMonthArrowSkin);
btn.setStyle("nextMonthOverSkin", mx.skins.halo.DateChooserMonthArrowSkin);
btn.setStyle("nextMonthDownSkin", mx.skins.halo.DateChooserMonthArrowSkin);
btn.setStyle("nextMonthDisabledSkin", mx.skins.halo.DateChooserMonthArrowSkin);
btn.setStyle("nextMonthSkin", mx.skins.halo.DateChooserMonthArrowSkin);
}
]]>
</mx:Script>
<mx:Button id="btn"
label=""
/>
</mx:Application>
另外我还想要将DateField的按钮显示的图标去掉,换成只显示文字,可以使用类似的技术
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="onCreateComplete()">
<mx:Script>
<![CDATA[
import mx.core.mx_internal;
import mx.skins.halo.DateChooserMonthArrowSkin
use namespace mx_internal;
private function onCreateComplete():void{
df.downArrowButton.label="Test";
}
]]>
</mx:Script>
<mx:Style>
DateField {
skin: ClassReference("mx.skins.halo.ButtonSkin");
upSkin: ClassReference("mx.skins.halo.ButtonSkin");
overSkin: ClassReference("mx.skins.halo.ButtonSkin");
downSkin: ClassReference("mx.skins.halo.ButtonSkin");
disabledSkin: ClassReference("mx.skins.halo.ButtonSkin");
}
</mx:Style>
<mx:DateField id="df"/>
</mx:Application>
注意,上面的代码中一定要import import mx.core.mx_internal;同时使用mx_internal的名字空间,因为downArrowButton以及upSkinName等成员不是Public的,而是mx_internal类型的,否则编译会报错。