Uso del componente RadioButton

El componente RadioButton permite obligar al usuario a seleccionar una opción de un conjunto de opciones. Este componente debe utilizarse en un grupo formado al menos por dos instancias de RadioButton. Sólo es posible seleccionar un miembro del grupo cada vez. Al seleccionar un botón de opción de un grupo, se anula la selección del botón de opción seleccionado en dicho grupo. Puede definir el parámetro groupName para indicar el grupo al que pertenece el botón de opción.

Un botón de opción es una parte fundamental de muchos formularios y aplicaciones en Internet. Puede utilizar los botones de opción siempre que necesite que un usuario seleccione un elemento de un grupo de opciones. Por ejemplo, podría emplear botones de opción en un formulario para preguntar qué tarjeta de crédito desea utilizar el cliente.

Interacción del usuario con el componente RadioButton

Los botones de opción pueden estar activados o desactivados. Un botón de opción en estado desactivado no recibe la entrada del ratón ni del teclado. Si el usuario hace clic en un grupo de componentes RadioButton o presiona el tabulador hasta su posición, la selección recae sólo en el botón de opción elegido. A continuación, el usuario puede utilizar las teclas siguientes para controlarlo.

Tecla

Descripción

Flecha arriba/flecha izquierda

La selección se desplaza al botón anterior del grupo de botones de opción.

Flecha abajo/flecha derecha

La selección se desplaza al botón siguiente del grupo de botones de opción.

Tabulador

Desplaza la selección desde el grupo de botones de opción hasta el componente siguiente.

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

La previsualización dinámica de cada instancia de RadioButton del escenario refleja los cambios de parámetros realizados durante la edición en el inspector de propiedades o en el inspector de componentes. Sin embargo, la previsualización dinámica no muestra la exclusión mutua de la selección. Si se define el parámetro seleccionado en true para dos botones de opción del mismo grupo, ambos botones aparecerán seleccionados, si bien sólo la última instancia creada estará seleccionada en tiempo de ejecución. Para más información, consulte Parámetros del componente RadioButton .

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

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

La accesibilidad de un componente sólo se activa una vez, sea cual sea su número de instancias. Para más información, consulte el Capítulo 18, "Creación de contenido accesible" de Uso de Flash .

Parámetros del componente RadioButton

A continuación se indican los parámetros de edición que se pueden definir para cada instancia del componente RadioButton en el inspector de propiedades o en el inspector de componentes: groupName, label, LabelPlacement, selected y value . 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 RadioButton en la Referencia de ActionScript 3.0 para Flash Professional .

Puede escribir código ActionScript para definir otras opciones para las instancias de RadioButton con los métodos, propiedades y eventos de la clase RadioButton.

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

El procedimiento siguiente explica cómo añadir componentes RadioButton a una aplicación durante la edición. En este ejemplo, los componentes RadioButton se utilizan para presentar una pregunta que requiera una respuesta de tipo "sí" o "no". Los datos de RadioButton se muestran en un componente TextArea.

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

  2. Arrastre dos componentes RadioButton desde el panel Componentes al escenario.

  3. Seleccione el primer botón de opción. En el inspector de propiedades, asígnele el nombre de instancia yesRb y el nombre de grupo rbGroup.

  4. Seleccione el segundo botón de opción. En el inspector de propiedades, asígnele el nombre de instancia noRb y el nombre de grupo rbGroup.

  5. Arrastre un componente TextArea del panel Componentes al escenario y asígnele el nombre de instancia aTa .

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

    yesRb.label = "Yes"; 
yesRb.value = "For"; 
noRb.label = "No"; 
noRb.value = "Against"; 
 
yesRb.move(50, 100); 
noRb.move(100, 100); 
aTa.move(50, 30); 
noRb.addEventListener(MouseEvent.CLICK, clickHandler); 
yesRb.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function clickHandler(event:MouseEvent):void { 
    aTa.text = event.target.value; 
}

  7. Seleccione Control > Probar película para ejecutar la aplicación.

Creación de un componente RadioButton con ActionScript

En este ejemplo se utiliza ActionScript para crear tres componentes RadioButton para los colores rojo, azul y verde, y se dibuja un cuadro gris. La propiedad value de cada RadioButton especifica el valor hexadecimal del color asociado al botón. Cuando el usuario hace clic en uno de los componentes RadioButton, la función clickHandler() llama a drawBox() y pasa el color de la propiedad value de RadioButton para aplicar color al cuadro.

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

  2. Arrastre el componente RadioButton 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.RadioButton; 
import fl.controls.RadioButtonGroup; 
 
var redRb:RadioButton = new RadioButton(); 
var blueRb:RadioButton = new RadioButton(); 
var greenRb:RadioButton = new RadioButton(); 
var rbGrp:RadioButtonGroup = new RadioButtonGroup("colorGrp"); 
 
var aBox:MovieClip = new MovieClip(); 
drawBox(aBox, 0xCCCCCC); 
 
addChild(redRb); 
addChild(blueRb); 
addChild(greenRb); 
addChild(aBox); 
 
redRb.label = "Red"; 
redRb.value = 0xFF0000; 
blueRb.label = "Blue"; 
blueRb.value = 0x0000FF; 
greenRb.label = "Green"; 
greenRb.value = 0x00FF00; 
redRb.group = blueRb.group = greenRb.group = rbGrp; 
redRb.move(100, 260); 
blueRb.move(150, 260); 
greenRb.move(200, 260); 
 
rbGrp.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function clickHandler(event:MouseEvent):void { 
    drawBox(aBox, event.target.selection.value); 
} 
 
function drawBox(box:MovieClip,color:uint):void { 
            box.graphics.beginFill(color, 1.0); 
            box.graphics.drawRect(125, 150, 100, 100); 
            box.graphics.endFill();         
}

  4. Seleccione Control > Probar película para ejecutar la aplicación.

    Para obtener más información, consulte la clase RadioButton en la Referencia de ActionScript 3.0 para Flash Professional .