gestion des événements

**bouclette** · 08/04/2009, 17h34

Bonjour j'ai quelques petits problèmes avec la gestion des évènements en Flex.
Je dispose de deux composants écrit en mxml :
- le premier basé sur TitleWindow et me servant pour afficher un formulaire dans une popup ;
- le second basé sur Panel affichant un tableau, le double click sur une ligne de ce tableau ouvrant la popup (le premier composant).

J'aimerais que mon second composant puise réagir à la validation de mon formulaire. Pour cela j'ai rajouté un évènement dans mon premier composant que je lance avec dispatchEvent(), puis j'ai mis mon second composant à l'écoute de cet évènement avec addEventListener().
Malheureusement mon handler n'est jamais appelé ...

Voici le code de mon premier composant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
76
77
78
79
80
81
82
83
84
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="350" height="250" title="Modifier un collaborateur" showCloseButton="true" close="closeForm()" color="#000000" borderColor="#99BBE8" cornerRadius="2" backgroundColor="#DFE8F6">
    <mx:Metadata>
        [Event(name="updateCollaborateurEvent", type="flash.events.Event")]
    </mx:Metadata>
    <mx:Script>
        <![CDATA[
            import mx.rpc.events.ResultEvent;
            import fr.smabtp.test.UpdateCollaborateurEvent;
            import mx.validators.Validator;
            import mx.collections.ArrayCollection;
            import fr.smabtp.test.Collaborateur;
            import mx.core.IFlexDisplayObject;
            import mx.managers.PopUpManager;

            private var oldCollaborateur:Collaborateur;
            private var newCollaborateur:Collaborateur;

            public function init(collaborateur:Collaborateur, array:ArrayCollection):void
            {
                service.dataProvider = array;
                badge.text = collaborateur.badge;
                fullname.text = collaborateur.name;
                service.selectedItem = collaborateur.service;
                collaborateur.habilitation == '1' ? yes.selected = true : no.selected = true;
                oldCollaborateur = collaborateur;
            }

            private function validateForm():void
            {
                var collaborateur:Collaborateur = new Collaborateur();
                collaborateur.badge = badge.text;
                collaborateur.name = fullname.text;
                collaborateur.service = service.selectedItem as String;
                yes.selected ? collaborateur.habilitation = '1' : collaborateur.habilitation = '0';
                newCollaborateur = collaborateur;
                testService.updateCollaborateur(collaborateur);
            }

            private function closeForm():void
            {
                PopUpManager.removePopUp(this as IFlexDisplayObject);
            }

            private function updateCollaborateurHandler(event:ResultEvent):void
            {
                if (event.result)
                {
                    var updateCollaborateurEvent:UpdateCollaborateurEvent = new UpdateCollaborateurEvent("updateCollaborateurEvent", true);
                    updateCollaborateurEvent.setOldCollaborateur(oldCollaborateur);
                    updateCollaborateurEvent.setNewCollaborateur(newCollaborateur);
                    this.dispatchEvent(updateCollaborateurEvent);
                }
                PopUpManager.removePopUp(this as IFlexDisplayObject);
            }
        ]]>
    </mx:Script>
    <mx:RemoteObject id="testService" destination="testService">
        <mx:method name="updateCollaborateur" result="updateCollaborateurHandler(event)" />
    </mx:RemoteObject>
    <mx:Form width="100%">
        <mx:FormItem label="Badge :" horizontalAlign="left" width="100%">
            <mx:Label id="badge" />
        </mx:FormItem>
        <mx:FormItem label="Nom :" horizontalAlign="left" width="100%">
            <mx:Label id="fullname" />
        </mx:FormItem>
        <mx:FormItem label="Service :" horizontalAlign="left" width="100%">
            <mx:ComboBox id="service" />
        </mx:FormItem>
        <mx:FormItem label="CRM appliqué :" horizontalAlign="left" width="100%">
            <mx:RadioButton id="yes" label="Oui" />
            <mx:RadioButton id="no" label="Non" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:HBox>
                <mx:Button label="Annuler" click="closeForm()" />
                <mx:Button label="Valider" click="validateForm()" />
            </mx:HBox>
        </mx:FormItem>
    </mx:Form>
    
</mx:TitleWindow>

