List itemRenderer et RadioButton

Version imprimable

Bonjour,

Je suis en cours d'apprentissage de flex et je voudrais afficher 2 listes dont chaque élément est un RadioButton, ça c'est ok (voir MXML ci-joint)

J'y arrive avec un itemRenderer, mais je n'arrive pas à trouver le moyen d'afficher l'élément sélectionné. En cliquant sur le bouton "Afficher" je voudrais afficher l'élément sélectionné (Un, Deux, Trois, ...)

Je voudrais qu'au final un seul élément soit sélectionnable dans les 2 listes confondues. (comme si tout les radiobouttons appartenaient à un même RadioButtonGroup)

Voici le 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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
      xmlns:vo="*"
      layout="horizontal"
      verticalAlign="middle"
      backgroundColor="white" height="272" width="484">
 
   <mx:Array id="arr1">
      <vo:ListItemValueObject label="Un" isSelected="false" />
      <vo:ListItemValueObject label="Deux" isSelected="false" />
      <vo:ListItemValueObject label="Trois" isSelected="false" />
      <vo:ListItemValueObject label="Quatre" isSelected="false" />
   </mx:Array>
 
   <mx:Array id="arr2">
      <vo:ListItemValueObject label="Cinq" isSelected="false" />
      <vo:ListItemValueObject label="Six" isSelected="false" />
      <vo:ListItemValueObject label="Sept" isSelected="false" />
      <vo:ListItemValueObject label="Huit" isSelected="false" />
   </mx:Array>
 
   <mx:ArrayCollection id="arrColl1" source="{arr1}"/>
 
   <mx:ArrayCollection id="arrColl2" source="{arr2}"/>
 
      <mx:List id="liste1"
            dataProvider="{arrColl1}"
            width="150"
            rowCount="8" height="141">
         <mx:itemRenderer>
            <mx:Component>
               <mx:RadioButton selectedField="isSelected">
               </mx:RadioButton>
            </mx:Component>
         </mx:itemRenderer>
      </mx:List>
 
      <mx:List id="liste2"
            dataProvider="{arrColl2}"
            width="150"
            rowCount="8" height="141">
         <mx:itemRenderer>
            <mx:Component>
               <mx:RadioButton selectedField="isSelected">
               </mx:RadioButton>
            </mx:Component>
         </mx:itemRenderer>
      </mx:List>
      <mx:Button label="Afficher"/>
</mx:Application>

Merci pour votre aide.

30/10/2008, 17h05
Jim_Nastiq

:aie:

Peux tu détailler? tu parles de RadioButton, de Combo, de bouton afficher, mais je ne vois pas trop ou tu en es et ou tu veux en venir.

Tu as 2 listes qui affichent chacune des combobox pour chaque élément, c'est bien ca? jusque la j'ai compris mais après backout :aie:

Citation:

je n'arrive pas à trouver le moyen d'afficher l'élément sélectionné.

c'est à dire? quand l'utilisateur fait un choix dans l'une des combobox? afficher quoi? ou?

Citation:

En fait, je voudrais qu'au final un seul élément soit sélectionnable dans les 2 listes confondues. (comme si tout les radiobouttons appartenaient à un même RadioButtonGroup)

bon, là j'suis perdu :lol:, quel radiobutton???

n'hésites surtout pas à détailler, et n'ai pas peur d'être trop long , bref vas y laches toi :lol::yaisse2:
30/10/2008, 21h54
olidev36

Citation:

Envoyé par Jim_Nastiq

n'hésites surtout pas à détailler, et n'ai pas peur d'être trop long , bref vas y laches toi :lol::yaisse2:

J'ai corrigé le post original, j'espère être plus clair (le terme combo était une erreur)
31/10/2008, 09h35
Jim_Nastiq

ok, donc tu as 2 listes qui ne contiennent que des RadioButton avec un Label. Et tu souhaites que ces 2 listes agissent comme un RadioButtonGroup , n'est ce pas?
Alors pourquoi utiliser une Liste avec un ItemRenderer à la place d'un RadioButtonGroup que tu alimentes à la volée?
01/11/2008, 10h43
olidev36

Citation:

Envoyé par Jim_Nastiq

ok, donc tu as 2 listes qui ne contiennent que des RadioButton avec un Label. Et tu souhaites que ces 2 listes agissent comme un RadioButtonGroup , n'est ce pas?
Alors pourquoi utiliser une Liste avec un ItemRenderer à la place d'un RadioButtonGroup que tu alimentes à la volée?

Parce qu'en fait la taille (en hauteur) de mon application est fixe (sous la forme d'un assistant avec bouton précédent / suivant via une ViewStack) et que le nombre d'élément peut varier très fort.
Personnellement je trouve pas joli d'avoir des "pages" de taille différentes dans ce style d'interface.
03/11/2008, 09h17
Jim_Nastiq

je ne vois pas pourquoi le fait d'utiliser des RadioButton à la place d'une List t'empecherais d'avoir une taille d'application fixe! Si tu les met dans un conteneur de hauteur fixe tu auras une scrollbar :roll:
04/11/2008, 22h49
olidev36

Citation:

Envoyé par Jim_Nastiq

je ne vois pas pourquoi le fait d'utiliser des RadioButton à la place d'une List t'empecherais d'avoir une taille d'application fixe! Si tu les met dans un conteneur de hauteur fixe tu auras une scrollbar :roll:

Oups, je n'y avais pas pensé :oops:

