在flex应用中设定全局模式样式

通过修改模式的样式，来体验不一样的效果。（from  flex examples）

 

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>

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>

 

效果图片

 

 

 

在运行时，通过程序来更改modal的样式。

实例如下：

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

 

 

效果如如下