Flex - Control DropDownList

Introducción

El control DropDownList contiene una lista desplegable de la que el usuario puede seleccionar un valor único similar al del elemento de formulario SELECT en HTML.

Declaración de clase

A continuación se muestra la declaración de spark.components.DropDownList clase -

public class DropDownList 
   extends DropDownListBase

Propiedades publicas

No Señor	Descripción de propiedad
1	prompt : String La solicitud del control DropDownList.
2	typicalItem : Object [override] Los diseños usan el tamaño preferido del típico elemento cuando se requieren tamaños fijos de fila o columna, pero no se establece un valor específico de rowHeight o columnWidth.

Métodos públicos

No Señor	Método y descripción
1	DropDownList() Constructor.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

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

Ejemplo de control Flex DropDownList

Sigamos los siguientes pasos para verificar el uso del control DropDownList en una aplicación Flex creando una aplicación de prueba:

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación .
2	Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.

A continuación se muestra el contenido del archivo mxml modificado 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>

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]

↰ Previous page