Sur les composants Flex de type List (ComboBox, List et DataGrid par exemple), on dispose d'un évènement ListEvent.CHANGE ("change") qui est dispatché quand l'utilisateur fait une sélection dans la liste. Il est légèrement différent de l'évènement "itemClick" qui n'est déclenché qu'au click sur un élément de la liste.
De manière générale, il vaut mieux utiliser "change" que "itemClick" car change va dispatcher un évènement lorsque l'utilisateur fera une sélection au clavier (avec les touches directionnelles).
Le problème
Lorsque l'utilisateur fait une sélection, on a bien un évènement CHANGE qui est dispatché. Cependant, si on fixe le "selectedItem" en ActionScript (code), vous pourrez voir que l'évènement ne sera pas dispatché et pourtant la sélection sera bien faite. L'affichage sera aussi mis à jour mais aucun évènement.
Dans votre code métier, vous voulez sûrement déclencher une action quand un élément est sélectionné, que ce soit par action utilisateur ou par code. L'évènement CHANGE est donc critique pour que votre code reste homogène.
La solution
Puisque le composant Flex ne le fait pas, vous pouvez créer votre propre ComboBox (par héritage) qui va rajouter ce comportement ou tout simplement dispatcher vous-même l'évènement CHANGE pour que votre programme se joue correctement. Voici un extrait de code qui réalise cette action:
...
secondComboBox.selectedItem = item;
secondComboBox.dispatchEvent(new ListEvent(ListEvent.CHANGE));
...
Exemple complet en ligne
Ci-dessous, la démonstration des deux comportements (avec et sans dispatch d'évènement):
Voilà un petit "tip" que j'utilise très fréquemment pour créer des interfaces plus agréables à utiliser. Ce n'est pas grand chose mais c'est toujours un petit plus. Ce petit truc sert simplement à adapter la taille d'une composant de type "liste" (List / DataGrid / ComboBox) suivant le nombre de données qu'il doit afficher.
En effet, par défaut, ces composants affichent un certain nombre d'éléments de votre dataProvider:
- 5 pour la ComboBox (le DropDown)
- 6 pour la DataGrid
- 7 pour la List
Prenons maintenant l'exemple dans lequel vous avez un dataProvider à 6 éléments pour votre ComboBox. Quand vous allez l'ouvrir, une scrollbar (barre de défilement) va apparaitre pour vous permettre d'accéder au 6ème élément. Pour accéder au 6eme (ou 7e, ...) élément, on doit donc effectuer un click de plus alors que ce ne serait pas vraiment nécessaire, on pourrait afficher un DropDown affichant les 6 éléments par exemple.
Pour définir le nombre d'éléments à afficher dans un composant Flex de type List, il existe une propriété nommée "rowCount". Il suffirait donc de mettre votre rowCount à 6 et le tour est joué. Mais on va être plus malin car on ne connait pas forcement le nombre d'élément à afficher à l'avance (peut-être même qu'il peut varier).
On va ici utiliser le Data Binding pour automatiser la tâche et ne pas se soucier du pourquoi et du comment. On va simplement faire un Binding (liaison dynamique) entre la propriété "rowCount" de notre composant de type "liste" et la propriété "length" de notre dataProvider (en admettant que ce soit un Collection comme une ArrayCollection).
Voici un petit exemple:
<mx:ComboBox dataProvider="{_listOperatorsDP}" rowCount="{_listOperatorsDP.length}"/>
Et magie du Binding, notre affichage sera exactement à la taille souhaitée, pas de scrollbar. Alors vous avez sûrement déjà pensé à un cas qui pose problème, c'est le cas où l'on a beaucoup d'élément. Dans ce cas, notre Binding fera que notre liste sera immense et en plus, vous n'aurez potentiellement pas de scrollbar.
La solution est donc de simuler un "rowCountMax" (qui n'existe pas) à l'aide d'une mini-expression de test (test ternaire en ligne):
<mx:ComboBox dataProvider="{_listOperatorsDP}" rowCount="{_listOperatorsDP.length > 15 ? 15 : _listOperatorsDP.length}"/>
Ici, on va s'arrêter à 15 éléments affichés au maximum. A vous d'appliquer ce "tip" dans vos applications pour les rendre plus agréables à utiliser.
Un petit exemple exposant la différence:
Flex Source Code Download: Télécharger le code source complet de l'application
This movie requires Flash Player 11
Quand vous remplissez une ComboBox Flex, le premier élément est affiché par défaut. Par exemple, admettons que vous ayez une liste d'états américains, l'Alabama (premier sur la liste il me semble) sera affiché et sélectionné par défaut. Un choix est donc imposé à l'utilisateur. Mais il est souvent plus commun, dans les formulaires surtout, d'afficher un message "User Friendly" comme "Choisissez votre état de résidence". Pour cela, il y a une méthode simple, ajouter un item ayant pour label "Choisissez votre état de résidence" dans le dataProvider de votre ComboBox en position 0. C'est donc la valeur qui sera affichée en premier.
Cette solution pose pas mal de problèmes ensuite. Tout d'abord, pour tester le choix de l'utilisateur, on doit regarder si le selectedIndex est > 0, ce qui est un peu génant car on a plutôt l'habitude de dire selectedItem != -1. La comparaision à -1 est utilisée pour les recherches dans les Array et ArrayCollection par exemple, notre code perd donc de sa cohérence. Ensuite, cela se complique encore si vous appliquez un Sort (tri) sur votre ArrayCollection, par exemple un tri alphabétique. La valeur "Choisissez votre état de résidence" va se faufiler dans les éléments de votre tableau et vous devrez la remettre en position 0.
Le composant Flex possède une propriété "prompt" permettant d'indiquer un message tant que l'utilisateur n'a pas fait de sélection. Cet élément ne fait pas partie du dataProvider de la <mx:ComboBox>, vous pourrez donc faire vos tests tranquillement.
Une fois que vous avez fait une sélection, vous ne pourrez donc plus sélectionner cet élément. Si vous voulez vraiment revenir sur cet élément de non-sélection, il faut fixer la propriété selectedIndex à -1 (logique).
Voici un exemple de son utilisation:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
<mx:Array id="arr">
<mx:Object abbrev="AL" name="Alabama" />
<mx:Object abbrev="AK" name="Alaska" />
<mx:Object abbrev="AZ" name="Arizona" />
<mx:Object abbrev="AR" name="Arkansas" />
<mx:Object abbrev="CA" name="California" />
<mx:Object abbrev="CO" name="Colorado" />
<mx:Object abbrev="CT" name="Connecticut" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:Button id="button"
label="Reset ComboBox"
click="comboBox.selectedIndex = -1;" />
</mx:ApplicationControlBar>
<mx:ComboBox id="comboBox"
dataProvider="{arr}"
labelField="name"
prompt="Choisissez votre état de résidence.." />
</mx:Application>
Flex Source Code Download: Télécharger le code source complet de l'application
This movie requires Flash Player 11
Le composant Flex ComboBox permet d'afficher une liste d'éléments. Lorsqu'un élément est sélectionné, le composant s'affiche sur une seule ligne. Il suffit de cliquer sur la flèche à droite pour faire apparaître les autres éléments de la liste. Ces éléments de tous types représentés par des String peuvent être aussi nombreux qu'il le faudra. S'il y a de nombreux éléments, une scrollbar va apparaître, ce qui est rend la lisibilité du composant assez difficile.
Pour résoudre ce problème, Arcadio Carballares Martin a crée un composant qu'il a baptisé ComboBoxPaginated. Il permet donc d'avoir une pagination. C'est-à-dire que les éléments sont affichés par ensemble de 5 (facilement paramétrable). Des flèches haut et bas sont ajoutées afin de pouvoir accéder aux autres pages. Le découpage des éléments en ensembles est fait automatiquement.
Les composants de type liste sont ceux des plus sophistiqués du framework Flex. Ce sont des composants qui permettent à l'utilisateur de choisir un ou plusieurs item depuis une liste d'options. Dans sa forme la plus simple, ce peut être une liste verticale, de labels que l'utilisateur peut sélectionner. Cependant, ces composants peuvent être bien plus complexes, par colonnes, par grille, avec une hiérarchie, avec des icônes, des images et bien plus.
This movie requires Flash Player 11
La plus fondamentale de ces listes est le composant mx:List. Ces listes sont verticales, sur une colonne et avec une barre de défilement si besoin est.
Les HorizontalList sont identiques aux List, sauf qu'elle défilent de manière horizontale au lieu de verticale. Les HorizontalList sont typiquement utiles pour parcourir des icônes et/ou des images (miniatures), bien que l'on puisse l'utiliser seulement pour du texte.
Les ComboBox sont des listes qui se rassemblent en une seule ligne quand elle ne sont pas activées. On appelle aussi ce composant un drop-down menu, et il permet de sélectionner parmi une liste d'options quand son état est étendu. Une fois la valeur sélectionnée, le composant revient dans sa forme réduite.
