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