PopUpAnchor control

• Creating a pop-up component with PopUpAnchor

• Sizing and positioning a popup component

• Transforming and animating a popup component

The PopUpAnchor control is part of the Spark component set. There is no MX equivalent.

The PopUpAnchor control displays a pop-up component in a layout. It has no visual appearance, but it has dimensions. The PopUpAnchor control is used in the DropDownList control. The PopUpAnchor displays the pop-up component by adding it to the PopUpManager, and then sizes and positions the pop-up component relative to itself. Because the pop-up component is managed by the PopUpManager, it appears above all other controls.

With the PopUpAnchor control, you can create various kinds of popup functionality, such as the following:

• Click a button and a form to submit feedback pops up

• Click a button, and a search field pops up

• Mouse over the top of an application and a menu drops down

• In a calendar tool, double-click an appointment block to open an Edit dialog

Creating a pop-up component with PopUpAnchor

Define a PopUpAnchor control in MXML by using the <s:PopUpAnchor> tag. as the following example shows. Specify an id value if you intend to refer to a component elsewhere in your MXML, either in another tag or in an ActionScript block.

Use the PopUpAnchor with two other components: the control that opens the popup, and the component that pops up (referred to as the pop-up component). The value of the popUpproperty is the pop-up component.

The following example creates an application with a button labeled Show slider. Click the button, and a VSlider component pops up. When you select a value using the slider, thethumbRelease event is triggered and the popup closes.

<?xml version="1.0" encoding="utf-8"?>
<!-- controls\popup\PopUpSimple.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">

    <s:HGroup>
        <s:Button label="Show slider" 
            click="slide.displayPopUp = true"/>
        <s:PopUpAnchor id="slide">
            <s:VSlider  
                maxHeight="40" 
                thumbRelease="slide.displayPopUp = false"/>
        </s:PopUpAnchor>
    </s:HGroup>

</s:Application>
The executing SWF file for the previous example is shown below:

Sizing and positioning a popup component

The PopUpAnchor control sizes and positions the component that pops up (the pop-up component) relative to itself. If the pop-up doesn’t fit, it will flip the position. ABOVE -> BELOW, RIGHT -> LEFT, etc. If it still doesn’t fit, it will go back to the original position and call the pop-up until it is fully on screen.

The width of the pop-up component is determined in the following order:

• If popUpWidthMatchesAnchorWidth is true, use the actual width of the PopUpAnchor

• Use the pop-up component’s explicitWidth value, if specified

• Use the pop-up component's measuredWidth value

The height of the pop-up component is determined in the following order:

• If popUpHeightMatchesAnchorHeight is true, use the actual height of the PopUpAnchor control

• Use the popup’s explicitHeight value, if specified

• Use the pop-up component's measuredHeight value

The popUpPosition property controls the position of the pop-up component. Valid values are static properties of the PopUpPosition class and are as follows:

Value	Description
above	The bottom of the popup is adjacent to the top of the PopUpAnchor control. The left edge of the popup is vertically aligned with the left edge of the PopUpAnchor control.
below	The top of the popup is adjacent to the bottom of the PopUpAnchor control. The left edge of the pop-up is vertically aligned with the left edge of the PopUpAnchor control.
left	The right edge of the popup is adjacent to the left edge of the PopUpAnchor control. The top edge of the popup is horizontally aligned with the top edge of the PopUpAnchor control.
right	The left edge of the popup is adjacent to the right edge of the PopUpAnchor control. The top edge of the popup is horizontally aligned with the top edge of the PopUpAnchor control.
center	The horizontal and vertical center of the popup is positioned at the horizontal and vertical center of the PopUpAnchor control.
topLeft	The popup is positioned at the same default top-left position as the PopUpAnchor control.

Transforming and animating a popup component

Transformations include scaling, rotation, and skewing. Transformations that are applied to the PopUpAnchor control or its ancestors before the pop-up component opens are always applied to the pop-up component when it opens. However, if such changes are applied while the pop-up is open, the changes are not applied to the pop-up until the next time the pop-up opens. To apply transformations to the pop-up while it is open, call the updatePopUpTransform() method.

You can apply effects to animate the showing and hiding of the pop-up. Because transformations made on the PopUpAnchor control apply to its pop-up, you can apply effects to either the PopUpAnchor control or its pop-up component.

Consider the following when deciding whether to apply an effect on the PopUpAnchor control or its pop-up component:

• Apply Move, Fade, Resize, and Zoom effects to the PopUpAnchor control. Applying these effects to the PopUpAnchor control allows the effect to respect some of the PopUpAnchor control's layout constraints.