Merci pour l'info, je vais essayer de me débrouiller.

Bon, j'ai suivi ton conseil et j'arrive à bien générer correctement mes RadioButton en dynamique avec un Repeater mais je me retrouve avec un nouveau problème étrange quand mon VBox est intégré dans un ViewStack, en effet, si celui-ci ne se trouve pas sur l'onglet actif au chargement, celui-ci n'est pas rempli.

Ce code fonctionne :

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
 
<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" backgroundColor="#DAE8F8" height="353" width="675" backgroundGradientColors="[#DAE8F8, #DAE8F8]" 
	applicationComplete="initApp()">
 
    <mx:Script>
        <![CDATA[
        	import flash.trace.Trace;
            import mx.controls.Alert;
            import mx.controls.RadioButton;			
 
 
            private function radioButton_change(evt:Event):void {
                var radio:RadioButton = RadioButton(evt.currentTarget);
                var item:Object = radio.getRepeaterItem();
 
                Alert.show(item.label, "getRepeaterItem()");
            }
 
	        private function initApp():void {	
	        	updateActivities();
	        }
 
			private function updateActivities():void {                
				var activity:Object;
				var activitiesArray:Array=new Array(); 
				for each (var activitiesElement:XML in activities.activity.(@id == 1).nodes.node) {
					activity = new Object();
					activity.label = activitiesElement.@name_fr;
					activity.data = activitiesElement.@id;
					activitiesArray.push(activity);
				}
				radioRepeater.dataProvider = activitiesArray;
			}
 
        ]]>
    </mx:Script>
 
    <mx:XML id="activities" source="activities.xml"/>
	<mx:ViewStack x="10" y="30" id="viewstack1" width="655" height="190">
		<mx:Canvas label="vs1" width="100%" height="100%" borderStyle="outset">
			<mx:VBox x="10" y="23" height="141" width="162" clipContent="true"			
				borderStyle="solid" borderColor="black"	paddingLeft="10" paddingTop="10" backgroundColor="#87D43C" backgroundAlpha="0.3" cornerRadius="5">
			      	<mx:RadioButtonGroup id="radioGroup"/>
			      	<mx:Repeater id="radioRepeater">
			      		<mx:RadioButton id="radioButtons"
			      		          label="{radioRepeater.currentItem.label}" group="{radioGroup}"
			      		          change="radioButton_change(event);" />
			      	</mx:Repeater>
			</mx:VBox>
    	</mx:Canvas>
		<mx:Canvas label="vs2" width="100%" height="100%">
		</mx:Canvas>
	</mx:ViewStack>
	<mx:TabBar x="224" y="10" dataProvider="viewstack1">
	</mx:TabBar>
</mx:Application>

Si je déplace le VBox sur le deuxième onglet, le dataProvider ne semble pas fonctionner (la VBox apparaît vide)

Ce code ne fonctionne pas correctement :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
	<mx:ViewStack x="10" y="30" id="viewstack1" width="655" height="190">
		<mx:Canvas label="vs1" width="100%" height="100%" borderStyle="outset">
 
    	</mx:Canvas>
		<mx:Canvas label="vs2" width="100%" height="100%">
			<mx:VBox x="10" y="23" height="141" width="162" clipContent="true"			
				borderStyle="solid" borderColor="black"	paddingLeft="10" paddingTop="10" backgroundColor="#87D43C" backgroundAlpha="0.3" cornerRadius="5">
			      	<mx:RadioButtonGroup id="radioGroup"/>
			      	<mx:Repeater id="radioRepeater">
			      		<mx:RadioButton id="radioButtons"
			      		          label="{radioRepeater.currentItem.label}" group="{radioGroup}"
			      		          change="radioButton_change(event);" />
			      	</mx:Repeater>
			</mx:VBox>
		</mx:Canvas>
	</mx:ViewStack>

Voici le fichier activities.xml

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<?xml version="1.0" encoding="UTF-8"?>
<activities>
    <activity id="1" name_fr="Cuisine">
    	<nodes>
        <node id="10" name_fr="Italienne"/>
        <node id="11" name_fr="Française"/>
        <node id="12" name_fr="Chinoise"/>
        <node id="13" name_fr="Crêtoise"/>
        <node id="14" name_fr="Indonesienne"/>
     	</nodes>
    </activity>
    <activity id="2" name_fr="Cinéma">
    	<nodes>
        <node id="21" name_fr="Drame"/>
        <node id="22" name_fr="Comédie"/>
        <node id="23" name_fr="Enfants"/>
        <node id="24" name_fr="Thriller"/>
    	</nodes>
    </activity>
</activities>

Pour que le chargement des radioButton s'effectue, je suis obligé d'ajouter un bouton pour appeler la fonction "updateActivities()" :

Code:

1
2
 
<mx:Button x="222" y="41" label="Button" click="updateActivities()"/>

Comment puis-je faire pour charger automatiquement la liste dans ce cas ?

Encore merci pour votre aide précieuse ...

06/11/2008, 09h55
Jim_Nastiq

essai de mettre à all la propriété creationPolicy de ton ViewStack
06/11/2008, 16h39
olidev36

Citation:

Envoyé par Jim_Nastiq

essai de mettre à all la propriété creationPolicy de ton ViewStack

Super, merci beaucoup ça fonctionne.
06/11/2008, 16h40
Jim_Nastiq

ok, si ton problème est résolu pense au tag http://www.developpez.net/forums/ima...ons/resolu.gif.

Merci ;)