Flex - Contrôle DropDownList

introduction

Le contrôle DropDownList contient une liste déroulante dans laquelle l'utilisateur peut sélectionner une valeur unique similaire à celle de l'élément de formulaire SELECT en HTML.

Déclaration de classe

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

public class DropDownList 
   extends DropDownListBase

Propriétés publiques

Sr.Non	Propriété et description
1	prompt : String L'invite du contrôle DropDownList.
2	typicalItem : Object [override] Les mises en page utilisent la taille préférée de l'élément typique lorsque des tailles de ligne ou de colonne fixes sont requises, mais qu'une valeur rowHeight ou columnWidth spécifique n'est pas définie.

Méthodes publiques

Sr.Non	Méthode et description
1	DropDownList() 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 DropDownList

Suivons les étapes suivantes pour vérifier l'utilisation du contrôle DropDownList 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; 
         import spark.events.IndexChangeEvent;
		 
         [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"}		
         ]                
         );

         protected function dropDownList_changeHandler
           (event:IndexChangeEvent):void {
            ddlIndex.text = dropDownList.selectedIndex.toString();
            ddlSelectedItem.text = dropDownList.selectedItem.value;
            ddlCode.text = dropDownList.selectedItem.code;
         }

      ]]>
   </fx:Script>

   <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 = "dropDownListPanel" title = "Using DropDownList" 
            width = "420" height = "200">
            <s:layout>
               <s:VerticalLayout  gap = "10" verticalAlign = "middle" 
                  horizontalAlign = "center" />	
            </s:layout>
            
            <s:HGroup>
               <s:Label text = "Index :" />
               <s:Label id = "ddlIndex" fontWeight = "bold" />
               <s:Label text = "Value :" /> 
               <s:Label id = "ddlSelectedItem" 
                  text = "{dropDownList.selectedItem.value}" fontWeight = "bold" />
               <s:Label text = "Code :" /> 
               <s:Label id = "ddlCode" 
                  text = "{dropDownList.selectedItem.code}" fontWeight = "bold" />
            </s:HGroup>				
            
            <s:DropDownList id = "dropDownList" dataProvider = "{data}" 
               width = "150" change = "dropDownList_changeHandler(event)"
               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: [ ]

↰ Previous page