| | {section} |
| | {column:width=80%} |
| | |
| | h2. 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. |
| | {column} |
| | {column} |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/Code+Behind} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/Multiple+Composite+Components} |
| | {rate:title=User rating|theme=dynamic|key=focal|display=default} |
| | {adbe-pod} |
| | |
| | h6. Learn more |
| | |
| | * {adbe-popup:http://livedocs.adobe.com/flex/3/html/ascomponents_advanced_7.html}Example: Creating a composite component{adbe-popup} |
| | * {adbe-popup:http://www.ryangorer.com/blog/2006/10/09/flex_quick_starts_building_custom_components.html}Flex Quick Starts: Building Custom Components{adbe-popup} |
| | {adbe-pod} |
| | {column} |
| | {section} |
| | |
| | h2. ComponentForm.mxml |
| | |
| | {code} |
| | <?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> |
| | {code} |
| | |
| | h2. ComboBoxDateEntry.mxml |
| | |
| | {code} |
| | <?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> |
| | {code} |
| | * Download a {adbe-popup:http://learn.adobe.com/wiki/download/attachments/5701770/Flex3GSEIII_f_CustomComps.zip}ZIP file |
| | | {adbe-popup}that contains the applications in this module. To import the project into Flex Builder, select File > Import Flex Project. |
| | | {adbe-popup} that contains the applications in this module. To import the project into Flex Builder, select File > Import Flex Project. |
| | |
| | h2. Rendered Application |
| | |
| | {test-flash:200|450|CompositeComponent2.swf}CompositeComponent2{test-flash} |
| | |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/Code+Behind} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/Multiple+Composite+Components} |
