Setting the child layout direction of a Flex Panel container

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Array id="arr"> <mx:Object label="horizontal" /> <mx:Object label="vertical" /> </mx:Array> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="layout:"> <mx:ToggleButtonBar id="toggleButtonBar" dataProvider="{arr}" selectedIndex="1" itemClick="panel.layout = event.label;" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:Panel id="panel" status="{panel.layout}" width="320" height="160"> <mx:Label text="Button" /> <mx:Label text="ButtonBar" /> <mx:Label text="CheckBox" /> <mx:Label text="ColorPicker" /> <mx:Label text="ComboBox" /> <mx:Label text="DataGrid" /> <mx:ControlBar> <mx:Button label="Submit" /> <mx:Button label="Cancel" /> </mx:ControlBar> </mx:Panel> </mx:Application>

Setting the corner radius on a Flex PopUpButton control

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Style> PopUpButton { popUpStyleName: myCustomPopUpStyleName; } .myCustomPopUpStyleName { fontWeight: normal; textAlign: left; leftIconGap: 0; } </mx:Style> <mx:Script> <![CDATA[ import mx.controls.Menu; private function init():void { var menu:Menu = new Menu(); menu.dataProvider = arr; popUpButton.popUp = menu; } private function resizePopUp():void { popUpButton.popUp.width = popUpButton.width; } ]]> </mx:Script> <mx:Array id="arr"> <mx:Object label="Alert" /> <mx:Object label="Button" /> <mx:Object label="ButtonBar" /> <mx:Object type="separator" /> <mx:Object label="CheckBox" /> <mx:Object label="ColorPicker" /> <mx:Object label="ComboBox" /> </mx:Array> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="cornerRadius:"> <mx:HSlider id="slider" minimum="0" maximum="{popUpButton.height / 2}" value="0" liveDragging="true" snapInterval="1" tickInterval="1" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:PopUpButton id="popUpButton" label="Please select an item..." cornerRadius="{slider.value}" arrowButtonWidth="{popUpButton.height}" openAlways="true" initialize="init();" creationComplete="resizePopUp();" /> </mx:Application>

Flex Alert Window Source Code Sample

Flex Panels and Windows Sample Source Code:
Create a file:

AlertDemo.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0" xmlns="*"> <mx:Script> import mx.controls.Alert; import mx.events.CloseEvent; private function clickHandler(event:Event) : void { Alert.show("Do you want to save your changes?", "Save Changes", 3, this, function(event:CloseEvent):void { if (event.detail==Alert.YES) status.text="You answered Yes"; else status.text="You answered No"; }, null, Alert.YES); } </mx:Script> <mx:Panel width="100%" height="100%" horizontalAlign="center" paddingTop="20"> <mx:Text text="Click the button below to display a simple Alert window" width="100%" textAlign="center"/> <mx:Button label="Click Me" click="Alert.show('Hello World!', 'Message')"/> <mx:Text text="Click the button below to display an Alert window and capture the button pressed by the user" width="100%" textAlign="center"/> <mx:Button label="Click Me" click="clickHandler(event)"/> <mx:Label id="status"/> </mx:Panel> </mx:Application>

Flex Popup Window Source Code Sample

Flex Panels and Windows Sample Source Code:
Create a file:
PopupWindow.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0"> <mx:Script> import mx.managers.PopUpManager; private function showWindow(modal:Boolean):void { var logonWindow:LogonWindow = new LogonWindow(); logonWindow.addEventListener("logon", logonHandler); PopUpManager.addPopUp(logonWindow, this, modal); PopUpManager.centerPopUp(logonWindow); } public function logonHandler(event:LogonEvent):void { status.text="You entered userId: " + event.userId + " password: " + event.password; } </mx:Script> <mx:Panel width="100%" height="100%" horizontalAlign="center" paddingTop="20"> <mx:Button label="Show Window" click="showWindow(false)" width="150"/> <mx:Button label="Show Modal Window" click="showWindow(true)" width="150"/> <mx:Label id="status"/> </mx:Panel> </mx:Application>

