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>

Advertisement