Comment lancer une fonction en cliquant dans une Datagrid ?

Version imprimable

25/06/2009, 08h24
xsmokingbenx

Comment lancer une fonction en cliquant dans une Datagrid ?

Bonjour,

Quand on clique sur la ligne d'une Datagrid, je sais qu'on peut en récupérer la valeur grace à maDatagrid.selectedItem.macolonne.

Mais ce que je voudrai, c'est lancer une fonction quand je clique sur cette ligne.

Cette fonction récupérerait les différentes valeurs de cette ligne sélectionée pour ensuite l'envoyer vers Php (envoyer la donnée ça je sais faire).

Quelqu'un aurait-il une idée ?

D'avance merci.

ListEvent

Bonjour, je vois les choses comme ça :
tu mis un ecouteur du typer ListEvent.ITEM_CLICK en gros tu fais

Code:

maDataGrid.addEventListener(ListEvent.ITEM_CLICK, clickItem);

en suite tu definis la fonction clickItem
Code:

1 2 3 4 5 6 7 8 private function clickItem(event : ListEvent):void{ // dans event tu peux recuperer beaucoup d'information sur la ligne selectionné, don tu peux faire le traitement que tu veux voila var obj : Object = selectedItem as Object; }
j'espere que ça va t'aider
Bon courage

J'ai du rater un épisode, Flex me réponds que les accès vers maDatagrid, clickItem et selectedItem ne sont pas définis :cry:

Je met un extrait du code pour voir ce que j'ai oublié:
Code:

1 2 3 4 5 6 <mx:DataGrid id="zoneTopics" dataProvider="{topics}"> <mx:columns> ...... </mx:columns> </mx:Datagrid>
et coté AS:
Code:

1 2 3 4 5 6 7 8 9 10 11 import mx.event.ListEvent; ... zoneTopics.addEventListener(ListEvent.ITEM_CLICK, clickItem); private function clickItem(event: ListEvent):void { var obj : Object = zoneTopics.selectedItem as Object; } ...
Erreurs:
Code:

1 2 3 4 Accès à la propriété non définie clickIem Accès à la propriété non définie zoneTopics Accès à la propriété non définie selectedItem
J'aurai oublié de déclarer quelque chose quelque part ?

D'avance merci

25/06/2009, 11h05
jylaxx

Pour selectedItem c'est normal il faut écrire zoneTopics.selectedItem.

Pour le reste la visibilité du code est insuffisante.

Mais tu peux déjà placer ton listener dans le code mxml :

Code:

<mx:DataGrid id="zoneTopics" dataProvider="{topics}" itemClick="clickItem(event);">

OK, merci :)

Pour développer mon souhait, mon application comportera entre autre un forum.
je compte le faire de la façon suivante:
- Dans une Datagrid, j'affiche la liste des sujets avec diverses informations.
- Quand je clique sur la ligne d'un sujet, je vais chercher le contenu de celui ci (via Php) dans ma base de données, et je l'affiche dans une autre Datagrid.

