Flex 4: Disabling a Button Bar Button...

I was trying to disable one of the buttons that belongs to a 'Button Bar' component that comes with Flex 4. After spending a bit of time debugging and googling, I finally managed to come out with a decent solution to it...

Source Code for the main application - 'SimpleButtonBarEnabling.mxml'

<?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/mx" 
      creationComplete="creationCompleteEvent(event)">
 <fx:Script>
  <![CDATA[
   import mx.events.FlexEvent;
   
   protected function creationCompleteEvent(event:FlexEvent):void
   {
    //We are disabling the 4th button.
    otherInfo.enabled = false;
   }
   
  ]]>
 </fx:Script>
 <s:VGroup width="100%" 
     height="100%"
     verticalAlign="middle" 
     horizontalAlign="center" 
     gap="0">
  <!-- Create a Spark ButtonBar control to navigate 
   the ViewStack container. -->
  <s:ButtonBar dataProvider="{myViewStack}" 
      skinClass="CustomButtonBarSkin"/>
  
  <!-- Define the ViewStack and the three 
   child containers. -->
  <mx:ViewStack id="myViewStack" 
       borderStyle="solid" 
       width="50%"
       paddingBottom="10"
       paddingTop="10"
       paddingLeft="10"
       paddingRight="10">  
   <s:NavigatorContent id="search" 
       label="Search">
    <s:Label text="Search Screen"/>
   </s:NavigatorContent>
  
   <!-- set enabled="false" to disable the button -->
   <s:NavigatorContent id="custInfo" 
       label="Customer Info" 
       enabled="false">
    <s:Label text="Customer Info"/>
   </s:NavigatorContent>
  
   <s:NavigatorContent id="accountInfo" 
       label="Account Info">
    <s:Label text="Account Info"/>
   </s:NavigatorContent>
   
   <s:NavigatorContent id="otherInfo" 
        label="Others">
    <s:Label text="Others"/>
   </s:NavigatorContent>
  </mx:ViewStack>  
 </s:VGroup>
</s:Application>

And here's the custom skin class for the 'Button Bar' component.

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

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2008 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for the Spark ButtonBar component. The buttons on the ButtonBar component
    use the ButtonBarLastButtonSkin, ButtonBarFirstButtonSkin and ButtonBarMiddleButtonSkin classes.  
    
      @see spark.components.ButtonBar
      @see spark.components.ButtonBarButton    
        
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
        alpha.disabled="0.5">

    <fx:Metadata>
    <![CDATA[ 
       /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.ButtonBar")]
    ]]>
    </fx:Metadata> 

    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    
    <fx:Declarations>

  <!--- Have removed the first and third button since it's not needed.  -->
  
        <!--- 
            @copy spark.components.ButtonBar#middleButton
            @default spark.skins.spark.ButtonBarMiddleButtonSkin
            @see spark.skins.spark.ButtonBarMiddleButtonSkin
  
   The middle Button will be used as the item renderer for all the
   buttons of this button bar. And we are enabling the buttons
   base on the data passed into this component.
        -->
        <fx:Component id="middleButton" >
            <s:ButtonBarButton enabled="{data.enabled}"/>
        </fx:Component>

    </fx:Declarations>

    <!--- @copy spark.components.SkinnableDataContainer#dataGroup -->
    <s:DataGroup id="dataGroup" width="100%" height="100%">
        <s:layout>
            <s:ButtonBarHorizontalLayout gap="-1"/>
        </s:layout>
    </s:DataGroup>

</s:Skin>

* Click here for the demo shown in this post.
^ Click here for the source files for the demo.