Should I be using a PopUp Window?

Anonymous User · ‎04-27-2012

Hello all. Relative newbie here with a question about PopUp windows. I would like to have a window that opens by default on my page, but I would also like to give the user a way to close it if they choose to do so. I chose to use a TitleWindow so I would have the option to close. However, it seems like you can't actually close a TitleWindow if it never "popped up" in the first place.

So my question is twofold: first, is there some way to essentially have the window pop up when the page loads? Second, if there isn't, is there another window to code a window that the user can close? I have searched all around the internet and can't seem to find the answers.

KenBuja · ‎04-27-2012

I use a popup window in my sites to open a page that contains information about the project. Here's an example

This is the code I use to open the popup (which is called in the creationComplete event) and the mxml code for the window itself.

            private var popWelcome:WelcomePopup = new WelcomePopup;

            protected function creationCompleteHandler(event:FlexEvent):void
            {
                
                PopUpManager.addPopUp(popWelcome, this, true, PopUpManagerChildList.POPUP);
                PopUpManager.centerPopUp(popWelcome);

                
//              more initialization code
                
            }

// WelcomePopup.mxml code

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx"
               title="About" close="closePopup();"
               width="500" height="500" cornerRadius="5">
    <fx:Script>
        <=!=[=C=D=A=T=A=[
            import mx.events.CloseEvent;
            import mx.managers.PopUpManager;

            protected function closePopup():void
            {
                PopUpManager.removePopUp(this);
            }

            protected function openNewBrowser(url:String):void
            {
                var urlRequest:URLRequest = new URLRequest(url);
                navigateToURL(urlRequest, "_blank");
            }

        ]=]=>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:VGroup width="100%" height="100%" horizontalAlign="center">
        <mx:Spacer height="10"/>
        <s:TabBar id="tabs" dataProvider="{vs}"/>
        <mx:ViewStack id="vs" width="100%" height="100%">
            <s:NavigatorContent label="Welcome" width="100%" height="100%">
                <s:VGroup width="100%" height="100%" horizontalAlign="center">
                    <s:TextArea id="ta1" width="80%" height="100%" textAlign="left" borderAlpha="0" paddingLeft="10" paddingRight="10" paddingTop="25" paddingBottom="10">
                        <s:textFlow>
                            <s:TextFlow>
                                <!--<s:p>Welcome to the Long Island Sound Benthic Mapping Project Spatial Prioritization Tool. As part of an
                                    ongoing effort to refine and implement a Benthic Habitat Mapping initiative for Long Island Sound, we
                                    are asking for your participation to help guide upcoming data collection. This portal contains a
                                    collection of existing data to assist you in determining whether an area is important and why, but
                                    should not be considered as the only factors for consideration. It is expected that you or your
                                    organization may have additional knowledge - this can and should be used in your evaluation as well. 
                                    This portal, in conjunction with the PDF Prioritization Form, will be used to capture the information
                                    needs of your program and others to create a consensus of where future activities should be focused
                                    within the Sound.</s:p>-->
                                <s:p> </s:p>
                                <s:p>To turn on the individual data layers, click the arrow next to each thematic group to show the 
                                    layers. Check the data layers to make them visible. You can also change the underlying map by clicking 
                                    on one of the four options (OSM/Streets/Topo/Imagery) in the upper right corner.</s:p>
                                <s:p> </s:p>    
                                <s:p>To identify the data for a given location, make sure the data layers are turned on, then click
                                    on the map. A results box will appear with each data themes listed in an individual data tab. 
                                    Click a tab to reveal the information for your layer of choice.</s:p>
                                <s:p> </s:p>
                                <s:p>NOTE: The more layers you have turned on, the longer it will take to return the results, so you may need to be patient. </s:p>
                            </s:TextFlow>
                        </s:textFlow>
                    </s:TextArea>
                    
                </s:VGroup>                
            </s:NavigatorContent>
            <s:NavigatorContent label="Contact" width="100%" height="100%">
                <s:VGroup width="100%" height="100%" horizontalAlign="center" gap="-1">
                    <mx:Spacer height="10"/>
                    <mx:Text text="For help or comments please contact:"/>
                    <s:VGroup width="100%" height="20%" gap="-5" horizontalAlign="center">
                        <mx:Text text="Dan Dorfman"/>
                        <mx:Text text="301-713-3028 x112"/>
                        <mx:Text condenseWhite="true">
                            <mx:htmlText>
                                <=!=[=C=D=A=T=A=[
                                <font color="0x0088d8"><u><a href='mailto:dan.dorfman@noaa.gov'>Dan.Dorfman@noaa.gov</a></u></font>
                                ]=]=>
                            </mx:htmlText>
                        </mx:Text>                                    
                    </s:VGroup>
                    <!--<mx:Image source="assets/deplogo1-99x100.gif" click="openNewBrowser('http://www.ct.gov/dep/site/default.asp');" buttonMode="true"/>-->
                    <mx:Spacer height="20"/>
                    <mx:Text condenseWhite="true" fontSize="12" fontWeight="bold">
                        <mx:htmlText>
                            <=!=[=C=D=A=T=A=[
                            <a href='http://ccma.nos.noaa.gov/about/biogeography/' target='_blank'>NOAA's Biogeography Branch</a>
                            ]=]=>
                        </mx:htmlText>
                    </mx:Text>
                    <mx:Image source="assets/logo_100.gif" click="openNewBrowser('http://www.noaa.gov');" buttonMode="true"/>
                </s:VGroup>
            </s:NavigatorContent>
        </mx:ViewStack>
        
        <s:VGroup horizontalAlign="center">
            <mx:Text condenseWhite="true">
                <mx:htmlText>
                    <=!=[=C=D=A=T=A=[
                        <font size="9"><p align="center">
                        <a href='http://www.commerce.gov/' target='_blank'>DOC</a> |
                        <a href='http://www.noaa.gov/' target='_blank'>NOAA</a> |
                        <a href='http://oceanservice.noaa.gov/' target='_blank'>NOS</a> |
                        <a href='http://coastalscience.noaa.gov/' target='_blank'>NCCOS</a> |
                        <a href='http://coastalscience.noaa.gov/notices/disclaimer.aspx' target='_blank'>Disclaimer</a> |
                        <a href='http://oceanservice.noaa.gov/privacy.html' target='_blank'>Privacy Policy</a> <br>
                        <a href='http://ccma.nos.noaa.gov//' target='_blank'>Web site owner: Center for Coastal Monitoring and Assessment</a>
                        </p></font>
                    ]=]=>
                </mx:htmlText>            
            </mx:Text>
        </s:VGroup>
                 
        <s:Button label="OK" click="closePopup();"/>
        <mx:Spacer height="10"/>
    </s:VGroup>
              
</s:TitleWindow>