MilkZoft - Cómo hacer una agenda telefónica con Adobe Flex y PHP

Escrito por Carlos Santana el Viernes, 11 de Septiembre de 2009 Publicado en: Adobe Flex

2 Comentarios

Bueno como lo prometido es deuda aquí les traigo el primer tutorial sobre cómo hacer una agenda básica con Adobe Flex 2 y PHP. 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>

Pues bien espero haber sido claro y conciso, aparte de colorearles la sintaxis para una mejor vista. 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 mostraré los datos) y a la propiedad dataProvider le asigno el id que recogimos con <mx:HTTPServices> y con lastResult.agenda.contacto, hago 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.

¿Fácil verdad?, pues espero puedan aprender un poco sobre este ejemplo y si tienen dudas pueden comentar.

Un Saludo.

Atentamente

NOTA: Este tutorial fue creado por Carlos Santana Roldán para MilkZoft, si deseas tomar total o parcialmente el contenido publicado te pedimos nos envíes un mensaje utilizando el formulario de contacto y agregando un enlace a MilkZoft como fuente de los datos (puedes insertar el siguiente código en tu blog o página web).

Fuente: MilkZoft

Descarga el tutorial en formato PDF

buenas tardes no se de cuando sea este tutorial pero tiene errores con lasa comillas, parece una configuracion del teclado o algo por el estilo para verlo mejor aqui les dejo el codigo php correcto, saludos desde venezuela.

ZES

  <?php
    $conexion = mysql_connect("localhost", "usuario", "pass") or die (mysql_error());
    mysql_select_db("BD");

    //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>';
    ?>

Me gusta mucho està pagina web, porque tiene muchos tutoriales.

gracias por esos tan aprovechados tutoriales.