Ultima revisión 28/02/2010

Agenda telefónica en PHP y Flex

Básicamente lo que haremos es crear una base de datos en la que contendrá nuestros contactos, de ahí mediante un archivo en PHP generamos un documento XML y posteriormente lo consumimos con Adobe Flex y hacemos que lo muestre en un DataGrid.

Primero creamos nuestra Tabla en MySQL e insertamos algunos registros para poder utilizarla...

CREATE TABLE agenda (
    id int(11) unsigned NOT NULL auto_increment,
    nombre varchar(100) NOT NULL,
    telefono varchar(15) NOT NULL,
    email varchar(50) NOT NULL,
    PRIMARY KEY (`id`)
);

INSERT INTO agenda VALUES (1, 'José', '123-456-789', 'jose@gmail.com');
INSERT INTO agenda VALUES (2, 'Juan', '333-444-555', 'juan@hotmail.com');
INSERT INTO agenda VALUES (3, 'Maria', '987-654-321', 'maria@hotmail.com');

Después creamos nuestro código PHP que generara la estructura XML (lo llamaremos contactos.php)

<?php
    $conexion = mysql_connect("localhost", "root", "tucontraseña") or die (mysql_error());
    mysql_select_db("tuBasedeDatos");

    //Hacemos la consulta a la base de Datos…
    $sql = mysql_query("SELECT * FROM agenda ORDER BY nombre") or die (mysql_error());

    //Verificamos que existan registros
    if(mysql_num_rows($sql) != 0) {
    
        while($row = mysql_fetch_object($sql)) {
            $xml .= ' <contacto>
            <nombre>'.$row->nombre.'</nombre>
            <telefono>'.$row->telefono.'</telefono>
            <email>'.$row->email.'</email>
            </contacto>';
        }

        //Liberamos memoria…
        mysql_free_result($sql);
    } else {
        $xml = '<contacto>
        <nombre>No hay registros</nombre>
        <telefono>No hay registros</telefono>
        <email>No hay registros</email>
        </contacto>';
    }
    
    echo '<agenda>';
    echo $xml;
    echo '</agenda>';
?>

Después que tenemos nuestro código PHP, tenemos que crear nuestra Aplicación Flex

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" creationComplete="agenda.send()">
<mx:Style>
    Application {
        background-color: #ffffff;
        color: #000033;
        theme-color: #1167B8;
    }
    Panel {
        header-colors: #1167B8, #1167B8;
        shadow-direction: right;
    }
</mx:Style>

<mx:HTTPService id="agenda" url="http://localhost/MiAgendaFlex/contactos.php" useProxy="false" />
<mx:Panel width="420" height="400" layout="horizontal" title="Mi Agenda de Contactos…">
    <mx:DataGrid x="20" y="20" id="dgagenda" width="400" height="350" dataProvider="{agenda.lastResult.agenda.contacto}">
    <mx:columns>
    <mx:DataGridColumn headerText="Nombre"   dataField="nombre" />
    <mx:DataGridColumn headerText="Telefono" dataField="telefono" width="100" />
    <mx:DataGridColumn headerText="Email"    dataField="email" width="150" />
    </mx:columns>
    </mx:DataGrid>
</mx:Panel>
</mx:Application>

El código es simple, únicamente mandamos a llamar a nuestro archivo contactos.php con la etiqueta <mx:HTTPServices>, que se encuentra en una carpeta llamada MiAgendaFlex y que se encuentra en localhost esa ruta ustedes la pueden cambiar, y le asigno el valor al id agenda (id="agenda").

Luego creamos un DataGrid (donde mostraremos los datos) y a la propiedad dataProvider le asignamos el id que recogimos con <mx:HTTPServices> y con lastResult.agenda.contacto, hacemos referencia al nodo principal que sería <agenda> y al secundario que sería <contacto>. Después creamos las columnas con <mx:DataGridColumn /> y con la propiedad dataField le asignamos a cada uno el nombre de las etiquetas de nuestro documento XML.