Powered By Blogger

Friday, September 28, 2012

Flex Popup Window


 This is about how a popup window can be created to appear to the right side, with a mouse click. I have used a button bar in this code sample which would be positioned vertically and contain an image icon. Further, the button bar will dispatch an item clicked event when any of it's items is clicked. What appears subsequently is a tiled window, that would dispatch an event to hide itself when exit (x) is clicked.

 The methods to be executed when events are fired are written in a separate action script, my_action_script.as which is included in my mxml file with the line, <mx:Script source="my_action_script.as"/>. 
===================================================================

 <!--
     Code that is not relevant is omitted.
-->
<mx:Script source="my_action_script.as"/>

<mx:Array id="buttons">

        <mx:Object icon="@Embed(source='images/my_image.png')" desc="test"/>   
 </mx:Array>

 <!--
     Code that is not relevant is omitted.
-->
<mx:ButtonBar height="100%" width="2%" verticalGap="2" direction="vertical" id="buttonBar" dataProvider="{buttons}" itemClick="buttonBar_itemClick(event);" paddingTop="0" paddingBottom="{this.height - 75}" />
               
            <s:PopUpAnchor height="{buttonBar.height}" width="0"
                       popUpPosition="right" id="popAnc">
                  <s:TitleWindow id="title_window"                                                              title="XXX"   close="popUpAnchorCloseHandler(event);">
                    <mx:Panel id="my_panel" height="{buttonBar.height - acb.height}" 
                              width="{acb.width/4}" title="my panel" alpha="1">
                        <!-- add items to the panel here -->
                    </mx:Panel>
                </s:TitleWindow>
            </s:PopUpAnchor>

 <!--

     Code that is not relevant is omitted.
-->

===================================================================

 First, an array with one object, having an icon is defined. This array is the data provider of the button bar. The direction of the button bar is vertical. If an item of the button bar is clicked (in this case there is only one item) the method, buttonBar_itemClick(e:ItemClickEvent) will be called (since it is defined as itemClicked attribute).
 Popup anchor is the component used for popup. It can be customized by introducing where to popup with height, width and popUpPosition attributes. The window will appear to the right as stated in popUpPosition. This UI component engulfs a title window containing a panel. The title window will trigger popUpAnchorCloseHandler(e: CloseEvent) method as stated for it's close attribute.

 Actionscript code segments pertinent to the example are posted below.
===================================================================


/**
     * This is called when an item of the button bar is clicked.
     */
    private function buttonBar_itemClick(e:ItemClickEvent):void {
        var message:String = ObjectUtil.toString(e.item);
        if (message.indexOf("test1") != -1) {
            // open the pop-up anchor.
            FlexGlobals.topLevelApplication.popAnc.displayPopUp = true;
        }
    }

    /**
     * This is called when the title window's close event is fired.
     * Pop up anchor is closed here.
     */
    private function popUpAnchorCloseHandler(e: CloseEvent): void {
        FlexGlobals.topLevelApplication.popAnc.displayPopUp = false;
    }

===================================================================

 The first method, which is invoked when the item is clicked, converts the item into a string format and checks if "test1" is available ("test1" is the value of desc attribute of the item). If so, popup anchor is made visible. The second method will be invoked when the 'x' sign of the title window is clicked and it will make the anchor invisible.

thanks,
Shyarmal.

No comments:

Post a Comment