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

Flex Tips – Afficher un texte par défaut dans une ComboBox sans l'ajouter au dataProvider

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