How can i create a button with richText display instead of label

Question

Hi All,
I'm trying to create a button that will look exactly as the regular spark button but will have more than one color in his label (Like attached 'buttonPic.jpg')
I have tried to create a new button skin and new button component that will replace the label text and will to the job, but still it looks like the button original class overides the richText definitions. (Code attached)
Maybe there is other solution?
This is my extra code in the MyButtonSkin
     <!-- layer 8: text -->
    <!---
    @copy spark.components.supportClasses.ButtonBase#labelDisplay
    -->
    <s:Label id="labelDisplay"
             visible="false">
    </s:Label>
    <s:RichText id="exLabelDisplay"
                color="0x900000"
                textFlow="{TextConverter.importToFlow(htmlTextAsHTML, TextConverter.TEXT_FIELD_HTML_FORMAT)}"
                left="7" right="7" top="2" bottom="2">
    </s:RichText>
    <fx:Declarations>
        <fx:String id="htmlTextAsHTML"><![CDATA[<p><b>0</b>+</p>]]></fx:String>
    </fx:Declarations>

Answer 1

Hi mewk,
probably it was a catch due to eyes that actually got a bit of sleep
anyway small test app
<?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:Script>
<![CDATA[
protected function updateBtn_clickHandler(event:MouseEvent):void
richbtn.label=mytext.text;
]]>
</fx:Script>
<s:Button id="richbtn" x="69" y="58" width="169" height="83" skinClass="ButtonSkin1" label="&lt;p&gt;hello&lt;/p&gt;&lt;p&gt;goodbye&lt;/p&gt;"/>
<s:Button x="70" y="333" label="Update rich button" id="updateBtn" click="updateBtn_clickHandler(event)"/>
<s:TextArea x="69" y="174" id="mytext" text="&lt;p&gt;hello&lt;/p&gt;&lt;p&gt;&lt;b&gt;bold&lt;/b&gt;&lt;/p&gt;"/>
</s:Application>
and a skin with minimal change
<?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:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="21" minHeight="21" alpha.disabled="0.5">
    <fx:Metadata>
        <![CDATA[
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
    <fx:Script fb:purpose="styling">
        <![CDATA[        
import flashx.textLayout.conversion.TextConverter;
            static private const exclusions:Array = ["labelDisplay"];
override public function get colorizeExclusions():Array {return exclusions;}
          override protected function initializationComplete():void
                useBaseColor = true;
                super.initializationComplete();
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
                var cr:Number = getStyle("cornerRadius");
                if (cornerRadius != cr)
                    cornerRadius = cr;
                    shadow.radiusX = cornerRadius;
                    fill.radiusX = cornerRadius;
                    lowlight.radiusX = cornerRadius;
                    highlight.radiusX = cornerRadius;
                    border.radiusX = cornerRadius;
                if (highlightStroke) highlightStroke.radiusX = cornerRadius;
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            private var cornerRadius:Number = 2;
        ]]>       
    </fx:Script>
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    <!-- layer 1: shadow -->
    <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000"
                                 color.down="0xFFFFFF"
                                 alpha="0.01"
                                 alpha.down="0" />
                <s:GradientEntry color="0x000000"
                                 color.down="0xFFFFFF"
                                 alpha="0.07"
                                 alpha.down="0.5" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    <!-- layer 2: fill -->
    <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF"
                                 color.over="0xBBBDBD"
                                 color.down="0xAAAAAA"
                                 alpha="0.85" />
                <s:GradientEntry color="0xD8D8D8"
                                 color.over="0x9FA0A1"
                                 color.down="0x929496"
                                 alpha="0.85" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    <!-- layer 3: fill lowlight -->
    <s:Rect id="lowlight" left="1" right="1" bottom="1" height="9" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" alpha="0.0099" />
                <s:GradientEntry color="0x000000" alpha="0.0627" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    <!-- layer 4: fill highlight -->
    <s:Rect id="highlight" left="1" right="1" top="1" height="9" radiusX="2">
        <s:fill>
            <s:SolidColor color="0xFFFFFF"
                          alpha="0.33"
                          alpha.over="0.22"
                          alpha.down="0.12" />
        </s:fill>
    </s:Rect>
    <!-- layer 5: highlight stroke (all states except down) -->
    <s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
                <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    <!-- layer 6: highlight stroke (down state only) -->
    <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect left="2" top="1" right="2" height="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.25" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="2" right="1" height="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.09" />
        </s:fill>
    </s:Rect>
    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
    <s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000"
                                 alpha="0.5625"
                                 alpha.down="0.6375" />
                <s:GradientEntry color="0x000000"
                                 alpha="0.75"
                                 alpha.down="0.85" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    <!-- layer 8: text -->
<s:RichText id="LabelDisplay"
color="0x900000"
textFlow="{TextConverter.importToFlow(hostComponent.label, TextConverter.TEXT_FIELD_HTML_FORMAT)}"
left="7" right="7" top="2" bottom="2">
</s:RichText>   
</s:SparkSkin>