Et celui de mon second composant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="0">
    <mx:Script>
        <![CDATA[
            import mx.rpc.remoting.mxml.RemoteObject;
            import fr.smabtp.test.UpdateCollaborateurEvent;
            import fr.smabtp.test.FilterEvent;
            import mx.core.IFlexDisplayObject;
            import mx.controls.Image;
            import fr.smabtp.test.Collaborateur;
            import mx.utils.URLUtil;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.collections.SortField;
            import mx.collections.Sort;
            import mx.controls.DataGrid;
            import mx.events.DataGridEvent;
            import mx.charts.renderers.DiamondItemRenderer;
            import mx.managers.PopUpManager;
            import mx.collections.ArrayCollection;

            [Bindable]
            public var gridData:ArrayCollection = new ArrayCollection();
            private var allData:ArrayCollection = new ArrayCollection();
            private var currentPage:uint = 1;
            private var pageSize:uint = 10;
            private var nbPage:uint = 1;
            private var lastIndex:int = -1;
            private var desc:Boolean = false;
            private var services:ArrayCollection;

            private var arrayFilter:Function = function(item:*, index:int, array:Array):Boolean {return true};

            public function setData(array:ArrayCollection):void
            {
                for (var i:uint = 0; i < array.length; i++)
                {
                    allData.addItem(array[i] as Collaborateur);
                }
                first.enabled = false;
                previous.enabled = false;
                nbPage = Math.ceil(allData.length / pageSize);
                nbPageLabel.text = "sur " + nbPage;
                currentPageInput.text = currentPage.toString();
                refreshGridDataProvider();

                parent.addEventListener("filterEvent", updateFilterHandler);
                parent.addEventListener("updateCollaborateurEvent", updateCollaborateurHandler);
            }

            public function setServices(array:ArrayCollection):void
            {
                services = array;
            }

            private function updateFilterHandler(event:FilterEvent):void
            {
                this.arrayFilter = event.getFilterArray();
                allData.filterFunction = event.getFilter();
                allData.refresh();
                refreshGridModel();
            }

            private function updateCollaborateurHandler(event:UpdateCollaborateurEvent):void
            {
                var oldCollaborateur:Collaborateur = event.getOldCollaborateur();
                var oldCollaborateurIndex:int = gridData.getItemIndex(oldCollaborateur);
                gridData.removeItemAt(oldCollaborateurIndex);
                gridData.addItemAt(event.getNewCollaborateur(), oldCollaborateurIndex);
                refreshGridModel();
            }

            private function goToPage(page:uint):void
            {
                if (page < 1 || page > nbPage)
                {
                    currentPageInput.text = currentPage.toString();
                }
                else
                {
                    currentPage = page;
                    currentPageInput.text = currentPage.toString();
                    toggleNavigation();
                    refreshGridDataProvider();
                }
            }

            private function toggleNavigation():void
            {
                if (currentPage == 1 && currentPage == nbPage)
                {
                    first.enabled = false;
                    previous.enabled = false;
                    next.enabled = false;
                    last.enabled = false;
                }
                else if (currentPage == 1)
                {
                    first.enabled = false;
                    previous.enabled = false;
                    next.enabled = true;
                    last.enabled = true;
                }
                else if (currentPage == nbPage)
                {
                    first.enabled = true;
                    previous.enabled = true;
                    next.enabled = false;
                    last.enabled = false;
                }
                else if (currentPage > 1 && currentPage < nbPage)
                {
                    first.enabled = true;
                    previous.enabled = true;
                    next.enabled = true;
                    last.enabled = true;
                }
            }

            private function changePageSize(event:Event):void
            {
                pageSize = ComboBox(event.target).selectedItem.data;
                refreshGridModel();
            }

            private function refreshGridDataProvider():void
            {
                var index:uint = currentPage - 1;
                var tmp:ArrayCollection = new ArrayCollection(allData.source.filter(arrayFilter).slice(index * pageSize, (index * pageSize) + pageSize));
                tmp.sort = collaborateurs.dataProvider.sort;
                gridData = tmp;
            }

            private function refreshGridModel():void
            {
                nbPage = Math.ceil(allData.length/pageSize);
                nbPageLabel.text = "sur " + nbPage;
                if (currentPage > nbPage)
                {
                    currentPage = 1;
                    currentPageInput.text = currentPage.toString();
                }
                toggleNavigation();
                refreshGridDataProvider();
            }

            private function beforeSort(event:DataGridEvent):void
            {
                if (event.columnIndex == lastIndex)
                {
                    desc = !desc;
                }
                else
                {
                    desc = false;
                    lastIndex = event.columnIndex;
                }

                if (desc)
                {
                    allData.source.sortOn(event.dataField, Array.DESCENDING);
                }
                else
                {
                    allData.source.sortOn(event.dataField);
                }

                refreshGridDataProvider();
            }

            private function showCollaborateurForm():void
            {
                var popup:IFlexDisplayObject = PopUpManager.createPopUp(this, CollaborateurForm, true);
                PopUpManager.centerPopUp(popup);

                var castPopup:CollaborateurForm = popup as CollaborateurForm;
                castPopup.init(collaborateurs.selectedItem as Collaborateur, services);
            }
        ]]>
    </mx:Script>

    <mx:DataGrid id="collaborateurs" dataProvider="{gridData}" width="100%" rowCount="10" borderStyle="solid" headerRelease="beforeSort(event)" doubleClick="showCollaborateurForm()" doubleClickEnabled="true" borderColor="#99BBE8" themeColor="#D2D2D2">
        <mx:columns>
            <mx:DataGridColumn dataField="badge" headerText="Badge" />
            <mx:DataGridColumn dataField="name" headerText="Nom" />
            <mx:DataGridColumn dataField="service" headerText="Service" />
            <mx:DataGridColumn dataField="habilitation" headerText="Habilitation CRM appliqué" />
        </mx:columns>
    </mx:DataGrid>
    <mx:HBox height="28" verticalAlign="middle" borderStyle="solid" borderColor="#99BBE8" width="100%">
        <mx:LinkButton id="first" icon="@Embed(source='images/grid/page-first.gif')" width="15" click="goToPage(1)">
            <mx:disabledIcon>@Embed(source='images/grid/page-first-disabled.gif')</mx:disabledIcon>
        </mx:LinkButton>
        <mx:LinkButton id="previous" width="15" click="goToPage(currentPage - 1)" icon="@Embed(source='images/grid/page-prev.gif')">
            <mx:disabledIcon>@Embed(source='images/grid/page-prev-disabled.gif')</mx:disabledIcon>
        </mx:LinkButton>
        <mx:VRule height="14" />
        <mx:Label text="Page" />
        <mx:TextInput id="currentPageInput" width="30" enter="goToPage(parseInt(TextInput(event.target).text))"  borderStyle="solid" cornerRadius="2" borderColor="#99BBE8"/>
        <mx:Label id="nbPageLabel" text="sur ?" />
        <mx:VRule height="14" />
        <mx:LinkButton id="next" icon="@Embed(source='images/grid/page-next.gif')" width="15" click="goToPage(currentPage + 1)">
            <mx:disabledIcon>@Embed(source='images/grid/page-next-disabled.gif')</mx:disabledIcon>
        </mx:LinkButton>
        <mx:LinkButton id="last" icon="@Embed(source='images/grid/page-last.gif')" width="15" click="goToPage(nbPage)">
            <mx:disabledIcon>@Embed(source='images/grid/page-last-disabled.gif')</mx:disabledIcon>
        </mx:LinkButton>
        <mx:VRule height="14" />
        <mx:Label text="Afficher" />
        <mx:ComboBox id="pageSizeComboBox" width="60" close="changePageSize(event)">
            <mx:Array>
                <mx:Object data="10" label="10" />
                <mx:Object data="20" label="20" />
                <mx:Object data="40" label="40" />
            </mx:Array>
        </mx:ComboBox>
        <mx:Label text="lignes/pages" />
    </mx:HBox>
