Log In  
  Getting Started  
----------------------------------------

Resources

 

Multiple Composite Components

previous page next page

User rating?

Main.MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="#FFFFFF"
    backgroundAlpha="0"
    xmlns:custom="components.*">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private function show(event:Event):void {
                var sday:Number = sdate.daysCB.selectedIndex + 1;
                var smonth:Number = sdate.monthsCB.selectedIndex;
                var syear:Object = sdate.yearsCB.selectedItem.toString();

                var eday:Number = edate.daysCB.selectedIndex + 1;
                var emonth:Number = edate.monthsCB.selectedIndex;
                var eyear:Object = edate.yearsCB.selectedItem.toString();

                var startDate:Date = new Date(syear,smonth,sday);
                var endDate:Date = new Date(eyear,emonth,eday);

                if (endDate < startDate){
                    Alert.show("Please enter a end date greater than the start date.");
                }else{
                    Alert.show("The record search is between " + dateFormat.format(startDate)  + ' and ' +
dateFormat.format (endDate));
                }
            }
        ]]>
    </mx:Script>

    <mx:DateFormatter id="dateFormat"
        formatString="MM/DD/YYYY" />

    <mx:Form>
        <mx:FormHeading label="Record Search" />
        <mx:FormItem label="Start Date">
            <custom:ComboBoxDateEntry id="sdate" />
        </mx:FormItem>
        <mx:FormItem label="End Date">
            <custom:ComboBoxDateEntry id="edate" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:Button id="myButton"
                label="Search"
                click="show(event)" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

ComboBoxDateEntry.MXML

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

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:custom="com.mycustom.components.*"
    creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;

            [Bindable]
            private var days:Array;

            [Bindable]
            private var years:Array = new Array();

            private function init():void{
                this.monthsCB.addEventListener(ListEvent.CHANGE,monthsHandler);
                var now:Date = new Date();

                setDays(now.getMonth());
                setYears(now.getFullYear());

                this.daysCB.selectedIndex = 0;
                this.yearsCB.selectedIndex = years.indexOf(now.getFullYear());
            }

            private function monthsHandler(event:ListEvent):void{
                setDays(event.currentTarget.selectedIndex);
                this.daysCB.selectedIndex = 0;
            }

            private function setDays(month:int):void{
                this.days = new Array();
                var i:int;

                if (month == 0 || month == 2 || month == 4 || month == 6 || month == 7 || month == 9 || month == 11){
                    for(i=1; i<=31; i++)
                        this.days.push(i);

                    }else if (month == 3 || month == 5 || month == 8 || month == 10){
                        for(i=1; i<=30; i++)
                            this.days.push(i);

                    }else if (month == 1){
                        if (yearsCB.selectedIndex % 4 == 0){
                            for(i=1; i<=29; i++)
                                this.days.push(i);
                        }else{
                            for(i=1; i<=28; i++)
                                this.days.push(i);
                        }
                    }
                }

            private function setYears(year:int):void{
                var j:int;
                for(j=1950; j<=year; j++){
                    this.years.push(j);
                }
            }
        ]]>
    </mx:Script>

    <custom:ComboBoxMonths id="monthsCB"/>
    <mx:ComboBox id="daysCB" dataProvider="{this.days}" width="50"/>
    <mx:ComboBox id="yearsCB" dataProvider="{this.years}" width="65"/>
</mx:HBox>
  • Download a ZIP file that contains the applications in this module. To import the project into Flex Builder, select File > Import Flex Project.

Rendered Application

previous page next page

There are two bugs in the setDays date handling code.  yearsCB.  selectedIndex should read selectedItem.  The correct leap year handling algorithm is:
if (year modulo 4 is 0) and (year modulo 100 is not 0) or (year modulo 400 is 0)
then leap
else no_leap

Also, setDays needs to be called when the year is changed and the month is February.

Change your computer date to 30 July 2008.  Then refresh this page and notice the month dropdown has no February month and two March months.  Use my fix in the previous tutorial, "Code Behind", to correct this.

Added by Mark Nichoson , last edited by matthew horn on Apr 22, 2008  (view change)
Labels: 
(None)

Powered by Atlassian Confluence 2.7.1, the Enterprise Wiki. Bug/feature request - Atlassian news - Contact administrators