Schemaphic Systems Blog

Sharing experiences in Flash, Flex and AIR

Skinning DateChooser in Flex

with 2 comments

Using css styles for Flex DateChooser component. Hope this will help someone out there 🙂

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
           xmlns:mp="valueObjects.*"
           width="240" height="235"
           borderStyle="solid" borderColor="0xFFFFFF" borderThickness="1"
           backgroundColor="0x000000"
           horizontalScrollPolicy="off" verticalScrollPolicy="off"
           cornerRadius="12"
           dropShadowColor="0x000000" dropShadowEnabled="true" shadowDistance="3" shadowDirection="right"
           creationComplete="onCreationComplete()"
           fontFamily="Arial" fontWeight="bold" fontSize="12"
           mouseDownOutside="{dispatchEvent(new DateEvent(DateEvent.CLOSE, null));}" >

    <mx:Style>
        .todayStyle{
            color: #E41D8B;
        }
        .dropDownStyle{
            background-color: #E1E1E1;
        }
        .dateStyle{
            color: #E41D8B;
            roll-over-color: #E41D8B;
        }
        .myComboBox{
            disabledSkin: Embed(source="assets/library/assets.swf", symbol="ComboBox_upSkin");
            downSkin: Embed(source="assets/library/assets.swf", symbol="ComboBox_upSkin");
            overSkin: Embed(source="assets/library/assets.swf", symbol="ComboBox_upSkin");
            upSkin: Embed(source="assets/library/assets.swf", symbol="ComboBox_upSkin");
        }
        .comboTextStyle{
            text-indent: 5;
            color: #E1E1E1;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import events.DateEvent;
            import mx.managers.PopUpManager;
            import valueObjects.Utils;
            import mx.events.DateChooserEventDetail;
            import mx.events.DateChooserEvent;
            import mx.events.CalendarLayoutChangeEvent;

            private var dateObject:Date = null;

            public function set date(d:Date):void{
                dateObject = d;
                onCreationComplete();
            }

            public function get date():Date{
                return dateObject;
            }

            public function onCreationComplete():void
            {
                var currentDate : Date = new Date();
                // simple init
                this.months.selectedIndex = currentDate.getMonth();
                this.years.selectedItem = currentDate.getFullYear().toString();
                // register some event listeners
                //this.calend.addEventListener(DateChooserEvent.SCROLL, onChangeMonth);
                if(!this.months.hasEventListener(Event.CHANGE)){
                    this.months.addEventListener(Event.CHANGE, onChangeDropDownMonth);
                    this.years.addEventListener(Event.CHANGE, onChangeDropDownYears);
                }
                //
                calend.selectedDate = dateObject;
                this.months.selectedIndex = dateObject.getMonth();
                this.years.selectedItem = dateObject.getFullYear();
            }

            private function onChangeDropDownMonth( event : Event ) : void
            {
                this.calend.displayedMonth = (this.months.selectedIndex as Number);
                this.updateLabel();
            }

            private function onChangeDropDownYears( event : Event ) : void
            {
                this.calend.displayedYear = this.years.selectedItem.toString();
                this.updateLabel();
            }

            private function updateLabel() : void
            {
                //new Date(this.years.selectedItem.toString(), this.months.selectedIndex).toString();
            }

            private function onDateChange(event:Event) : void
            {
                 var dateEvent:DateEvent = new DateEvent(DateEvent.CLOSE, calend.selectedDate.toDateString());
                 dispatchEvent(dateEvent);
            }

            private function onComboOpen(event:Event) : void
            {
                 event.target.filters= [new GlowFilter(0xE41D8B, 1, 10, 10, 2, 1)];
            }

            private function onComboClose(event:Event) : void
            {
                 event.target.filters= [];
            }
        ]]>
    </mx:Script>
