Home
> Flex 4 Examples > DropDownController PopupAnchor
DropDownController PopupAnchor
Lets pretend you have a popup that you want to show when a button is clicked, as in the following example:
<?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"> <s:Button label="Some Button that pops something up" horizontalCenter="0" verticalCenter="0" click="popup.displayPopUp = true;"/> <s:PopUpAnchor id="popup" right="0" bottom="0"> <s:Group> <s:Rect width="50" height="50"> <s:fill> <s:SolidColor color="0xFF00FF"/> </s:fill> </s:Rect> </s:Group> </s:PopUpAnchor> </s:WindowedApplication>
How do you easily manage when the popup is closed in this case?
Rather than having to manage opening and closing the popup when the button is clicked and the user interacts with the application elsewhere, simply use a DropDownController
.
<?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication initialize="windowedapplication1_initializeHandler(event)" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"> <fx:Script> <![CDATA[ import mx.events.FlexEvent; import spark.components.supportClasses.DropDownController; import spark.events.DropDownEvent; private var _controller:DropDownController; protected function windowedapplication1_initializeHandler(event:FlexEvent):void { var ddc:DropDownController = new DropDownController(); ddc.openButton = btn; ddc.addEventListener(DropDownEvent.OPEN, dropDownController_openHandler); ddc.addEventListener(DropDownEvent.CLOSE, dropDownController_closeHandler); _controller = ddc; } protected function dropDownController_openHandler(event:Event):void { popup.displayPopUp = true; } protected function dropDownController_closeHandler(event:Event):void { popup.displayPopUp = false; } protected function button1_clickHandler(event:MouseEvent):void { //Manually close the dropdown if you wish _controller.closeDropDown(true); } ]]> </fx:Script> <s:Label left="15" top="15" text="Try clicking here when the popup is shown."/> <s:Button id="btn" label="Some Button that pops something up" horizontalCenter="0" verticalCenter="0"/> <s:PopUpAnchor id="popup" right="0" bottom="0"> <s:Group> <s:Rect width="100" height="100"> <s:fill> <s:SolidColor color="0xFF00FF"/> </s:fill> </s:Rect> <s:Button label="close" horizontalCenter="0" verticalCenter="0" click="button1_clickHandler(event)"/> </s:Group> </s:PopUpAnchor> </s:WindowedApplication>
Advertisements
Categories: Flex 4 Examples
close, custom, custom popup, DropDownList, open, popup, PopupAnchor
Comments (0)
Trackbacks (0)
Leave a comment
Trackback