Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex PopUp – Contrôler le style d'une PopUp modale

Par défaut, quand vous ouvrez une fenêtre popUp de type Alert dans Flex grâce à la méthode show(), l'application se recouvre d'une sorte de voile gris qui empêche l'utilisateur d'utiliser l'application. Voici l'apparence d'une fenêtre modale par défaut:

Ce type de fenêtre avec un voile derrière est appelé fenêtre modale.

Vous pouvez bien sur modifier certains paramètres pour changer l'apparence de ce voile modal. Il existe 4 paramètres que vous pouvez modifier:

•  modalTransparency:Number. Valeur par défaut 0.5. Définit l'opacité du voile appliqué. Une valeur de 0 rend le voile complètement transparent. Une valeur de 1 le rend totalement opaque.
• modalTransparencyBlur:Number. Valeur par défaut 3. Définit le flou (blur) appliqué au reste de l'application Flex.
• modalTransparencyColor:uint .Valeur par défaut 0xDDDDDD. Définit la couleur du voile.
• modalTransparencyDuration:Number. Valeur par défaut 100. Définit en millisecondes, le temps que met l'effet de transparence à se jouer (ouverture et fermeture).

Voici une application Flex que je viens de faire dans laquelle vous pouvez modifier ces paramètres et voir le résultat directement:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="creationCompleteHandler(event)" viewSourceURL="srcview/index.html">

    <mx:Script>
        <![CDATA[
        	import mx.events.CloseEvent;
            import mx.controls.Alert;

            private var alertCSS:CSSStyleDeclaration;

            private function creationCompleteHandler(event:Event):void{
            	alertCSS = StyleManager.getStyleDeclaration("Alert");
            	Alert.yesLabel = "Oui";
            	Alert.noLabel = "Non";
            }
            private function clickHandlerSave(event:Event):void {

            	alertCSS.setStyle("modalTransparencyColor", modalColor.selectedColor);
            	alertCSS.setStyle("modalTransparency", transpSlider.value);
            	alertCSS.setStyle("modalTransparencyBlur", blurSlider.value);
            	alertCSS.setStyle("modalTransparencyDuration", durationSlider.value);
            	var flags:uint = Alert.YES | Alert.NO;
                Alert.show("Voulez-vous sauvegarder", "Sauver...", flags, this, closeHandler);
            }
            private function closeHandler(event:CloseEvent):void{
            	alertCSS.setStyle("modalTransparencyColor", 0xDDDDDD);
            	alertCSS.setStyle("modalTransparency", 0.5);
            	alertCSS.setStyle("modalTransparencyBlur", 3);
            	alertCSS.setStyle("modalTransparencyDuration", 100);
            }
        ]]>
    </mx:Script>
    <mx:Panel width="400" height="300" title="Modification Alert Modal"
    	paddingLeft="30" paddingTop="30" paddingRight="30">
    	<mx:Label text="modalTransparency"/>
		<mx:HSlider id="transpSlider" minimum="0" maximum="1" value=".5" snapInterval=".1" width="100%"/>
    	<mx:Label text="modalTransparencyBlur"/>
		<mx:HSlider id="blurSlider" minimum="0" maximum="5" value="3" snapInterval="1" width="100%"/>
		<mx:Label text="modalTransparencyColor"/>
		<mx:ColorPicker id="modalColor" selectedColor="0xDDDDDD"/>
    	<mx:Label text="modalTransparencyDuration"/>
		<mx:HSlider id="durationSlider" minimum="0" maximum="2000" value="100" snapInterval="100" width="100%"/>
		<mx:Button label="Afficher une Alert" click="clickHandlerSave(event);"/>
	</mx:Panel>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application