LogonWindow.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" title="Logon" borderAlpha="1.0"> <mx:Script> import mx.managers.PopUpManager; private function logon():void { dispatchEvent(new LogonEvent(userId.text, password.text)); mx.managers.PopUpManager.removePopUp(this); } </mx:Script> <mx:Metadata> [Event("logon")] </mx:Metadata> <mx:Form> <mx:FormItem label="UserId" required="true"> <mx:TextInput id="userId" width="150"/> </mx:FormItem> <mx:FormItem label="Password" required="true"> <mx:TextInput id="password" width="150"/> </mx:FormItem> <mx:FormItem> <mx:HBox horizontalGap="30"> <mx:Button label="Logon" click="logon()"/> <mx:Button label="Cancel" click="PopUpManager.removePopUp(this)"/> </mx:HBox> </mx:FormItem> </mx:Form> </mx:TitleWindow>

Flex Panel with ControlBar Source Code Sample

Flex Panels and Windows Sample Source Code:
Create a file:
ControlBarDemo.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="srv.send()"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] public var employees:ArrayCollection; private function deleteItem() : void { if (dg.selectedIndex >= 0 && dg.selectedIndex < employees.length) employees.removeItemAt(dg.selectedIndex); } ]]> </mx:Script> <mx:HTTPService id="srv" url="../assets/employees.xml" useProxy="false" result="employees = new ArrayCollection(srv.lastResult.list.employee)"/> <mx:Panel title="Employee List" width="100%" height="100%"> <mx:DataGrid id="dg" width="100%" height="100%" dataProvider="{employees}"> <mx:columns> <mx:Array> <mx:DataGridColumn dataField="name" headerText="Name"/> <mx:DataGridColumn dataField="phone" headerText="Phone"/> <mx:DataGridColumn dataField="email" headerText="Email"/> </mx:Array> </mx:columns> </mx:DataGrid> <mx:ControlBar> <mx:Button label="Delete" click="deleteItem()"/> </mx:ControlBar> </mx:Panel> </mx:Application>

employees.xml

<?xml version="1.0" encoding="utf-8"?> <list> <employee> <name>Christina Coenraets</name> <phone>555-219-2270</phone> <email>ccoenraets@fictitious.com</email> <active>true</active> </employee> <employee> <name>Louis Freligh</name> <phone>555-219-2100</phone> <email>lfreligh@fictitious.com</email> <active>true</active> </employee> <employee> <name>Ronnie Hodgman</name> <phone>555-219-2030</phone> <email>rhodgman@fictitious.com</email> <active>false</active> </employee> <employee> <name>Joanne Wall</name> <phone>555-219-2012</phone> <email>jwall@fictitious.com</email> <active>true</active> </employee> <employee> <name>Maurice Smith</name> <phone>555-219-2012</phone> <email>maurice@fictitious.com</email> <active>false</active> </employee> <employee> <name>Mary Jones</name> <phone>555-219-2000</phone> <email>mjones@fictitious.com</email> <active>true</active> </employee> </list>

Flex Panel Source Code Sample

Flex Panels and Windows Sample Source Code:
Create a file:
PenelDemo.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="srv.send()"> <mx:Script> import mx.collections.ArrayCollection; [Bindable] public var employees:ArrayCollection; </mx:Script> <mx:HTTPService id="srv" url="../assets/employees.xml" useProxy="false" result="employees = new ArrayCollection(srv.lastResult.list.employee)"/> <mx:Panel title="Employee List" width="100%" height="100%"> <mx:DataGrid id="dg" width="100%" height="100%" dataProvider="{employees}"> <mx:columns> <mx:Array> <mx:DataGridColumn dataField="name" headerText="Name"/> <mx:DataGridColumn dataField="phone" headerText="Phone"/> <mx:DataGridColumn dataField="email" headerText="Email"/> </mx:Array> </mx:columns> </mx:DataGrid> </mx:Panel> </mx:Application>

employees.xml

<?xml version="1.0" encoding="utf-8"?> <list> <employee> <name>Christina Coenraets</name> <phone>555-219-2270</phone> <email>ccoenraets@fictitious.com</email> <active>true</active> </employee> <employee> <name>Louis Freligh</name> <phone>555-219-2100</phone> <email>lfreligh@fictitious.com</email> <active>true</active> </employee> <employee> <name>Ronnie Hodgman</name> <phone>555-219-2030</phone> <email>rhodgman@fictitious.com</email> <active>false</active> </employee> <employee> <name>Joanne Wall</name> <phone>555-219-2012</phone> <email>jwall@fictitious.com</email> <active>true</active> </employee> <employee> <name>Maurice Smith</name> <phone>555-219-2012</phone> <email>maurice@fictitious.com</email> <active>false</active> </employee> <employee> <name>Mary Jones</name> <phone>555-219-2000</phone> <email>mjones@fictitious.com</email> <active>true</active> </employee> </list>