</mx:Panel>

Que dois je faire pour gérer correctement mon évènement ?

**Jim_Nastiq** · 08/04/2009, 17h39

Essayes ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
var updateCollaborateurEvent:Event = new Event("updateCollaborateurEvent", true);
updateCollaborateurEvent.setOldCollaborateur(oldCollaborateur);
updateCollaborateurEvent.setNewCollaborateur(newCollaborateur);
this.dispatchEvent(updateCollaborateurEvent);

**bouclette** · 08/04/2009, 17h52

Ça ne fonctionne pas mieux.
J'ai également essayer en déclarant mon event de la façon suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
    <mx:Metadata>
        [Event(name="updateCollaborateurEvent", type="fr.smabtp.test.UpdateCollaborateurEvent")]
    </mx:Metadata>

mais sans succès ...

**Jim_Nastiq** · 08/04/2009, 17h58

En fait tu fais appelle à des méthodes non définis sur ton event il me semble setOldCollaborateur, setNewCollaborateur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<mx:Metadata>
    [Event("updateCollaborateurEvent")]
</mx:Metadata>
<mx:Script>
        <![CDATA[
                import flash.events.Event;
 
                var updateCollaborateurEvent:Event = new Event("updateCollaborateurEvent", true);
                this.dispatchEvent(updateCollaborateurEvent);
 
        ]]>
</mx:Script>

**bouclette** · 09/04/2009, 10h36

Ça y est je vient de trouver la solution en lisant cet article (en anglais).
En fait le problème vient du fait que mon évènement est envoyé depuis une PopUp et comme indiqué dans l'article les PopUp ne dépendent pas de Application mais de SystemManager.
La solution consiste donc à rajouter mon listener de la façon suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
systemManager.addEventListener("updateCollaborateurEvent", updateCollaborateurHandler);

Voilà et merci pour vos réponses.

**tlafont2607** · 05/09/2013, 17h41

voilà 3 jours que j’étais bloqué la dessus et ta solution marche à merveille ! Merci d'avoir pris le temps de poster la solution !

gestion des événements

Flex

Discussions similaires

Partager

Partager