Here is the second approach to solving the problem I descibed in this post:

http://blog.flexmonkeypatches.com/2008/09/02/flex-datechooser-background-color-for-smtwtfs-header-solution-1/

This movie requires Flash Player 9

Download a zipfile containing the source to this sample.

Browse the source of this example.

Or continue into the blog entry to see the source:

Here is the app code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns="*" viewSourceURL="srcview/index.html">

    <MyDC id="myDC"/>
   
</mx:Application>
 

Here is the code for the custom component:

<?xml version="1.0" encoding="utf-8"?>
<mx:DateChooser xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="onCreationComplete()">
    <mx:Script>
        <![CDATA[
            import mx.core.UITextField;
            use namespace mx_internal;
       
            private function onCreationComplete():void{
                //super.createChildren();
                // note need to do this later in creation cycle to get measured properties
                // so do this in creationComplete rather than createChildren               
                var first:UITextField = mx_internal::dateGrid.dayBlocksArray[0][0] as UITextField;

                // note fudge factors below to account for padding
                // actual values may be able to get from various padding styles using getStyle
               
                var ht:int=first.measuredHeight + 6;
                var wdth:int=this.measuredWidth4;
                var ypos:int=mx_internal::dateGrid.y + 2;
       
                var bar:Sprite = new Sprite();
                bar.graphics.beginFill(0xDDDDDD);
                //note starting drawing at x = 2 instead of 0
                bar.graphics.drawRect(2,ypos,wdth,ht);
                // set alpa of dateGrid so background shows through.
                mx_internal::dateGrid.alpha=.5;
                //add background at same pos as dateGrid (so that it appears at proper z-order)
                this.addChildAt(bar,this.getChildIndex(mx_internal::dateGrid));
            }
        ]]>
    </mx:Script>
   
</mx:DateChooser>
 

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Slashdot
  • StumbleUpon
  • Technorati
  • TwitThis



1 Comment »