PopUpAnchor Control in Flex4


 

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

0

</s:transitions>

<s:Panel title="PopUpAnchor Control Example"

width.loginOpen="274"

1

height.loginOpen="172"

width.normal="199"

height.normal="65"

2

title.loginOpen="PopUpAnchor Control Example"

title.normal="PopUpAnchor Control Example">

<s:Group>

3

<s:Button label="User LogIn"

click="currentState = 'loginOpen'"

visible.loginOpen="false"

4

chromeColor="#000000"

color="#ffffff"/>

<s:PopUpAnchor id="loginPopUp"

5

left="0" bottom="0"

popUpPosition="below"

includeIn="loginOpen"

6

displayPopUp.normal="false"

displayPopUp.loginOpen="true">

<s:BorderContainer cornerRadius="20"

7

styleName="loginform&q"

backgroundImage="@Embed

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

8

<Form>

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

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

9

</mx:FormItem>

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

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

0

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

</FormItem>

<mx:FormItem direction="horizontal">

1

<s:Button label="Login"

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

<s:Button label="Cancel"

2

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

</mx:FormItem>

</mx:Form>

3

</s:BorderContainer>

</s:PopUpAnchor>

</s:Group>

4

<s:Label id="lbl"

text="USER LOGIN"

horizontalCenter.normal="2"

5

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

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

text.loginOpen="USER LOGIN"/>

6

</s:Panel>

<</s:Application>

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

7

Output:

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

8

Running Application:

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

Download this code

9

Ads