Componente CheckBox
En esta entrada aprenderemos a usar el componente CheckBox que viene incluido en Flash. Este componente nos permite mostrar un conjunto de opciones, de la cuales el usuario podrá seleccionar una o varias de estas opciones.
Para este ejemplo usaremos Flash 8. El resultado final y el archivo para descargar los encontrarás al final de este post.
Los CheckBoxs pertenecen a la clase mx.controls.CheckBox de ActionScript.
Tutorial
1. Crea un nuevo documento de Flash de 300 x 250 pixeles.
2. A la única capa que existe ponle de nombre Forma. Coloca en el escenario un texto que diga "¿Desde qué lugares te conectas a Internet?" (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 CheckBox.
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.
5. Selecciona el primer checkbox, asígnale como nombre de instancia check1 y ponle las siguientes propiedades:
- label: Hogar (El texto que quieres que aparezca al lado del checkbox)
- labelPlacement: right (Si quieres que el texto aparezca del lado izquierdo, derecho, arriba o abajo del checkbox)
- selected: false (Si queremos que esa opción esté seleccionada por default)
6. Haz lo mismo para los otros cuatro checkboxes, solamente cámbiales el nombre de instancia por check2, check3, etc. Ahora ponles de label Oficina, Escuela, Sitio Público y Café Internet, respectivamente. Tu documento debe quedar similar a la siguiente imagen:
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:
-
for(var i = 1; i <6; i++) {
-
this["check" + i].setStyle("color", 0x990000);
-
this["check" + i].setStyle("fontWeight", "bold");
-
this["check" + i].setStyle("marginLeft", 2);
-
}
En el código anterior creamos un ciclo for para cambiar el estilo de cada uno de los 5 checkbox. En la primera línea del código dentro del ciclo for, le estamos asignado un color rojo al texto de los checkboxes. 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 checkbox.
Ahora creamos la función buscaSeleccionados, la cual se encargará de recorrer por medio de un ciclo for cada uno de los checkboxes y así ver cuáles están seleccionados (Cuando un checkbox tiene en su cuadro una palomita quiere decir que está seleccionado). Para saber si un checkbox está seleccionado basta con usar su propiedad selected, el cual nos regresará true si está seleccionado y false en caso contrario. Dentro de este ciclo, las opciones que estén seleccionadas las almacenaremos dentro de un arreglo temporal. Este es el código de la función:
-
function buscaSeleccionados():Array {
-
var temp = new Array();
-
for(var i = 1; i <6; i++) {
-
if(this["check" + i].selected) {
-
temp.push(this["check" + i].label);
-
}
-
}
-
return temp;
-
}
Haremos la llamada a la función buscaSeleccionados dentro del código del botón aceptar. El código de dicho botón es:
-
aceptar_btn.onRelease = function() {
-
// Creamos el arreglo respuestas con el arreglo que nos regresa la función buscaSeleccionados
-
var respuestas:Array = buscaSeleccionados();
-
/* Verificamos que la longitud del arreglo sea mayor que cero. Si sí es mayor que cero,
-
entonces el usuario sí seleccionó por lo menos una opción */
-
if(respuestas.length> 0) // Quiere decir que por lo menos el usuario seleccionó una opción
-
Alert.show("Total seleccionados: " + respuestas.length, "Aviso"); // Mostramos la cantidad de opciones seleccionadas por el usuario
-
else // Quiere decir que el usuario no seleccionó opción alguna
-
Alert.show("Por favor seleccione una opción", "Aviso"); // Mostramos un mensaje de alerta pidiéndole al usuario que seleccione una opción
-
}
El código completo quedaría de la siguiente forma:
-
// Primero importamos la clase Alert para poder mostrar los mensajes de alerta
-
import mx.controls.Alert;
-
-
for(var i = 1; i <6; i++) {
-
this["check" + i].setStyle("color", 0x990000);
-
this["check" + i].setStyle("fontWeight", "bold");
-
this["check" + i].setStyle("marginLeft", 2);
-
}
-
-
aceptar_btn.onRelease = function() {
-
// Creamos el arreglo respuestas con el arreglo que nos regresa la función buscaSeleccionados
-
var respuestas:Array = buscaSeleccionados();
-
/* Verificamos que la longitud del arreglo sea mayor que cero. Si sí es mayor que cero,
-
entonces el usuario sí seleccionó por lo menos una opción */
-
if(respuestas.length> 0) // Quiere decir que por lo menos el usuario seleccionó una opción
-
Alert.show("Total seleccionados: " + respuestas.length, "Aviso"); // Mostramos la cantidad de opciones seleccionadas por el usuario
-
else // Quiere decir que el usuario no seleccionó opción alguna
-
Alert.show("Por favor seleccione una opción", "Aviso"); // Mostramos un mensaje de alerta pidiéndole al usuario que seleccione una opción
-
}
-
-
function buscaSeleccionados():Array {
-
var temp = new Array();
-
for(var i = 1; i <6; i++) {
-
if(this["check" + i].selected) {
-
temp.push(this["check" + i].label);
-
}
-
}
-
return temp;
-
}
En este tutorial vimos cómo validar que un usuario seleccione por lo menos una opción del conjunto de checkboxes. Recuerda que este turorial y el anterior de los botones de radio, nos servirá como introducción para cuando veamos cómo enviar un formulario de contacto por mail usando Flash y PHP.
No olvides bajar los archivos y ver el archivo de ejemplo que está a continuación.
 |
Si te gustó esta entrada anímate a escribir un comentario o suscribirte al feed y obtener los artículos futuros en tu lector de feeds.
[...] Para fines de este tutorial, se pondrán en el formulario algunos de los componentes que ya vimos en los post pasados. Estos componentes son ComboBox, RadioButton y CheckBox. [...]