Discussion :

[claire34]

Coucou,

je cherche à récupérer une chaine de caractère (dans un textinput) et à l'aide d'un bouton (click="") envoyé cette chaine de caractère dans un tableau (datagrid).
J'éprouve quelques difficultés à écrire ce petit code ...

Merci par avance

[Jim_Nastiq]

Salut,

Si tu pouvais nous donner ton état d'avancement au niveau du code déjà, cela permettrait de mieux cibler nos réponses.
De ce que je comprends tu souhaites peupler dynamiquement un tableau via TextInput .
Si c'est bien cela:
dans le handler de ton click bouton tu ajoutes au dataProvider la valeur de ton TextInput, ce qui donnerais qq chose du genre (en code très rapide):

Code :

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

1
2
3
4
5
 
private function onClick(evt:MouseEvent):void
{
   dg.dataProvider.addItem({ti.text});
}

c'est a toi de t'inspirer de ca pour coder proprement l'implémentation du tableau qui te sert de dataProvider (en supposant qu'il s'agisse d'un tableau)

[claire34]

bonjour et merci tout d'abord pour ta réponse,

voici mon code:

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
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
	<![CDATA[
 
	private function onClick(evt:MouseEvent):void
	{
   		dg.dataProvider.addItem(champ_nom.text);
	}
 
	   ]]>
</mx:Script>
 
	<mx:Form>   
 
		<mx:FormItem label="Nom:" >
		<mx:TextInput id="champ_nom" />
		</mx:FormItem>
 
		<mx:FormItem label="Prénom:" >
		<mx:TextInput id="champ_prenom" />
		</mx:FormItem>
 
		<mx:FormItem label="Ville:" >
		<mx:TextInput id="champ_ville" />
		</mx:FormItem>
 
 
		<mx:FormItem>
			<mx:Button label="Enregistrer" click="onClick(evt:MouseEvent)" />
		</mx:FormItem>
 
	<mx:DataGrid> 
      <mx:ArrayCollection>
         <mx:Object id="dg" Nom="" Prénom="" Ville="" />
      </mx:ArrayCollection>
    </mx:DataGrid>
 
	</mx:Form> 
 
</mx:Application>

J'aimerais juste pouvoir récupérer ce que je tape dans mon textinput dans mon tableau ("nom", "prenom", "ville")

Voilà, je cale là dessus

[Jim_Nastiq]

Et bien si tu t'appuies sur ce que je t'ai donné précédement c'est simple, il ne reste qu'a adpater ...

Mais avant toute chose je t'invite à te documenter et bien comprendre comment fonctionne le composant DataGrid(notamment l'aspect dataProvider) et ArrayCollection, ainsi tu pourras facilement, de toi même, modifier le bout de code que je t'ai donné. Te donner la solution clé en main ne t'aiderais pas, car ces notions sont vraiment fondamentale dans l'univers Flex

Je peux t'aider et répondre à tes questions pour t'accompagner mais pas te donner betement le code, voici la solution:

A présent tu sais comment récupérer les valeurs des champs TextInput (regarde mon exemple), il ne te reste qu'à transformer ces 3 valeurs pour créer un Object. Puis ajouter cet Object à ton Arraycollection qui te sers de dataProvider à ton DataGrid.

[claire34]

Oki merci pour le conseil je vais chercher
Je ne dois pas être loin de trouver la soluce je pense

[claire34]

Est ce que tu pourrais tout de même me "donner" la solution, je sèche là dessus.
Je pourrais ainsi comprendre ce que je ne comprend pas devant ma feuille vide...

Voici mon objet:

Code :

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

private var homme:Object = { 'nom':String, 'prenom':String, 'ville':String};

merci

[Jim_Nastiq]

Pour récupérer les TextInput et créer ton Object tu peux faire ceci dans ton handler de click sur ton bouton:

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
 
// ti**** étant tes TextInput
private function onClick(evt:MouseEvent):void
{
   // equivaut à var obj:Object = {"nom:tiNom.text, "prenom":tiprenom.text, "ville":tiVille.text}
   var obj:Object = new Object();
   obj.nom = tiNom.text;
   obj.prenom = tiPrenom.text;
   obj.ville = tiVille.text;
}

voila tu as ton Object qui reste à être inséré à ton ArrayCollection, pour cela tu uilises la méthode addItem de la classe:

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
// acAnnuaire étant ton ArrayCollection
private function onClick(evt:MouseEvent):void
{
   var obj:Object = new Object();
   obj.nom = tiNom.text;
   obj.prenom = tiPrenom.text;
   obj.ville = tiVille.text;
   acAnnuaire.addItem(obj);
}

