[Flex4] Propagation Event TitleWindow [Résolu]

[Flamenco]

Bonjour,

l'idée est d'avoir une page principale (Main.mxml), laquelle possède un bouton (mainBouton) dans une barre d'outils en haut.
- mainBouton déclenche l'ouverture d'une TitleWindow (Window1), Window1 qui possède un bouton (w1Bouton).
- w1Bouton déclenche l'ouverture d'une seconde TitleWindow (Window2)
- et désactive (enabled=false) mainBouton : pas de soucis (mais ma solution ne doit pas être la bonne, voir ci-dessous)
Une fois sur Window2,
- le but est de réactiver mainBouton lorsque l'on ferme Window2 : et là, je n'y arrive pas...

Mon dernier essai infructueux étant dans Window1 onFermetureEcran() avec this.dispatchEvent(new MyEvent(MyEvent.BOUTON_ACTIF_OU_NON,true))


Une idée, un conseil, un barbecue, une sortie ski, je suis ouvert à toute proposition.
Merci d'avance.

Le code complet pour tester (elle est pas belle la vie!!). Au passage, vous noterez la redondance du code (afficherEcran(), onFermetureEcran()...) : c'est secondaire mais là aussi, un conseil sera bienvenu. Vous l'aurez deviné j'en suis aux balbutiements de flex/as.

Main.mxml

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               minWidth="955" minHeight="600"
               applicationComplete="initialiserHeader()">
 
    <fx:Declarations>
        <!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
    </fx:Declarations>
 
    <fx:Script>
        <![CDATA[
            import mx.events.CloseEvent;
            import mx.managers.PopUpManager;
 
            import spark.components.TitleWindow;
            private function initialiserHeader():void{
                this.addEventListener(MyEvent.BOUTON_ACTIF_OU_NON,activerBoutonsHeader);
            }
            private function activerBoutonsHeader(event:MyEvent):void{
                mainBouton.enabled = event.isActif;
            }
 
            private function afficherEcran(quelEcran:Class, event:MouseEvent):void {
                var monEcran:TitleWindow = new quelEcran();
                monEcran.width = 500;
                monEcran.height = 400;
                monEcran.addEventListener(CloseEvent.CLOSE, onFermetureEcran);
                PopUpManager.addPopUp(monEcran, this);
                PopUpManager.centerPopUp(monEcran);
                monEcran = null;
                this.dispatchEvent(new MyEvent(MyEvent.BOUTON_ACTIF_OU_NON,false));
            } 
 
            private function onFermetureEcran(event:CloseEvent):void {
                var quelEcran:TitleWindow = event.target as TitleWindow;
                fermerEcran(quelEcran);
                quelEcran = null;
            }
                private function fermerEcran(quelEcran:TitleWindow):void {
                    PopUpManager.removePopUp(quelEcran);
                    quelEcran = null;
                }
 
        ]]>
    </fx:Script>
 
    <s:HGroup height="50" gap="0">
 
        <s:Group>
            <s:Label text="Salut" y="5" fontWeight="bold" fontSize="15" />
            <s:Label text="Les Dev" y="20" color="#EC4353" fontSize="12" fontWeight="bold" />
        </s:Group>
        <s:Button id="mainBouton" height="100%" label="Window1" click="afficherEcran(Window1, event)"/>
 
    </s:HGroup>
 
    <s:Label y="70" width="797" height="182" fontSize="36" fontWeight="bold" text="Ecran Main"
             textAlign="center" verticalAlign="middle"/>
 
</s:Application>

