| | {section}{column:width=80%} |
| | |
| | h2. Code Behind |
| | |
| | * Code behind is MXML and ActionScript but combined in a new way to use the strengths of both |
| | * The logic is written in ActionScript and is placed in an ActionScript class definition |
| | * The layout is coded in an MXML component |
| | * They are linked together making the ActionScript class the root of the MXML component |
| | * Make sure any child control declarations that are in the ActionScript class are public{column}{column} |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/ActionScript+3.0} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/Composite+Component} |
| | {rate:title=User rating|theme=dynamic|key=focal|display=default} {adbe-pod} |
| | |
| | h6. Learn more |
| | |
| | * {adbe-popup:http://www.onflex.org/ted/2007/02/code-behind-in-flex-2.php}Code-Behind in Flex {adbe-popup}{adbe-pod}{column}{section} |
| | |
| | h3. ComboBoxCodeBehind.as |
| | |
| | {code} |
| | package as_components |
| | { |
| | import mx.containers.HBox; |
| | import mx.controls.ComboBox; |
| | import mx.events.FlexEvent; |
| | import mx.events.ListEvent; |
| | import mx.formatters.DateFormatter; |
| | |
| | [Bindable] |
| | public class ComboBoxCodeBehind extends HBox |
| | { |
| | public var months:Array = new Array(); |
| | public var dateformatter:DateFormatter = new DateFormatter(); |
| | public var selectedIndex:int; |
| | public var days:Array; |
| | public var years:Array = new Array(); |
| | public var monthsCB:ComboBox; |
| | public var daysCB:ComboBox; |
| | public var yearsCB:ComboBox; |
| | public var selectedIndexYear:int; |
| | public var selectedIndexMonth:int; |
| | public var selectedIndexDay:int; |
| | public var thisYear:int; |
| | |
| | |
| | public function ComboBoxCodeBehind() |
| | { |
| | super(); |
| | init(); |
| | this.addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler); |
| | } |
| | |
| | private function init():void{ |
| | var i:int; |
| | var now:Date = new Date(); |
| | |
| | var currentMonth:int = now.getMonth(); |
| | var currentYear:int = now.getFullYear(); |
| | var currentDay:int = now.getDate(); |
| | |
| | thisYear = currentYear; |
| | dateformatter.formatString = "MMMM"; |
| | |
| | for (i=0; i<12; i++){ |
| | now.setMonth(i); |
| | months[i] = dateformatter.format(now); |
| | } |
| | |
| | setYears(currentYear); |
| | setDays(currentMonth); |
| | |
| | selectedIndexMonth = currentMonth; |
| | selectedIndexYear = years.indexOf(currentYear); |
| | selectedIndexDay = days.indexOf(currentDay); |
| | } |
| | |
| | private function creationCompleteHandler(event:FlexEvent):void{ |
| | monthsCB.addEventListener(ListEvent.CHANGE,monthsHandler); |
| | yearsCB.addEventListener(ListEvent.CHANGE, yearsHandler); |
| | } |
| | |
| | |
| | private function setDays(month:int):void{ |
| | 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++) |
| | days.push(i); |
| | }else if (month == 3 || month == 5 || month == 8 || month == 10){ |
| | for(i=1; i<=30; i++) |
| | days.push(i); |
| | }else if (month == 1){ |
| | if (thisYear % 4 == 0){ |
| | for(i=1; i<=29; i++) |
| | days.push(i); |
| | }else{ |
| | for(i=1; i<=28; i++) |
| | days.push(i); |
| | } |
| | } |
| | } |
| | |
| | private function setYears(year:int):void{ |
| | var j:int; |
| | for(j=1950; j<=year; j++){ |
| | years.push(j); |
| | } |
| | } |
| | |
| | private function monthsHandler(event:ListEvent):void{ |
| | setDays(event.currentTarget.selectedIndex); |
| | selectedIndexDay = 0; |
| | } |
| | |
| | private function yearsHandler(event:ListEvent):void{ |
| | if (monthsCB.selectedIndex == 1){ |
| | var selectedDay:int = daysCB.selectedIndex; |
| | thisYear = event.currentTarget.selectedItem as int; |
| | setDays(monthsCB.selectedIndex); |
| | selectedIndexDay = selectedDay; |
| | } |
| | } |
| | } |
| | } |
| | {code} |
| | |
| | h3. CodeBehindDisplay.mxml |
| | |
| | {code} |
| | <?xml version="1.0" encoding="utf-8"?> |
| | <custom:ComboBoxCodeBehind |
| | xmlns:mx="http://www.adobe.com/2006/mxml" |
| | xmlns:custom="as_components.*"> |
| | |
| | <mx:ComboBox id="monthsCB" dataProvider="{months}" selectedIndex="{selectedIndexMonth}"/> |
| | <mx:ComboBox id="daysCB" dataProvider="{days}" selectedIndex="{selectedIndexDay}"/> |
| | <mx:ComboBox id="yearsCB" dataProvider="{years}" selectedIndex="{selectedIndexYear}" /> |
| | </custom:ComboBoxCodeBehind> |
| | {code} |
| | |
| | h3. CodeExample.mxml |
| | |
| | {code} |
| | <?xml version="1.0" encoding="utf-8"?> |
| | <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" |
| | layout="vertical" |
| | backgroundColor="#FFFFFF" |
| | backgroundAlpha="0" |
| | xmlns:local="*"> |
| | <mx:VBox> |
| | <local:CodeBehindForm /> |
| | </mx:VBox> |
| | </mx:Application> |
| | {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. |
| | |
| | h2. Rendered Example |
| | |
| | | !CodeBehind.swf|width=320,height=320,id=media! |
| | | {test-flash:320|320|CodeBehind.swf}CodeBehind{test-flash} |
| | |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/ActionScript+3.0} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/Composite+Component} |
