Flex - Contrôle ComboBox

Lorsque l'utilisateur sélectionne un élément dans la liste déroulante du contrôle ComboBox, l'élément de données apparaît dans la zone d'invite du contrôle.

Une différence entre les contrôles ComboBox et DropDownList est que la zone d'invite du contrôle ComboBox est implémentée à l'aide du contrôle TextInput, alors que dans le cas du contrôle DropDownList, il s'agit du contrôle Label. Par conséquent, un utilisateur peut modifier la zone d'invite du contrôle pour entrer une valeur qui ne fait pas partie des options disponibles.

Déclaration de classe

Voici la déclaration pour spark.components.ComboBox classe -

public class ComboBox 
   extends DropDownListBase 
      implements IIMESupport

Propriétés publiques

Sr. Non Propriété et description
1

enableIME : Boolean

[lecture seulement]
2

imeMode : String
3

itemMatchingFunction : Function = null

Spécifie une fonction de rappel utilisée pour rechercher la liste d'éléments lorsque l'utilisateur entre des caractères dans la zone d'invite.
4

labelToItemFunction : Function

Spécifie une fonction de rappel pour convertir une nouvelle valeur entrée dans la zone d'invite dans le même type de données que les éléments de données dans le fournisseur de données.
5

maxChars : int

Le nombre maximum de caractères que la zone d'invite peut contenir, tel que saisi par un utilisateur.
6

openOnInput : Boolean = true

Si c'est vrai, la liste déroulante s'ouvre lorsque l'utilisateur modifie la zone d'invite.
sept

prompt : String

Texte à afficher si / lorsque le texte d'entrée est nul.
8

restrict : String

Spécifie le jeu de caractères qu'un utilisateur peut entrer dans la zone d'invite.

Méthodes publiques

Sr. Non Méthode et description
1

ComboBox()

Constructeur.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

  • spark.components.supportClasses.DropDownListBase
  • spark.components.List
  • spark.components.supportClasses.ListBase
  • spark.components.SkinnableDataContainer
  • spark.components.supportClasses.SkinnableContainerBase
  • spark.components.supportClasses.SkinnableComponent
  • mx.core.UIComponent
  • mx.core.FlexSprite
  • flash.display.Sprite
  • flash.display.DisplayObjectContainer
  • flash.display.InteractiveObject
  • flash.display.DisplayObject
  • flash.events.EventDispatcher
  • Object

Exemple de contrôle Flex ComboBox

Suivons les étapes suivantes pour vérifier l'utilisation du contrôle ComboBox dans une application Flex en créant une application de test -

Étape La description
1 Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2 Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3 Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier mxml modifié src/com.tutorialspoint/HelloWorld.mxml

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "library://ns.adobe.com/flex/spark"
   xmlns:mx = "library://ns.adobe.com/flex/mx"
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.collections.ArrayCollection; 

         [Bindable]
         public var data:ArrayCollection = new ArrayCollection (
         [   
            {value:"France", code:"FR"},
            {value:"Japan", code:"JP"},
            {value:"India", code:"IN"},
            {value:"Russia", code:"RS"},
            {value:"United States", code:"US"}		
         ]                
         );

         private function mappingFunction(input:String):Object {
            switch (input){
               case "France":
                  return {value:input, code:"FR"};		
               case "Japan":
                  return {value:input, code:"JP"};		
               case "India":
                  return {value:input, code:"IN"};		
               case "Russia":
                  return {value:input, code:"RS"};		
               case "United States":
                  return {value:input, code:"US"};		
            }			
            return null;
         }

      ]]>
   </fx:Script>
   
   <fx:Declarations>
      <mx:DateFormatter id = "dateFormatter" />
   </fx:Declarations>
   
   <s:BorderContainer width = "550" height = "400" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
         verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Form Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         
         <s:Panel id = "comboBoxPanel" title = "Using ComboBox" width = "420" 
            height = "200">
         <s:layout>
            <s:VerticalLayout  gap = "10" verticalAlign = "middle" 
               horizontalAlign = "center" />	
         </s:layout>
         
         <s:HGroup>
            <s:Label text = "Index :" /> <s:Label 
               text = "{comboBox.selectedIndex}" fontWeight = "bold" />
            <s:Label text = "Value :" /> <s:Label 
               text = "{comboBox.selectedItem.value}" fontWeight = "bold" />
            <s:Label text = "Code :" /> <s:Label 
               text = "{comboBox.selectedItem.code}" fontWeight = "bold" />
         </s:HGroup>
         
         <s:ComboBox  id = "comboBox"  dataProvider = "{data}" width = "150" 
            labelToItemFunction = "{mappingFunction}" selectedIndex = "0" 
            labelField = "value" />     
         </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ Essayez-le en ligne ]