The SkinnablePopUpContainer container
appears as a pop-up window on top of its parent container. Therefore,
you do not create a SkinnablePopUpContainer container as part of
the normal MXML layout code of its parent container.
Instead, you can define the SkinnablePopUpContainer container
as a custom MXML component in an MXML file. In the following example,
you define it in the file MyAlertPopUp.mxml:
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\myComponents\MyAlertPopUp.mxml -->
<s:SkinnablePopUpContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
<s:Panel title="My Alert Panel">
<s:VGroup width="100%" horizontalAlign="center"
paddingTop="20" gap="20">
<s:Label text="Your custom alert box"/>
<s:Button label="OK" click="close();"/>
</s:VGroup>
</s:Panel>
</s:SkinnablePopUpContainer>
The MyAlertPopUp.mxml component creates a SkinnablePopUpContainer
that contains a Panel container. Notice that the Button control
calls the close() method to close the pop-up.
At runtime, you create an instance of the SkinnablePopUpContainer
in ActionScript, then call the following methods of the SkinnablePopUpContainer
class to open and close it:
open()
Opens
a SkinnablePopUpContainer container. The open() method
takes two arguments: the first specifies the parent container of
the SkinnablePopUpContainer container, and the second specifies
if the container is modal.
Opening the SkinnablePopUpContainer
container dispatches the open event.
close()
Closes a SkinnablePopUpContainer
container. The close() method takes two arguments:
the first specifies whether the container passes back any data to
the main application, and the second specifies an object containing
the returned data.
Closing the SkinnablePopUpContainer container
dispatches the close event.
The following example shows the main application file that uses
MyAlertPopUp.mxml:
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkSkinnablePopUpContainerComponents.mxml -->
<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:Script>
<![CDATA[
// Import the MyAlertPopUp class.
import myComponents.MyAlertPopUp;
// Create an instance of MyAlertPopUp.
public var alertDB:MyAlertPopUp = new MyAlertPopUp();
]]>
</fx:Script>
<!-- Open the MyAlertPopUp instance. -->
<s:Button label="Open Alert" click="alertDB.open(this, false);"/>
</s:Application>The executing SWF file for the previous example is shown below:
In this application, you first import the MyAlertPopUp component,
then create an instance of it. The Button control calls the open() method
to open the pop-up in response to a click event.
The first argument to the open() method specifies this.
Therefore, the parent container of the SkinnablePopUpContainer container
is the Application container. The second argument is false to
specify a nonmodal window.
In this example, the application creates a single instance of
the MyAlertPopUp component. It then reuses that instance every time
the user selects the Button control. Therefore, the pop-up component
stays in memory between uses.
If the pop-up component is large, or you want to reduce the memory
use of the application, create a new instance of the component for
each pop-up. The component is then destroyed when it closes. However,
make sure to remove all references to the components, especially
event handlers, or else the component is not destroyed.
