为 ToggleButton 创建一个新的皮肤类

Question

我正在使用以下 Flex 组件：http://flashcommander.org/blog/flex-4-mp3-player

这个组件附带的皮肤只允许非常基本的皮肤，例如背景颜色和边框。但是该组件使用ToggleButton，在Mp3Player.as 中定义：

import spark.components.ToggleButton;
[SkinPart]
public var playPauseButton:ToggleButton;

我想做的是在项目中为这个控件定义一个替代皮肤，我对 Flex 和 Spark 还很陌生，所以我不确定如何定义一个新皮肤。

在Mp3PlayerSkin.mxml 文件中，皮肤定义如下：

    <!--- @copy spark.components.VideoPlayer#playPauseButton -->
    <s:ToggleButton id="playPauseButton" left="0" bottom="0" 
            skinClass="spark.skins.spark.mediaClasses.normal.PlayPauseButtonSkin" 
            focusIn="event.target.depth=1" focusOut="event.target.depth=0" />

我假设我可以创建一个新的class，尽管我不知道该怎么做，或者删除对类的引用并以某种方式扩展ToggleButton 皮肤。我在想我需要以某种方式覆盖“默认”皮肤？

任何指针表示赞赏...

Answer 1

看来我可以做到以下几点：

1. 通过右键单击原始 Mp3PlayerSkin.mxml 文件创建新的 Flex 皮肤
2. 将文件命名为toggleButtonSkin.mxml
3. 从spark.components.VideoPlayer#playPauseButton 类中复制样式

4. 更新Mp3PlayerSkin.mxml如下：

   <s:ToggleButton id="playPauseButton" left="0" bottom="0" 
           skinClass="org.flashcommander.components.toggleButtonSkin" 
           focusIn="event.target.depth=1" focusOut="event.target.depth=0" />
   

现在我可以通过编辑新样式来编辑新的toggleButtonSkin.mxml 文件。