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

Resources

 

Composite Component - MXML

  • You can combine components together into a custom composite component.
  • For example, a very common task is asking users to enter month information via a combobox. Rather than create the controls from scratch each time, just define your own custom ComboBoxDateEntry component and use it in all of your applications.
  • In this example, we use a custom ComboBoxMonths component, and combine it with one to show dates, and another to show years.
previous page next page

User rating?

ComponentForm.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 day:String = bday.daysCB.selectedItem.toString();
                var month:String = bday.monthsCB.selectedItem.toString();
                var year:String = bday.yearsCB.selectedItem.toString();

                var birthdayString:String = month + ' ' + day + ', ' + year;
                var birthdayDate:Date = new Date(bday.yearsCB.selectedItem, bday.monthsCB.selectedIndex,bday.daysCB.selectedIndex + 1);

                var now:Date = new Date();

                if (birthdayDate.toDateString() == now.toDateString()) {
                    Alert.show("HAPPY BIRTHDAY " + fullname.text + '!');
                } else {
                    Alert.show("Hello " + fullname.text + '! ' + '\nYour birthday is ' + birthdayString + '.');
                }
            }
        ]]>
    </mx:Script>

    <mx:Form>
        <mx:FormHeading label="Tell us your birthday to get a free gift!" />
        <mx:FormItem label="Name:">
            <mx:TextInput id="fullname" />
        </mx:FormItem>
        <mx:FormItem label="Your Birthday:"
            direction="horizontal">
            <custom:ComboBoxDateEntry id="bday" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:Button id="myButton"
                label="Submit"
                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:me="components.*"
    creationComplete="init()">
        <mx:Script>
        <![CDATA[

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

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

            private function init():void{
                var now:Date = new Date();

                for(var i:int=1; i<=31; i++){
                    this.days.push(i);
                }

                for(var j:int=1950; j<=now.getFullYear(); j++){
                    this.years.push(j);
                }

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

        ]]>
    </mx:Script>

    <me: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

All the month COMBO boxes are displayed incorrectly.

The month MARCH is displayed twice instead of FEBRUARY.
Though it works, it displays incorrectly
Please correct it.

I don't see this error in the display.

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