Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

2nov/0820

Flex UIComponent – Utilisation des valeurs et items sélectionnés (selectedItem, selectedIndex, …)

Les composants de type liste permettent de sélectionner des éléments, à la fois par interaction de l'utilisateur et à la fois de manière programmatique. Une application Flex aura fréquemment besoin de savoir quel item l'utilisateur a sélectionné. Pour cela, les composants de type liste ont les propriétés suivantes:

  • allowMultipleSelection: Par défaut, les listes autorisent la sélection d'un seul élément. En passant allowMultipleSelection à true, un utilisateur peut sélectionner plus d'un item à la fois (avec ctrl+click)
  • value: La valeur de l'item sélectionne. La valeur de la propriété "value" dépend de la structure du dataProvider. Ainsi, il n'est généralement pas bon de se fier à la propriété "value"
  • selectedItem: L'élément du dataProvider correspondant à l'élément sélectionné dans la liste. C'est une très bonne propriété car elle renverra toujours une référence et pas une interprétation. Cela veut dire que si le data provider est une collection de String, selectedItem sera une String, mais si le dataProvider est une collection d'éléments XML, selectedItem sera un élément XML.
  • selectedItems: Un tableau d'éléments. C'est l'équivalent de selectedItem quand on a une multi-selection (grâce a allowMultipleSelection).
  • selectedIndex: L'index de l'item sélectionné. Pour tous les contrôles utilisant un dataProvider linéaire (c'est-à-dire non-hiérarchique), cette propriété est très utile. Si la propriété selectedIndex d'une liste standard est 0, le premier élément est sélectionné. Cette propriété est compliqué à gérer avec un data provider hiérarchique car la relation entre l'index d'un élément et son dataProvider dépend de l'état réduit/étendu des autres éléments.
  • selectedIndices: selectedItems: Un tableau d'indices. C'est l'équivalent de selectedIndex quand on a une multi-sélection (grâce a allowMultipleSelection).

Voici plusieurs exemples utilisant ces propriétés. Le premier assigne l'élément sélectionné d'une liste basé sur l'index d'un NumericStepper:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:VBox>
		<mx:List id="list" width="100">
			<mx:ArrayCollection>
				<mx:Array>
					<mx:String>a</mx:String>
					<mx:String>b</mx:String>
					<mx:String>c</mx:String>
					<mx:String>d</mx:String>
					<mx:String>e</mx:String>
				</mx:Array>
			</mx:ArrayCollection>
		</mx:List>
		<mx:NumericStepper id="stepper" minimum="0" maximum="4"
			change="list.selectedIndex = stepper.value"/>
	</mx:VBox>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application

This movie requires Flash Player 11

Voici un exemple qui affiche la valeur sélectionnée depuis une DataGrid quand l'utilisateur sélectionne une valeur:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
	<mx:VBox>
		<mx:DataGrid id="grid" width="500" change="output.text = grid.selectedItem.city">
			<mx:columns>
				<mx:DataGridColumn headerText="Ville" dataField="city"/>
				<mx:DataGridColumn headerText="Population de la ville" dataField="population"/>
			</mx:columns>
			<mx:ArrayCollection>
				<mx:Array>
					<mx:Object city="Los Angeles" state="CA" population="343943"/>
					<mx:Object city="New York" state="NY" population="33444667"/>
					<mx:Object city="Chicago" state="IL" population="343211245"/>
					<mx:Object city="Philadelphia" state="PA" population="98976876"/>
				</mx:Array>
			</mx:ArrayCollection>
		</mx:DataGrid>
		<mx:TextInput id="output" width="200"/>
	</mx:VBox>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application

This movie requires Flash Player 11

Remplis sous: DataGrid, Exemple, MXML, NumericStepper || Taggé comme: , , , , , Laisser un commentaire

Articles similaires

Commentaires (20) Trackbacks (0)
  1. Denis
    14 novembre 2008

    Les exemples fournis sont bien choisis.

  2. gg
    5 février 2009

    Salut, je voulais savoir si était possible de savoir si un item est selectionné ou pas?
    Du genre maliste.isitemselected =true; si un item est selectionné...
    Merci

  3. fnicollet
    5 février 2009

    Tu peux utiliser la propriété selectedIndex de ton composant List ou DataGrid. Si elle est égale à -1, c'est qu'aucun élément n'est sélectionné. Sinon, c'est que l'utilisateur a fait une sélection

    Fabien

  4. Jérôme
    6 février 2009

    Ok, je pensais à cette solution sauf que moi j'aurais aimé lié cette valeur par databinding avec un etat visible d'un bouton, je m'explique

    J'ai une liste de video affiché dans une List. Lorsque je clique sur une video de ma liste alors mon bouton Modifier et mon formulaire de modification de ma video s'affichent..

    J'aurais aimé faire ça sans devoir passer par l'intermédiaire d'une fonction qui me traite cet evenement..

  5. fnicollet
    6 février 2009

    Et bien tu peux utiliser la valeur selectedIndex pour le data Binding aussi:

    COPIER-COLLER
    MXML:
    1. <mx:Button label="Modifier" enabled="{myList.selectedIndex != -1}"/>

    PS: Si tu veux poster du code, n'oublie pas les tags à rajouter autour (voir plus bas)

  6. Jérôme
    6 février 2009

    Vraiment merci, ça marche impécable, je ne pensais pas que ce genre de traitement : enabled="{myList.selectedIndex != -1}" pouvait me renvoyer true ou false.

    J'ai aussi une autre question pour toi. J'ai un composant TileList définit ainsi :

    [mxml][/mxml]

    j'aimerais pouvoir definir mon width et height en %. Ma question est comment savoir la valeur que je vais mettre en %. Je m'explique à chaque foi je me retrouve à faire au feeling, c'est à dire je test, je met 30% pour width, si je m'aperçois que ça n'équivaut pas à mon width="200" alors je change etc etc.. jusqu'à que j'obtienne une valeur en % qui correspond à une valeur en absolu.

  7. fnicollet
    6 février 2009

    Hum tu as du te tromper dans ton commentaire, le code a été coupé (choisis bien entre as et mxml et met le code au milieu. Sinon je pense que tu veux mettre une valeur pourcentage en ActionScript (je devine ^^). Pour cela, tu as les propriétés percentWidth et percentHeight sur tous les composants visuels.

  8. gg
    6 février 2009

    Fnicollet, je veux pas le faire en action script mais bien par l'intermédiaire de l'interface graphique et en mettant une valeur du style 30%. Pour faire plus simple comment transformer un 200width par sa valeur en % EXACTE.
    Je sais pas comment tu procède mais moi je fais toujours ça au feeling c'est à dire que je tatone en augmentant ou baissant ma valeur % pour qu'elle corresponde à ma valeur en absolu..

  9. fnicollet
    6 février 2009

    Et bien il n'y a pas de réponse puisque si tu mets 30% par exemple, cela dépend de la taille de ton conteneur (ton composant prendra 30% de la taille du conteneur). Donc si tu changes la taille du conteneur, ton composant en 30% sera redimensionné. Donc tu ne peux pas avoir une taille fixe si tu es en %age (sauf si la taille de ton conteneur est fixe mais dans ce cas, cela ne sert à rien de mettre des valeurs en %age).

  10. gg
    7 février 2009

    ok. on va en rester la pour les %age. Une derniere question ! T'es t-il déjà arrivé de vouloir redimensionner une From. Chez moi le form possède une taille min. maxi ce qui veut dire que par exemple si je met que mon formulaire (avec des items dedans) possède une width de 10% alors il ne me redimensionnera pas ma form à 10% mais à une taille min qui équivaut à 20% par la.. as tu une idée d'ou cela peut provenir?

    Merci d'avance tu es génial !

  11. Got
    18 février 2009

    Bonjour,

    Savez vous si il est possible de mettre autre chose que de la donnée dans les cellules d'un datagrid.
    J'aimerai que chaque ligne de mon datagrid possède son propre bouton.

    Savez vous si c'est possible avec un datagrid ?
    Une piste sur la manière de le faire ?

    Merci !

  12. fnicollet
    18 février 2009

    Bonjour,
    il est tout à fait possible de mettre un bouton dans la case d'une DataGrid Flex. Pour cela il faut utiliser les item Renderer (la propriété itemRenderer sur les composants). Les Item renderer seront justement le thème des prochains tutoriaux Flex de ce site.
    Pour le moment, vous pouvez consulter cet article de chez Adobe:
    http://www.adobe.com/devnet/flex/quickstart/using_item_renderers/

    Fabien

  13. Got
    18 février 2009

    Ok merci pour l'info ça m'a mis sur la piste.
    J'ai oublié de préciser mais je bosse sous flash donc uniquement avec as3. C'est un poil différent mais ça reste le même principe.
    Donc pour ceux que ça peut intéresser sous Flash il faut se créer une classe de rendu de cellule perso implémentant l'interface ICellRenderer.

    J'ai trouvé quelques infos dans la livedoc d'Adobe ici : http://livedocs.adobe.com/flash/9.0_fr/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts_bak&file=00000413.html

    Merci pour le coup de main !

  14. loop
    9 avril 2009

    Bonjour,

    j'ai une datagrid avec 3 colonnes (A, B, C) et je voudrai récupérer le nom de la colonne lorsque je double click sur une cellule.
    comment faire ?

  15. fnicollet
    9 avril 2009

    Salut,
    tu peux utiliser la propriété columnindex de l'évenement ItemClick pour retrouver ta colonne
    http://livedocs.adobe.com/flex/3/langref/mx/controls/listClasses/ListBase.html#event:itemClick

    Fabien

  16. Got
    9 avril 2009

    petit exemple avec une DataSource objet sur une datagrid :

    sur la DataGrid il faut ajouter un listener :

    COPIER-COLLER
    Actionscript:
    1. myDataGrid.addEventListener(MouseEvent.CLICK,eventDataGridClick);

    Puis créer la fonction qui reçoit l'évènement :

    COPIER-COLLER
    Actionscript:
    1. public function eventDataGridClick(event:MouseEvent)
    2. {
    3.     try
    4.         {
    5.            //Dans cet exemple la datasource du datagrid est une collection d'objet, on peut
    6.            //directement taper sur une propriété de l'objet (ici la propriété Id)
    7.        var MyId = event.target.data.Id;
    8.     } catch(e)
    9.     {
    10.  
    11.     }
    12. }

  17. loop
    10 avril 2009

    merci Fricollet, ça marche nickel

    pour info :

    COPIER-COLLER
    Actionscript:
    1. private function itemDoubleClickEvent(event:ListEvent):void {
    2.    var texteRecherche:String;
    3.    _indexColumnSelected = event.columnIndex;
    4.    if (_indexColumnSelected &amp;&amp; _indexColumnSelected&gt; -1) {
    5.       var column:DataGridColumn = liste.columns[_indexColumnSelected];
    6.       var itemSelected:TripletExpression = liste.selectedItem as TripletExpression;
    7.       switch (column.dataField) {
    8.     case "A":
    9.        texteRecherche = itemSelected.expressionA;
    10.        break;
    11.     case "B":
    12.        texteRecherche = itemSelected.expressionB;
    13.        break;
    14.     case "C":
    15.        texteRecherche = itemSelected.expressionC;
    16.        break;
    17.     default :
    18.        return;
    19.       }
    20.    }
    21.    // reste de la methode...
    22. }

  18. fnicollet
    10 avril 2009

    Ok, merci pour ton retour :)

    Fabien

  19. sylvouille
    19 janvier 2011

    Bonjour,

    Dans ton DataGrid il y a 6 lignes, cependant on a que 4 lignes de données.
    comment peut on faire pour lui dire de ne pas afficher de lignes vides, en même temps je lui dit d'afficher six ligne maximum :

    Merci.


Leave a comment

(required)

Aucun trackbacks pour l'instant

» «

Mes projets (Open Source)

Data Filter Lib ToasterLib

Autres

tutorial flex tutorial flex AFCS livres AS3 Flex

Blogoliste