Cómo llenar 2 ComboBox usando Flex, PHP y MySQL

Hola chavos =) lo prometido es deuda (Prometí publicar un tuto sobre esto, si me quedaba antes del superbowl) osea que si a mi me quedo a ustedes también les debe de quedar =D

Dirijanse a su BD MySQL en phpMyAdmin.

Código SQL y tablas en MySQL

Crearemos una base de datos llamada personas y 2 tablas apodo y personas. Adjunto las tablas. Sólo copien el código y peguenlo en su BD llamada personas creada por ustedes

Tabla "apodo"

Código :

--
-- Base de datos: `personas`

-- --------------------------------------------------------

-- Estructura de tabla para la tabla `apodo`
--

CREATE TABLE IF NOT EXISTS `apodo` (
  `id_apodo` int(10) NOT NULL,
  `apodo` varchar(20) NOT NULL,
  `ident_apodo` int(5) NOT NULL,
  PRIMARY KEY (`id_apodo`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Volcar la base de datos para la tabla `apodo`
--

INSERT INTO `apodo` (`id_apodo`, `apodo`, `ident_apodo`) VALUES
(1, 'pepe', 1),
(2, 'sancho', 1),
(3, 'caritas', 1),
(4, 'nucas', 2),
(6, 'perro', 2);

Tabla "personas"

Código :

--
-- Base de datos: `personas`
--

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `personas`
--

CREATE TABLE IF NOT EXISTS `personas` (
  `folio` int(11) NOT NULL,
  `nombre` varchar(100) NOT NULL,
  `ident_folio` int(5) NOT NULL,
  PRIMARY KEY (`folio`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

--
-- Volcar la base de datos para la tabla `personas`
--

INSERT INTO `personas` (`folio`, `nombre`, `ident_folio`) VALUES
(1, 'julio', 1),
(2, 'adrian', 2);

No hay mucho que explicar con las tablas solo el campo ident_folio y el ident_apodo estos campos ayudaran para relacionar las tablas con sus ComboBox en un futuro(La explicación para actualizar y relacionar los ComboBox no viene en este tuto)

Código PHP para generar los XML para Flex

Ahora armaremos 2 PHP's que incluiremos directamente a la carpeta src del proyecto de flex. Lo hubiésemos podido hacer en uno pero esto resultara mas fácil de entender.

Crearemos un php llamado conexion.php y otraconexion.php que invocarán las columnas y filas que queramos.

Copien desde <personas> hasta </personas>

Código :

<personas>
<?php
    if (!($conexion=mysql_connect('localhost','TU USER','TUPASSWORD'))){
          echo "Error conectando a la base de datos.";
          exit();
    }

    if (!mysql_select_db("personas",$conexion)) {
          echo "Error seleccionando la base de datos.";
          exit();
    }

    $sql = "SELECT * from personas ";

    $result = mysql_query($sql,$conexion);
    while($fila = mysql_fetch_object($result)){
?>

        <folio><?php echo $fila->folio ?></folio>
         <nombre><?php echo $fila->nombre ?></nombre>
   <ident_folio><?php echo $fila->ident_folio ?></ident_folio>


<?php
    }
   
?>
</personas>

Adjunto el otro PHP

Código :

<apodo>
<?php
    if (!($conexion=mysql_connect('localhost','TU USER','TU PASSWORD'))){
          echo "Error conectando a la base de datos.";
          exit();
    }

    if (!mysql_select_db("personas",$conexion)) {
          echo "Error seleccionando la base de datos.";
          exit();
    }

    $sql = "SELECT * from apodo";

    $result = mysql_query($sql,$conexion);
    while($fila = mysql_fetch_object($result)){
?>

        
         <apodo><?php echo $fila->apodo ?></apodo>
<ident_apodo><?php echo $fila->ident_apodo ?></ident_apodo>
       

<?php
    }
   
?>
</apodo>

Código en Flex que procesa los XML generados por PHP desde MySQL

Crearemos nuestra aplicación en Flex. Les dejo el código semi explicado...

Código :

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"
        creationComplete="init()" viewSourceURL="srcview/index.html">

<mx:Script>

     <![CDATA[
   
      import mx.controls.ComboBox;      
             //llamaremos los HTTPService              
      private function init():void{
         personas.send();
         apodo.send();
         
      }
        
      private function refrescar(event:Event):void{   
         
         nom.text = "El nombre seleccionado es: " + nombre.selectedItem + " " + identfolio.text;
         apo.text = "Por lo tanto tu apodo es: " +  apod.selectedItem;
         
         
         //Provar los items seleccionados (NO CAMBIAN DESPUES DE QUE SE EJECUTAN)
                        
         identfolio.text = personas.lastResult.ident_folio;
         foliotexto.text = personas.lastResult.folio;
         nombretexto.text = personas.lastResult.nombre;
         
      }

         ]]>
   
</mx:Script>

<!--Conexion con los PHP's usaremos un formato en particular e4x-->
<mx:HTTPService id="personas" url="conexion.php" method="POST" resultFormat="e4x"/>
<mx:HTTPService id="apodo" url="otraconexion.php" method="POST" resultFormat="e4x"/>

<!--Llenamos los combos con el dataprovider {tabla.lastResult.Campo_de_la_tabla} -->
<!--La funcion del close sirve para ejecutar una instruccion despues de que se selecciona un item del combo-->  
<mx:ComboBox x="215" y="120" change="refrescar(event)" dataProvider="{personas.lastResult.nombre}" id="nombre" close="refrescar(event);"/>
<mx:ComboBox x="300" y="120" dataProvider="{apodo.lastResult.apodo}" id="apod" />

<!--Solo son unas comprovaciones de datos puede invocar datos en un label en un textinput etc... 
solo que no cambiaran los datos despues de que se ejecute el primer evento-->
<mx:TextInput id="identfolio" x="186" y="167"/>
<mx:TextInput id="foliotexto" x="186" y="167"/>
<mx:TextInput id="nombretexto" x="186" y="167"/>

<!--aqui comprovaremos que las relaciones de los combos esten funcionando-->
<mx:Label id="nom" x="186" y="167" text="El nombre seleccionado es:"/>
<mx:Label id="apo" x="186" y="193" text="Por lo tanto tu apodo es:"/>


</mx:Application>

Les dejo un enlace para que sepan que significa e4x: http://www.madeinflex.com/2006/09/24/e4xel-nuevo-enfoque-xml-para-as30/.
O puedes leer el tutorial de XML en ActionScript 3 con E4X.

Espero les funcione. Lo siguiente sería que funcionen las relaciones... en cuanto tenga la solucion igual se las posteó. Saludos!

Juramy

¿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.