|
Flash, PHP, XML y MySQL. Usar el componente Tree para visualizar datos.
por Julio - redribera
1 Capítulo 1.
1.1 Introducción.
1.2 Crear el fichero Flash.
1 Capítulo 1.
1.1 Introducción.
Vamos a ver como generar un árbol en Flash con datos obtenidos a partir de una base de datos MySQL, a partir
de generar un documento XML mediante PHP. El documento obtenido, será el utilizado para alimentar el contenido de un
componente árbol de Flash; el conocido como TreeComponent.
Bajo estas lineas encontrareís el ejemplo de este tutorial funcionando. Es necesario que tengaís instalado Flash Player para poder
visualizarlo.
Se necesita Flash Player 6 o superior para ver el archivo.
El componente Tree de Flash (solo para la versión profesional), es un componente gráfico con un aspecto
visual muy interesante para utilizarlo en nuetros desarrollos Flash.
La cuestión es como suministramos los datos de este componente.
El componente Tree de Flash, obtiene los datos que visualiza en formato XML. En cierto modo
esto es una gran ventaja, que le aporta una extrema sencillez, pero por otro lado nos obliga a formatear
nuestros datos en XML. Podriamos disponer de los datos a mostrar en formato XML, pero también es cierto que estariamos
practicamente obligados a realizarles una transformación XSL, para que el formato fuera como el que acepta el componente.
En muchos casos los datos que pretendemos mostrar, estarán ubicados en una base de datos (posiblemente como registros de tablas),
de forma que nos puede interesar dinamicamente ubicar estos datos en un componente visual de las características del Tree.
Ese es el objetivo de este tutorial, explicar como a partir de datos contenidos en una base de datos (concretamente MySQL), podemos
consultarlos usando para ello php, y devolverlos formateados en XML de una forma adecuada para utilizarlos con el componente Tree.
No entraremos en los detalles tanto de visualización como de las formas de establecer datos en un componente Tree, no obstante
bajo estas lineas, encontrareís un enlace a la página de Adobe donde se explica de forma clara (aunque en Inglés), como cargar datos
en un componente Tree (explicado para Flash MX 2004).
Using the Tree component (Flash Professional only)
Si seguisteis el enlace anterior, os dareís cuenta, que el formato de XML que acepta un componente Tree, es el siguiente:
<node>
<node label="Mail">
<node label="INBOX"/>
<node label="Personal Folder">
<node label="Business" isBranch="true" />
<node label="Demo" isBranch="true" />
<node label="Personal" isBranch="true" />
<node label="Saved Mail" isBranch="true" />
<node label="bar" isBranch="true" />
</node>
<node label="Sent" isBranch="true" />
<node label="Trash"/>
</node>
</node>
Puesto que con este esquema XML, podemos construir nuestro contenido para el Tree, nuestro
objetivo, va a ser conseguir un fichero con este formato en XML, desde nuestras tablas en MySQL.
Para tal objetivo utilizaremos php.
Vamos a realizar un ejemplo que consulta dos tablas, una con categorias y otra con enlaces dentro de esas categorías.
Es un esquema muy común en elementos categorizados como un directorio de webs.
Las dos tablas se relacionan en una relacion 1 a muchos, es decir un enlace solo puede estar en una categoría.
Aquí estan las SQL de las tablas que utilizaremos en MySQL para que lo podaís probar igual que en el ejemplo.
Hay mas campos de los que utilizaremos, pero nos servirá igual, y de hecho lo podeís adaptar con vuestros propios datos.
La tabla enlaces:
CREATE TABLE `secciones` (
`id` int(11) NOT NULL auto_increment,
`nombre` varchar(30) NOT NULL default '',
`padre` int(11) default NULL,
`lft` int(11) NOT NULL default '0',
`rgt` int(11) NOT NULL default '0',
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;
y la tabla secciones.
CREATE TABLE `enlaces` (
`id` int(11) NOT NULL auto_increment,
`idsolicitud` int(11) default NULL,
`fecha` date NOT NULL default '0000-00-00',
`titulo` varchar(255) NOT NULL default '',
`link` varchar(255) NOT NULL default '',
`comment` text,
`seccionid` int(11) NOT NULL default '0',
`clave1` varchar(128) default NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=154 ;
Estas tablas se pueden rellenar con las siguientes intruscciones INSERT de MySQL. Bajo estas lineas están los enlaces de datos
que se pueden introducir directamente con phpMyAdmin y MySQLQueryBrowser.
Listado de secciones en SQL.
Lista de enlaces.
Una vez disponemos de los datos en nuestra db MySQL, vamos a proceder a generar el XML consultando las tablas mediante un script PHP.
Bajo estas lineas encontrareís el código php para obtener el XML a partir de una consulta SQL sobre las tablas generadas.
Guardad este script con el nombre treeXML1.php y
comentemos el script:
Por supuesto desde las lineas 5 a 8, los valores que debereís introducir, son los de vuestra propia conexión a MySQL, sino, el script
no funcionará.
De las líneas 15 a 20, están las excepciones producidas por fallos de conexión, etc. Las cuales no están tratadas por el script. Es decir
no controlamos las excepciones por no ser necesario para la demostración de este tutorial. Bueno no es del todo así. Las excepciones si que las
tratamos, pero devolviendo un código XML no valido para nuestro árbol. Lo he marcado adrede con las etiquetas status para que veaís la diferencia
ya que se pdría etiquetar con node y los errores se imprimirían como una estructura mas del árbol.
La línea 22, es la que realiza la consulta SQL a la base de datos, y podeís observar que lo que hace es recuperar dos valores, el nombre de la sección
y los hipervinculos asociados a esta sección. No es la cuestión la SQL, que puede variar a nuestro gusto.
Finalmente en la línea 28 se llama a la función getResults, la cual como podeís ver imprime los datos resultantes de nuestra SQL con el formato
adecuado para nuestro árbol.
Tanto la función getResults, como las SQL utilizadas, pueden variar a nuestro antojo, lo importante, es el concepto de utilizar php para consultar
nuestra base de datos y devolver un fichero en formato XML válido para nuestro componente Tree de Flash.
A estas alturas os preguntareís que hacemos con una página que imprime un XML. Lo veremos ahora, como va a utilizar nuestro fichero Flash, el script que hemos
creado para cargar un XML en nuestro árbol.
1.2 Crear el fichero Flash.
Vamos a empezar a montar nuestro fichero Flash.
Para ello abrimos Flash
1 Selecciona Archivo -> Nuevo -> Nuevo Documento de Flash
2 Guarda el fichero Archivo -> Guardar Como -> con el nombre myTree.fla
3 Cambia el tamaño del lienzo a 350x200
4 Desde la ventana de Componentes (si no esta activa se puede activar desde el menú ventana) haz un doble
clic en el componente Tree.
5 En las propiedades del componente nombra la instancia Tree con el nombre myTree
6 Cambiale el Ancho y alto al componente 320x200 (ajustado al lienzo) con x=0 e y=0
7 Despliega el panel acciones situado en el Fotograma 1 y pega el código que mostramos a continuación.
8 Cambia el texto entrecomillado por los valores de tu dominio (donde tienes alojado el fichero fla o el swf).
9 Por último selecciona Control -> Probar película
Si todo ha ido bien, obtendrás unos resultados como los mostrados al principio de este tutorial.
El uso que deís de estos resultados depende de vosotros.
Fijaos como en el código ActionScript hemos creado un evento para que cuando presionemos en un hipervinculo, se abra
una nueva ventana del navegador que nos lleve directamente a esa URL.
Por último y no por ello menos importante, comentaros que en el script php que hemos utilizado, no hemos realizado comprobaciones
de ningún tipo que nos validen que los datos que obtenemos de la base de datos generan un XML bien formado. Esto lo debeís tener
en cuenta por los posibles errores que se pudieran derivar en función de los datos que pretendaís mostrar en el árbol.
Por ejemplo los caracteres especiales como <,o & en los registros de la base de datos, producirán errores al generar el
documento XML, por ello sería conveniente ampliar el script php para controlar estas excepciones.
Si teneís alguna sugerencia a este tutorial, no dudeís de postear algo de feedback a este tutorial desde Añadir comentarios
en el menú a la izquierda de esta página.
| 
