Displaying a popup Spark TitleWindow container in Flex 4

By On October 23, 2009 · 25 Comments

The following example shows how you can display a popup Spark TitleWindow container in Flex 4 by using the static PopUpManager.addPopUp(), PopUpManager.createPopUp(), and PopUpManager.centerPopUp() methods.

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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/2009/10/23/displaying-a-popup-spark-titlewindow-container-in-flex-4/ -->
<s:Application name="Spark_TitleWindow_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <s:Button id="btn"
                label="Show TitleWindow"
                click="btn_click(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.core.IFlexDisplayObject;
            import mx.events.CloseEvent;
            import mx.managers.PopUpManager;
            import spark.components.TitleWindow;
 
            protected var ttlWndw:TitleWindow;
 
            protected function btn_click(evt:MouseEvent):void {
                ttlWndw = new TitleWindow();
                ttlWndw.title = "Spark TitleWindow title";
                ttlWndw.width = 300;
                ttlWndw.height = 200;
                ttlWndw.addEventListener(CloseEvent.CLOSE, ttlWndw_close);
 
                PopUpManager.addPopUp(ttlWndw, this, true);
                PopUpManager.centerPopUp(ttlWndw);
            }
 
            protected function ttlWndw_close(evt:CloseEvent):void {
                PopUpManager.removePopUp(evt.currentTarget as IFlexDisplayObject);
            }
        ]]>
    </fx:Script>
 
</s:Application>

You could also declare the TitleWindow instance using MXML, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/23/displaying-a-popup-spark-titlewindow-container-in-flex-4/ -->
<s:Application name="Spark_TitleWindow_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <s:Button id="btn"
                label="Show TitleWindow"
                click="btn_click(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.core.IFlexDisplayObject;
            import mx.events.CloseEvent;
            import mx.managers.PopUpManager;
 
            protected function btn_click(evt:MouseEvent):void {
                PopUpManager.addPopUp(ttlWndw, this, true);
                PopUpManager.centerPopUp(ttlWndw);
            }
 
            protected function ttlWndw_close(evt:CloseEvent):void {
                PopUpManager.removePopUp(evt.currentTarget as IFlexDisplayObject);
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <s:TitleWindow id="ttlWndw"
                title="Spark TitleWindow title"
                width="300" height="200"
                close="ttlWndw_close(event);" />
    </fx:Declarations>
 
</s:Application>

Or you could make a custom TitleWindow-based component and launch the popup window using the static PopUpManager.createPopUp() method, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/23/displaying-a-popup-spark-titlewindow-container-in-flex-4/ -->
<s:Application name="Spark_TitleWindow_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <s:Button id="btn"
                label="Show TitleWindow"
                click="btn_click(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import comps.MyTitleWindow;
            import mx.managers.PopUpManager;
 
            protected function btn_click(evt:MouseEvent):void {
                var ttlWndw:MyTitleWindow = PopUpManager.createPopUp(this, MyTitleWindow, true) as MyTitleWindow;
                PopUpManager.centerPopUp(ttlWndw);
            }
        ]]>
    </fx:Script>
 
</s:Application>

And the custom TitleWindow-based component, comps/MyTitleWindow.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/23/displaying-a-popup-spark-titlewindow-container-in-flex-4/ -->
<s:TitleWindow name="MyTitleWindow"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        title="Spark TitleWindow title"
        width="300" height="200"
        close="ttlWndw_close(event);">
 
    <fx:Script>
        <![CDATA[
            import mx.core.IFlexDisplayObject;
            import mx.events.CloseEvent;
            import mx.managers.PopUpManager;
 
            protected function ttlWndw_close(evt:CloseEvent):void {
                PopUpManager.removePopUp(evt.currentTarget as IFlexDisplayObject);
            }
        ]]>
    </fx:Script>
 
</s:TitleWindow>

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.

 
Tagged with: • • •
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

  • Add Widgets (Content Sidebar)

    This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

Share
Facebook Twitter

