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.
Comentarios
Hola!
Me gustaria que trataran el siguiente tema de formularios: Uno muy extenso que toma varias solapas, alojadas ellas en diferentes frames y un unico boton de envio de variables. Tuve dificultad para recibir checkboxes, además de perder los valores si antes del envio iba y venia confirmando datos seleccionados en aquellos.
Parece que una solucion elegante seria alojar las variables en un Accordion, pero esto mucho mas complejo para mi, que entiendo poco de codigo AS.
Gracias por su ayuda e ilustración!
Jorge Argentina.
Hola Jorge,
Va a estar difícil que haga un tutorial de formularios de acuerdo a tus necesidades (solapas, diferentes frames, etc.).
Te recomiendo este tutorial sobre envío de formularios por medio de PHP, en este tutorial muestro cómo enviar por correo las opciones seleccionadas por el usuario (Combobox, Checkbox, RadioButton, InputText y TextArea).
No entendí la parte de "perder los valores si antes del envío iba y venía confirmando datos seleccionados", a lo mejor tu problema es la forma en cómo estructuraste tu archivo de Flash. Si pudieras subirlo a un servidor para revisarlo no estaría mal.
Saludos.
tengo un mapa como fondo y con varios CheckBox me gustaria que mostrara una determinada linea limitrofe segun elija el CheckBox, como lo hago?
hola Carla, muy bueno tu tutorial, tengo una duda respecto a como colocar varias opciones de componente CheckBox, por ejemplo... necesito hacer 3 datos y que cada uno de ellos tenga diferentes opciones. Espero me puedas ayudar y comprendas mi duda.
Gracias!!!
Hola Florencia,
Solamente tienes que repetir el código para cada CheckBox.
Supongamos que el primer CheckBox tiene 3 opciones, el segundo cinco y el terecero cuatro...
Podrías ponerles de nombre de instancia:
- opcion11, opcion12, opcion13
- opcion21, opcion22, opcion23, opcion24, opcion25
- opcion31, opcion32, opcion33, opcion34
-
aceptar_btn.onRelease = function() {
-
if(!haySeleccionados("1", 3))
-
{
-
Alert.show("Por favor seleccione una opción de la pregunta 1", "Aviso");
-
}
-
if(!haySeleccionados("2", 5))
-
{
-
Alert.show("Por favor seleccione una opción de la pregunta 2", "Aviso");
-
}
-
if(!haySeleccionados("3", 4))
-
{
-
Alert.show("Por favor seleccione una opción de la pregunta 3", "Aviso");
-
}
-
}
-
-
function haySeleccionados(opc:String, total:Number):Boolean {
-
var hs:Boolean = false;
-
for(var i = 1; i <total; i++) {
-
if(this["opcion" + opc + i].selected) {
-
hs = true;
-
break;
-
}
-
}
-
return hs;
-
}
Saludos.
hola carla, disculpa que te moleste, pero no se como hacer el código php para los checkBox, si podes pasarme el código te lo voy a agradecer...
saludos y gracias!!!
hola oye pues aprendi mucho con este ejemplo solo que no se si puedes ayudarme necesito que las casillas seleccionadas se envien a un mail, es decir quiero seleccionar hogar y escuela y que esos nombres se vayan a un mail con el ejemplo hiciste en codigo php porfa si puedes contactarme por mail te lo agradeceria me super urge gracias
Hola Carlos,
Para eso está el tutorial de Enviar Formulario de Contacto. Ahí viene cómo mandar los datos de un checkbox, radiobutton, combobox, etc.
Saludos.
Escribe un comentario
Nota: Es posible que tu comentario requiera autorización, si es así tu comentario será publicado a la brevedad. Gracias.
[...] 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. [...]