Uso de amfPHP y FLex para interactuar con MySQL (parte 2)

Hola al fin un poco de tiempo para continuar con este tutorial, en el anterior nos quedamos hasta donde provabamos que nuestro amfPHP funcionaba bien hoy vamos a crear una pequeña clase en php con un metodo que recupera los datos de una tabla y nos muestra esos datos en un datagrid de flex.. manos a la obra..

1.- Creamos la clase php como podremos observar este archivo se debe llamar igual que el nombre de tu clase

"miClasePHP.php"

view plainprint?

1.    
2. <!--php<br /-->  
3. /** 
4.  * @author Jose Roberto León Cruz 
5.  * @copyright 2010 
6.  */  
7.   
8. class miClasePHP //nombre de mi clase- asi se debe llamar el archivo  
9. {  
10.     //metodo que se conectara a la base de datos y obtendra el contenido de la tabla usuarios..  
11.     function getUsuarios()   
12.     {  
13.           
14.      $dbhost="xxx";  // host del MySQL (generalmente localhost)  
15.      $dbusuario="xxx"; // aqui debes ingresar el nombre de usuario  
16.                               // para acceder a la base  
17.      $dbpassword="xxx"; // password de acceso para el usuario de la  
18.                               // linea anterior  
19.      $db="tutorialFlex";        // Seleccionamos la base con la cual trabajar  
20.        
21.      $mysql = mysql_connect($dbhost, $dbusuario, $dbpassword);  
22.           
23.      mysql_select_db( $db ); //acemos que la bd que queremos sea la activa  
24.               
25.      $sql = "select * from usuariosFlex";  
26.              $Result = mysql_query( $sql );  
27.              while ($row = mysql_fetch_object($Result)) {  
28.                      $return[] = $row;//asignamos cada registro a una fila del arreglo  
29.              }  
30.           
31.     return( $return );//regresamos el arrego como tal..  
32.     }  
33.       
34. }  
35. ?>  

 

/**
 * @author Jose Roberto León Cruz
 * @copyright 2010
 */

class miClasePHP //nombre de mi clase- asi se debe llamar el archivo
{
    //metodo que se conectara a la base de datos y obtendra el contenido de la tabla usuarios..
    function getUsuarios() 
    {
        
     $dbhost="xxx";  // host del MySQL (generalmente localhost)
     $dbusuario="xxx"; // aqui debes ingresar el nombre de usuario
                              // para acceder a la base
     $dbpassword="xxx"; // password de acceso para el usuario de la
                              // linea anterior
     $db="tutorialFlex";        // Seleccionamos la base con la cual trabajar
     
     $mysql = mysql_connect($dbhost, $dbusuario, $dbpassword);
        
     mysql_select_db( $db ); //acemos que la bd que queremos sea la activa
            
     $sql = "select * from usuariosFlex";
             $Result = mysql_query( $sql );
             while ($row = mysql_fetch_object($Result)) {
                     $return[] = $row;//asignamos cada registro a una fila del arreglo
             }
        
    return( $return );//regresamos el arrego como tal..
    }
    
}
?>

como podemos apreciar la clase miClasePHP.php solo cuenta con un metodo: getUsuarios() el cual no recibe parametros pero si devuelve un Array que contendra todas las filas de la tabla Usuarios la ventaja de este framework esque podremos manipular ese arreglo directamente desde Flex!! y para eso simplemente necesitamos crear una clase AS3 que nos dara la MAGIA..

conexionRemota.as

view plainprint?

1.    
2. // Archivo AS3 by Roberts  
3. package {  
4.   //librerias necesarias para la conexion del amfPHP  
5.    import flash.net.NetConnection;  
6.    import flash.net.ObjectEncoding;  
7.           
8.    //clase que hereda de NetConnection  
9.    public class conexionRemota extends NetConnection  
10.    {    
11.      //Metodo que recibe la URL del gateway de nuestro amfPHP  
12.       public function conexionRemota( sURL:String )  
13.       {  
14.          objectEncoding = ObjectEncoding.AMF0;  
15.          if (sURL) connect( sURL );  
16.       }  
17.                   
18.     public function AppendToGatewayUrl(s:String):void  
19.     {  
20.         
21.     }  
22.   }  
23. }  

 
// Archivo AS3 by Roberts
package {
  //librerias necesarias para la conexion del amfPHP
   import flash.net.NetConnection;
   import flash.net.ObjectEncoding;
        
   //clase que hereda de NetConnection
   public class conexionRemota extends NetConnection
   {  
     //Metodo que recibe la URL del gateway de nuestro amfPHP
      public function conexionRemota( sURL:String )
      {
         objectEncoding = ObjectEncoding.AMF0;
         if (sURL) connect( sURL );
      }
                
    public function AppendToGatewayUrl(s:String):void
    {
      
    }
  }
}

