CODEWITHSUNDEEP
apache-flexmodal-dialog
sixtyfootersdude
sixtyfootersdude

Reputation: 27231

Flex: createPopUp -> Make everything modal except scrollbars

I made this simple application to demonstrate my problem. It has:

<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx" 
                   verticalScrollPolicy="on"
                   horizontalScrollPolicy="on"
                   layout="vertical">

    <fx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            public function buttonClick():void {
                PopUpManager.createPopUp(this,JakePanel,true);
            }
        ]]>
    </fx:Script>

    <mx:Image width="2000"
              source="@Embed(source='assets/image.jpg')"/> 
    <mx:Button click="{buttonClick()}" label="Launch"/>

</mx:Application>

When the launch button is pressed it launches this popup window:

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx" 
          layout="vertical" 
          width="400" height="300"
          title="Popup"
          >
    <fx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            public function close():void {
                PopUpManager.removePopUp(this);
            }           
        ]]>
    </fx:Script>
    <s:TextArea text="Enter more text here: " width="100%" height="200"/>
    <s:Button label="OK" click="{close()}" width="100%" height="30" />

</mx:Panel>

These are my requirements

  1. When the popup is open I need to be able to disable everything except the popup. To do this I am using: PopUpManager.createPopUp(this,JakePanel,true);. The last parameter specifies that the popup is "modal" and that it should capture all mouse events.

  2. I also need to allow the main scroll bars to be enabled while the popup is open. Often my users will have the app open in a very small screen and will not be able to resize the app. For example:

enter image description here

This is a problem when the app is too small to click the ok button:

enter image description here

Is there a way to make everything "modal" except the main scroll bars? I know that I could put a scrollbar on the Panel but I would prefer to avoid this.

Upvotes: 0

Views: 962

Answers (1)

sixtyfootersdude
sixtyfootersdude

Reputation: 27231

I think that the best way to do this is to:

  1. Wrap everything in the main application in a <mx:hgroup id="allYourStuff"> tag.
  2. When you add the Popup to the screen call: allYourStuff.enabled = false
  3. When you remove the Popup from the screen call: allYourStuff.enabled = true

Upvotes: 1

Related Questions