Afficher les données des input dans un datagrig [Résolu]

[yanesty]

Bonjour à tous,

Flex, c'est tout nouveau pour moi et j'ai besoin d'aide.
J'ai 3 champs input (nom, prénom, Email ) et un bouton valider.

Je voudrais qu'une fois les champs de saisies remplis et valider par le bouton, les données des champs de saisie alimentent les colonnes (nom, prénom et mail) de mon datagrid.

Mon souci est de faire le lien entre input, button et datagrid.
J'ai compris qu'il faut d'abord créer un tableau dans lequel récupérer les données des input dans un tableau mais je suis perdu dans l'agencement des choses.

Merci d'avance

Mon code 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
<Application>
		<mx:Script>
			<![CDATA[
 
				import flash.events.Event;
 
				Private function RecupererResultat(evt:Event):void {
					trace("Appuyer sur le boutton pour observer");
					.....
				}
 
			]]>
		</mx:Script>
 
		<mx:TextInput x="164" y="72"/>
		<mx:Text x="88" y="74" text="Nom" id="nameTT"/>
		<mx:TextInput x="164" y="111"/>
		<mx:Text x="88" y="113" text="Prenom" id="firstnameTT"/>
		<mx:TextInput x="164" y="154" />
		<mx:Text x="88" y="156" text="Email" id="emailTT"/>
		<mx:Button x="164" y="223"  label="Valider" click="RecuperationResultat(event)" />
 
		<mx:DataGrid x="97" y="316" id="usersDGD" dataProvider="{monTableau}">
			<mx:columns>
				<mx:DataGridColumn headerText="nom" dataField="col1"/>
				<mx:DataGridColumn headerText="prenom" dataField="col2"/>
				<mx:DataGridColumn headerText="email" dataField="col3"/>
			</mx:columns>
		</mx:DataGrid>
 
 
	</mx:Application>

[Krazymins]

Salut,
il faut qu'au moment du clic tu récupères les données dans tes champs, que tu remplisses un objet avec ces champs, et qu'enfin tu insères cet objet dans ton array collection affiché dans ta datagrid.
Comme un peu de code est toujours mieux qu'un long discours, voici :

Code :

1
2
3
4
5
6
7
private function buttonClickHandler(evt:Event):void {
       var obj:Object = new Object();
        obj.col1 = nameTT.text;
        obj.col2 = firstnameTT.text;
        obj.col3 = emailTT.text;
	monTableau.addItem(obj);
}

N'hésites pas à jetter un oeil sur la doc et les datagrid/arraycollection.

[yanesty]

Bonjour et Merci pour ta réponse rapide Krazymins.

En testant avec ton bout de code mon application ne marche pas.
Je pense que je n'ai pas encore bien compris le fonctionnement flex et action script,je me demande s'il faut pas mettre en place une deuxième fonction qui gère l'événement click sur le bouton pour permettre la communication entre bouton et input? si tel est le cas faut -il que ça soit une function de gestion personnalisé d'événement ou non?

Je propose ici le code entier:

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
 
