Create a menu like pop-up for your Flex Application

Sometimes there’s the need to create a menu like pop-up from a navigation response. For example, if you are using a Link Bar component then, sometimes it might be nice to have a pop-up come up to show some notification information. The PopUpAnchor component can help us to achieve what we want.

The example below shows exactly this, a Link Bar that with the help of PopUpAnchor component enables the application to show a menu like popup.

PopUpTest.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*"
			   preinitialize="application1_preinitializeHandler(event)">

	<fx:Script>
		<![CDATA[
			import mx.controls.LinkButton;
			import mx.events.FlexEvent;
			import mx.events.FlexMouseEvent;
			import mx.events.ItemClickEvent;
			
			protected function notificationpopup1_mouseDownOutsideHandler(event:FlexMouseEvent):void
			{
				currentState = 'default';
			}

			protected function application1_preinitializeHandler(event:FlexEvent):void
			{
				currentState = 'default';
			}

			protected function linkBar_itemClickHandler(event:ItemClickEvent):void
			{
				var posX:int = 0;
				var buttonWidth:int = 0;
				
				var b:LinkButton = event.relatedObject as LinkButton;
				posX = event.target.x + b.x;
				buttonWidth = b.width;
				
				this.notificationPopUpAnchor.x = posX - this.notificationPopUp.width /2 + buttonWidth /2;
				this.notificationPopUpAnchor.y = b.y + b.height;
				currentState = 'clicked';
			}

		]]>
	</fx:Script>

	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>

	<s:states>
		<s:State name="default" />
		<s:State name="clicked" />  
	</s:states>                
	
	<s:layout>
		<s:VerticalLayout verticalAlign="middle" horizontalAlign="center" gap="0"/>
	</s:layout>

	<mx:VBox width="100%" horizontalAlign="center">
		<mx:LinkBar id="linkBar" itemClick="linkBar_itemClickHandler(event)" paddingBottom="0">
			<mx:dataProvider>
				<s:ArrayList>
					<fx:String>Menu 1</fx:String>
					<fx:String>Menu 2</fx:String>
					<fx:String>Menu 3</fx:String>
					<fx:String>Menu 4</fx:String>
					<fx:String>Menu 5</fx:String>
					<fx:String>Menu 6</fx:String>
					<fx:String>Menu 7</fx:String>
				</s:ArrayList>
			</mx:dataProvider>
		</mx:LinkBar>
		
		<s:PopUpAnchor id="notificationPopUpAnchor" displayPopUp.clicked="true" popUpWidthMatchesAnchorWidth="false" popUpHeightMatchesAnchorHeight="true">
			<local:NotificationPopUp id="notificationPopUp" mouseDownOutside="notificationpopup1_mouseDownOutsideHandler(event)"/>
		</s:PopUpAnchor>
	</mx:VBox>
</s:Application>

NotificationPopUp.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx"
		 currentState="collapsed"
		 height.collapsed="0"
		 width="250"
		 height.expanded="300"
		 preinitialize="init()"
		 creationComplete="complete()">
	
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			import mx.events.StateChangeEvent;
			
			var html:String = 'Visit <b><font color="#0000FF"><a href="https://riaconnection.wordpress.com">RIA Connection</a></font></b> for details.';
			
			protected function init():void {
				this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
				this.addEventListener(Event.REMOVED_FROM_STAGE, onRemovedFromStage);
			}
			
			protected function complete():void {
				this.currentState = 'expanded';
			}
			
			protected function onAddedToStage(event:Event):void {
				this.currentState = 'expanded';
			}
			
			protected function onRemovedFromStage(event:Event):void {
				this.currentState = 'collapsed';	
			}
		]]>
	</fx:Script>

	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>

	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		
		#notificationList {
			fontSize: 12;
			borderColor:#000000;
		}
		
		#notificationList #scroller 
		{
			horizontalScrollPolicy: off;
		}
	</fx:Style>
	
	<s:states>
		<s:State name="expanded"/>
		<s:State name="collapsed"/>
	</s:states>
	
	<s:transitions>
		<s:Transition id="contractAndExpand" fromState="collapsed" toState="expanded">
			<s:Resize duration="800" target="{this}"/>
		</s:Transition>
	</s:transitions>
	
	<s:Rect left="-5" top="-5" right="-5" bottom="-5">
		<s:fill>
			<s:SolidColor color="#C7DBEE" />
		</s:fill>
	</s:Rect>

	<s:List id="notificationList" width="100%" height="100%" itemRenderer="NotificationItemRenderer">
		<s:layout>
			<s:VerticalLayout horizontalAlign="justify"/>
		</s:layout>
		<s:dataProvider>
			<s:ArrayList>
				<fx:Object messageSubject="Message 1 Subject" messageBody="Some non HTML text message"/>
				<fx:Object messageSubject="Message 2 Subject" messageBody="{html}"/>
				<fx:Object messageSubject="Message 3 Subject" messageBody="{html}"/>
				<fx:Object messageSubject="Message 4 Subject" messageBody="{html}"/>
				<fx:Object messageSubject="Message 5 Subject" messageBody="{html}"/>
				<fx:Object messageSubject="Message 6 Subject" messageBody="{html}"/>
				<fx:Object messageSubject="Message 7 Subject" messageBody="{html}"/>
				<fx:Object messageSubject="Message 8 Subject" messageBody="{html}"/>
				<fx:Object messageSubject="Message 9 Subject" messageBody="{html}"/>
			</s:ArrayList>
		</s:dataProvider>
	</s:List>

</s:Group>

NotificationItemRenderer.xml

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx"
				autoDrawBackground="true" clipAndEnableScrolling="false">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>

	<s:layout>
		<s:HorizontalLayout verticalAlign="top"
							paddingLeft="5" paddingRight="5"
							paddingTop="5" paddingBottom="5" />
	</s:layout>
	
	<s:states>
		<s:State name="normal" />
		<s:State name="hovered" />
		<s:State name="selected" />
	</s:states>
	
	<s:Rect left="0" right="0" top="0" bottom="0">
		<s:fill>
			<s:SolidColor color.selected="0x383c40" color.normal="0x23252a" color.hovered="0x383c40"
						  alpha.selected="0.8" alpha.hovered="0.5" alpha.normal="0.8" />
		</s:fill>
	</s:Rect>
	
	<s:Group width="100%" height="100%">
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>
		<s:Label text="{data.messageSubject}"
				 width="100%"
				 maxDisplayedLines="1"
				 showTruncationTip="true"
				 color.hovered="0x0050AA"
				 fontWeight="bold"/>
		<mx:Text htmlText="{data.messageBody}"
				 width="100%"
				 color.hovered="0x0050AA"/>
	</s:Group>
</s:ItemRenderer>
Advertisements

About CrazyPenguin

Software Engineer
This entry was posted in AS3 (ActionScript3), FlashBuilder 4.5 (Burrito), Flex 4 (Spark), MXML. Bookmark the permalink.

One Response to Create a menu like pop-up for your Flex Application

  1. mlr008 says:

    Thanks for sharing.. really helpful and pretty good implementation !! šŸ™‚

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