ok, before i begin, a little rant.
i can't help but think that the problem i came across today is entirely unneccessary. the crux of the issue is a lack of communication between skins and their host components. but what's that? you say the issue has been solved by the newest and greatest spark classes? yes, that's true, the spark classes are pretty cool and i like the way adobe has revisioned how we skin things. unfortunately, mx dinosaur components still roam gumbo and will probably feature in many flash programs to come (like this one). I hope the adobe gods are listening and i beg that they see it as their mission to replace all remaining mx classes because this current s/mx hodgepodge is RIDICULOUS!! ;-)
anyway, moving on...
today i got stuck on skinning the mx:LinkButton. I thought this was the best component to work with and the only additional requirement i had was to place horizontal bars on either side of the label with each bar extending flush to the walls of the container (i think you'll see exactly what i mean if you compile the code below).
the strategy was to change the linkbutton skin to have two additional bars of varying width (the width would have to vary depending on the width of the label.text). this would have been easy with something like s:linkButton because then the skin class would have had access to the hostComponent; as it was the hostComponent property was always NULL for the mx:linkButton object.
I thought I came up with a brilliant workaround by using a static variable in the skin class which could be used to set the bar lengths, but my solution fell flat on its face. The initial (or final) bar length did initialize properly, but each additional linkButton kept using the initial (or final) bar length setting. I don't know exactly why this is, I was hoping that once the linkButtons were created the static variable would lose its effect.
here's the code:
------------------------ application - example.mxml --------------------------
%26lt;?xml version=''1.0'' encoding=''utf-8''?%26gt;
%26lt;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''
xmlns:comp=''comp.*''
minHeight=''200'' minWidth=''500''
backgroundColor=''white'' %26gt;
%26lt;mx:Canvas backgroundColor=''black'' alpha=''.7'' color=''white'' height=''100%''%26gt;
?%26lt;s:Group height=''100%'' width=''350''%26gt;
%26lt;s:VGroup id=''loginLinks'' width=''100%'' bottom=''0''%26gt;
?%26lt;comp:MenuLinkBar label=''a bc de fg'' width=''100%'' /%26gt;
?%26lt;comp:MenuLinkBar label=''hi jk lm nop qrs tuv w'' width=''100%'' /%26gt;
?%26lt;comp:MenuLinkBar label=''xyz'' width=''100%'' /%26gt;
%26lt;/s:VGroup%26gt;
?%26lt;/s:Group%26gt;
%26lt;/mx:Canvas%26gt;
%26lt;/s:Application%26gt;
-------------------------- /comp/MenuLinkBar.mxml ------------------------------------
%26lt;?xml version=''1.0'' encoding=''utf-8''?%26gt;
%26lt;mx:LinkButton xmlns:fx=''http://ns.adobe.com/mxml/2009''
xmlns:s=''library://ns.adobe.com/flex/spark''
xmlns:mx=''library://ns.adobe.com/flex/halo''
skin=''skins.MenuLinkBarSkin''
creationComplete=''init()''%26gt;
%26lt;fx:Script%26gt;
%26lt;![CDATA[
import skins.MenuLinkBarSkin;
private function init():void {
// find the length in pixels of the label
var lineMetrics:TextLineMetrics = measureText(this.label);
// variable that are dependant on our menu system
var offset:int = 25; // accounts for the wall spacings
var padding:int = 10; // for a little extra padding btw label and line
// set the widths of the bar lines by setting the static variable of our skin class.
MenuLinkBarSkin.barLineWidths = (this.width - 2*offset - 2*padding - lineMetrics.width ) / 2;
}
]]%26gt;
%26lt;/fx:Script%26gt;
%26lt;/mx:LinkButton%26gt;
---------------------------- /skins/MenuLinkBarSkin.mxml ---------------------------------------------
%26lt;?xml version=''1.0'' encoding=''utf-8''?%26gt;
%26lt;s:Skin xmlns:fx=''http://ns.adobe.com/mxml/2009''
xmlns:s=''library://ns.adobe.com/flex/spark''
minWidth=''21'' minHeight=''21''
alpha.disabledStates=''0.5''%26gt;
%26lt;fx:Metadata%26gt;
[HostComponent(''comp.MenuLinkBar'')]
%26lt;/fx:Metadata%26gt;
%26lt;fx:Script%26gt;
%26lt;![CDATA[
[Bindable] static public var barLineWidths:int = 0;
]]%26gt;
%26lt;/fx:Script%26gt;
?%26lt;!-- states --%26gt;
?%26lt;s:states%26gt;
?%26lt;s:State name=''up'' stateGroups=''upStates''/%26gt;
?%26lt;s:State name=''over'' stateGroups=''overStates''/%26gt;
?%26lt;s:State name=''down'' stateGroups=''downStates'' /%26gt;
?%26lt;s:State name=''disabled'' stateGroups=''disabledStates''/%26gt;
?%26lt;s:State name=''selectedUp'' stateGroups=''upStates''/%26gt;
?%26lt;s:State name=''selectedOver'' stateGroups=''overStates''/%26gt;
?%26lt;s:State name=''selectedDown'' stateGroups=''downStates''/%26gt;
?%26lt;s:State name=''selectedDisabled'' stateGroups=''disabledStates''/%26gt;
?%26lt;/s:states%26gt;
?%26lt;!-- layer 1: fill --%26gt;
?%26lt;s:Rect left=''0'' right=''0'' top=''0'' bottom=''0'' excludeFrom=''upStates,disabledStates'' %26gt;
?%26lt;s:fill%26gt;
?%26lt;s:SolidColor color.overStates=''0xCEDBEF'' color.downStates=''0xA8C6EE'' alpha=''1'' /%26gt;
?%26lt;/s:fill%26gt;
?%26lt;/s:Rect%26gt;
?%26lt;!-- layer 2: fill --%26gt;
?%26lt;s:Rect left=''25'' width=''{barLineWidths}'' verticalCenter=''0'' height=''1.2''%26gt;
?%26lt;s:fill%26gt;
?%26lt;s:SolidColor color=''0x000000'' color.upStates=''0xffffff'' alpha=''1'' /%26gt;
?%26lt;/s:fill%26gt;
?%26lt;/s:Rect%26gt;
?%26lt;!-- layer 3: fill --%26gt;
?%26lt;s:Rect right=''25'' width=''{barLineWidths}'' verticalCenter=''0'' height=''1.2''%26gt;
?%26lt;s:fill%26gt;
?%26lt;s:SolidColor color=''0x000000'' color.upStates=''0xffffff'' alpha=''1'' /%26gt;
?%26lt;/s:fill%26gt;
?%26lt;/s:Rect%26gt;
%26lt;/s:Skin%26gt;
-------------------------------------------------------------------------------- -----------------------------------------------------
that's it. any comments constructive or otherwise, would love to hear it. thanx,
- e
