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