25 Responses to Displaying a popup Spark TitleWindow container in Flex 4

  1. Anonymous says:
    October 23, 2009 at 9:34 pm

    Thank you, Peter, for another helpful post.
    Are there any advantages of using PopUpManager.createPopUp() vs. PopUpManager.addPopUp()?
    Thanks,
    IB

  2. John says:
    November 13, 2009 at 12:35 pm

    I don’t get the component “spark.components.TitleWindow” in Flashbuilder Beta 2.

    You i get a nighty build ?

    John

  3. shunia says:
    November 16, 2009 at 8:19 pm

    I am using the non-”spark.components.TitleWindow”-version flash builder too…adobe’s really confused me…

  4. Sameera Sandaruwan says:
    November 27, 2009 at 9:00 am

    so then
    function giveMePopUp():void
    {
    var FAQpnl:ScorecardPanel = new ScorecardPanel();
    PopUpManager.addPopUp(FAQpnl, Application.application as DisplayObject, true);
    }

  5. nicotroia says:
    January 26, 2010 at 10:22 pm

    I wish you included which SDK build you were using, since the most recent stable Flex Builder 4 beta 2 version does not include a “titleWindow” component either. It’s very confusing. I tried to use a recent nightly build and it did have it included, yet there is a new library it seems, mxlns:ns. It replaces many components, for example: to .

  6. Peter deHaan says:
    January 26, 2010 at 10:40 pm

    @nicotroia,

    Sorry, I usually build all these examples on the latest nightly Flex SDK available at any given point. The old Beta 2 SDK is fairly out of sync with the latest APIs. The previous examples should all still work, although you will need to tweak the xmlns:mx="library://ns.adobe.com/flex/halo" namespace to xmlns:mx="library://ns.adobe.com/flex/mx". There isn’t a Spark version of the <Form> tag yet, so you’ll still need to use the mx namespace:

    xmlns:mx="library://ns.adobe.com/flex/mx"

    And then:

    <mx:Form>...</mx:Form>

    Peter

  7. Rodrigo Pena says:
    February 2, 2010 at 10:39 am

    Hi Peter, do you know how i set the order of oppening my popup windows. order by the click or select for a sample? In the order of my code the windows are overiting each other.
    Thanks.

    • Peter deHaan says:
      February 2, 2010 at 12:05 pm

      @Rodrigo Pena,

      You’d just have to open the popups in the reverse order. It’s actually working correctly. Assume your code launches 3 Alert controls. The first Alert is launched. Next the second Alert is launched, and overlaps Alert #1. Finally the third Alert is launched and overlaps Alert #2 which and Alert #1. So you have 3 Alerts, but you’d need to close Alert #3 to see the first two (assuming they were modal). If you want Alert #1 to be on “top”, you’d need to launch Alert #3, then Alert #2, and then Alert #1.

      Seems a bit backwards, but I believe it’s working as intended.

      Peter

  8. ex3108 says:
    April 26, 2010 at 8:40 pm

    Hi, I am very new to Flex, is there way to pass multiple data from TitleWindow/PopUp window back to parenet window?

    thx

    ex3108

  9. ex3108 says:
    April 26, 2010 at 8:42 pm

    Hi, I am very new to Flex, is there way to pass multiple data from TitleWindow/PopUp window back to parenet application?

    thx

    ex3108

  10. mini says:
    July 12, 2010 at 11:11 pm

    Hi~I want to change Alert’s border & buttons css styles in Flex4~Like chromeColor or the colors of title part & text part………..
    But I can’t understand the tuition on the internet~
    would you mind explain it briefly again?
    thank U~

  11. manish sharma says:
    September 21, 2010 at 10:24 pm

    hello sir,
    The code is very for me.
    I am using PureMVC pattern
    But now i want to register a mediator with this title window. where should i write the code. i don’t want to write the code in mxml. because it is a view part and i want to register the mediator in facade, but how get the instance of that mxml in facade.

  12. Edwin Merced says:
    October 6, 2010 at 8:18 pm

    Hello Peter:

    How woul I place content inside a Window (say an swf demo movie built with Captivate)?

    Thank you

    Att,

    Edwin

  13. Jared says:
    October 18, 2010 at 9:18 pm

    None of your examples are showing up… I’m guessing dropbox has hit its bandwidth limit. :(

  14. Enio says:
    January 24, 2011 at 5:09 pm

    Hi Peter, how can I call a function (in the opener window) from the popup created? I can’t use the command myPopup['myButton'].addEventListener(‘click’, myFunction), because the buttons in the popup was created at runtime (by a repeater). I’d tried to use parentApplication.myFunction, but unfortunately it didn’t work. Thanks

  15. Tauri says:
    February 9, 2011 at 11:32 am

    If i create popup via this metod:
    var popup:TitleWindow = PopUpManager.createPopUp(this , Popup , false) as TitleWindow;

    And i have Popup.mxml which contains ViewStack with id vs, then how can i reach vs right after creating the popup.

    popup.vs is not working

  16. Ramakrishna says:
    May 5, 2011 at 10:18 pm

    Thanks for these.

    I want to move popup window, out of Parent application bounds. please give sample.

  17. aidan mack says:
    August 25, 2011 at 2:33 pm

    HI,
    Can anyone tell me how to get the slightly blurry/transparent background when a displaying a popup?

    my code looks like this…

    var conGrats:CongratsPopUp = new CongratsPopUp() PopUpManager.addPopUp(conGrats,this,true);

    CongratsPopUp() is a TitleWindow component

    The above works, but I want it to blur out the screen behind the pop up.

    Thanks
    Aidan

  18. Christopher Martin says:
    August 29, 2011 at 9:54 am

    Aidan im also curious about how to control the screen behind the pop up. Have you had any luck controlling the screen under your window?

  19. Radiance Ong says:
    November 9, 2011 at 5:49 am

    Hi, I first learned how to build a popup window from here and after searching for a very long time, I’ve found a way to call a function in the parent window.

    For example, define a *public* function myFunc() in the parent.

    Then in the Popup Window, call parentApplication.myFunc(). It’s that easy!

  20. David Araya says:
    December 15, 2011 at 2:25 pm

    Hi Peter, thanks for all your posts. Here’s a quick question:

    How can I display a custom component (declared at the Application level) over a Popup created by the PopUpManager?

    When myCustomComp is supposed to show within the showCustomComp function, I tried with:

    myCustomComp.visible = true; this.setElementIndex(virtualKeyboard,this.numElements-1);

    But it is not showing over any window called by the PopUpManager

    Could you give me a hint? Thanks!

  21. Kelsey says:
    January 17, 2012 at 10:33 am

    When I add a Title Window to my 1920×1080 application, the modal background only covers about 75% of the application from the top left corner. The popup is centered within that 75% frame. However the blur effect does in fact cover 100% of the application. Any idea what is going on here and how to fix it?