2.- Ya que tenemos la estructura de las dos clases debemos colocar la clase php en la carpeta services dentro del directorio raiz del amfPHP y la clase conexionRemota.as la debemos incluir en la carpeta src de nuestra aplicacion en flex.

3.- Repaso rapido:

Esta seria la estructuda de mi tabla en sql a la que vamos a accesar desde la funcion getUsuarios de la clase en php liesto ya la tengo creada ahora insertaremos algunos registrods

view plainprint?

1. CREATE TABLE `usuariosFlex` (  
2. `id_usuario` INT NOT NULL AUTO_INCREMENT ,  
3. `nombre_usuario` VARCHAR( 200 ) NOT NULL ,  
4. `edad_usuario` INT NOT NULL ,  
5. PRIMARY KEY ( `id_usuario` )  
6. );)   
7.   
8. INSERT INTO `usuariosFlex` ( `id_usuario` , `nombre_usuario` , `edad_usuario` )  
9. VALUES (  
10. '', 'Jose Roberto Leon', '23'  
11. );  
12.   
13. INSERT INTO `usuariosFlex` ( `id_usuario` , `nombre_usuario` , `edad_usuario` )  
14. VALUES (  
15. '', 'Juan Carlos Leon ', '13'  
16. );  
17.   
18.   
19. INSERT INTO `usuariosFlex` ( `id_usuario` , `nombre_usuario` , `edad_usuario` )  
20. VALUES (  
21. '', 'Fulanito equis', '53'  
22. );  

CREATE TABLE `usuariosFlex` (
`id_usuario` INT NOT NULL AUTO_INCREMENT ,
`nombre_usuario` VARCHAR( 200 ) NOT NULL ,
`edad_usuario` INT NOT NULL ,
PRIMARY KEY ( `id_usuario` )
);) 

INSERT INTO `usuariosFlex` ( `id_usuario` , `nombre_usuario` , `edad_usuario` )
VALUES (
'', 'Jose Roberto Leon', '23'
);

INSERT INTO `usuariosFlex` ( `id_usuario` , `nombre_usuario` , `edad_usuario` )
VALUES (
'', 'Juan Carlos Leon ', '13'
);


INSERT INTO `usuariosFlex` ( `id_usuario` , `nombre_usuario` , `edad_usuario` )
VALUES (
'', 'Fulanito equis', '53'
);

