actionscript et Accordion

Version imprimable

03/08/2011, 16h42
IbtihelB

actionscript et Accordion

salut
peut on utiliser la partie actionScript dans un Accordion ?
car une partie de mon application ne fonctionne pas lorsque je le met entre <mx:Accordion> <mx:Canvas> <mx:Panel> et </mx:Panel> </mx:Canvas> </mx:Accordion>
NB : elle fonctionne très bien lorsqu'elle est entre <mx:Application> et</mx:Application>
Merci
04/08/2011, 09h58
vilveq

Bonjour,

je ne comprends pas trop ta question en fait.

L'accordion est un composant graphique, qui va se trouver dans ton mxml.
L'actionscript, c'est ton code AS. Il va se trouver, soit (et c'est mieux) dans des fichier .as séparé de ton mxml, soit dans le mxml mais doit être à l'intérieure de balises spécifiques (script).

Mon code est le suivant : (si je le met dans une mxml application il fonctionne très bien mais c'est pas le cas lorsque je l’intègre dans mon application:cry: ):

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
<!--Vue de l'unité-->
             <mx:Panel label="Profil de l'unité" x="22" y="10" width="1200" height="823" layout="absolute" borderColor="#E2E2E2" borderStyle="outset">
	 <mx:Accordion width="936" height="754" top="24" left="10">
        <mx:Canvas label="Saisie des besoins" width="1000" height="426">
     
<mx:Panelwidth="543">
	<mx:title><![CDATA[                           Formulation Des Besoins D'une Unité]]></mx:title>
<mx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;

 // ArrayCollection dynamique
 [Bindable]
 public var information:ArrayCollection = new ArrayCollection([
 {ARTICLE:0 ,QUANTITé:0 }
]);

 // Initialise le DataGrid ayant pour id : tab
 private function initDataGrid():void{
 tab.dataProvider = information;
 }

 private function addLine():void{
 
 // Récupération des entrées du formulaire
 var addArticle:String = article.text;
 var addQtité:String = qtité.text;

// Création d'un  nouvel élément
 var newItem:Object = new Object();
 newItem.ARTICLE= addArticle;
 newItem.QUANTITé = addQtité;


 // Ajoute un élément
 information.addItem(newItem);

 //Exemple pour supprimer un élément en fonction de son index (dans une boucle for par exemple)
  //information.removeItemAt(i);
 }
 
 
  private function removeLine():void{
  	 var remove:int =parseInt(lig.text);
  information.removeItemAt(remove);
  }
 ]]>
</mx:Script>

	
	<mx:DataGrid id="tab" />
	<mx:Form>
	
	<mx:HBox width="250">
	<mx:Label  text="ARTICLE : "  width="80" />
	<mx:TextInput id="article"  width="160" />
	</mx:HBox>
	<mx:HBox width="250">
	<mx:Label text="QUANTITé : "  width="80" />
	<mx:TextInput id="qtité"  width="160" />
	</mx:HBox>
		
	<mx:HBox width="250">
		<mx:Label  text="UF:" width="80" />
		<mx:TextInput width="160" />
		</mx:HBox>
	<mx:Button label="Ajouter" click="addLine()"/>
	<mx:HBox width="250">
	<mx:Button label="Suprimer" click="removeLine()"/>
	<mx:TextInput id="lig"  width="160" />
	</mx:HBox>
	</mx:Form>

<!-- tableau contenant les données du ArrayCollection -->

<!-- Formulaire d'ajout -->
 <mx:Button label="Envoyer"/>
</mx:Panel>

</mx:Canvas>

MERCI POUR L'AIDE

04/08/2011, 14h41
vilveq
Pour plus de lisibilité, mets ton script avant les composants graphiques.
Ou bien encore mieux , tu mets ton script dans un fichiers séparé.

Tu crée un fichier .as que tu appelles par exemple 'monJoliScript.as'

et dans ton .mxml, tu écris
Code:

1 2 <script source="monJoliScript.as" />
Sinon, c'est quoi l'erreur qu'il te donne le programme ?
04/08/2011, 16h31
IbtihelB

il ne donne pas une erreur mais le problème lors de l’exécution l'ajout dynamique des éléments du tableau ne fonctionne pas ainsi que la suppression
04/08/2011, 17h08
IbtihelB

il me donne une erreur de compilation " could not resolve <script> to a component implementation ":cry:
lorsque je met le code script dans une fichier.as et je l'appelle après :cry:

aider moi s'il vous plait :calim2:
04/08/2011, 17h12
vilveq
Essaye ça :
Code:

1 2 <mx:DataGrid id="tab" dataProvider="{information}" />
Bonne continuation.
Mais essaye d'écrire le code plus proprement, c'est illisible et pas facile à trouver où ça coince, sépare la partie graphique (mxml) du code (.as) ;)

Bon, j'aurais fait ma B.A. de la journée :lol:
04/08/2011, 17h16
IbtihelB

Merci

Dans le fichier .as tu ne dois pas mettre de balise.

exemple du fichiers .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
 
import mx.collections.ArrayCollection;
 
						// ArrayCollection dynamique
						[Bindable]
						public var information:ArrayCollection = new ArrayCollection([{ARTICLE:0 ,QUANTITé:0 }]);
 
						// Initialise le DataGrid ayant pour id : tab
						private function initDataGrid():void{
							tab.dataProvider = information;
						}
 
						private function addLine():void{
 
						// Récupération des entrées du formulaire
							var addArticle:String = article.text;
							var addQtité:String = qtité.text;
 
						// Création d'un nouvel élément
							var newItem:Object = new Object();
							newItem.ARTICLE= addArticle;
							newItem.QUANTITé = addQtité;
 
 
						// Ajoute un élément
							information.addItem(newItem);
 
						//Exemple pour supprimer un élément en fonction de son index (dans une boucle for par exemple)
						//information.removeItemAt(i);
						}
 
 
						private function removeLine():void{
							var remove:int =parseInt(lig.text);
							information.removeItemAt(remove);
						}

Ton .mxml ressemblerais à ça (attention, je suis en Flex 4)

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
 
<?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 source="leJoliScript.as"/>
	<mx:Panel x="22" y="10" width="1200" height="823" label="Profil de l'unité" borderColor="#E2E2E2"
			  borderStyle="outset" layout="absolute">
		<mx:Accordion left="10" top="24" width="936" height="754">
			<mx:Canvas width="1000" height="426" label="Saisie des besoins">
				<mx:Panel width="543">
					<mx:title><![CDATA[ Formulation Des Besoins D'une Unité]]></mx:title>
					<mx:DataGrid id="tab" dataProvider="{information}"/>
					<mx:Form>
						<mx:HBox width="250">
							<mx:Label width="80" text="ARTICLE : "/>
							<mx:TextInput id="article" width="160"/>
						</mx:HBox>
						<mx:HBox width="250">
							<mx:Label width="80" text="QUANTITé : "/>
							<mx:TextInput id="qtité" width="160"/>
						</mx:HBox>
 
						<mx:HBox width="250">
							<mx:Label width="80" text="UF:"/>
							<mx:TextInput width="160"/>
						</mx:HBox>
						<mx:Button label="Ajouter" click="addLine()"/>
						<mx:HBox width="250">
							<mx:Button label="Suprimer" click="removeLine()"/>
							<mx:TextInput id="lig" width="160"/>
						</mx:HBox>
					</mx:Form>
 
					<!-- tableau contenant les données du ArrayCollection -->
 
					<!-- Formulaire d'ajout -->
					<mx:Button label="Envoyer"/>
				</mx:Panel>
			</mx:Canvas>
		</mx:Accordion>
	</mx:Panel>
</s:Application>

Voilà

Si tu veux utiliser le binding, tu peux aussi lié ton tableau automatiquemennt à tes champs texte.
Tu peux écrire tes TextInput comme ceci :

Code:

<mx:TextInput id="article" width="160" text="{tab.selectedItem.ARTICLE}"/>