Centre de Formation Flash - Forums Adobe Flash > Intégrer un checkbox dans une List

matthieuS

Jul 3 2007, 07:22 AM

Bonjour,

J'aimerais intégrer des checkbox dans une mx.controls.List.
Actuellement ma liste est simple, elle contient des données provenant d'un Array.
J'aimerais avoir les checkbox à la place, où les label des checkbox seront les String du Array

Voici ma liste actuelle

CODE

listState = new List();
listState.x = 224;
listState.y = 36;
listState.columnWidth = 190;
listState.rowHeight = 20;
listState.width = 190;
listState.height = 20;
listState.allowMultipleSelection = true;
listState.setStyle("backgroundColor", 0xEEEEEE);
listState.addEventListener(ListEvent.ITEM_CLICK, addContentState);
listState.dataProvider = data;

je vous remercie d'avance

Tonic

Jul 3 2007, 07:40 AM

Salut,

pour pouvoir faire ce que tu veux, il te faut utiliser la propriété itemRenderer de ta list.
Cette propriété permet d'affecter à ta liste un composant qui fera office d'élément de ta liste.

Voici un exemple avec une checkbox comme tu le veux :

CODE

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            [Bindable]
            private var ar:Array=new Array({nom:"toto"},{nom:"tata"},{nom:"titi"});
        ]]>
    </mx:Script>
    <mx:List itemRenderer="monRenderer" dataProvider="{ar}"></mx:List>
</mx:Application>

//monRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="92" height="50">
    <mx:CheckBox x="0" y="10" label="{data.nom}"/>
</mx:Canvas>

matthieuS

Jul 3 2007, 07:46 AM

CITATION(Tonic @ Jul 3 2007, 07:40 AM)

Salut,

pour pouvoir faire ce que tu veux, il te faut utiliser la propriété itemRenderer de ta list.
Cette propriété permet d'affecter à ta liste un composant qui fera officie d'élément de ta liste.

Voici un exemple avec une checkbox comme tu le veux :

CODE

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            [Bindable]
            private var ar:Array=new Array({nom:"toto"},{nom:"tata"},{nom:"titi"});
        ]]>
    </mx:Script>
    <mx:List itemRenderer="monRenderer" dataProvider="{ar}"></mx:List>
</mx:Application>

//monRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="92" height="50">
    <mx:CheckBox x="0" y="10" label="{data.nom}"/>
</mx:Canvas>

Merci pour votre réponse rapide est claire.
Mais justement le problème est que je n'arrive pas à le faire en AS3.
Autrement dit je ne veux pas le faire sous format *.mxml mais *.as.

Si vous avez une idée je suis preneur
Encore merci de votre aide

Tonic

Jul 3 2007, 07:50 AM

Tu veux dire que tu veux tout faire en AS3, sans une ligne de mxml?

C'est tout à fait possible. Il te suffit de transposer ce mxml en AS3.

Montre le code que tu essaies de mettre en oeuvre...

matthieuS

Jul 3 2007, 07:56 AM

Voila le code de la liste simple

CODE

listState = new List();
listState.x = 224;
listState.y = 36;
listState.columnWidth = 190;
listState.rowHeight = 20;
listState.width = 190;
listState.height = 20;
listState.allowMultipleSelection = true;
listState.setStyle("backgroundColor", 0xEEEEEE);
listState.addEventListener(ListEvent.ITEM_CLICK, addContentState);
listState.dataProvider = data;

data est un array avec des string ("contenu1", "contenu2", "contenu3".............)
Actuellement ma liste contient les string ci-dessus
Maintenant, je veux la même liste mais avec des checkbox avec le label contenu1 contenu2 etc......
Le checkbox pourra être simple.

merci

Tonic

Jul 3 2007, 08:11 AM

Ben contruit toi une classe qui etend Canvas, et dans cette classe, tu attaches un check box.

Et pour ce checkox, tu affectes le label ainsi : monCheckBox.label=data.nom.

Côté List, tu contruis un tableau d'objet avec une propriété "nom" par exemple comme je l'aie fait, à partir de ton tableau basique.

Pour ta liste, tu affectes ton itemRenderer, comme je l'aie fait en mxml, puis ton dataProvider.

