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
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: