Home Tutorial Flex Flex4 Components PopUpAnchor Control in Flex4

 
 

Share on Google+Share on Google+
PopUpAnchor Control in Flex4
Posted on: May 19, 2010 at 12:00 AM
Advertisement
The PopUpAnchor control is a Spark component. This new component added in Flex4. The PopUpAnchor control is used to a pop-up component in a layout.

PopUpAnchor Control in Flex4:

The PopUpAnchor control is a Spark component. This new component added in Flex4. The PopUpAnchor control is used to a pop-up component in a layout. The pop-up component has no visual appearance. The PopUpAnchor shows the pop-up component when we add it to the PopUpManager. You can use the PopUpAncher control for different uses like click a button and a login form pop ups, click a hyperlink and a message pop ups.
The tag of PopUpAncher control is <s:PopUpAnchor>.

Example:

<?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" >

<fx:Style>

.loginform

{

borderStyle : "solid";

paddingTop : 5;

paddingBottom : 5;

paddingLeft : 5;

paddingRight : 5;

}

.but{

chrome-color:#000000;

color:#ffffff;

}

</fx:Style>

<s:states>

<s:State name="normal" />

<s:State name="loginOpen" />

</s:states>

<s:transitions>

<mx:Transition fromState="*" toState="*">

<mx:Sequence>

<s:Fade target="{loginPopUp.popUp}"

duration="300"/>

</mx:Sequence>

</mx:Transition>

</s:transitions>

<s:Panel title="PopUpAnchor Control Example"

width.loginOpen="274"

height.loginOpen="172"

width.normal="199"

height.normal="65"

title.loginOpen="PopUpAnchor Control Example"

title.normal="PopUpAnchor Control Example">

<s:Group>

<s:Button label="User LogIn"

click="currentState = 'loginOpen'"

visible.loginOpen="false"

chromeColor="#000000"

color="#ffffff"/>

<s:PopUpAnchor id="loginPopUp"

left="0" bottom="0"

popUpPosition="below"

includeIn="loginOpen"

displayPopUp.normal="false"

displayPopUp.loginOpen="true">

<s:BorderContainer cornerRadius="20"

styleName="loginform&q"

backgroundImage="@Embed

(source='file:/C:/work/bikrant/flex4component/popupancher/2.jpg')">

<Form>

<mx:FormItem label="User Name:" required="true" color="#ffffff">

<s:TextInput text="User Name" fontStyle="italic" color="#000000"/>

</mx:FormItem>

<mx:FormItem label="Password:" required="true" color="#ffffff">>

<s:TextInput displayAsPassword="true" text="Password"

 fontStyle="italic" color="#000000"/>

</FormItem>

<mx:FormItem direction="horizontal">

<s:Button label="Login"

click="currentState = 'normal'" styleName="but"/>

<s:Button label="Cancel"

click="currentState = 'normal'" styleName="but"/>

</mx:FormItem>

</mx:Form>

</s:BorderContainer>

</s:PopUpAnchor>

</s:Group>

<s:Label id="lbl"

text="USER LOGIN"

horizontalCenter.normal="2"

x.loginOpen="99" y.loginOpen="5"

visible.normal="false" fontWeight="bold"

text.loginOpen="USER LOGIN"/>

</s:Panel>

<</s:Application>

In this example you can see how we can use a PopUpAnchor control in Flex4.

Output:

In this example you can see how the pop up component dispayed. click a button and pop ups a login form.

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Advertisement

Related Tags for PopUpAnchor Control in Flex4:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: May 19, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com