<?xml version="1.0" encoding="utf-8"?>
 
	<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" >
 
		<mx:Script>
			<![CDATA[
				// Récupérer l’ApplicationFacade 
				import com.me.myapp.ApplicationFacade;
				import flash.events.Event;
				//import mx.collections.ArrayCollection;
				import org.puremvc.as3.patterns.observer.Notification;
 
				//Créer et initialiser l'application facade
				private var facade:ApplicationFacade = ApplicationFacade.getInstance();
 
				dispatchEvent(customEvent);
 
				private function buttonClickHandler(evt:Event):void {
					[Bindable]
					var obj:Object = new Object();
					obj.col1 = nameTT.text;
					obj.col2 = firstnameTT.text;
					obj.col3 = emailTT.text;
					monTableau.addItem(obj);
				}				
 
 
			]]>
		</mx:Script>
 
		<mx:TextInput x="164" y="72" includeIn=""/>
		<mx:Text x="88" y="74" text="Nom" id="nameTT"/>
		<mx:TextInput x="164" y="111"/>
		<mx:Text x="88" y="113" text="votre Prenom" id="firstnameTT"/>
		<mx:TextInput x="164" y="154" />
		<mx:Text x="88" y="156" text="Email" id="emailTT"/>
		<mx:Button x="164" y="223"  label="Valider vos saisies"  click="buttonClickHandler(event);" />
 
		<mx:DataGrid x="97" y="316" id="usersDGD" dataProvider="{monTableau}">
			<mx:columns>
				<mx:DataGridColumn headerText="nom" dataField="col1"/>
				<mx:DataGridColumn headerText="prenom" dataField="col2"/>
				<mx:DataGridColumn headerText="email" dataField="col3"/>
			</mx:columns>
		</mx:DataGrid>
 
	</mx:Application>

[Krazymins]

Envoyé par yanesty

Bonjour et Merci pour ta réponse rapide Krazymins.

En testant avec ton bout de code mon application ne marche pas.

Qu'entends tu par "ca ne marche pas". Quel est le résultat. As-tu lancé en mode debug pour voir tes variables ?

Envoyé par yanesty

Je pense que je n'ai pas encore bien compris le fonctionnement flex et action script,je me demande s'il faut pas mettre en place une deuxième fonction qui gère l'événement click sur le bouton pour permettre la communication entre bouton et input? si tel est le cas faut -il que ça soit une function de gestion personnalisé d'événement ou non?

Non car l'évènement click est déjà dispatché à cette ligne :

Code :

<mx:Button x="164" y="223"  label="Valider vos saisies"  click="buttonClickHandler(event);" />

[EDIT] Au temps pour moi, les id passés sont mauvais.

Il te faut passer les ids des text input :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
.....
private function buttonClickHandler(evt:Event):void {
		[Bindable]
		var obj:Object = new Object();
		obj.col1 = nameTI.text;
		obj.col2 = firstnameTI.text;
		obj.col3 = emailTI.text;
		monTableau.addItem(obj);
	}				
 
 
<mx:TextInput x="164" y="72" includeIn="" id="nameTI"/>
<mx:Text x="88" y="74" text="Nom" id="nameTT"/>
<mx:TextInput x="164" y="111" id="firstnameTI"/>
<mx:Text x="88" y="113" text="votre Prenom" id="firstnameTT"/>
<mx:TextInput x="164" y="154" id="emailTI"/>
<mx:Text x="88" y="156" text="Email" id="emailTT"/>
 
....

[catalor]

Pour faire simple:

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
<?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" minHeight="600"
	xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" >
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
 
			[Bindable]
			public var aC:ArrayCollection = new ArrayCollection;
 
			protected function button1_clickHandler(event:MouseEvent):void
			{
				aC.addItem({prenom:textInput1.text,nom:textInput2.text,mail:textInput3.text});
			}
 
		]]>
	</fx:Script>
	<s:VGroup>
	   <s:TextInput id="textInput1"/>
	   <s:TextInput id="textInput2"/>
           <s:TextInput id="textInput3"/>
	   <s:Button click="button1_clickHandler(event)"/>
	   <mx:DataGrid dataProvider="{aC}">
              <mx:columns>
		 <mx:DataGridColumn dataField="prenom"/>
	         <mx:DataGridColumn dataField="nom"/>
                 <mx:DataGridColumn dataField="mail"/>
              </mx:columns>
	   </mx:DataGrid>
	</s:VGroup>
</s:Application>

[yanesty]

Bonjour et merci pour vos réactions sur ce sujet.

Ayant actuellement un souci avec mon environnement de travail, je ne peux tester vos propositions immédiatement.
Je veillerai à clôturer le dossier une fois les tests réalisés ; mais pour le moment je m'occupe de résoudre mon problème d'environnement de dev.

merci encore