Displaying a popup Spark TitleWindow container in Flex 4

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 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/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.

25 thoughts on “Displaying a popup Spark TitleWindow container in Flex 4

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

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

    You i get a nighty build ?

    John

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

  4. 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 .

  5. @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

  6. 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.

    1. @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

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

    thx

    ex3108

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

    thx

    ex3108

  9. 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~

  10. 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.

  11. 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

  12. 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

  13. 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

  14. 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!

  15. 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!

  16. 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?

Comments are closed.