Comunidad de diseño web y desarrollo en internet online

Tutorial de Databinding en Flash

Resulta que por estos días he estado desarrollando una aplicación en la que necesito cargar en un combobox unos datos de una base estática, no tengo la posibilidad de utilizar php ni ningún lenguaje parecido pues no es una aplicación para Internet así que decidí desempolvar mis conocimientos de XML, antes de sentarme me dije ¡EL trabajito que me espera!, ya saben todo eso de childNode y FirstChild y que si no esta en mayúsculas, que ignoreWhite que onLoad y etc. Etc. Etc.

Recordé que por ahí hay un componente que se llama “XML conector” y me dije, eso debe ahorrarme trabajo y luego encontré los DataBindings y si que se me alegró el dia :o) y vaya que me alivianó la carga.

Si traducimos la palabra DataBinding es algo así como relacionador de datos y resulta que los componentes que vienen con flashMX 2004 están diseñados para que podamos amarrar los datos entre componentes de una manera muy sencilla.

Manos a la obra, la idea principal es que debo mostrar los datos de un XML en un combo pero esos datos están relacionados con otros y de igual manera debo mostrarlos en otro combo y que al dar clic en alguna opción del segundo combo se muestren en unas cajas de texto que tengo disponibles, esta tabla estará bien como ejemplo para mostrar la estructura de datos que debo cargar en Flash.

 

Sistemas

Mantenimiento

Contabilidad

Ruben

Cargo: supervisor

Tel: 555-69-65

Ciudad: Neiva

Patricia

Cargo: supervisor

Tel: 328-96-47

Ciudad: Neiva

Paulo

Cargo: supervisor

Tel: 348-96-45

Ciudad: Neiva

Judy

Cargo: programador

Tel: 555-63-25

Ciudad: Tello

Julio

Cargo: tecnico

Tel: 33-65-987

Ciudad: Cali

Sergio

Cargo: auxiliar

Tel: 124-8977

Ciudad: Bogotá

Ivon

Cargo: programador

Tel: 555-21-48

Ciudad: Neiva

Martha

Cargo: tecnico

Tel: 333-68-79

Ciudad: Bogotá

Pedro

Cargo: contador

Tel: 321-65-98

Ciudad: Buga

 

El archivo con el XML esta aquí (empresa.xml)

Y para hacer los XML recomiendo mucho el XML Spy su uso es bastante intuitivo y además la forma de mostrar la estructura de este facilita su entendimiento, o si no miren este screenshot del programa.

Ahora vamos a la parte del Flash.

En el stage vamos a poner 1 XMLConnector, 2 comboBox, y 3 textBox, a cada una le vamos a colocar un nombre de instancia que se refiera a lo que va a cargar para no enredarnos (esto es importante).

Ahora seleccionamos el XMLConnector y en el panel de propiedades en donde dice parámetros y la parte de URL escribimos la dirección de nuestro XML en este caso “empresa.xml”

Abrimos el inspector de componentes, elegimos la pestaña de Schema, seleccionamos la opción de "results:xml" que es de solo lectura, en la parte de arriba hay una flecha hacia abajo la oprimimos y en el dialogo que aparece escogemos el xml que preparamos con anterioridad y podemos ver como carga la estructura de este.

Ahora vamos con el combo de dependencias, abrimos el inspector de componentes, elegimos la pestaña bindings y damos clic en el boton con el más, elegimos la opción de dataProvider que es de tipo Array, podemos observar como a quedado en el inspector de de componentes nuestro “amarre” pero para relacionarlo con el XMLConnector damos clic en “bound to”

Aparecerá un dialogo que nos muestra los componente a los que queremos amarrar la propiedad de nuestro combo, en este caso es a las dependencias que carga nuestro XMLConnecotor

Lo mismo vamos ha hacer con el combo que carga a los nombres de cada dependencia pero en este caso en el “bound to” vamos a elegir los empleados de cada dependencia

Obviamente el problema esta en que los nombres de los empleados cambian dependiendo de la dependencia en la que están pero esto también esta previsto, si observamos con el inspector de componentes nuestro XMLConnector podemos ver que en el amarre esta escrito algo así

results.empresa.dependencia.[n].empleado

La respuesta esta en saber configurar esa [n], la podemos hacer estática pero en este caso no nos sirve, o la podemos variar dependiendo de la opción que sea elegida en el combo de dependencias y como ya se podrán imaginar esta también se hace con los dataBindings.

Damos clic en “index for ‘dependencia’” y aparece un dialogo de “bound to” predeterminado esta el valor constante pero nosotros queremos que sea el “selectedIndex” del comboBox de las dependencias.

Por ultimo vamos a amarrar las cajas de texto a los comboBoxes, aquí hay dos formas de hacerlo, una como ya se la habrán imaginado es amarrarlas al XMLConnector y variar las [n] con el selectedIndex de cada combo.

La segunda sería así, elegimos el comboBox que carga los nombres, vamos al inspector de componentes y en la pestaña de schemas y creamos las nuevas propiedad, esto se logra dando clic en el boton que tiene un codo y un + cuando este seleccionado la opción de selectedIndex.

Luego solo nos falta amarrar la caja de texto con estas nuevas propiedades

Por ultimo nos falta la programación, o que creían que se hiba a librar tan fácilmente del AS2 ¡JaJaaJaaJaa! (risa macabra)

Falta la linea para que nuestro XMLConnector cargue el xml, en el frame1 ponemos esto.

Aqui les dejo para que miren como se comporta cada solución y me parece que la primera es la más apropiada.

 

Solución1
Solución 2

Y listo!! creo que eso será de ayuda para que comiencen a experimentar con esta estupenda forma de desarrollar aplicaciones cada vez más grandes y complejas en menos tiempo, y si bien es cierto que en este ejemplo utilicé una base de datos estática también se pueden utilizar bases de datos controladas con MySQL y php, piensen en todas las posibilidades!!!

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate