Si vous suivez la technique employée dans le précédent billet pour développer votre application AIR, et que celle-ci doit afficher par moment des messages ou bien des composants dans des popUp, vous allez rencontrer le problème suivant :

Comme vous le voyez, le popUp, une fois déplacé, ne peut sortir de l'application, et se retrouve "coupé".

Il faut donc "tricher". C'est à dire que l'on va créer une application sans utiliser le design de base (flexchrome). La technique est celle que montre très bien Itératif dans un tuto sur le sujet.

Mais ce faisant, nous perdons les fonctionnalités de redimensionnement, réduction, agrandissement, fermeture de l'application. Nous allons donc devoir ré-écrire ces fonctions.

Pour le redimensionnement, je suis parti de mon composant ResizePanel, légèrement modifié pour cette utilisation.

Pour les fonctions de réduction, agrandissement et fermeture de l'application, elles vont ressembler à cela :

pop.addEventListener("closePanel", onClose);
pop.addEventListener("minimizePanel", onMinimize);
pop.addEventListener("maximizePanel", onMaximize);
 
private function onClose(event:FlexEvent):void{
                
        PopUpManager.removePopUp(AIRResizePanel(event.currentTarget));
        pop = null;
        stage.nativeWindow.close();	
}
            
private function onMinimize(evt:FlexEvent):void{
	stage.nativeWindow.minimize();
}
   
private function onMaximize(evt:FlexEvent):void{
            	
        //ici je ne peux pas utiliser stage.nativeWindow.maximize();
        //Je dois donc ré-écrire une fonction similaire.
        //Le but est de faire correspondre la taille du popUp
        //à celle de l'écran en utilisant Capabilities.screenResolutionX
        //et Capabilities.screenResolutionY
        //Je dois aussi bloquer le déplacement du PopUp, comme ceci:
        //
        //pop.addEventListener(MoveEvent.MOVE,noMoveHandler);
        //
        //private function noMoveHandler(event:MoveEvent):void{
	//	pop.x = pop.y = 0;
	//}
        //Enfin, je dois tester si l'application est  déjà "agrandie" ou pas
        //soit à l'aide d'un booléen de mon cru, ou bien en testant
        //pop.width == Capabilities.screenResolutionX
        }
 
}

Les events "closePanel", "minimizePanel" et "maximizePanel" sont dispatchés par le composant AIRResizePanel

On peut aussi rajouter la fonction d'agrandissement sur double-clic dans la barre de titre. Pour cela, on fera :

import mx.styles.StyleManager;
 
pop.doubleClickEnabled = true;
pop.addEventListener(MouseEvent.DOUBLE_CLICK,DoubleClickMaximize);
 
private function DoubleClickMaximize(evt:MouseEvent):void{
		
	if(evt.localY < StyleManager.getStyleDeclaration(".AIRResizePanel").getStyle("headerHeight")){
		onMaximize(new FlexEvent(""));
	} 
}

Voilà pour le principe.

Je posterai mon composant AIRResizePanel lorsque celui-ci sera un peu plus propre.

Mais voici déja un exemple (désolé pour le trip sonore dans lequel je me suis laissé embarquer :))

Texte de remplacement


La suite au prochain épisode... 8-)