Componente RadioButton

Publicado por Carla Macías

7 Julio, 2008

Flash Después de muchos días sin escribir debido a la gran cantidad de trabajo acumulado, estoy de vuelta con una entrada acerca del uso del componente RadioButton (botón de radio). En estos días estaré colocando varias entradas sobre los componentes de Interfaz del Usuario (User Interface); que servirán como preámbulo para el apunte que haré sobre el envío de formularios de contacto con Flash y PHP.

Para este ejemplo usaremos Flash 8. El resultado final y el archivo para descargar los encontrarás al final de este post.

El uso del componente RadioButton permite que el usuario seleccione una y solamente una opción dentro de un grupo de opciones. Por ejemplo, podemos usar este componente para preguntarle al usuario su sexo, preguntas donde deben seleccionar un Sí o No, etc. Cabe resaltar que no necesariamente tienen que ser preguntas con sólo dos opciones; simplemente deben de existir dos o más de éstas.
Los botones de radio pertenecen a la clase mx.controls.RadioButton de ActionScript.

Tutorial

1. Crea un nuevo documento de Flash de 250 x 200 pixeles. Ponle como color de fondo el #003366.

2. A la única capa que existe ponle de nombre Forma. Coloca en el escenario un texto que diga "¿Qué navegador usas?" (sin las comillas).

3. Abre el Panel Componentes (Ctrl. + F7 o bien en el menú Window -> Components). Dentro de este panel encontrarás una sección llamada User Interface (Interfaz de usuario). Abre esa sección y selecciona el componente RadioButton.

4. Arrastra al escenario cinco de estos componentes y colócalos uno debajo de otro (recuerda que puedes usar las opciones del panel Align - Alinear - Ctrl. + K o bien Window -> Align). Además, arrastra al escenario una instancia del componente Button. Tu documento debe quedar similar a la siguiente imagen:

5. Selecciona el primer botón de radio, asígnale como nombre de instancia opcion1 y ponle las siguientes propiedades:

data: 1 (Es el valor que obtendremos cuando esta opción es seleccionada)
groupName: Navegadores (Este nombre de grupo le permite saber a Flash qué opciones pertenecen a un mismo grupo y así permitir que sólo se seleccione una opción)
label: Firefox (El texto que quieres que aparezca al lado del botón de radio)
labelPlacement: right (Si quieres que el texto aparezca del lado izquierdo, derecho, arriba o abajo del botón de radio)
selected: false (Si queremos que esa opción esté seleccionada por default)

6. Haz lo mismo para los otros cuatro botones de radio, solamente cámbiales el nombre de instancia por opcion2, opcion3, etc. Déjales el mismo nombre de grupo (Navegadores) pero ahora ponles en data 2, 3, 4 y 5, y en label Internet Explorer, Netscape y Otros, respectivamente.

7. Al botón cámbiale su propiedad label por Aceptar. Asígnale el nombre de instancia aceptar_btn.

8. Crea una nueva capa o layer y ponle de nombre Acciones. Coloca el siguiente código dentro de esta capa:

Texto Plano

Actionscript:

for(var i = 1; i <5; i++) {
this["opcion" + i].setStyle("color", 0xCCCCCC);
this["opcion" + i].setStyle("fontWeight", "bold");
this["opcion" + i].setStyle("marginLeft", 2);
}

En el código anterior creamos un ciclo for para cambiar el estilo de cada uno de los 5 botones de radio. En la primera línea del código dentro del ciclo for, le estamos asignado un color gris al texto de los botones de radio. En la segunda línea le ponemos negritas al texto; y en la tercera línea establecemos un margen izquierdo de dos pixeles al texto del botón de radio.

Ahora veremos cómo podemos saber si el usuario ha seleccionado o no una opción después de haber hecho click al botón de aceptar. Para obtener el dato de la opción que ha sido seleccionada debemos usar la siguiente sentencia:

Texto Plano

Actionscript:

Navegadores.selection.label

Donde Navegadores es el nombre de grupo que le asignamos a los botones. La propiedad selection nos permite obtener la opción que fue seleccionada; mientras que la propiedad label nos regresa la etiqueta o texto del botón de radio seleccionado (en este caso también podemos usar la propiedad data). Dicho lo anterior podemos determinar si hay un elemento seleccionado verificando que la etiqueta (label) o el dato (data) no esté indefinido:

Texto Plano

Actionscript:

if(Navegadores.selection.data == undefined) {
// Mostramos un mensaje para decirle al usuario que debe escoger una opción
}

El código completo quedaría de la siguiente forma:

Texto Plano

Actionscript:

// Primero importamos la clase Alert para poder mostrar los mensajes de alerta
import mx.controls.Alert;
// Creamos un ciclo para cambiar el estilo de cada uno de los botones de radio
for(var i = 1; i <5; i++) {
this["opcion" + i].setStyle("color", 0xCCCCCC);
this["opcion" + i].setStyle("fontWeight", "bold");
this["opcion" + i].setStyle("marginLeft", 2);
}
// Establecemos el código que se ejecutará cuando se haga click en el botón Aceptar
aceptar_btn.onRelease = function() {
// Verificamos si hay alguna opción seleccionada
if(Navegadores.selection.data == undefined) {
// No hay opción seleccionada, por lo tanto mostramos un mensaje de alerta.
// IMPORTANTE: Debes poner una instancia del componente Alert en tu librería
Alert.show("Por favor seleccione una opción", "Aviso");
}
else {
// Quiere decir que el usuario sí selecionó una opción
// En este caso mostramos la información de la opción seleccionada por el usuario
Alert.show("Navegador: " + Navegadores.selection.label + "\nDato: " + Navegadores.selection.data, "Aviso");
}
}

En este tutorial hemos visto cómo validar que un usuario seleccione una opción del grupo de botones de radio. De esta forma, podremos enviar la información completa del usuario cuando esté llenando un formulario de contacto, o bien cuando esté contestando una encuesta.
No olvides bajar los archivos y ver el archivo de ejemplo que está a continuación.

Este archivo requiere Flash Player 8