bien ahora si ya que tenemos todos los pasos necesarios (la tabla, la clase php que nos accede a esa tabla y su metodo que nos devuelve todos los usuarios de dicha tabla y la clase AS3 que nos permitira enlazar Flex y PHP..

4.- Vamos a Flex y creamos un nuevo proyecto le dejamos como Web Aplication y en Servert Technology lo dejamos en "None" y pulsamos siguiente con lo cual flex nos genera una nueva area de trabajo .

5.- Nos vamos a modo diseño y agregamos un Datagrid y un Boton como se ve en la imagen:



6.- Creamos una variable de tipo conexionRemota y una de tipo Array definida por el atributo [Bindable] <- este es para que esa variable pueda ser reconocida dentro del codigo AS3 y tambien dentro del codigo

view plainprint?

1. <!--xml version="1.0" encoding="utf-8"?-->  
2. <mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="iniciar();">  
3.   
4. <mx:script>  
5.  <!--[CDATA[<br /-->    
6.   import mx.controls.Alert; //para mensajes en ventanitas  
7.   //******************USO DEL AMFPHP*****************   
8.   //declara una variable de la clase conexion remota  
9.         private var miConexion : conexionRemota;  
10.     
11.   //arreglo que recibira el contenido devuelto por el metodo php  
12.   //(en este caso el contenido sera todos los registros de la tabla usuariosFlex)  
13.   [Bindable]           
14.   private var datos:Array;  
15.     
16.   private function iniciar():void  
17.   {  
18.    //ruta del archivo gateway del amfPHP  
19.             miConexion = new conexionRemota( "http://logix.com.mx/robert/amfphp/gateway.php" );  
20.               
21.               
22.   }  
23.         
24.   public function cargarUsuarios():void  
25.   {   //nombre de la clase php "punto" invocamos al metodo deseado  
26.    miConexion.call( "miClasePHP.getUsuarios", new Responder(exitoFuncion,errorFuncion));  
27.     /*podemos ver que dentro de Responder tenemos dos opciones  
28.     exito y error las cuales debemos crearlas aqui en AS y seran  
29.     invocadas dependiendo si tuvo exito o no la llamada al metodo  
30.     getUsuarios*/  
31.          
32.   }  
33.     
34.   /*funcion que se invoca cuando tenga exito la llamada  
35.   al metodo getUsuarios recibimos un parametro el cual 
36.   debe conicidir con el parametro que regrese php en esa 
37.   funcion en este caso nuestro metodo php nos devuelve 
38.   un arreglo que es el equivalente a Array en Flex*/   
39.   private function exitoFuncion(resultado:Array):void  
40.   {  
41.    /*lo unico que vamos a hacer es asignar ese  
42.    arreglo devuelto por php a nuestro arreglo 
43.    de Flex y magia*/  
44.    datos=resultado;  
45.   }  
46.   /*funcion que se invoca cuando tenga error la llamada  
47.   al metodo getUsuarios aqui tambien recibimos un parametro 
48.   de tipo String que contendra la cadena de error enviada 
49.   por el php en caso de que haya error*/   
50.   private function errorFuncion(error:String):void  
51.   {  
52.    //aqui solo vamos a mostrar el error en un Alert  
53.    Alert.show(error);  
54.   }  
55.     
56.     
57.  ]]>  
58. </mx:script>  
59.   
60.  <!--para mostrar los datos en la grilla solo bastaria con asignar   
61.  nuestro arreglo a su propiedad dataProvider pero eso tendria un  
62.  incoveniente ya que segun los desarrolladores de flex la manera  
63.  en que los dataGrid cargan los datos es aleatoria en cuanto al orden  
64.  de las columnas por lo que haremos que el orden sea como nosotros   
65.  quieramos asignando manualmente las columnas para ello solo es  
66.  necesario establecer en su propiedad dataField de cada columna el  
67.  nombre del campo que queremos que se muestre-->  
68.  <mx:datagrid x="169" y="79" width="447" dataprovider="{datos}">  
69.   <mx:columns>  
70.    <mx:datagridcolumn headertext="ID " datafield="id_usuario">  
71.    <mx:datagridcolumn headertext="Usuario" datafield="nombre_usuario">  
72.    <mx:datagridcolumn headertext="Edad" datafield="edad_usuario">  
73.   </mx:datagridcolumn></mx:datagridcolumn></mx:datagridcolumn></mx:columns>  
74.  </mx:datagrid>  
75.  <!--************************************  
76.       desde nuetro boton solo vamos a llamar a la funcion cargar usuarios  
77.           ***********************************-->  
78.  <mx:button x="536" y="254" label="Consultar" click="cargarUsuarios();">  
79.    
80. </mx:button></mx:application>  

   
  import mx.controls.Alert; //para mensajes en ventanitas
  //******************USO DEL AMFPHP***************** 
  //declara una variable de la clase conexion remota
        private var miConexion : conexionRemota;
  
  //arreglo que recibira el contenido devuelto por el metodo php
  //(en este caso el contenido sera todos los registros de la tabla usuariosFlex)
  [Bindable]         
  private var datos:Array;
  
  private function iniciar():void
  {
   //ruta del archivo gateway del amfPHP
            miConexion = new conexionRemota( "http://logix.com.mx/robert/amfphp/gateway.php" );
            
            
  }
      
  public function cargarUsuarios():void
  {   //nombre de la clase php "punto" invocamos al metodo deseado
   miConexion.call( "miClasePHP.getUsuarios", new Responder(exitoFuncion,errorFuncion));
    /*podemos ver que dentro de Responder tenemos dos opciones
    exito y error las cuales debemos crearlas aqui en AS y seran
    invocadas dependiendo si tuvo exito o no la llamada al metodo
    getUsuarios*/
       
  }
  
  /*funcion que se invoca cuando tenga exito la llamada 
  al metodo getUsuarios recibimos un parametro el cual
  debe conicidir con el parametro que regrese php en esa
  funcion en este caso nuestro metodo php nos devuelve
  un arreglo que es el equivalente a Array en Flex*/ 
  private function exitoFuncion(resultado:Array):void
  {
   /*lo unico que vamos a hacer es asignar ese 
   arreglo devuelto por php a nuestro arreglo
   de Flex y magia*/
   datos=resultado;
  }
  /*funcion que se invoca cuando tenga error la llamada 
  al metodo getUsuarios aqui tambien recibimos un parametro
  de tipo String que contendra la cadena de error enviada
  por el php en caso de que haya error*/ 
  private function errorFuncion(error:String):void
  {
   //aqui solo vamos a mostrar el error en un Alert
   Alert.show(error);
  }
  
  
 ]]>


 
 
  
   
   
   
  
 
 
 
 

Esto seria todo lo que hay que hacer y NO SE OLVIDEN de llamar a la funcion iniciar al principio de su aplicacion en las tags ponenen initialize="iniciar();" porque sino va a marcar error en el ejemplo anterior ya esta todo funcionando corremos la aplicacion y al pulsar el boton vemos como se nos carga nuestros datos en el DataGrid y en el orden de las columnas y ademas la carga es demaciado rapida.. aa se me olvidaba lo mejor sin usar el XML..



Esto es todo para esta entrada en la siguiente veremos como añadir editar y eliminar usuarios para cotinuar con este tutorial dejen sus comentarios y sujerencias..