如何为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类型的,否则编译会报错。