Globally setting modal styles in a Flex application

The topic of setting modal styles came up again today so I thought I’d re-share this tip (I previously covered controlling modal styles for the Alert control in an earlier post, “Changing a modal Alert control’s blur, transparency and transparency color”).

The following example shows how you can set the various modal styles (modalTransparencyBlur, modalTransparency, modalTransparencyColor, and modalTransparencyDuration) on the global selector so it propogates to both the Alert control and pop-ups created using the PopUpManager.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/12/globally-setting-modal-styles-in-a-flex-application/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        global {
            modalTransparencyBlur: 0;
            modalTransparency: 0.8;
            modalTransparencyColor: black;
            modalTransparencyDuration: 500;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.managers.PopUpManager;

            private function showAlert():void {
                Alert.show("hello", "world");
            }

            private function showContactForm():void {
                var contactForm:ContactForm = new ContactForm();
                PopUpManager.addPopUp(contactForm, this, true);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Alert" click="showAlert();" />
        <mx:Button label="ContactForm" click="showContactForm();" />
    </mx:ApplicationControlBar>

</mx:Application>

View ContactForm.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/12/globally-setting-modal-styles-in-a-flex-application/ -->
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
        width="320"
        height="240"
        showCloseButton="true"
        close="titleWindow_close();"
        creationComplete="titleWindow_creationComplete();">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.managers.PopUpManager;

            private function titleWindow_close():void {
                PopUpManager.removePopUp(this);
            }

            private function titleWindow_creationComplete():void {
                PopUpManager.centerPopUp(this);
            }

            private function sendButton_click():void {
                Alert.show("Thanks for the feedback");
                titleWindow_close();
            }
        ]]>
    </mx:Script>

    <mx:Form styleName="plain" width="100%" height="100%">
        <mx:FormHeading label="Contact Us" />
        <mx:FormItem label="Name:" width="100%">
            <mx:TextInput id="feedbackName" width="100%" />
        </mx:FormItem>
        <mx:FormItem label="Email:" width="100%">
            <mx:TextInput id="feedbackEmail" width="100%" />
        </mx:FormItem>
        <mx:FormItem label="Comments:" width="100%" height="100%">
            <mx:TextArea id="feedbackComments" width="100%" height="100%" />
        </mx:FormItem>
    </mx:Form>

    <mx:ControlBar horizontalAlign="right">
        <mx:Button id="sendButton"
                label="Send"
                click="sendButton_click();" />
    </mx:ControlBar>

</mx:TitleWindow>

View source is enabled in the following example.

Bruno asks if you can change the modalTransparencyColor and other modalTransparency* styles at runtime. The short answer? “Yes”. The following example shows how you can change the modalTransparencyColor style on-the-fly at runtime using the following code: StyleManager.getStyleDeclaration("global").setStyle("modalTransparencyColor", "haloBlue");

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/12/globally-setting-modal-styles-in-a-flex-application/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        global {
            modalTransparencyBlur: 0;
            modalTransparency: 0.8;
            modalTransparencyColor: black;
            modalTransparencyDuration: 500;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.styles.StyleManager;

            private function showAlert():void {
                Alert.show("hello", "world");
            }

            private function setModelTransparencyColorStyle(color:Object):void {
                StyleManager.getStyleDeclaration("global").setStyle("modalTransparencyColor", color);
                showAlert();
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="red"
                fillColors="[red,red]"
                click="setModelTransparencyColorStyle(0xFF0000);" />
        <mx:Button label="haloGreen"
                fillColors="[haloGreen,haloGreen]"
                click="setModelTransparencyColorStyle('haloGreen');" />
        <mx:Button label="haloBlue"
                fillColors="[haloBlue,haloBlue]"
                click="setModelTransparencyColorStyle('haloBlue');" />
        <mx:Button label="haloSilver"
                fillColors="[haloSilver,haloSilver]"
                click="setModelTransparencyColorStyle('haloSilver');" />
    </mx:ApplicationControlBar>

</mx:Application>

View source is enabled in the following example.

Tagged as: modalTransparency, modalTransparencyBlur, modalTransparencyColor, modalTransparencyDuration