Window1.mxml

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                     xmlns:s="library://ns.adobe.com/flex/spark" 
                                     width="400" height="300"
                                     minHeight="100"
                                     minWidth="150"
                                     contentCreationComplete="definirEcran()"
                                     >
 
    <fx:Script>
        <![CDATA[
            import mx.events.CloseEvent;
            import mx.managers.PopUpManager;
            private function definirEcran():void {
                this.title = "Window1";
                this.closeButton.visible = false;
            }
 
            private function afficherEcran(quelEcran:Class, event:MouseEvent):void {
                var monEcran:TitleWindow = new quelEcran();
                monEcran.width = 500;
                monEcran.height = 400;
                monEcran.addEventListener(CloseEvent.CLOSE, onFermetureEcran);
                PopUpManager.addPopUp(monEcran, this);
                PopUpManager.centerPopUp(monEcran);
                monEcran = null;
            } 
 
            private function onFermetureEcran(event:CloseEvent):void {
                var quelEcran:TitleWindow = event.target as TitleWindow;
                fermerEcran(quelEcran);
                quelEcran = null;
                this.dispatchEvent(new MyEvent(MyEvent.BOUTON_ACTIF_OU_NON,true));
            }
            private function fermerEcran(quelEcran:TitleWindow):void {
                PopUpManager.removePopUp(quelEcran);
                quelEcran = null;
            }
 
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
 
 
    <s:Scroller width="100%" height="100%">
        <s:VGroup horizontalAlign="center" verticalAlign="middle">
            <s:Label text="{title}" fontSize="45" fontWeight="bold" color="0x404040"  />
            <s:Button id="w1Bouton" label="Afficher Window2" click="dispatchEvent(new CloseEvent(CloseEvent.CLOSE,true));afficherEcran(Window2, event)"/>
        </s:VGroup>
    </s:Scroller>
 
</s:TitleWindow>

Window2.mxml

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               width="400" height="300"
               minHeight="100"
               minWidth="150"
               contentCreationComplete="definirEcran()"
               >
 
    <fx:Script>
        <![CDATA[
            private function definirEcran():void {
                this.title = "Window2";
                this.closeButton.visible = true;
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
 
 
    <s:Scroller width="100%" height="100%">
        <s:VGroup horizontalAlign="center" verticalAlign="middle">
            <s:Label text="{title}" fontSize="45" fontWeight="bold" color="0x404040"  />
        </s:VGroup>
    </s:Scroller>
 
</s:TitleWindow>

MyEvent.as

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
package
{
    import flash.events.Event;
 
    public class MyEvent extends Event
    {
        public var isActif:Boolean=false;
        public var eventType:String="";
        public static const BOUTON_ACTIF_OU_NON:String="activationMainBouton";
 
        public function MyEvent(type:String, isActif:Boolean)
        {
            super(type, true, true);
            this.isActif = isActif;
            this.eventType = type;
        }
    }
}

[Madfrix]

Salut,

Envoyé par Flamenco

Une idée, un conseil, un barbecue, une sortie ski, je suis ouvert à toute proposition.

Une bière puis rendez vous ici

Certes PDF de 50 pages à lire mais tu comprendras vite l'intérêt de "perdre" 2-3 jours de compréhension du framework PureMVC pour gagner énormément de temps de dév sur tes actuels et futurs projets

C'est plus à démontrer que le système d'events flash est foireux tu peux écouter juste les événements qui sont sur la même "branche de composants" que le composant qui a déclenché l'event...et c'est ca qui est pourri

Pour écouter un event dispatché sur une autre branche, tu dois redispatcher l'event au croisement des 2 branches et ainsi de suite...ce qui est vite très très lourd sans compter que tes composants ne sont plus faiblement couplés.

L'implémentation du pattern Observer (utilisé par PureMVC) résout tous ces problèmes et est à mon avis moins consommatrice de ressources.

Bonne lecture et bonne bière

[Flamenco]

Salut Madfrix,

merci déjà pour ta réponse.

Je prends la bière, à ta santé.

PureMvc, Mate, Cairngorm... : j'ai vu, lu, relu et vomis (j'exagère)...Je vais la faire un peu courte et peut être à tord. Flex étant déjà un framework à part entière, y coller une couche de plus ne m'inspire pas plus que cela, à l'instant t. Côté organisationnel, n-tiers ou séparation des couches ihm, metier, dao (mvc pour d'autres), je devrais m'en dépatouiller.

Et donc, avant de peut être revenir sur mes propos, j'aimerais d'abord trouver une solution propre à Flex, afin d'en comprendre les mécanismes et peut être ensuite de mieux appréhender les divers frameworks tiers.

Mais je note ton conseil, une bière à la main.

Salut et merci.

[Madfrix]

Salut,

si tu tiens à utiliser le modèle évenementiel flash, tu peux faire ceci alors :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
<?xml version="1.0" encoding="utf-8"?>
<s: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" minWidth="955" minHeight="600">
 
	<fx:Script>
		<![CDATA[
			import mx.core.IFlexDisplayObject;
			import mx.events.CloseEvent;
			import mx.managers.PopUpManager;
 
			import spark.components.TitleWindow;
 
			protected var twReferences:Array = [];
 
			protected function button1_clickHandler(event:MouseEvent):void
			{
				var tw:TitleWindow = new TitleWindow();
				tw.width = 500;
				tw.height = 500;			
				tw.addEventListener(CloseEvent.CLOSE, fermeture);
				var b:Button = new Button();
				b.label = "ouvrir window 2";
				b.addEventListener(MouseEvent.CLICK, openTw2);
				tw.addElement(b);
				PopUpManager.addPopUp(tw, this);
				PopUpManager.centerPopUp(tw);			
				mainButton.enabled = false;			
				addRef(tw);
			}
 
			protected function fermeture(e:CloseEvent):void
			{
				PopUpManager.removePopUp(IFlexDisplayObject(e.target));
				updateMainButtonState(TitleWindow(e.target));
			}
 
			protected function openTw2(e:MouseEvent):void
			{
				var tw2:TitleWindow = new TitleWindow();
				tw2.addEventListener(CloseEvent.CLOSE, fermeture);				
				PopUpManager.addPopUp(tw2, this);
				mainButton.enabled = false;	
				addRef(tw2); 
			}
 
			protected function addRef(ref:TitleWindow):void
			{
				twReferences.push(ref);
			}				
 
			protected function updateMainButtonState(ref:TitleWindow):void
			{
				var l:int = twReferences.length;
 
				while(l--)
				{
					if(TitleWindow(twReferences[l]) == ref)
					{
						twReferences.splice(l, 1);						
						break;
					}						
				}
 
				mainButton.enabled = !twReferences.length;
			}
 
		]]>
 
	</fx:Script>	
 
	<s:Button id="mainButton" label="click ici" click="button1_clickHandler(event)"/>	
 
</s:Application>

[Flamenco]

Salut Madfrix,

sur ce coup je note la solution du tableau mais comme je suis du genre insatisfait, je relèverais qu'ici tu détournes le problème puisque tu centralises tout sur l'équivalent de mon main ce qui forcément rend caduque le problème de portée de mes events. Cela pourrait passer pour 2 écrans mais dès lors que l'on parle d'une appli ordinaire, je ne le sens pas comme cela.

Mais bon, on avance.

Si tu dois m'envoyer bouler, pas de blème tant que c'est une bière à la main, une tueuse dans l'autre.

[Madfrix]

Salut,

Envoyé par Flamenco

je relèverais qu'ici tu détournes le problème puisque tu centralises tout sur l'équivalent de mon main ce qui forcément rend caduque le problème de portée de mes events.

Si tu veux absolument utiliser des events, tu peux déclarer en variable statique dans ta classe d'événement MyEvent un compteur de TitleWindow ouvertes et incrémenter/décrémenter ce compteur en fonction des ouvertures/fermetures de fenêtres. Ca a en plus l'avantage d'encapsuler la logique méter dans ta classe d'événement plutôt que de dispatcher un peu partout du code

Si tu vois pas ce que je veux dire, je te ferais un petit code ce soir si j'ai le temps

[Flamenco]

Salut,

la solution finale adoptée pour l'instant est un dérivé des soluces proposées.
On définit une propriété stockant le nom du prochain écran que l'on souhaite affiché, lorsque le main reçoit l'event de fermeture d'une TitleWindow, on teste alors cette propriété, si elle est renseignée, on ouvre nouvel Ecran et la barre d'outil reste inactive, sinon, on active la barre.

On se retrouve donc avec le test dans le Main comme Madfrix l'indiquait, plus de soucis de portée.

Nickel - Je vais pouvoir passer à autre chose que d'la bière...

Merci.