Voila ton ArrayCollection est mise à jour à chaque click sur le bouton (à toi d'ajouter la vérification de la bonne saisie = champ textinput non vide).

A présent il faut relier cette ArrayCollection à ton DataGrid.

Admettons que ton DataGrid soit déclaré en MXML de cette facon:

Code xml :

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

1
2
 
<mx:DataGrid id="dgTableau" dataProvider="acAnnuaire"/>

N'oublie de déclarer ton ArrayCollection en tant que donnée membre, de l'initialiser et de la binder:

Code javascript :

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

1
2
3
4
5
6
7
8
 
[Bindable]
private var acAnnuaire:ArrayCollection;
 
private function onCreate():void
{
   acAnnuaire = new ArrayCollection();
}

Cette méthode étant le handler de l'event creationComplete de ton application/composant:

Code xml :

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">

En espérant avoir été clair.

[claire34]

merci beaucoup pour l'explication clair et précise
J'ai un tout dernier problème, j'utilise ceci pour créer mon tableau:

Code :

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

1
2
3
4
5
6
7
 <mx:DataGrid id="dgTableau" dataProvider="acAnnuaire"/>	
             		<mx:columns>
         				<mx:DataGridColumn dataField="nom" />
         				<mx:DataGridColumn dataField="prenom" />
         				<mx:DataGridColumn dataField="ville" />
      		         </mx:columns>
  </mx:DataGrid>

Or, j'obtiens un message d'erreur explicite " Could not resolve <mx:columns> to a component implementation".
Par contre impossible de ne plus avoir ce message

[samy2525]

Code :

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

1
2
3
4
5
6
7
<mx:DataGrid id="dgTableau" dataProvider="acAnnuaire"/>    
                     <mx:columns>
                         <mx:DataGridColumn dataField="nom" />
                         <mx:DataGridColumn dataField="prenom" />
                         <mx:DataGridColumn dataField="ville" />
                       </mx:columns>
  </mx:DataGrid>

je pense que tu as fermé ta balise dataGrid un peu trop top je ne vois vraiment pas comment le compilateur a laissé passer ça

Code :

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

<mx:DataGrid id="dgTableau" dataProvider="acAnnuaire"/>

il faut laisser la balise ouverte

Code :

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

1
2
3
4
5
6
7
<mx:DataGrid id="dgTableau" dataProvider="acAnnuaire">    
                     <mx:columns>
                         <mx:DataGridColumn dataField="nom" />
                         <mx:DataGridColumn dataField="prenom" />
                         <mx:DataGridColumn dataField="ville" />
                       </mx:columns>
  </mx:DataGrid>

bon courage

[jylaxx]

je ne vois vraiment pas comment le compilateur a laissé passer ça

Il ne l'a pas laissé passer puisqu'il génére une erreur

[claire34]

Merci en effet, je viens de me rendre compte de mon erreur
Merci beaucoup

[claire34]

Re bonjour,

comment faire svp pour faire appel a une fonction privé qui contient un argument depuis du mxml ?

Ceci fonctionne:

Code :

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

1
2
3
4
5
6
7
<mx:Button label="enregistrer" click="test()" />
 
private function test():void
{
var phrase:String = 'bonjour';
Alert.show('phrase');
}

or j'ai une fonction:

Code :

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

private function onClick(evt:MouseEvent):void

Comment l'appeler à partir de ce même bouton ?
Si je met:

Code :

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

<mx:Button label="enregistrer" click="onClick()" />

J'obtiens un message d'erreur "nombre incorrect d'arguments"

Bref ce problème de syntaxe est particulièrement embêtant. Si quelqu'un aurait l'amabilité de m'aiguiller ça serait chouette.

Merci

[Jim_Nastiq]

Le souci avec le MXML c'est qu'il a tendance a simplifier le codage mais l'on peut passer à côté de certaines subtilité de l'ActionScript 3

Les handlers d'evenements prennent un paramètre du type de l'event, ici MouseEvent. En AS3 on écoute un event de cette facon, et ce qui transmet un event en paramètre:

Code :

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

toto.addEventListener(MouseEvent.CLICK, myHandler);

en MXML on a trop vite tendance a faire un simple appel à une méthode avec les evenements.
Il y a donc la possibilité de faire appel facon "méthode" :

Code :

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

1
2
3
4
5
6
7
8
 
<mx:Button label="enregistrer" click="test()" />
 
private function test():void
{
var phrase:String = 'bonjour';
Alert.show('phrase');
}

ou facon Event:

Code :

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

1
2
3
4
5
6
7
<mx:Button label="enregistrer" click="test(event)" />
 
private function test(evt:MouseEvent):void
{
var phrase:String = 'bonjour';
Alert.show('phrase');
}

ainsi dans le 2eme cas on peut récupérer des infos qui peuvent être nécessaire via l'event, avec mouseEvent cela peut etre la position(coordonnées) du click par exemple

[Kantizbak]

Sinon plus simple :

Code :

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

<mx:Button label="enregistrer" click="onClick(event)" />

PS : Bravo pour tes réponses Jim

[claire34]

Coucou.
Merci beaucoup pour vos réponses justes et très bien détaillé et commenté
Est ce normal que dans les 3 colonnes de mon tableau je récupère la chaine de caractère "acAnnuaire" alors que je devrais récupérer ce que je tape dans l'inputbox?

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
private function onClick(evt:MouseEvent):void
{
  var obj:Object = new Object();
   obj.nom = champ_nom.text;
   obj.prenom = champ_prenom.text;
   obj.ville = champ_ville.text;
   acAnnuaire.addItem(obj);
}
 
private function onCreate():void
{
   acAnnuaire = new ArrayCollection();
}
 
<mx:DataGrid x="16" y="172" width="243" height="20%" id="dgTableau"  dataProvider="acAnnuaire">	
             		<mx:columns>
         				<mx:DataGridColumn dataField="nom" />
         				<mx:DataGridColumn dataField="prenom" />
         				<mx:DataGridColumn dataField="ville" />
      		         </mx:columns> 
  		</mx:DataGrid>

En somme mes données ne vont toujours pas de mon textinput vers mon datagrid. Quelqu'un pourrait me donner un indice sans forcément me donner la réponse? Ne devrais je pas utiliser un "trace()" pour afficher mes chaines de caractères dans mon datagrid?

Merci

[jylaxx]

il faut que l'objet acAnnuaire soit marqué [Bindable] et la notation en mxml est la suivante :

Code :

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

1
2
<mx:DataGrid x="16" y="172" width="243" height="20%" 
id="dgTableau"  dataProvider="{acAnnuaire}">

[claire34]

Merci j'ai modifié la syntaxe mais le problème persiste, au clic sur le bouton, ma chaine de caractère tapé dans mon inputbox n'est pas transféré vers mon datagrid.
Bizarre, j'arrive à renvoyer ma chaine de caractère vers un autre inputbox par contre impossible d'afficher quoi que ce soit avec mon datagrid.

[Jim_Nastiq]

Peux tu nous montrer ton code correspondant ? histoire que l'on soit sur la même base

[claire34]

Oui, voici mon code:

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
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
 
import mx.collections.ArrayCollection;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.Alert;
 
[Bindable]
private var acAnnuaire:ArrayCollection;
 
private function onClick(evt:MouseEvent):void
{
  var obj:Object = new Object();
   obj.nom = champ_nom.text;
   obj.prenom = champ_prenom.text;
   obj.ville = champ_ville.text;
   acAnnuaire.addItem(obj);
}
 
private function onCreate():void
{
   acAnnuaire = new ArrayCollection();
}
 
[Bindable]
public var myArray:Array = ["M.", "Mme", "Mlle"]; 
 
		]]>	
	</mx:Script>	
 
 
 
	<mx:Form>  
		<mx:FormHeading label="Carnet d'adresse"/>  
		<mx:ComboBox id="statesCombo" dataProvider="{myArray}"/>
 
		<mx:FormItem>
		</mx:FormItem>  
		<mx:FormItem label="Nom:">
			<mx:TextInput id="champ_nom" />
		</mx:FormItem>
		<mx:FormItem label="Prénom:">
			<mx:TextInput id="champ_prenom" />
		</mx:FormItem>
		<mx:FormItem label="Ville:">
			<mx:TextInput id="champ_ville" />
		</mx:FormItem>
 
 
	</mx:Form>
		<mx:DataGrid x="16" y="218" width="243" height="20%" id="dgTableau"  dataProvider="{acAnnuaire}">	
             		<mx:columns>
         				<mx:DataGridColumn dataField="nom" />
         				<mx:DataGridColumn dataField="prenom" />
         				<mx:DataGridColumn dataField="ville" />
      		         </mx:columns> 
  		</mx:DataGrid>  
		<mx:Button label="Enregistrer" click="onClick(event)" x="87" y="188"/>
 
</mx:Application>

Voilà, voilà.

[jylaxx]

La méthode onCreate n'est jamais appelée !!