(pour l'instant les 2 datagrid existent ensembles sur la même page, je souhaite d'abord que les fonctions marchent avant de m'atteler à la mise en page)
(Le dataprovider de la 2ème datagrid sera évidemment changé quand j'arriverai à faire fonctionner ce que je souhaite)

Alors pour plus plus de clareté, voici mon code complet:

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
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%">
	<mx:Script source="fonctions.as" /> <!-- inclut les fonctions ActionScripts contenu dans le fichier fonctions.as -->
 
	<!-- Flex <=> Php methodes -->
	<mx:RemoteObject id="services" destination="amfphp" source="SmokeAmf">
		<mx:method name="connectSite" result="connectSite_resultHandler(event)" fault="faultHandler(event)" />
		<mx:method name="afficheForum" result="afficheForum_resultHandler(event)" fault="faultHandler(event)" />
	</mx:RemoteObject>
 
 
 
 
	<!-- DESIGN -->	
	<mx:Canvas width="1000" height="100%" horizontalCenter="0" verticalCenter="0">
 
		<mx:ViewStack id="vs1" width="1000" height="600" horizontalCenter="0" verticalCenter="0">
			<mx:Canvas id="log_page" width="100%" height="100%" horizontalCenter="0" verticalCenter="0">
 
 
				<mx:Panel width="280" height="210" layout="absolute" horizontalCenter="0" verticalCenter="-7" title="Login System" id="panel1" horizontalAlign="center" verticalAlign="middle">
					<mx:Text x="10" y="10" text="Username:"/>
					<mx:Text x="10" y="77" text="Password: "/>
					<mx:TextInput x="10" y="36" id="loginput"/>
					<mx:TextInput x="10" y="103" id="passinput" displayAsPassword="false"/>
					<mx:Button x="12" y="138" label="Submit" click="connectSite()" />
				</mx:Panel>
 
			</mx:Canvas>
			<mx:Canvas width="100%" height="100%" id="main_page" horizontalCenter="0" creationComplete="afficheForum();">
				<mx:Button x="10" y="10" label="Forum" />
				<mx:Panel title="Liste des topics:" status="Cliquer sur un topic pour le voir en dessous" id="listeTopics" width="620" horizontalAlign="center" verticalAlign="top" x="370.9" y="28.85">
					<mx:DataGrid itemClick="clickEvent(event)" id="zoneTopics" dataProvider="{topics}" width="600" height="150" horizontalCenter="9" verticalCenter="-2">
						<mx:columns>
							<mx:DataGridColumn headerText="Titre" width="300" dataField="titre" />
							<mx:DataGridColumn headerText="Id" width="50" dataField="id"/>
							<mx:DataGridColumn headerText="Auteur" width="100" dataField="auteur"/>
							<mx:DataGridColumn headerText="Date" width="140" dataField="date" />
						</mx:columns>
					</mx:DataGrid>
				</mx:Panel>
 
				<mx:Panel title="{zoneTopics.selectedItem.titre}" status="{zoneTopics.selectedItem.auteur}" id="contenuTopics" width="620" horizontalAlign="center" verticalAlign="top" x="370.9" y="256.75">
					<mx:DataGrid  id="zoneTopicsContenu" dataProvider="{zoneTopics.selectedItem}" width="600" height="150"  columnWidth="50">
						<mx:columns>
							<mx:DataGridColumn  fontSize="20" headerText="" letterSpacing="2" textAlign="left" dataField="contenu" />
						</mx:columns>
					</mx:DataGrid>
				</mx:Panel>
			</mx:Canvas>				
		</mx:ViewStack>			
	</mx:Canvas>	
</mx:Application>

AS:

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
 
// ActionScript file
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.ListEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
 
private var testText:String;
private var testText2:String;
private var topics:ArrayCollection;
 
zoneTopics.addEventListener(ListEvent.ITEM_CLICK, clickItem);
private function clickItem(event:ListEvent):void {
	var obj:Object = zoneTopics.selectedItem as Object;
}
 
 
 
/** Function gérant les erreurs */
private function faultHandler(fault:FaultEvent):void {
	Alert.show(fault.fault.faultString, fault.fault.faultCode.toString());
}
 
/** Connection au site */
public function connectSite() :void {
	var login:String=loginput.text;
	var password:String=passinput.text; 	
 
	services.getOperation('connectSite').send(login,password);
}
 
/** Résultat de la connection */
private function connectSite_resultHandler(evt:ResultEvent) :void {
 
	if (evt.result[0].toString() == "yes") {
 
		testText = evt.result[1].toString();
		testText2 = evt.result[2].toString();
		Alert.show("Bienvenue  "+testText+" !", "Connexion OK");
		vs1.selectedChild=main_page;
 
 
	}
	else if (evt.result[0].toString() == "no") {
		Alert.show("Invalid username/password");
	}		
}
 
/** Affichage des topics du forum */
public function afficheForum() :void {			
	services.getOperation('afficheForum').send();
}
private function afficheForum_resultHandler(evt:ResultEvent):void {
	topics = evt.result as ArrayCollection;
	zoneTopics.dataProvider = topics;
}

Bon je n'utilise pas l'inclusion de code AS externe. Mais je ne pense pas que tu puisses faire référence à des objets du fichier mxml depuis ce code. Alors que l'inverse est vrai. Je n'ai pas trouvé une information explicite à ce sujet dans l'aide mais les exemples trouvés semblent le démontrer et les erreurs que tu as aussi.

Par contre tu ne peux pas appeler directement du code dans ton fichier externe. Il faut qu'il soit inclus dans une fonction (cf. zoneTopics.addEventListener)

L'inclusion de fichier externe est surtout intéressant quand ce code est réutilisé. Dans ton cas je ne pense pas que ce soit utile.

J'ai fusionné tes fichiers et supprimé la ligne interdite zoneTopics.addEventListener (sans aucune garantie...)

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
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
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%">
 
	<mx:Script>
		<![CDATA[
 
private var testText:String;
private var testText2:String;
private var topics:ArrayCollection;
 
 
private function clickItem(event:ListEvent):void {
	var obj:Object = selectedItem as Object;
}
 
 
 
/** Function gérant les erreurs */
private function faultHandler(fault:FaultEvent):void {
	Alert.show(fault.fault.faultString, fault.fault.faultCode.toString());
}
 
/** Connection au site */
public function connectSite() :void {
	var login:String=loginput.text;
	var password:String=passinput.text; 	
 
	services.getOperation('connectSite').send(login,password);
}
 
/** Résultat de la connection */
private function connectSite_resultHandler(evt:ResultEvent) :void {
 
	if (evt.result[0].toString() == "yes") {
 
		testText = evt.result[1].toString();
		testText2 = evt.result[2].toString();
		Alert.show("Bienvenue  "+testText+" !", "Connexion OK");
		vs1.selectedChild=main_page;
 
 
	}
	else if (evt.result[0].toString() == "no") {
		Alert.show("Invalid username/password");
	}		
}
 
/** Affichage des topics du forum */
public function afficheForum() :void {			
	services.getOperation('afficheForum').send();
}
private function afficheForum_resultHandler(evt:ResultEvent):void {
	topics = evt.result as ArrayCollection;
	zoneTopics.dataProvider = topics;
}
 
		]]>
	</mx:Script>
 
	<!-- Flex <=> Php methodes -->
	<mx:RemoteObject id="services" destination="amfphp" source="SmokeAmf">
		<mx:method name="connectSite" result="connectSite_resultHandler(event)" fault="faultHandler(event)" />
		<mx:method name="afficheForum" result="afficheForum_resultHandler(event)" fault="faultHandler(event)" />
	</mx:RemoteObject>
 
 
 
 
	<!-- DESIGN -->	
	<mx:Canvas width="1000" height="100%" horizontalCenter="0" verticalCenter="0">
 
		<mx:ViewStack id="vs1" width="1000" height="600" horizontalCenter="0" verticalCenter="0">
			<mx:Canvas id="log_page" width="100%" height="100%" horizontalCenter="0" verticalCenter="0">
 
 
				<mx:Panel width="280" height="210" layout="absolute" horizontalCenter="0" verticalCenter="-7" title="Login System" id="panel1" horizontalAlign="center" verticalAlign="middle">
					<mx:Text x="10" y="10" text="Username:"/>
					<mx:Text x="10" y="77" text="Password: "/>
					<mx:TextInput x="10" y="36" id="loginput"/>
					<mx:TextInput x="10" y="103" id="passinput" displayAsPassword="false"/>
					<mx:Button x="12" y="138" label="Submit" click="connectSite()" />
				</mx:Panel>
 
			</mx:Canvas>
			<mx:Canvas width="100%" height="100%" id="main_page" horizontalCenter="0" creationComplete="afficheForum();">
				<mx:Button x="10" y="10" label="Forum" />
				<mx:Panel title="Liste des topics:" status="Cliquer sur un topic pour le voir en dessous" id="listeTopics" width="620" horizontalAlign="center" verticalAlign="top" x="370.9" y="28.85">
					<mx:DataGrid itemClick="clickEvent(event)" id="zoneTopics" dataProvider="{topics}" width="600" height="150" horizontalCenter="9" verticalCenter="-2">
						<mx:columns>
							<mx:DataGridColumn headerText="Titre" width="300" dataField="titre" />
							<mx:DataGridColumn headerText="Id" width="50" dataField="id"/>
							<mx:DataGridColumn headerText="Auteur" width="100" dataField="auteur"/>
							<mx:DataGridColumn headerText="Date" width="140" dataField="date" />
						</mx:columns>
					</mx:DataGrid>
				</mx:Panel>
 
				<mx:Panel title="{zoneTopics.selectedItem.titre}" status="{zoneTopics.selectedItem.auteur}" id="contenuTopics" width="620" horizontalAlign="center" verticalAlign="top" x="370.9" y="256.75">
					<mx:DataGrid  id="zoneTopicsContenu" dataProvider="{zoneTopics.selectedItem}" width="600" height="150"  columnWidth="50">
						<mx:columns>
							<mx:DataGridColumn  fontSize="20" headerText="" letterSpacing="2" textAlign="left" dataField="contenu" />
						</mx:columns>
					</mx:DataGrid>
				</mx:Panel>
			</mx:Canvas>				
		</mx:ViewStack>			
	</mx:Canvas>	
</mx:Application>

25/06/2009, 11h57
xsmokingbenx

Exact je n'ai plus d'erreurs !

J'ai testé l'appel de la fonction avec juste un petit alert.show et ça roule :ccool:
J'ai fait ce fichier fonctions.as pour "décharger le code" : J'aimais bien cette idée de séparer l'AS du MXML pour plus de clareté.

Bon étant donné que ça marche avec tout dans un seul fichier, je vais continuer sur cette voix :)

Me reste plus qu'à développer cette fonction pour en faire ce que je veux.

merci beaucoup :ccool: