Uso del componente CheckBox

Un elemento CheckBox es un recuadro que puede activarse o desactivarse. Cuando se selecciona, en el cuadro aparece una marca. Se puede añadir una etiqueta de texto a un componente CheckBox y colocarla a la izquierda, a la derecha o debajo del componente.

Se pueden utilizar los componentes CheckBox para recopilar un conjunto de valores true o false que no se excluyan entre sí. Por ejemplo, una aplicación que recopile información sobre el tipo de automóvil que desea comprar un usuario podría utilizar componentes CheckBox para permitir la selección de características.

Interacción del usuario con CheckBox

Es posible activar o desactivar el componente CheckBox de una aplicación. Si CheckBox está activado y el usuario hacer clic en él o en su etiqueta, dicho componente se selecciona y muestra su aspecto presionado. Si el usuario desplaza el puntero fuera del área de delimitación de un componente CheckBox o de su etiqueta mientras presiona el botón del ratón, el componente recupera su aspecto original y conserva la selección de entrada. El estado de CheckBox no cambia hasta que se deja de presionar el ratón sobre el componente. Asimismo, CheckBox tiene dos estados desactivados, seleccionado y no seleccionado, que utilizan los parámetros selectedDisabledSkin y disabledSkin respectivamente y que no permiten la interacción del ratón ni del teclado.

Si el componente CheckBox está desactivado, muestra su aspecto desactivado sea cual sea la acción del usuario. Si está desactivado, CheckBox no recibe la entrada del ratón ni del teclado.

La instancia de CheckBox recibe la selección cuando el usuario hace clic sobre ella o presiona el tabulador hasta su posición. Cuando una instancia de CheckBox está seleccionada, se pueden utilizar las siguientes teclas para controlarla:

Tecla

Descripción

Mayús+Tabulador

Desplaza la selección al elemento anterior.

Barra espaciadora

Selecciona el componente o anula su selección y activa el evento change .

Tabulador

Desplaza la selección al elemento siguiente.

Para obtener más información sobre el control de la selección, consulte Trabajo con FocusManager y la clase FocusManager en la Referencia de ActionScript 3.0 para Flash Professional .

La previsualización dinámica de cada instancia de CheckBox refleja los cambios de parámetros realizados durante la edición en el inspector de propiedades o el inspector de componentes.

Si se añade el componente CheckBox 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.CheckBoxAccImpl; 
 
CheckBoxAccImpl.enableAccessibility();

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

Parámetros del componente CheckBox

A continuación se indican los parámetros de edición que se pueden definir para cada instancia del componente CheckBox en el inspector de propiedades o en el inspector de componentes: label , labelPlacement y selected . Cada uno de estos parámetros tiene una propiedad de ActionScript del mismo nombre. Para obtener información sobre los valores posibles de estos parámetros, consulte la clase CheckBox en la Referencia de ActionScript 3.0 para Flash Professional .

Creación de una aplicación utilizando CheckBox

En el siguiente procedimiento se explica cómo añadir un componente CheckBox a una aplicación durante la edición, mediante el fragmento de un formulario de una aplicación para préstamos. El formulario pregunta si el solicitante es propietario de un inmueble y proporciona un componente CheckBox para contestar "sí". En caso afirmativo, el formulario presenta dos botones de opción para que el usuario indique el valor relativo del inmueble.

Creación de una aplicación utilizando el componente CheckBox

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

  2. Arrastre un componente CheckBox desde el panel Componentes al escenario.

  3. En el inspector de propiedades, siga este procedimiento:

    • Introduzca homeCh como nombre de instancia.

    • Introduzca 140 en el valor de anchura.

    • Introduzca " ¿Es propietario de su vivienda? " en el parámetro de la etiqueta.

  4. Arrastre dos componentes RadioButton desde el panel Componentes al escenario y colóquelos debajo y a la derecha del elemento CheckBox. Introduzca los valores siguientes para dichos componentes en el inspector de propiedades:

    • Introduzca underRb y overRb en los nombres de instancia.

    • Introduzca 120 en el valor de anchura de los dos componentes RadioButton.

    • Introduzca ¿Menos de 500.000 EUR? en el parámetro de la etiqueta de underRb .

    • Introduzca ¿Más de 500.000 EUR? en el parámetro de la etiqueta de overRb .

    • Introduzca valueGrp en el parámetro groupName de los dos componentes RadioButton.

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

    homeCh.addEventListener(MouseEvent.CLICK, clickHandler); 
underRb.enabled = false; 
overRb.enabled = false; 
 
function clickHandler(event:MouseEvent):void { 
    underRb.enabled = event.target.selected; 
    overRb.enabled = event.target.selected;     
}

    Este código crea un controlador de eventos para un evento CLICK que activa los componentes RadioButton underRb y overRb si está seleccionado el componente CheckBox homeCh , y los desactiva si no está seleccionado homeCh. Para obtener más información, consulte la clase MouseEvent en la Referencia de ActionScript 3.0 para Flash Professional .

  6. Seleccione Control > Probar película.

En el ejemplo siguiente se duplica la aplicación anterior, pero se crean componentes CheckBox y RadioButton con ActionScript.

Creación de un componente CheckBox con ActionScript

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

  2. Arrastre el componente CheckBox y el componente RadioButton desde el panel Componentes al panel Biblioteca del documento actual. Si el panel Biblioteca no está abierto, presione Ctrl+L o seleccione Ventana > Biblioteca para abrir el panel Biblioteca.

    Esta acción permite que los componentes estén disponibles para la aplicación, pero sin colocarlos en el escenario.

  3. Abra el panel Acciones, seleccione el fotograma 1 en la línea de tiempo principal e introduzca el código siguiente para crear y colocar instancias del componente: 

    import fl.controls.CheckBox; 
import fl.controls.RadioButton; 
 
var homeCh:CheckBox = new CheckBox(); 
var underRb:RadioButton = new RadioButton(); 
var overRb:RadioButton = new RadioButton(); 
addChild(homeCh); 
addChild(underRb); 
addChild(overRb); 
underRb.groupName = "valueGrp"; 
overRb.groupName = "valueGrp"; 
homeCh.move(200, 100); 
homeCh.width = 120; 
homeCh.label = "Own your home?"; 
underRb.move(220, 130); 
underRb.enabled = false; 
underRb.width = 120; 
underRb.label = "Under $500,000?"; 
overRb.move(220, 150); 
overRb.enabled = false; 
overRb.width = 120; 
overRb.label = "Over $500,000?";

    Este código utiliza los constructores CheckBox() y RadioButton() para crear componentes, y el método addChild() para colocarlos en el escenario. Utiliza el método move() para colocar los componentes en el escenario.

  4. Añada el siguiente código ActionScript para crear un detector de eventos y una función de controlador de eventos: 

    homeCh.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function clickHandler(event:MouseEvent):void { 
    underRb.enabled = event.target.selected; 
    overRb.enabled = event.target.selected;     
}

    Este código crea un controlador de eventos para el evento CLICK que activa los componentes RadioButton underRb y overRb si está seleccionado el componente CheckBox homeCh , y los desactiva si no está seleccionado homeCh. Para obtener más información, consulte la clase MouseEvent en la Referencia de ActionScript 3.0 para Flash Professional .

  5. Seleccione Control > Probar película.