0 Replies Latest reply on Jan 26, 2010 5:47 PM by jdesko

    Using chromeColor in a component with a custom skin Error

    jdesko Level 2

      If you have a Spark TitleWindow that you put in its controlBarContent a Spark ButtonBar, and this ButtonBar uses a custom skin that you want to display an icon(graphics) instead of a label, you cannot use the TitleWindow's property chromeColor.  When chromeColor is set it looks for a Label id="labelDisplay" in its child components/skins (see below).

       

      The fix was to keep the Label in the custom skin in layer 8: text, but set its includeInLayout = false and visible = false.

       

      So this will cause an error:

       

      ?xml version="1.0" encoding="utf-8"?>

      <s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"

         xmlns:s="library://ns.adobe.com/flex/spark"

         xmlns:mx="library://ns.adobe.com/flex/mx"

         chromeColor="0x272727">

       

      <s:controlBarContent>

      <s:ButtonBar id="textAlign_BtnBar"

      arrowKeysWrapFocus="true"

      labelField="label"

      width="80"

      requireSelection="true"

      focusEnabled="false"

      skinClass="skins.AlignButtonBarSkin"

      change="textAlign_BtnBar_changeHandler(event)" >

      <s:ArrayList>

      <fx:Object label="Left" value="{TextAlign.LEFT}" icon="@Embed('assets/images/leftAlign.gif')"/>

      <fx:Object label="Center" value="{TextAlign.CENTER}" icon="@Embed('assets/images/centerAlign.gif')"/>

      <fx:Object label="Right" value="{TextAlign.RIGHT}" icon="@Embed('assets/images/rightAlign.gif')"/>

      <fx:Object label="Justify" value="{TextAlign.JUSTIFY}" icon="@Embed('assets/images/justifyAlign.gif')"/>

      </s:ArrayList>

      </s:ButtonBar>

      </s:controlBarContent>

       

      </s:TitleWindow>

       

       

      And the custom skin (only showing partial code):

       

          <!-- layer 8: text -->

       

      <s:Graphic id="icon_Group"

         horizontalCenter="0" verticalCenter="0"

         toolTip="{hostComponent.data.label}">

      <s:BitmapImage id="icon_Bmp" source="{hostComponent.data.icon}"

         scaleX="0.5" scaleY="0.5"/>

      </s:Graphic>

       

      </s:SparkSkin>