The SkinnablePopUpContainer class is a SkinnableContainer that functions as a pop-up. One typical use for a SkinnablePopUpContainer container is to open a simple window in an application, such as an alert window, to indicate that the user must perform some action.
You do not create a SkinnablePopUpContainer container as part of the normal layout of its parent container. Instead, it appears as a pop-up window on top of its parent. Therefore, you do not create it directly in the MXML code of your application.
Instead, you create is as an MXML component, often in a separate MXML file. To show the component create an instance of the MXML component, and then call the open() method. You can also set the size and position of the component when you open it.
To close the component, call the close() method. If the pop-up needs to return data to a handler, you can add an event listener for the PopUp.CLOSE event, and specify the returned data in the close() method.
The SkinnablePopUpContainer is initially in its closed skin state. When it opens, it adds itself as a pop-up to the PopUpManager, and transition to the normal skin state. To define open and close animations, use a custom skin with transitions between the closed and normal skin states.
Here is the code for Above 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 source="CustomPopup.css"/>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
protected function login_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
if(txtUserName.text=='Rocky' && txtPassword.text=='Hacker')
{
Alert.show("Successfully login to Adobe Flex 4.5 ....","Login ");
login.close();
}
else
{
Alert.show("Please enter the correct User Name and Password","Error");
}
}
protected function logout_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
Alert.show("Successfully Logout to Adobe Flex 4.5 ....","Log Out ");
login.close();
}
]]>
</fx:Script>
<fx:Declarations>
<s:SkinnablePopUpContainer id="login">
<s:Panel title="Launching Adobe Flex 4.5 ...">
<s:Form x="-14" y="5" width="450" height="200" color="#3F9122" fontFamily="Verdana" fontSize="13">
<s:FormItem label="User Name">
<s:TextInput id="txtUserName" />
</s:FormItem>
<s:FormItem label="Password" >
<s:TextInput id="txtPassword" displayAsPassword="true"/>
</s:FormItem>
<s:HGroup>
<s:Button label="Log In" click="login_clickHandler(event)"/>
<s:Button label="Log Out" click="logout_clickHandler(event)"/>
</s:HGroup>
<s:Label text="Enter User name Rocky and Password Hacker to login"/>
</s:Form>
</s:Panel>
</s:SkinnablePopUpContainer>
</fx:Declarations>
<s:Button x="53" y="37" label="Click here to Sign to Adobe Flex 4.5"
click="login.open(this,false)"/>
<s:Label x="53" y="11" text="Welcome to Adobe Flex 4.5 Components "/>
</s:Application>
Css file:
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
global
{
font-family: Georgia;
font-size: 14;
color: #3363A4;
chrome-color: #A2B8A2;
selection-color: #424234;
}