<mp:CustomDateChooser id="calend" name="calendar" calendarContentBackgroundAlpha="0" width="200" height="200" borderThickness="0" backgroundColor="0x000000" borderColor="0x000000" todayStyleName="todayStyle" styleName="dateStyle" todayColor="0x000000" color="0xFFFFFF" selectionColor="0xE41D8B"   headerColors="[0x000000, 0x000000]" yearNavigationEnabled="false" cornerRadius="6" fontWeight="bold" left="16" top="20" change="onDateChange(event);" />
<mx:ComboBox id="months" x="21" y="23" width="105" height="26" fillAlphas="[1.0, 1.0, 1.0, 1.0]" dropDownStyleName="dropDownStyle"    textInputStyleName="comboTextStyle" textSelectedColor="0xE1E1E1" textRollOverColor="0xE41D8B" selectionColor="0xE41D8B" rollOverColor="0xE1E1E1" color="0x666666" styleName="myComboBox" open="onComboOpen(event);" close="onComboClose(event);" >
<mx:ArrayCollection>
<mx:String>January</mx:String>
<mx:String>February</mx:String>
<mx:String>March</mx:String>
<mx:String>April</mx:String>
<mx:String>May</mx:String>
<mx:String>June</mx:String>
<mx:String>July</mx:String>
<mx:String>August</mx:String>
<mx:String>September</mx:String>
<mx:String>October</mx:String>
<mx:String>November</mx:String>
<mx:String>December</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
<mx:ComboBox id="years" x="136" y="23" width="75" height="26" fillAlphas="[1.0, 1.0, 1.0, 1.0]" dropDownStyleName="dropDownStyle"  textInputStyleName="comboTextStyle" textSelectedColor="0xE1E1E1" textRollOverColor="0xE41D8B" selectionColor="0xE41D8B" rollOverColor="0xE1E1E1"  color="0x666666" styleName="myComboBox" open="onComboOpen(event);" close="onComboClose(event);" >
<mx:ArrayCollection>
<mx:String>1990</mx:String>
<mx:String>1991</mx:String>
<mx:String>1992</mx:String>
<mx:String>1993</mx:String>
<mx:String>1994</mx:String>
<mx:String>1995</mx:String>
<mx:String>1996</mx:String>
<mx:String>1997</mx:String>
<mx:String>1998</mx:String>
<mx:String>1999</mx:String>
<mx:String>2000</mx:String>
<mx:String>2001</mx:String>
<mx:String>2002</mx:String>
<mx:String>2003</mx:String>
<mx:String>2004</mx:String>
<mx:String>2005</mx:String>
<mx:String>2006</mx:String>
<mx:String>2007</mx:String>
<mx:String>2008</mx:String>
<mx:String>2009</mx:String>
<mx:String>2010</mx:String>
<mx:String>2011</mx:String>
<mx:String>2012</mx:String>
<mx:String>2013</mx:String>
<mx:String>2014</mx:String>
<mx:String>2015</mx:String>
<mx:String>2016</mx:String>
<mx:String>2017</mx:String>
<mx:String>2018</mx:String>
<mx:String>2020</mx:String>
<mx:String>2020</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
</mx:Canvas>

//The CustomDateChooser.as class

package valueObjects
{
import mx.controls.DateChooser;

// create a new style setting
[Style(name="calendarContentBackgroundAlpha", type="Number", inherit="no")]

public class CustomDateChooser extends DateChooser
{
public function CustomDateChooser()
{
super();
}

// override the createChildren function to make the changes
override protected function createChildren():void
{
super.createChildren();
super.getChildAt(1).alpha = getStyle("calendarContentBackgroundAlpha");
super.getChildAt(0).alpha = getStyle("calendarContentBackgroundAlpha");
}
}
}

Advertisements

Written by Deepanjan Das

June 5, 2010 at 10:08 PM

2 Responses

Subscribe to comments with RSS.

  1. Can you give me the source code of this Skinning DateChooser?
    I find the code in your article is not available!
    Please send me an email! thanks

    Lynn Hogan

    November 11, 2010 at 11:39 AM

  2. Hi Lynn,
    The above code shows the customization of the DateChooser component by extending it first as CustomDateChooser.as Class.

    Let me know where you are having the problem, or what actually you are trying to customize.

    Warm Regards
    Deepanjan Das

    deepanjandas

    November 11, 2010 at 12:36 PM


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: