Flex - Spark - How to Skin Just One Part of a Container?

Question

How can a developer skin just ONE part of a Flex component without having to re-write the entire rendering of that component?

ESRI's ArcGIS Flex Viewer (3.0) has a WidgetTemplate container of which I would like to skin only one part without having to be responsible for the rendering of the entire container. For example, I just want to skin this this container's skin part:

[SkinPart(required="false")]
public var header:Group;

so that I can set the color of the header's embedded label to be whatever color I want.

Thus, I have created the following skin called PrintWidgetSkin.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx">
   <!-- host component -->
   <fx:Metadata>
       [HostComponent("com.esri.viewer.WidgetTemplate")]
   </fx:Metadata>

   <!-- states -->
   <s:states>
       <s:State name="open" />
       <s:State name="minimized" />
       <s:State name="closed" />
       <s:State name="disabled" />
       <s:State name="normal" />
   </s:states>


   <s:Group id="header">
       <s:Label color="0x000000" />
   </s:Group>
</s:Skin>

and assigned the skinClass property of the WidgetTemplate instance to this skin:

<viewer:WidgetTemplate id="wTemplate"
                       width="345" height="285"
                       minWidth="345"
                       minHeight="285"
                       styleName="fontstyle"
                       accentColor="0x33FF66"
                       color="0x33FF66"
                       skinClass="widgets.Print.PrintWidgetSkin">
</viewer:WidgetTemplate>

Yet the container does not display at all when this skinClass is assigned to it.

For clarification, can only one skin part be skinned, and the other skin parts and rest of the container be rendered as normal?

My main source is Adobe's page on skinning: About Spark Skins

bradj bradj · Accepted Answer · 2012-11-13T05:22:14

It doesn't display because there are several skinparts of com.esri.viewer.WidgetTemplate.as that are not accounted for in the skin you have created.

If you just want to change the label color of the header in a single widget, I recommend changing the color in the creationComplete handler of the Print Widget instead of creating an entirely new skin.

Also, look through com.esri.viewer.skins.WidgetTemplateSkin.mxml for more ideas and/or modifying the global widget style.

Flex - Spark - How to Skin Just One Part of a Container?

1 Answers