tourdeflexmodules/src/spark/controls/PopUpAnchor1Example.mxml

<?xml version="1.0" encoding="utf-8"?>
<!--

  Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.

-->
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	
	
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			protected function handleClose(event:MouseEvent):void
			{
				Alert.show("TEST");
				this.currentState="normal";
			}
		]]>
	</fx:Script>
	
	<s:states>
		<s:State name="normal" />
		<s:State name="infoOpen" />
	</s:states>
	
	<s:transitions>
		<mx:Transition fromState="*" toState="*">
			<mx:Sequence>
				<s:Fade target="{infoPopUp.popUp}" duration="1500"/>
			</mx:Sequence>
		</mx:Transition> 
	</s:transitions>
	
	<fx:Declarations>
		<s:LinearGradient rotation="90" id="fill1">
			<s:GradientEntry color="0xFFFFFF" />
			<s:GradientEntry color="0x336699" />
		</s:LinearGradient>
	</fx:Declarations>
	
	<s:Panel title="PopUpAnchor Sample" width="100%" height="100%">
		
		<s:layout>
			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
		</s:layout>
		
		<s:VGroup top="0">
			<s:Label width="200" height="200"
					 text="The PopUpAnchor control displays a pop-up component in a layout. It has 
					 no visual appearance, but it has dimensions. The PopUpAnchor control is used in the DropDownList and VolumeBar controls. The PopUpAnchor displays the pop-up component by adding it to the PopUpManager, and then sizes and positions the pop-up component relative to itself."/>
			<s:Label text=" Click the Information icon to see the PopUpAnchor in action."/>
			<mx:Spacer width="60"/>	
		</s:VGroup>
		<s:VGroup>
			<mx:LinkButton label="Information" click="currentState = 'infoOpen'" icon="@Embed('iconinfo.gif')"/>
			<s:PopUpAnchor id="infoPopUp" left="0" bottom="0" popUpPosition="below"  
						   includeIn="infoOpen" displayPopUp.normal="false" 
						   displayPopUp.infoOpen="true">
				<s:BorderContainer cornerRadius="5" backgroundFill="{fill1}" height="160" width="180" 
						  dropShadowVisible="true">
					<s:Label horizontalCenter="0" top="20" width="170" height="155"
							 text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam laoreet urna fringilla risus fermentum sed aliquam lorem aliquam. Maecenas egestas, risus at adipiscing faucibus, nisl dui dignissim turpis, at consectetur magna erat in ligula."/>
					
					<s:Button top="2" right="2" width="16" height="16" skinClass="skins.CloseButtonSkin" click="handleClose(event)"/>
				</s:BorderContainer>
			</s:PopUpAnchor>
		</s:VGroup>

	</s:Panel>
</s:Module>