Setting the pop up position on a Spark PopUpAnchor control in Flex 4

The following example shows how you can set the pop up position on the Spark PopUpAnchor control in Flex 4 by setting the popUpPosition property to one of the static constants in the spark.components.PopUpPosition class.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/20/setting-the-pop-up-position-on-a-spark-popupanchor-control-in-flex-4/ -->
<s:Application name="Spark_PopUpAnchor_popUpPosition_test"
        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:controlBarContent>
        <mx:Form>
            <mx:FormItem label="popUpPosition:">
                <s:ButtonBar id="ddl"
                        requireSelection="true"
                        click="ddl_changeHandler(event);"
                        >
                    <s:dataProvider>
                        <s:ArrayList>
                            <s:source>
                                <fx:String>{PopUpPosition.ABOVE}</fx:String>
                                <fx:String>{PopUpPosition.BELOW}</fx:String>
                                <fx:String>{PopUpPosition.CENTER}</fx:String>
                                <fx:String>{PopUpPosition.LEFT}</fx:String>
                                <fx:String>{PopUpPosition.RIGHT}</fx:String>
                                <fx:String>{PopUpPosition.TOP_LEFT}</fx:String>
                            </s:source>
                        </s:ArrayList>
                    </s:dataProvider>
                </s:ButtonBar>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.events.CloseEvent;
            import spark.components.PopUpPosition;
            import spark.events.IndexChangeEvent;
            import spark.events.TitleWindowBoundsEvent;
 
            protected function btn_clickHandler(evt:MouseEvent):void {
                popAnc.displayPopUp = true;
            }
 
            protected function ttlWndw_closeHandler(evt:CloseEvent):void {
                popAnc.displayPopUp = false;
            }
 
            protected function ttlWndw_windowMovingHandler(evt:TitleWindowBoundsEvent):void {
                evt.stopImmediatePropagation();
                evt.preventDefault();
            }
 
            protected function ddl_changeHandler(evt:Event):void {
                if (!popAnc.displayPopUp) {
                    popAnc.displayPopUp = true;
                }
            }
        ]]>
    </fx:Script>
 
    <s:Group horizontalCenter="0" verticalCenter="0">
        <s:Button id="btn"
                label="Open PopUp"
                chromeColor="haloBlue"
                click="btn_clickHandler(event);" />
        <s:PopUpAnchor id="popAnc"
                popUpPosition="{ddl.selectedItem}"
                width="{btn.width}" height="{btn.height}">
            <s:TitleWindow id="ttlWndw"
                    title="{ddl.selectedItem}"
                    backgroundAlpha="0.3"
                    backgroundColor="black"
                    close="ttlWndw_closeHandler(event);"
                    windowMoving="ttlWndw_windowMovingHandler(event);">
                <mx:Form>
                    <mx:FormItem label="Username:">
                        <s:TextInput />
                    </mx:FormItem>
                    <mx:FormItem label="Password:">
                        <s:TextInput displayAsPassword="true" />
                    </mx:FormItem>
                </mx:Form>
            </s:TitleWindow>
        </s:PopUpAnchor>
    </s:Group>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

4 thoughts on “Setting the pop up position on a Spark PopUpAnchor control in Flex 4

    1. @Scott,

      I typically use very recent versions of the Flex 4.0 SDK, so if you’re using the Beta 2 SDK or something else equally old, many of the newer examples probably won’t compile. Conversely, if you’re using a newer nightly build of the Flex 4.0 SDK, many of the old examples probably won’t compile due to various API changes over the months. ;)

      I suggest grabbing the most recent Flex 4.0 nightly SDK build from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4 and trying the example again. It worked for me yesterday, I swear!

      Peter

  1. Hi Peter –
    Do you know if there’s any way to customize the popUpPosition using .x and .y rather than having to use any of the default properties such as left, right, below, etc.?

    Thanks!

  2. Hello Peter,

    Thanks for this sample. Like what @Jeremy asked, “Do you know if there‚Äôs any way to customize the popUpPosition using .x and .y rather than having to use any of the default properties such as left, right, below, etc.?”

    Regards

Comments are closed.