• Apply Mask and Shader effects on the pop-up component directly. These effects require applying a mask to the target or taking a bitmap snapshot of the target.

• If the effect is applied to the PopUpAnchor or its ancestors while the pop-up component is open, call updatePopUpTransform(). Calling this method reapplies the effect to the popup while the effect plays.

The following example uses states to control the display of the popup component. It uses transitions to play animations between states. When you click the Email button, an e-mail form fades into the application. Click Send or Cancel, and the e-mail form fades out. By only including the PopUpAnchor in the emailOpen state (includeIn="emailOpen"), the form is only instantiated when it is displayed.

<?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" >
    
    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>
    
    <fx:Style>
    .popUpBox
    {
        backgroundColor : #e9e9e9; 
        borderStyle : "solid";
        paddingTop : 2;
        paddingBottom : 2; 
        paddingLeft : 2; 
        paddingRight : 2;
    }
    </fx:Style>

    <s:states>
        <s:State name="normal" />
        <s:State name="emailOpen" />
    </s:states>

    <s:transitions>
        <mx:Transition fromState="*" toState="*">
            <mx:Sequence>
                <s:Fade target="{emailPopUp.popUp}"
                    duration="250"/>
            </mx:Sequence>
        </mx:Transition> 
    </s:transitions>

    <s:Group x="60">
        <s:Button label="Send email" 
            click="currentState = 'emailOpen'"/>
        <s:PopUpAnchor id="emailPopUp" 
            left="0" bottom="0" 
            popUpPosition="below" 
            styleName="popUpBox" 
            includeIn="emailOpen" 
            displayPopUp.normal="false" 
            displayPopUp.emailOpen="true">
            <mx:Form>
                <mx:FormItem label="From :">
                    <s:TextInput/>
                </mx:FormItem>
                <mx:FormItem label="To :">
                    <s:TextInput/>
                </mx:FormItem>
                <mx:FormItem label="Subject :">
                    <s:TextInput/>
                </mx:FormItem>
                <mx:FormItem label="Message :">
                    <s:TextArea width="100%" 
                        height="100" 
                        maxChars="120"/>
                </mx:FormItem>
                <mx:FormItem direction="horizontal">
                    <s:Button label="Send" 
                        click="currentState = 'normal'"/>  
                    <s:Button label="Cancel" 
                        click="currentState = 'normal'" />
                </mx:FormItem>
            </mx:Form>
        </s:PopUpAnchor>
    </s:Group>
</s:Application>
The executing SWF file for the previous example is shown below:

You can also control when the PopUpAnchor is destroyed. See Create and apply view states, particularly the sections on Controlling when to create added children and Controlling caching of objects created in a view state. These sections discuss the itemCreationPolicy and itemDestructionPolicy properties.

The following example displays a Search button with an animated popup. Click the button, and a text input field and a Find now button pops up on the right. Click the Find button, and the text input field and Find now button are hidden. The animation plays directly on the popup components.

<?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>
        .popUpBox
        {
            backgroundColor : #e9e9e9; 
            borderStyle : "solid";
            paddingTop : 2;
            paddingBottom : 2; 
            paddingLeft : 2; 
            paddingRight : 2;
        }
    </fx:Style>
    
    <fx:Declarations>
        <mx:Sequence id="hideSearch">
            <s:Scale target="{searchPopUp.popUp}" 
                     scaleXFrom="1" 
                     scaleXTo=".1" 
                     duration="250"/>
            <mx:SetPropertyAction target="{searchPopUp}" 
                                  name="displayPopUp" 
                                  value="false"/>
        </mx:Sequence>
        
        <mx:Sequence id="showSearch">
            <mx:SetPropertyAction target="{searchPopUp}" 
                                  name="displayPopUp" 
                                  value="true"/>
            <s:Scale target="{searchPopUp.popUp}" 
                     scaleXFrom=".1" 
                     scaleXTo="1" 
                     duration="200"/>
        </mx:Sequence>
    </fx:Declarations>
    
    <s:HGroup>
        <s:Button label="Search database" click="showSearch.play() "/>
        <s:PopUpAnchor id="searchPopUp" 
                       left="0" right="0" 
                       popUpPosition="right" 
                       styleName="popUpBox">
            <s:HGroup>
                <s:TextInput id="searchField"
                             width="80" />
                <s:Button label="Find now" 
                          click="hideSearch.play();"/>
            </s:HGroup>
        </s:PopUpAnchor>
    </s:HGroup>
</s:Application>
The executing SWF file for the previous example is shown below:

转载：http://help.adobe.com/en_US/flex/using/WSb04c7610c3432839-69935906121d15620a8-8000.html