Utilización del componente ComboBox



Un componente ComboBox permite que el usuario seleccione elementos individuales en una lista desplegable. ComboBox puede ser estático o editable. Un componente ComboBox editable permite que el usuario introduzca texto directamente en el campo de texto, situado en la parte superior de la lista. Si la lista desplegable alcanza el final del documento, se abre arriba en vez de abajo. El componente ComboBox consta de tres subcomponentes: el componente BaseButton, TextInput y List .

En un componente ComboBox editable, sólo el botón constituye el área activa, no el cuadro de texto. En el caso de un componente ComboBox estático, el botón y el cuadro de texto constituyen el área activa. El área activa responde abriendo o cerrando la lista desplegable.

Si el usuario efectúa una selección en la lista, ya sea con el ratón o con el teclado, la etiqueta de la selección se copia al campo de texto en la parte superior del componente ComboBox.

    Interacción del usuario con el componente ComboBox

    Utilice el componente ComboBox en formularios o aplicaciones en los que haya que elegir una sola opción en una lista. Por ejemplo, puede emplear una lista desplegable de provincias en un formulario de dirección de cliente. Los componentes ComboBox editables también pueden utilizarse en escenarios más complejos. Por ejemplo, en una aplicación que proporcione itinerarios por carreteras, se podría utilizar un componente ComboBox editable para que el usuario introduzca sus direcciones de origen y destino. La lista desplegable contendría las direcciones introducidas con anterioridad.

    Si el componente ComboBox se puede editar, es decir, si la propiedad editable es true, las teclas siguientes anulan la selección del cuadro de entrada de texto y dejan el valor anterior. La excepción es la tecla Intro, que aplica primero el nuevo valor si el usuario ha introducido texto.

    Tecla

    Descripción

    Mayús + Tabulador

    Desplaza la selección al elemento anterior. Si se selecciona un nuevo elemento, se distribuye un evento change.

    Tabulador

    Desplaza la selección al elemento siguiente. Si se selecciona un nuevo elemento, se distribuye un evento change.

    Flecha abajo

    Desplaza la selección un elemento hacia abajo.

    Fin

    Desplaza la selección a la parte inferior de la lista.

    Esc

    Cierra la lista desplegable y vuelve a seleccionar el componente ComboBox.

    Intro

    Cierra la lista desplegable y vuelve a seleccionar el componente ComboBox. Si el componente ComboBox se puede editar y el usuario introduce texto, Intro establece el valor en el texto introducido.

    Inicio

    Desplaza la selección a la parte superior de la lista.

    Re Pág

    La selección retrocede una página.

    Av Pág

    La selección avanza una página.

    Si se añade el componente ComboBox a una aplicación, se puede hacer accesible a un lector de pantalla añadiendo las líneas de código ActionScript siguientes:

    import fl.accessibility.ComboBoxAccImpl; 
 
ComboBoxAccImpl.enableAccessibility();

    La accesibilidad de un componente sólo se activa una vez, sea cual sea su número de instancias.

    Parámetros del componente ComboBox

    A continuación se indican los parámetros que se pueden definir para cada instancia de ComboBox en el inspector de propiedades o en el inspector de componentes: showTextField, editable, prompt y rowCount Cada uno de estos parámetros tiene una propiedad de ActionScript del mismo nombre. Para más información sobre los posibles valores de estos parámetros, consulte la clase ComboBox en Referencia del lenguaje y componentes ActionScript 3.0. Para información sobre la utilización del parámetro dataProvider, consulte Utilización del parámetro dataProvider.

    Creación de una aplicación con el componente ComboBox

    En el procedimiento siguiente se describe cómo añadir un componente ComboBox a una aplicación durante la edición. El componente ComboBox es editable y, si se escribe Add en el campo de texto, el ejemplo añade un elemento a la lista desplegable.

    1. Cree un nuevo documento de Flash (ActionScript 3.0).

    2. Arrastre un componente ComboBox al escenario y asígnele el nombre de instancia aCb. En la ficha Parámetros, establezca el parámetro editable en true.

    3. Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código siguiente:

      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);  
    } 
}

    4. Seleccione Control > Probar película.

    Creación de un componente ComboBox con ActionScript

    En el ejemplo siguiente se crea un componente ComboBox con ActionScript, que se llena con una lista de universidades de la zona de San Francisco (California). El ejemplo establece la propiedad width de ComboBox para admitir la anchura del texto del mensaje de solicitud. Asimismo, define la propiedad dropdownWidth para que sea un poco más ancha y se ajuste al nombre de universidad de mayor longitud.

    Crea la lista de universidades en una instancia de Array, mediante la propiedad label para almacenar los nombres de facultad y la propiedad data para almacenar las direcciones URL del sitio Web de cada facultad. Asigna Array a ComboBox estableciendo su propiedad dataProvider.

    Si el usuario selecciona una universidad de la lista, activa un evento Event.CHANGE y una llamada a la función changeHandler(), que carga la propiedad data en una petición de URL para acceder al sitio Web de la facultad.

    Debe tenerse en cuenta que la última línea establece la propiedad selectedIndex de la instancia de ComboBox en -1 para volver a mostrar el mensaje de solicitud cuando se cierre la lista. De lo contrario, el nombre de la facultad seleccionada sustituirá el mensaje.

    1. Cree un nuevo documento de Flash (ActionScript 3.0).

    2. Arrastre el componente ComboBox del panel Componentes al panel Biblioteca.

    3. Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código ActionScript siguiente:

      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; 
}

    4. Seleccione Control > Probar película.

    Se puede implementar y ejecutar este ejemplo en el entorno de edición de Flash, pero aparecerán mensajes de advertencia si se intenta acceder a los sitios Web de facultad al hacer clic en elementos de ComboBox. Para poder disfrutar de la funcionalidad completa de ComboBox en Internet, acceda a la ubicación siguiente:

    http://www.helpexamples.com/peter/bayAreaColleges/bayAreaColleges.html