Friday, August 24, 2012

Flex: The not so global ToolTipManager...

I was playing around the ToolTipManager class today and I realised that the ToolTipManager class isn't so global after all. Although you can use ToolTipManager.enabled to show/hide all the tooltips but...

Here the source codes of my main application - NotReallyGlobalTooltip.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="creationCompleteHandler(event)"> 
 <fx:Script>
  <![CDATA[
   import mx.charts.series.ColumnSeries;
   import mx.collections.ArrayCollection;
   import mx.events.FlexEvent;
   import mx.managers.ToolTipManager;
   
   
   //Records used in the chart
   [Bindable]
   private var myData:XML = 
    <records>
     <record>
      <month>Jan</month>
      <car>73</car>
     </record>
     <record>
      <month>Feb</month>
      <car>72</car>
     </record>
     <record>
      <month>Mar</month>
      <car>79</car>
     </record>
     <record>
      <month>Apr</month>
      <car>80</car>
     </record>
     <record>
      <month>May</month>
      <car>51</car>
     </record>
    </records>;
   
   protected function btnGlobalToolTipEvent(event:MouseEvent):void
   {
    //Toggle the visibility of the Tooltips for all the 
    //components except the charts 
    ToolTipManager.enabled = !ToolTipManager.enabled;
    updateBtns();
   }
   
   protected function btnChartToolTipEvent(event:MouseEvent):void
   {
    //Toggle the visibility of the Tooltips for all the 
    //items in the charts
    chartMain.showDataTips = !chartMain.showDataTips;
    updateBtns();
   }
   
   protected function btnSuperToolTipEvent(event:MouseEvent):void
   {
    //Toggle the visibility of the Tooltips for all the 
    //components and the charts and sync them
    if(ToolTipManager.enabled == chartMain.showDataTips)
    {
     ToolTipManager.enabled = !ToolTipManager.enabled;
     chartMain.showDataTips = !chartMain.showDataTips;
    }else{
     ToolTipManager.enabled = false;
     chartMain.showDataTips = false;
    }
    updateBtns();
   }
   
   protected function creationCompleteHandler(event:FlexEvent):void
   {
    updateBtns();
   }
   
   //This function will updates all the labels of the buttons.
   private function updateBtns():void
   {
    if(ToolTipManager.enabled == chartMain.showDataTips)
    {
     if(ToolTipManager.enabled)
     {
      btnSuperToolTip.label = 
       "All ToolTips Enabled";
     }else{
      btnSuperToolTip.label = 
       "All ToolTips Disabled";
     }
    }else{
     btnSuperToolTip.label = 
      "All ToolTips Mixed";
    }
    
    if(ToolTipManager.enabled)
    {
     btnGlobalToolTip.label = 
      "Global ToolTip Enabled";
    }else{
     btnGlobalToolTip.label = 
      "Global ToolTip Disabled";
    }
    
    if(chartMain.showDataTips)
    {
     btnChartToolTip.label = 
      "Chart ToolTip Enabled";
    }else{
     btnChartToolTip.label = 
      "Chart ToolTip Disabled"; 
    }
   }
  ]]>
 </fx:Script>
 <s:VGroup width="100%" height="100%" gap="10" 
     horizontalAlign="center" verticalAlign="middle">
  <mx:ColumnChart id="chartMain" dataProvider="{myData.record}">
   <mx:horizontalAxis>
    <mx:CategoryAxis 
     categoryField="month"/>
   </mx:horizontalAxis>
   <mx:verticalAxis>
    <mx:LinearAxis 
     minorInterval="10"
      maximum="100"/>
   </mx:verticalAxis>
   <mx:series>
    <mx:ColumnSeries 
     yField="car" 
     displayName="No Of Cars."/>
   </mx:series>  
  </mx:ColumnChart>
  <s:HGroup gap="10">
   <mx:Text text="Some Dummy Text with Tooltip" 
      toolTip="A empty tooltip"/>
   <s:Button label="Button"
       toolTip="that does nothing"/>
  </s:HGroup>
  <s:Spacer height="10"/>
  <mx:Text htmlText="Click on the buttons below and rollover
     <br>the components in the above to see the differences."
     textAlign="center"/>
  <s:HGroup gap="10">
   <s:Button id="btnGlobalToolTip"
       width="200" 
       click="btnGlobalToolTipEvent(event)"/>
   <s:Button id="btnChartToolTip"
       width="200" 
       click="btnChartToolTipEvent(event)"/>
   <s:Button id="btnSuperToolTip"
       width="200" 
       click="btnSuperToolTipEvent(event)"/>
  </s:HGroup>
 </s:VGroup>
</s:Application>
* Click here for the demo shown in this post.
^ Click here for the source files for the demo.

No comments:

Post a Comment