Ca devrait tourner...

Mais avant tout, y a quelque chose que je ne comprend pas, pourquoi ne pas le faire en mxml, et s'entêter à le faire en AS3, surtout pour un composant basique comme celui ci??

matthieuS

Jul 3 2007, 08:21 AM

CITATION(Tonic @ Jul 3 2007, 08:11 AM)

Ben contruit toi une classe qui etend Canvas, et dans cette classe, tu attaches un check box.

Et pour ce checkox, tu affectes le label ainsi : monCheckBox.label=data.nom.

Côté List, tu contruis un tableau d'objet avec une propriété "nom" par exemple comme je l'aie fait, à partir de ton tableau basique.

Pour ta liste, tu affectes ton itemRenderer, comme je l'aie fait en mxml, puis ton dataProvider.

Ca devrait tourner...

Mais avant tout, y a quelque chose que je ne comprend pas, pourquoi ne pas le faire en mxml, et s'entêter à le faire en AS3, surtout pour un composant basique comme celui ci??

Merci
Je vais essayer de le refaire avec tes explications

Pourquoi en AS3 ?
Réponse : principe de codage car tout est en AS3 donc on impose l'AS3.

Tonic

Jul 3 2007, 08:26 AM

Le mxml est transposé en AS3 avant d'être compilé.

Donc je ne vois pas le problème d'utiliser le mxml couplé à de l'AS3...

Tu peux également tout à fait créer des composant en MXML, puis étendre ceux ci avec une classe, et ensuite coder tout les comportement via de l'AS3. Cela te permet de séparer l'interface des scripts de mise en oeuvre...

A toi de voir

matthieuS

Jul 3 2007, 08:27 AM

En fait mon principal problème est que je n'arrive pas à utiliser la méthode

CODE

listScore = new List();
listScore.itemRenderer();

Je ne sais pas comment exploiter cette méthode

Fusion

Jul 3 2007, 08:35 AM

Le itemRenderer n'est pas une méthode, c'est un objet.

Tu définis une vue pour tes données en fait. Un itemRenderer serait par exemple un Canvas dans lequel tu afficherais tes données à ta guise.

Regarde celui que t'a montré Tonic par exemple :

CODE

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="92" height="50">
<mx:CheckBox x="0" y="10" label="{data.nom}"/>
</mx:Canvas>

Appelons-le myIR.mxml . Tu appelles ensuite une instance de cette classe dans ton itemRenderer :

CODE

<mx:List itemRenderer="myIR" dataProvider="{ar}"></mx:List>

Et le tour est joué !

matthieuS

Jul 3 2007, 08:38 AM

CITATION(Fusion @ Jul 3 2007, 08:35 AM)

Le itemRenderer n'est pas une méthode, c'est un objet.

Tu définis une vue pour tes données en fait. Un itemRenderer serait par exemple un Canvas dans lequel tu afficherais tes données à ta guise.

Regarde celui que t'a montré Tonic par exemple :

CODE

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="92" height="50">
<mx:CheckBox x="0" y="10" label="{data.nom}"/>
</mx:Canvas>

Appelons-le myIR.mxml . Tu appelles ensuite une instance de cette classe dans ton itemRenderer :

CODE

<mx:List itemRenderer="myIR" dataProvider="{ar}"></mx:List>

Et le tour est joué !

Je vous remercie pour votre rapidité
Merci pour les infos
Je vais mettre tout cela en oeuvre

Tonic

Jul 3 2007, 08:47 AM

Ce n'est pas une méthode mais une propriété.

Tu dois donc en faire une affectation.

Mais le problème, si tu veux affecter ton itemRenderer en AS3 et non en mxml, tu vas devoir créer une classe qui implémente l'interface IFactory, puisque la propriété itemRenderer prend en paramètre un objet qui implémente cette interface.

Il te faut donc implémenter la méthode newInstance, qui te renverra un objet "monRenderer".
Tu trouveras des explications ici : http://blog.flashgen.com/components/implem...mrendering-pt1/

matthieuS

Jul 3 2007, 09:06 AM

Merci beaucoup,
Vous avez répondu à mes besoins avec le lien et les explications

Merci à tous