Un composant ComboBox permet à l’utilisateur d’effectuer une sélection unique dans une liste déroulante. Cette liste déroulante peut être statique ou modifiable. Un composant ComboBox modifiable permet à l’utilisateur d’entrer directement du texte dans la zone en haut de la liste. Si la liste déroulante atteint le bas du document, elle se déroule vers le haut et non vers le bas. Le composant ComboBox comporte trois sous-composants, BaseButton, TextInput et List.
Dans un composant ComboBox modifiable, la zone active ne recouvre que le bouton, pas la zone de texte. Dans un composant ComboBox statique, le bouton et la zone de texte constituent la zone active. La zone active répond par l’ouverture ou la fermeture de la liste déroulante.
Lorsque l’utilisateur effectue une sélection dans la liste, à l’aide de la souris ou du clavier, l’étiquette de la sélection est copiée dans la zone de texte en haut du composant ComboBox.
Interaction de l’utilisateur avec le composant ComboBox
Vous pouvez utiliser un composant ComboBox dans tout formulaire ou toute application qui requiert un choix unique dans une liste. Par exemple, vous pouvez fournir une liste déroulante de pays dans un formulaire où les clients doivent saisir leur adresse. Les composants ComboBox modifiables conviennent pour des scénarios plus complexes. Par exemple, dans une application d’itinéraire routier, utilisez un composant ComboBox modifiable pour que l’utilisateur y saisisse ses adresses de départ et d’arrivée. La liste déroulante pourrait alors contenir des adresses déjà saisies.
Si le composant ComboBox est modifiable, ce qui signifie que la propriété
editable
est définie sur
true
, les touches suivantes retirent le focus de la zone de saisie de texte et conservent la valeur précédente. La touche Entrée constitue une exception car elle applique la nouvelle valeur d’abord, si l’utilisateur a entré du texte.
Touche
|
Description
|
Maj+Tab
|
Place le focus sur l’élément précédent. Si un nouvel élément est sélectionné, un événement
change
est émis.
|
Tab
|
Place le focus sur l’objet suivant. Si un nouvel élément est sélectionné, un événement
change
est émis.
|
Flèche vers le bas
|
Déplace la sélection d’un élément vers le bas.
|
Fin
|
Déplace la sélection en bas de la liste.
|
Echap
|
Ferme la liste déroulante et place à nouveau le focus sur le composant ComboBox.
|
Entrée
|
Ferme la liste déroulante et place à nouveau le focus sur le composant ComboBox. Lorsque le composant ComboBox est modifiable et si l’utilisateur entre du texte, la touche Entrée définit la valeur sur le texte entré.
|
Orig
|
Déplace la sélection en haut de la liste.
|
Pg. Préc.
|
Déplace la sélection d’une page vers le haut.
|
Pg. Suiv.
|
Déplace la sélection d’une page vers le bas.
|
Lorsque vous ajoutez un composant ComboBox à une application, vous pouvez le rendre accessible à un lecteur d’écran en ajoutant les lignes de code ActionScript suivantes :
import fl.accessibility.ComboBoxAccImpl;
ComboBoxAccImpl.enableAccessibility();
Quel que soit le nombre d’occurrences du composant, l’activation de son accessibilité ne se fait qu’une fois.
Paramètres du composant ComboBox
Dans l’Inspecteur des propriétés ou l’Inspecteur des composants, vous pouvez définir les paramètres suivants pour chaque occurrence de ComboBox :
dataProvider
,
editable
,
prompt
et
rowCount
. A chacun de ces paramètres correspond une propriété ActionScript du même nom. Pour plus d’informations sur les valeurs gérées de ces paramètres, voir la classe ComboBox dans le
Guide de référence d’ActionScript 3.0
pour Flash Professional
. Pour plus d’informations sur l’utilisation du paramètre dataProvider, voir la section
Utilisation du paramètre dataProvider
.
Création d’une application avec le composant ComboBox
La procédure suivante explique comment ajouter un composant ComboBox à une application pendant la programmation. Le composant ComboBox est modifiable ; si vous tapez
Add
dans la zone de texte, l’exemple ajoute un élément à la liste déroulante.
-
Créez un document de fichier Flash (ActionScript 3.0).
-
Faites glisser un composant ComboBox sur la scène et nommez l’occurrence
aCb
. Dans l’onglet Paramètres, définissez le paramètre
editable
sur
true
.
-
Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code suivant :
import fl.data.DataProvider;
import fl.events.ComponentEvent;
var items:Array = [
{label:"screen1", data:"screenData1"},
{label:"screen2", data:"screenData2"},
{label:"screen3", data:"screenData3"},
{label:"screen4", data:"screenData4"},
{label:"screen5", data:"screenData5"},
];
aCb.dataProvider = new DataProvider(items);
aCb.addEventListener(ComponentEvent.ENTER, onAddItem);
function onAddItem(event:ComponentEvent):void {
var newRow:int = 0;
if (event.target.text == "Add") {
newRow = event.target.length + 1;
event.target.addItemAt({label:"screen" + newRow, data:"screenData" + newRow},
event.target.length);
}
}
-
Choisissez Contrôle > Tester l’animation.
Création d’un composant ComboBox à l’aide d’ActionScript
L’exemple suivant crée un composant ComboBox à l’aide de ActionScript et le remplit d’une liste des universités dans la région de San Francisco, en Californie. Il règle la propriété
width
du composant ComboBox afin de l’adapter à la largeur du texte d’invite et règle la propriété
dropdownWidth
à une valeur un peu plus large, de manière à accepter le plus long des noms d’universités.
Cet exemple crée la liste des universités dans une occurrence de tableau et utilise la propriété
label
pour stocker leurs noms et la propriété
data
pour stocker les URL de chacun de leurs sites Web. Il attribue le tableau au composant ComboBox en réglant sa propriété
dataProvider
.
Lorsqu’un utilisateur sélectionne une université dans la liste, il déclenche un événement Event.
CHANGE
et un appel de la fonction
changeHandler()
, qui charge la propriété
data
dans une demande URL afin d’accéder au site Web de l’université.
Notez que la dernière ligne règle la propriété
selectedIndex
de l’occurrence de ComboBox sur -1 afin d’afficher à nouveau l’invite lorsque la liste est fermée. Sinon, l’invite serait remplacée par le nom de l’université sélectionnée.
-
Créez un document de fichier Flash (ActionScript 3.0).
-
Faites glisser le composant ComboBox du panneau Composants vers le panneau Bibliothèque.
-
Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code ActionScript suivant :
import fl.controls.ComboBox;
import fl.data.DataProvider;
import flash.net.navigateToURL;
var sfUniversities:Array = new Array(
{label:"University of California, Berkeley",
data:"http://www.berkeley.edu/"},
{label:"University of San Francisco",
data:"http://www.usfca.edu/"},
{label:"San Francisco State University",
data:"http://www.sfsu.edu/"},
{label:"California State University, East Bay",
data:"http://www.csuhayward.edu/"},
{label:"Stanford University", data:"http://www.stanford.edu/"},
{label:"University of Santa Clara", data:"http://www.scu.edu/"},
{label:"San Jose State University", data:"http://www.sjsu.edu/"}
);
var aCb:ComboBox = new ComboBox();
aCb.dropdownWidth = 210;
aCb.width = 200;
aCb.move(150, 50);
aCb.prompt = "San Francisco Area Universities";
aCb.dataProvider = new DataProvider(sfUniversities);
aCb.addEventListener(Event.CHANGE, changeHandler);
addChild(aCb);
function changeHandler(event:Event):void {
var request:URLRequest = new URLRequest();
request.url = ComboBox(event.target).selectedItem.data;
navigateToURL(request);
aCb.selectedIndex = -1;
}
-
Choisissez Contrôle > Tester l’animation.
Vous pouvez mettre en œuvre cet exemple et l’exécuter dans l’environnement de programmation Flash, mais vous recevrez des messages d’avertissement si vous tentez d’accéder aux sites Web des universités en cliquant sur des éléments dans le composant ComboBox. Pour accéder à une version fonctionnelle du composant ComboBox sur Internet, rendez-vous à l’adresse suivante :
http://www.helpexamples.com/peter/bayAreaColleges/bayAreaColleges.html
|
|
|