Para comenzar, les cuento que armaremos una base de datos, en la cual tenemos tanto Categorías como Remeras y además, las Remeras pueden pertenecer a una o más Categorías y las Categorías pueden tener una o más Remeras, por lo tanto, nuestra base de datos llamada remeras, queda de la siguiente forma (no tengo mucho ingenio con los nombres
)Código MySQL :
SET FOREIGN_KEY_CHECKS=0; CREATE DATABASE `remeras` CHARACTER SET 'latin1' COLLATE 'latin1_swedish_ci'; USE `remeras`; # # Structure for the `categoria` table : # CREATE TABLE `categoria` ( `idCategoria` int(11) NOT NULL AUTO_INCREMENT, `descCategoria` varchar(50) NOT NULL, PRIMARY KEY (`idCategoria`) ) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8; # # Structure for the `remera` table : # CREATE TABLE `remera` ( `idRemera` int(11) NOT NULL, `nombRemera` varchar(50) NOT NULL, `tamanio_x` float(9,3) DEFAULT NULL, `tamanio_y` float(9,3) DEFAULT NULL, `fechaPrecio` date NOT NULL, PRIMARY KEY (`idRemera`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; # # Structure for the `categ_remera` table : # CREATE TABLE `categ_remera` ( `idCategoria` int(11) NOT NULL, `idRemera` int(11) NOT NULL, PRIMARY KEY (`idCategoria`,`idRemera`), KEY `idCategoria` (`idCategoria`), KEY `idRemera` (`idRemera`), CONSTRAINT `categ_remera_categ` FOREIGN KEY (`idCategoria`) REFERENCES `categoria` (`idCategoria`) ON UPDATE CASCADE, CONSTRAINT `categ_remera_remera` FOREIGN KEY (`idRemera`) REFERENCES `remera` (`idRemera`) ON UPDATE CASCADE ) ENGINE=InnoDB DEFAULT CHARSET=utf8; # # Data for the `categoria` table (LIMIT 0,500) # INSERT INTO `categoria` (`idCategoria`, `descCategoria`) VALUES (1,'Adultas'), (2,'Alcohol'), (3,'Computadora&Juegos'), (4,'Dance'), (5,'Deportes'), (6,'Empresarial'), (7,'Fierros'), (8,'Frases'), (9,'Futbol'); COMMIT; # # Data for the `remera` table (LIMIT 0,500) # INSERT INTO `remera` (`idRemera`, `nombRemera`, `tamanio_x`, `tamanio_y`) VALUES (1,'ad001_69',400,366), (2,'ad002_69_b',400,366), (3,'ad003_A',400,366), (4,'al001_absolut',400,366), (5,'al002_ansmann_energy',400,366), (6,'co001_1up',400,366), (7,'co002_Half_Life',400,366), (8,'co003_atari',400,366); COMMIT; # # Data for the `categ_remera` table (LIMIT 0,500) # INSERT INTO `categ_remera` (`idCategoria`, `idRemera`) VALUES (1,1), (1,2), (1,3), (2,4), (2,5), (3,6), (3,7), (3,8); COMMIT; # SQL Manager 2005 Lite for MySQL 3.7.0.1# ---------------------------------------# Host : localhost# Port : 3306# Database : remeras SET FOREIGN_KEY_CHECKS=0; CREATE DATABASE `remeras` CHARACTER SET 'latin1' COLLATE 'latin1_swedish_ci'; USE `remeras`; ## Structure for the `categoria` table : # CREATE TABLE `categoria` ( `idCategoria` int(11) NOT NULL AUTO_INCREMENT, `descCategoria` varchar(50) NOT NULL, PRIMARY KEY (`idCategoria`)) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8; ## Structure for the `remera` table : # CREATE TABLE `remera` ( `idRemera` int(11) NOT NULL, `nombRemera` varchar(50) NOT NULL, `tamanio_x` float(9,3) DEFAULT NULL, `tamanio_y` float(9,3) DEFAULT NULL, `fechaPrecio` date NOT NULL, PRIMARY KEY (`idRemera`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; ## Structure for the `categ_remera` table : # CREATE TABLE `categ_remera` ( `idCategoria` int(11) NOT NULL, `idRemera` int(11) NOT NULL, PRIMARY KEY (`idCategoria`,`idRemera`), KEY `idCategoria` (`idCategoria`), KEY `idRemera` (`idRemera`), CONSTRAINT `categ_remera_categ` FOREIGN KEY (`idCategoria`) REFERENCES `categoria` (`idCategoria`) ON UPDATE CASCADE, CONSTRAINT `categ_remera_remera` FOREIGN KEY (`idRemera`) REFERENCES `remera` (`idRemera`) ON UPDATE CASCADE) ENGINE=InnoDB DEFAULT CHARSET=utf8; ## Data for the `categoria` table (LIMIT 0,500)# INSERT INTO `categoria` (`idCategoria`, `descCategoria`) VALUES (1,'Adultas'), (2,'Alcohol'), (3,'Computadora&Juegos'), (4,'Dance'), (5,'Deportes'), (6,'Empresarial'), (7,'Fierros'), (8,'Frases'), (9,'Futbol'); COMMIT; ## Data for the `remera` table (LIMIT 0,500)# INSERT INTO `remera` (`idRemera`, `nombRemera`, `tamanio_x`, `tamanio_y`) VALUES (1,'ad001_69',400,366), (2,'ad002_69_b',400,366), (3,'ad003_A',400,366), (4,'al001_absolut',400,366), (5,'al002_ansmann_energy',400,366), (6,'co001_1up',400,366), (7,'co002_Half_Life',400,366), (8,'co003_atari',400,366); COMMIT; ## Data for the `categ_remera` table (LIMIT 0,500)# INSERT INTO `categ_remera` (`idCategoria`, `idRemera`) VALUES (1,1), (1,2), (1,3), (2,4), (2,5), (3,6), (3,7), (3,8); COMMIT;
Para resumirlo, definimos 9 Categorías, y le cargamos 3 Remeras a la Categoría Adultos, 2 Remeras a la Categoría Alcohol y 3 Remeras a la Categoría Computadora&Juego.
Estos datos son suficientes para lo que vamos a realizar hoy, aunque como ven, existen muchos más que han sido cargados, pero que no lo usaremos en este momento.
Una vez creada la base de datos, debemos crear la carpeta, donde contendremos, tanto el archivo .fla, como .as y la carpeta con las imagenes a mostrar.
En mi caso tengo una carpeta llamada: amfphp+actionscript3+mysql, donde dentro tengo un un archivo ejemplobd.fla y su correspondiente .swf. Además tengo, otra carpeta llamada remeras que contiene todas las imagenes guardadas, finalmente se encuentra seleccion.as, que es la clase que usaremos para realizar el tutorial. Sin embargo, falta algo más, y es el archivo .php que me permitirá la comunicación directa con la Base de Datos.
Entonces, para comenzar nuestra aplicación, debemos comenzar construyendo nuestro archivo .php. Este archivo tiene 2 consultas en una misma clase.
Comenzamos a construir el archivo, que llamaremos categoriaRemera.php, por lo que la clase también deberá llamarse categoriaRemera. Lo primero que haremos será definir las variables y funciones que me permitan conectarme a la base de datos y trabajar con los datos que allí se encuntran:
Código PHP :
<?php
class categoriaRemera //Nombre de la Clase
{
/**
Varibles para la conecxion a la BD
*/
var $sqlstring = "";
var $server = "localhost"; //servidor
var $user = "root"; //usuario
var $pass = ""; //contraseña
var $database = "remeras"; //base de datos
/**
Varibles a utilizar para llevar el control de la transacción
*/
var $db = 0;
var $rs = 0;
var $row = 0;
var $recordcount = 0;
var $EOF = true;
/**
Funciones de trabajo estandar
*/
function _conectarBaseDatos()
{
$this->db = mysql_connect($this->server,$this->user,$this->pass);
mysql_select_db($this->database,$this->db) or die(mysql_error());
}
function _ejecutarQuery($strSql)
{
$this->sqlstring = $strSql;
$this->_exec_command();
return $this->lastid;
}
function _exec_command()
{
if ($this->db && $this->sqlstring!="")
{
$this->rs = mysql_query($this->sqlstring,$this->db);
if ($this->rs)
{
$this->EOF = true;
$this->recordcount = mysql_affected_rows();
$this->lastid = mysql_insert_id();
}
else
{
$this->recordcount = 0;
$this->EOF = true;
}
}
else
{
$this->recordcount = 0;
$this->EOF = true;
}
}
function _destruir()
{
if($this->db)
mysql_close($this->db);
}
/**
* Este método sirve para poder recuperar las categorias
* @returns Regresa el arreglo de todas las categorias.
*/
function obtenerCategorias()
{
$this->_conectarBaseDatos();
$sql = "select *
from categoria c";
$result = mysql_query($sql);
$cant = 0;
$this->_destruir();
return($result);
}
}
?>
Hasta el momento, no hemos implementado nada. Como esta clase.php existen muchas formas de conectarse, y cualquiera sirve, por lo que no deben usar exactamente las que les muestro aquí.
Una vez que verificamos que es correcta la conexción a nuestra base de datos, deberemos definir las funciones propias que permitirán recuperar información de la base de datos, y mostrarla en nuestro archivo de flash.
En este caso, definiremos 2 consultas.
La primera, me permitirá obtener todos las categorías guardadas en la base de datos. Estas categorías llenarán un componente ComboBox de Flash que luego usaremos para recuperar las remeras.
La segunda consulta, me permite recuperar el identificador y nombre de todas las remeras que pertenecen a un categoría, por eso, si observamos, tenemos que enviarle un parámentro en la función que es el identificador de categoría seleccionada.
La variable $sql, es la encargada de contener la consulta.
Viendolo en el archivo queda:
Código PHP :
<?php
/**
* Este método sirve para poder recuperar las categorias
* @returns Regresa el arreglo de todas las categorias.
*/
function obtenerCategorias()
{
$this->_conectarBaseDatos();
$sql = "select *
from categoria c";
$result = mysql_query($sql);
$cant = 0;
$this->_destruir();
return($result);
}
/**
* Este método sirve para poder recuperar las remeras que pertenecen a la categorias
* @returns Regresa el arreglo de todas las remeras.
*/
function obtenerImagenesDeCategorias($idCategoria)
{
$this->_conectarBaseDatos();
$sql = "select r.idRemera, r.nombRemera
from remera r
inner join categ_remera cr
on r.idRemera=cr.idRemera
inner join categoria c
on c.idCategoria=cr.idCategoria
where c.idCategoria=$idCategoria";
$result = mysql_query($sql);
$cant = 0;
$this->_destruir();
return($result);
}
?>Entonces, más claramente tenemos:
Función: obtenerCategorias
Consulta:
Código MySQL :
select * from categoria c
Función: obtenerImagenesDeCategorias($idCategoria) //Tiene como parámetro la Categoría seleccionada
Consulta:
Código MySQL :
select r.idRemera, r.nombRemera from remera r inner join categ_remera cr on r.idRemera=cr.idRemera inner join categoria c on c.idCategoria=cr.idCategoria where c.idCategoria=$idCategoria
Finalmente, nuestra clase php queda:
Código PHP :
<?php
class categoriaRemera
{
/**
Varibles para la conecxion a la BD
*/
var $sqlstring = "";
var $server = "localhost";
var $user = "root";
var $pass = "";
var $database = "remeras";
/**
Varibles a utilizar
*/
var $db = 0;
var $rs = 0;
var $row = 0;
var $recordcount = 0;
var $EOF = true;
function _conectarBaseDatos()
{
$this->db = mysql_connect($this->server,$this->user,$this->pass);
mysql_select_db($this->database,$this->db) or die(mysql_error());
}
function _ejecutarQuery($strSql)
{
$this->sqlstring = $strSql;
$this->_exec_command();
return $this->lastid;
}
function _exec_command()
{
if ($this->db && $this->sqlstring!="")
{
$this->rs = mysql_query($this->sqlstring,$this->db);
if ($this->rs)
{
$this->EOF = true;
$this->recordcount = mysql_affected_rows();
$this->lastid = mysql_insert_id();
}
else
{
$this->recordcount = 0;
$this->EOF = true;
}
}
else
{
$this->recordcount = 0;
$this->EOF = true;
}
}
function _destruir()
{
if($this->db)
mysql_close($this->db);
}
/**
* Este método sirve para poder recuperar las categorias
* @returns Regresa el arreglo de todas las categorias.
*/
function obtenerCategorias()
{
$this->_conectarBaseDatos();
$sql = "select *
from categoria c";
$result = mysql_query($sql);
$cant = 0;
$this->_destruir();
return($result);
}
/**
* Este método sirve para poder recuperar las remeras que pertenecen a la categorias
* @returns Regresa el arreglo de todas las remeras.
*/
function obtenerImagenesDeCategorias($idCategoria)
{
$this->_conectarBaseDatos();
$sql = "select r.idRemera, r.nombRemera
from remera r
inner join categ_remera cr
on r.idRemera=cr.idRemera
inner join categoria c
on c.idCategoria=cr.idCategoria
where c.idCategoria=$idCategoria";
$result = mysql_query($sql);
$cant = 0;
$this->_destruir();
return($result);
}
}
?>
Luego, debemos de subir nuestro archivo, a la carpeta Services, dentro de AMFPHP, como vimos la primera vez, de forma que podamos probar las consultas:
Como se observa, tenemos nuestro archivo y al seleccionarlo podemos ver nuestras funciones. En obtenerCategorias, no debemos ingresar nada, ya que devolverá todas las categorías sin pasarle ningun parámetro, sin embargo en obtenerImagenesDeCategorias, debemos pasarle el idCategoria que seleecionamos.
Pueden probar que datos les devuelve en cada uno de los casos, con solo ir a la dirección de su browser: http://localhost/amfphp/browser/.
Una vez, que verificamos que funciona como deseamos, que las consultas son correctas y que los datos devueltos son los que necesitamos, comenzaremos a crear nuestro Flash.
Lo primero que hacemos, es crear un archivo nuevo y gurdarlo, en mi caso lo llamé ejemplobd. Luego, crearemos nuestra clase AS3 que utilizaremos para trabajar. Esta clase la llamé seleccion, por lo que el archivo se llama de la misma forma, al igual que la función principal.
Nota: Acuérdense que deben definir al package, que es la ruta donde se encuentra la clase. Como en mi caso es una clase única, se encuentra al mismo nivel que el archivo ejemplobd.fla, por lo que encuentra sin ninguna dirección específica.
Para comenzar, definiremos los componentes y variables que utilizaremos y agregaremos los componentes creados dinámicamente al escenario:
Código ActionScript :
package
{
/**
* @author MAWAPE Sistemas
* @url http://www.mawape.com.ar/blog
*/
/**
* Importo las librerias que voy a utilizar
*/
import fl.controls.ComboBox;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.events.Event;
import flash.net.NetConnection;
import flash.net.Responder;
import flash.net.URLRequest;
import flash.sampler.NewObjectSample;
import flash.text.TextField;
public class seleccion extends MovieClip {
/**
* Defino las variables para crear componentes
*/
public var comboCategoria:ComboBox = new ComboBox(); //Carga todas las categorias
public var campoCategoria:TextField = new TextField(); //Lo uso como control
/**
* Defino las variables para la conexción con AMFPHP
*/
public var gateway:String = "http://localhost/amfphp/gateway.php";
public var conexion:NetConnection = new NetConnection();
public var responder:Responder;
/**
* Comienzas las variables de manipulación
*/
public var t:Array; //Contendrá el arrglo de Categorias y Remeras
public var i:uint; //Me permitirá recorrer el arreglo
public var cargador:Loader=new Loader(); //Defino la variable que cargará las remeras
/**
* Esta es la funcion principal
*/
public function seleccion() {
/**
* Creo el campo de texto que me permitirá realizar un control de lo que hago
*/
campoCategoria.height=31;
campoCategoria.width=490;
campoCategoria.background=true;
campoCategoria.border=true;
campoCategoria.x=18;
campoCategoria.y=50;
campoCategoria.selectable = false;
campoCategoria.text = "Esto es una Prueba";
addChild(campoCategoria);
/**
* Creo el combobox donde mostraré las CATEGORIAS recuperadas desde la BD
*/
comboCategoria.x=18;
comboCategoria.y=100;
comboCategoria.height=22;
comboCategoria.width=164;
addChild(comboCategoria);
}
}
}
Como vemos, se ha agregado el ComboBox vacío, con las dimensiones y posiciones que le definimos y además, un campo de texto, que me permitirá saber que es lo que estoy haciendo. Este campo es solo de control y servirá para mostrar la última transacción. También podríamos utilizar un trace, pero creo que esta forma de verlo es mejor.
Una vez creados nuestros componentes, tenemos que llenar el ComboBox, por lo que deberemos, realizar la llamada a la consulta que contine las categorías.
Para que esto pueda funcionar, deberemos de usar el archivo php creado primero y llamar al método obtenerCategorías, por lo que ahora, nuestra clase seleccion quedará:
Código ActionScript :
package
{
/**
* @author MAWAPE Sistemas
* @url http://www.mawape.com.ar/blog
*/
import fl.controls.ComboBox;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.events.Event;
import flash.net.NetConnection;
import flash.net.Responder;
import flash.net.URLRequest;
import flash.sampler.NewObjectSample;
import flash.text.TextField;
public class seleccion extends MovieClip {
/**
* Defino las variables para crear componentes
*/
public var comboCategoria:ComboBox = new ComboBox(); //Carga todas las categorias
public var campoCategoria:TextField = new TextField(); //Lo uso como control
/**
* Defino las variables para la conexción con AMFPHP
*/
public var gateway:String = "http://localhost/amfphp/gateway.php";
public var conexion:NetConnection = new NetConnection();
public var responder:Responder;
/**
* Comienzas las variables de manipulación
*/
public var t:Array; //Contendrá el arrglo de Categorias y Remeras
public var i:uint; //Me permitirá recorrer el arreglo
public var cargador:Loader=new Loader(); //Defino la variable que cargará las remeras
/**
* Esta es la funcion principal
*/
public function seleccion {
/**
* Creo el campo de texto que me permitirá realizar un control de lo que hago
*/
campoCategoria.height=31;
campoCategoria.width=490;
campoCategoria.background=true;
campoCategoria.border=true;
campoCategoria.x=18;
campoCategoria.y=50;
campoCategoria.selectable = false;
campoCategoria.text = "Esto es una Prueba";
addChild(campoCategoria);
/**
* Creo el combobox donde mostraré las CATEGORIAS recuperadas desde la BD
*/
comboCategoria.x=18;
comboCategoria.y=100;
comboCategoria.height=22;
comboCategoria.width=164;
addChild(comboCategoria);
}
/**
* Llamo a los datos para que conectarme
*/
conexion.connect(gateway);
responder = new Responder (respuesta, error);
/**
* Realizo la llamada a la función en el archivo .PHP
* que me permitirá recuperar las categorías de la BD
*/
conexion.call("categoriaRemera.obtenerCategorias", responder);
public function respuesta(resultado:Object):void
{
/**
* Guardo los resultados recuperados
*/
t = resultado.serverInfo.initialData;
/**
* Lleno el Combobox con los datos
* @return las CATEGORIAS guardadas en la BD
*/
comboCategoria.addItem({label:"Seleccionar"});
for(i=0; i<t.length; i++)
{
//trace("idCategoria: "+t[i][0]);
//trace("nombCategoria: "+t[i][1]);
comboCategoria.addItem({label:t[i][1], data:t[i][0]} ); //Lleno el ComboBox
}
function error(error:Object):void
{
trace("Error: " + error.description);
}
}
}
Como vemos, se agregaron la función respuesta y error.
En la fución respuesta lo primero que hacemos es guardar el arreglo de las categorías obtenidas en nuestra variable t. Luego, usamos esta variable, para llenar el ComboBox, la cual necesita 2 parámetros:
Data: es el identificador de la categoría
Label: es como se mostrará esa categoría
Luego, la función error, permitirá detectar algun problema en la conexión, por lo que ahora, nuestro archivo ejemplobd.fla queda:
Tenemos que observar, que nuestro arreglo es BIDIMENSIONAL; esto significa que tiene tiene 2 dimensiones.
La primera [0] son los idCategoria y la segunda [1] son los nombCategoria.
Lo que hacemos en el loop for, es recorrer cada una de las filas de los elementos recuperados y los vamos mostrando o, en este caso, agregando al ComboBox.
Algo para resaltar, es la llamada:
Código ActionScript :
conexion.call("categoriaRemera.obtenerCategorias", responder);en la cual, definimos promero a que clase llamamos y luego, que función de esa clase utilizamos.
Bien, ahora que nuestro ComboBox está completo, debemos de agregarle la acción que desemos que realice al cambiar de un item a otro, por lo que deberemos crear el EventListener y su función correspondiente.
Agregando esto a nuestra clase seleccion nos queda:
Código ActionScript :
package
{
/**
* @author MAWAPE Sistemas
* @url http://www.mawape.com.ar/blog
*/
import fl.controls.ComboBox;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.events.Event;
import flash.net.NetConnection;
import flash.net.Responder;
import flash.net.URLRequest;
import flash.sampler.NewObjectSample;
import flash.text.TextField;
public class seleccion extends MovieClip {
/**
* Defino las variables para crear componentes
*/
public var comboCategoria:ComboBox = new ComboBox(); //Carga todas las categorias
public var campoCategoria:TextField = new TextField(); //Lo uso como control
/**
* Defino las variables para la conexción con AMFPHP
*/
public var gateway:String = "http://localhost/amfphp/gateway.php";
public var conexion:NetConnection = new NetConnection();
public var responder:Responder;
/**
* Comienzas las variables de manipulación
*/
public var t:Array; //Contendrá el arrglo de Categorias y Remeras
public var i:uint; //Me permitirá recorrer el arreglo
public var cargador:Loader=new Loader(); //Defino la variable que cargará las remeras
/**
* Esta es la funcion principal
*/
public function seleccion {
/**
* Llamo a los datos para que conectarme
*/
conexion.connect(gateway);
responder = new Responder (respuesta, error);
/**
* Realizo la llamada a la función en el archivo .PHP
* que me permitirá recuperar las categorías de la BD
*/
conexion.call("categoriaRemera.obtenerCategorias", responder);
/**
* Creo el campo de texto que me permitirá realizar un control de lo que hago
*/
campoCategoria.height=31;
campoCategoria.width=490;
campoCategoria.background=true;
campoCategoria.border=true;
campoCategoria.x=18;
campoCategoria.y=50;
campoCategoria.selectable = false;
campoCategoria.text = "Esto es una Prueba";
addChild(campoCategoria);
/**
* Creo el combobox donde mostraré las CATEGORIAS recuperadas desde la BD
*/
comboCategoria.x=18;
comboCategoria.y=100;
comboCategoria.height=22;
comboCategoria.width=164;
addChild(comboCategoria);
}
public function respuesta(resultado:Object):void
{
/**
* Guardo los resultados recuperados
*/
t = resultado.serverInfo.initialData;
/**
* Lleno el Combobox con los datos
* @return las CATEGORIAS guardadas en la BD
*/
comboCategoria.addItem({label:"Seleccionar"});
for(i=0; i<t.length; i++)
{
//trace("idCategoria: "+t[i][0]);
//trace("nombCategoria: "+t[i][1]);
comboCategoria.addItem({label:t[i][1], data:t[i][0]} ); //Lleno el ComboBox
}
/**
* Agrego la acción para cuando cambio de Categoría seleccionada
*/
comboCategoria.addEventListener(Event.CHANGE, mostrarRemeras)
}
/**
* Función con el cambio
*/
public function mostrarRemeras(evt:Event)
{
if (evt.target.selectedItem.label == "Seleccionar")
{
return;
}
campoCategoria.text = evt.target.selectedItem.label + ", " + evt.target.selectedItem.data;
}
function error(error:Object):void
{
trace("Error: " + error.description);
}
}
}
De esa forma, nuestro [i]campoCategoria, cambiará dependiendo de que seleccionemos, mostrando primero la etiqueta de la categoría y luego su identificador.
Esto nos permite corroborar tanto que los datos están completos, como así también que al realizar la selección los mismo se modican:
Pareciera ser igual a la imagen, anterior, sin embargo, si se fijan en el campo de texto creado, éste al estar seleccionado el atributo Empresarial, muestra tanto la etiqueta como su idCategoria (6).
Ahora, que todo funciona correctamente, solo debemos indicarle, que al cambiar de categoría, cargue las imagenes pertenecientes a la misma.
Para eso, debemos usar la variable creada al inicio cargador e indicarle la ruta donde estan guardadas las imagenes.
Utilizaremos en este caso, la segunda función definida en el archivo php, la cual nos traerá todas las remeras de una categoría, por lo que debemos como prioridad, pasarle de parámetro el identificador de la categoría. Finalmente, nuestra clase selección completa quedará:
Código ActionScript :
package
{
/**
* @author MAWAPE Sistemas
* @url http://www.mawape.com.ar/blog
*/
import fl.controls.ComboBox;
import flash.display.Loader;
import flash.display.MovieClip;
import flash.events.Event;
import flash.net.NetConnection;
import flash.net.Responder;
import flash.net.URLRequest;
import flash.sampler.NewObjectSample;
import flash.text.TextField;
public class seleccion extends MovieClip {
/**
* Defino las variables para crear componentes
*/
public var comboCategoria:ComboBox = new ComboBox(); //Carga todas las categorias
public var campoCategoria:TextField = new TextField(); //Lo uso como control
/**
* Defino las variables para la conexción con AMFPHP
*/
public var gateway:String = "http://localhost/amfphp/gateway.php";
public var conexion:NetConnection = new NetConnection();
public var responder:Responder;
/**
* Comienzas las variables de manipulación
*/
public var t:Array; //Contendrá el arrglo de Categorias y Remeras
public var i:uint; //Me permitirá recorrer el arreglo
public var cargador:Loader=new Loader(); //Defino la variable que cargará las remeras
/**
* Esta es la funcion principal
*/
public function seleccion() {
/**
* Llamo a los datos para que conectarme
*/
conexion.connect(gateway);
responder = new Responder (respuesta, error);
/**
* Realizo la llamada a la función en el archivo .PHP
* que me permitirá recuperar las categorías de la BD
*/
conexion.call("categoriaRemera.obtenerCategorias", responder);
/**
* Creo el campo de texto que me permitirá realizar un control de lo que hago
*/
campoCategoria.height=31;
campoCategoria.width=490;
campoCategoria.background=true;
campoCategoria.border=true;
campoCategoria.x=18;
campoCategoria.y=50;
campoCategoria.selectable = false;
campoCategoria.text = "Esto es una Prueba";
addChild(campoCategoria);
/**
* Creo el combobox donde mostraré las CATEGORIAS recuperadas desde la BD
*/
comboCategoria.x=18;
comboCategoria.y=100;
comboCategoria.height=22;
comboCategoria.width=164;
addChild(comboCategoria);
}
public function respuesta(resultado:Object):void
{
/**
* Guardo los resultados recuperados
*/
t = resultado.serverInfo.initialData;
/**
* Lleno el Combobox con los datos
* @return las CATEGORIAS guardadas en la BD
*/
comboCategoria.addItem({label:"Seleccionar"});
for(i=0; i<t.length; i++)
{
//trace("idCategoria: "+t[i][0]);
//trace("nombCategoria: "+t[i][1]);
comboCategoria.addItem({label:t[i][1], data:t[i][0]} ); //Lleno el ComboBox
}
/**
* Agrego la acción para cuando cambio de Categoría seleccionada
*/
comboCategoria.addEventListener(Event.CHANGE, mostrarRemeras)
}
/**
* Función con el cambio
*/
public function mostrarRemeras(evt:Event)
{
if (evt.target.selectedItem.label == "Seleccionar")
{
return;
}
campoCategoria.text = evt.target.selectedItem.label + ", " + evt.target.selectedItem.data;
nuevaConexion(evt.target.selectedItem.data);
try{
removeChild(cargador);
} catch (e:Error) {
trace(e.message)
}
}
public function nuevaConexion(idCategoriaSeleccionada:Number) //Paso el dato del idCategoría seleccionada
{
responder = new Responder(respuesta2, error);
conexion.call("categoriaRemera.obtenerImagenesDeCategorias", responder, idCategoriaSeleccionada);
}
public function respuesta2(resultado:Object):void
{
t = resultado.serverInfo.initialData;
for(i=0; i<t.length; i++)
{
//trace("idRemera: "+t[i][0]);
//trace("nombRemera: " + t[i][1]);
//Recupero todas las imagenes pertenecientes a la categoría
cargador=new Loader();
cargador.load(new URLRequest("remeras/"+t[i][1]+".gif"))
cargador.x=100*i+220;
cargador.y=100;
addChild(cargador)
}
}
function error(error:Object):void
{
trace("Error: " + error.description);
}
}
}
Nota 1: defino la nueva función, y le determino que le pasaré como parámetro el idCategoria que seleccioné en el ComboBox:
Código ActionScript :
nuevaConexion(evt.target.selectedItem.data);
Nota 2: al hacer la conexión, llamo a la clase categoriaRemera y a la funcion obtenerImagenesDeCategorias, y le paso adempás como parámetro el identificador de la categoría que seleccione:
Código ActionScript :
conexion.call("categoriaRemera.obtenerImagenesDeCategorias", responder, idCategoriaSeleccionada);Nota 3: defino la ruta donde se encuntran las remeras y utilizo el nombre de las remeras guardadas en la carpeta, para reuperarlas, junto a la extensión de las mismas:
Código ActionScript :
cargador.load(new URLRequest("remeras/"+t[i][1]+".gif"))Nota 4: utilizo un try-catch, que permite remover los items al cambiar el elemento selecionado. Es decir, suponiendo que una categoría tuviese 3 remeras y luego la siguiente que elijo tuviese 2, quedaría, una de las remeras de la primera selección junto con la segunda, es decir, no cambiaría de imagen, sin que se pondrían una y otra vez las remeras una encima de la otra. Por lo que debo, decirle que al cambiar de categoría, me borre las imagenes de la categoría anterior seleccionada. Eso lo logramos con
Código ActionScript :
removeChild(cargador);
Sin embargo, al seleccionar la primera categoría, no existe niguna remera, por lo que salta un error, de que no encuentra que eliminar. Para evitar que la aplicación colapse, utilizamos:
Código ActionScript :
try{
removeChild(cargador);
} catch (e:Error) {
trace(e.message)
}Finalmente, deberemos de decirle a nuestro .fla, cual es la clase que debe utilizar, ya se por medio de un import o por medio de la posibilidad de difinir la clase.
Puedes descargar los archivos.
Salu2!!!
