Flex - Controllo ComboBox

Quando l'utente seleziona un elemento dall'elenco a discesa nel controllo ComboBox, l'elemento di dati viene visualizzato nell'area del prompt del controllo.

Una differenza tra i controlli ComboBox e DropDownList è che l'area del prompt del controllo ComboBox viene implementata utilizzando il controllo TextInput, mentre nel caso del controllo DropDownList, è il controllo Label. Pertanto, un utente può modificare l'area del prompt del controllo per immettere un valore che non è una delle opzioni disponibili.

Dichiarazione di classe

Di seguito è riportata la dichiarazione per spark.components.ComboBox classe -

public class ComboBox 
   extends DropDownListBase 
      implements IIMESupport

Proprietà pubbliche

Suor n Proprietà e descrizione
1

enableIME : Boolean

[sola lettura]
2

imeMode : String
3

itemMatchingFunction : Function = null

Specifica una funzione di callback utilizzata per cercare nell'elenco degli elementi quando l'utente immette i caratteri nell'area del prompt.
4

labelToItemFunction : Function

Specifica una funzione di callback per convertire un nuovo valore immesso nell'area del prompt nello stesso tipo di dati degli elementi di dati nel fornitore di dati.
5

maxChars : int

Il numero massimo di caratteri che l'area del prompt può contenere, immesso da un utente.
6

openOnInput : Boolean = true

Se true, l'elenco a discesa si apre quando l'utente modifica l'area del prompt.
7

prompt : String

Testo da visualizzare se / quando il testo di input è nullo.
8

restrict : String

Specifica il set di caratteri che un utente può immettere nell'area del prompt.

Metodi pubblici

Suor n Metodo e descrizione
1

ComboBox()

Costruttore.

Metodi ereditati

Questa classe eredita i metodi dalle seguenti classi:

  • 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

Esempio di controllo Flex ComboBox

Seguiamo i seguenti passaggi per verificare l'utilizzo del controllo ComboBox in un'applicazione Flex creando un'applicazione di test:

Passo Descrizione
1 Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione .
2 Modifica HelloWorld.mxml come spiegato di seguito. Mantieni il resto dei file invariato.
3 Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti.

Di seguito è riportato il contenuto del file mxml modificato 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>

Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione . Se tutto va bene con la tua applicazione, produrrà il seguente risultato: [ Provalo online ]