Flex: Ejemplo de acceso a datos remotos

El objetivo de este interesante artculo es demostrar cun sencillo y potente es el uso de la tecnologa Flex. En esta ocasin procederemos a invocar a datos almacenados remotamente, y visualizarlos en varios componentes, como una lista o un DataGrid.

El escenario ser, por un lado, un sistema remoto (o local) basado en Apache, en donde se ha instalado un servidor de base de datos MySQL y el motor de PHP. Este sistema contendr un servicio que retornar un XML con la informacin recogida, la cual ser interpretada por la aplicacin Flex, que mostrar dicha informacin.

En primer lugar, se ha creado una base de datos con una tabla muy sencilla que contendr una relacin de categoras. Esta tabla tiene la siguiente estructura:

TABLA: gallery_categories
CAMPO: id_category - unsigned integer, not null, primary key
CAMPO: category_name - varchar(16), not null
CAMPO: category_directory - varchar(255), not null

Para acceder a la base de datos, utilizaremos PHP, el cual se ha instalado sobre el servidor web Apache. En el directorio "htdocs" de Apache, se ha creado el fichero "service_categories.php". Este fichero contendr el siguiente cdigo:

 function getCategories() {
  $xml = "";
  mysql_select_db('basedatos');   
  $qry_categories = "select id_category, category_name 
      from gallery_categories";
  $result_categories = mysql_query($qry_categories);
  $num_categories = mysql_num_rows($result_categories);
  if ($num_categories>0) {
   $xml="\n";

   for ($i=0; $i<$num_categories; $i++)
   {
    $row_categories = mysql_fetch_array($result_categories);
    $category_name = $row_categories['category_name'];
    $xml = $xml."  \n";
    $xml = $xml."    ".$row_categories['category_name'].
       "\n";
    $xml = $xml."    ".$row_categories['id_category'].
       "\n";
    $xml = $xml."  \n";
   } 
   
   $xml= $xml."\n";
  }
  
  return $xml;
 }


 @ $db = mysql_pconnect('localhost', 'usuario', 'password');
 
 if ($db)
 {
   $categories = getCategories();
   echo "\n\n";
   echo $categories;
   mysql_close($db);
 }
   
?>

El cdigo PHP conecta con la base de datos (mysql_pconnect), invoca a la funcin getCategories(), la cual accede a la tabla, leyendo todos sus registros, y componiendo un XML, el cual ser retornado por PHP. Este XML ser como el siguiente:

  
    Categoria1
    1
  
  
    Categoria2
    2
  

Podramos haber usado los nombres de los campos en el XML. El uso de los tags "label" y "data" es debido a que el componente lista de Flex, utiliza estos tags clave para formar automticamente la lista, mostrando el texto (label) y asociando el cdigo correspondiente (data).

Una vez resuelta la lgica de negocio, le toca el turno a la presentacin, en la cual Flex es el protagonista. Se comienza con la siguiente estructura de cdigo:

   xmlns:mx="http://www.adobe.com/2006/mxml" 
   layout="absolute"
   creationComplete="categoriesRequest.send()">

Flex utiliza el lenguaje MXML, basado en un juego especial de cdigos en formato XML. Por ello, la primera lnea ( y , y entre estos tags ira toda nuestra aplicacin. A modo aclaratorio, todos los tags de Flex utilizan el prefijo "mx:", seguido de un tag correspondiente a un comando del lenguaje MXML.

El atributo "

El atributo "layout", indica la forma en que se distribuirn los componentes en el espacio de visualizacin de la aplicacin. El valor "absolute" indica que la posicin estar basada en coordenadas X e Y, desde la esquina superior izquierda, expresada en pxeles.

El atributo "creationComplete" indica qu debe hacer la aplicacin una vez haya sido creada la instancia de la misma. En este caso, invocar al mtodo send() del objeto "categoriesRequest", el cual se ver a continuacin, y que se encargar de invocar al servicio creado en PHP.

El primer comando a utilizar dentro de nuestra aplicacin ser la siguiente:

   id="categoriesRequest" 
   url="http://localhost/service_categories.php"
   resultFormat="e4x"
   useProxy="false"
/> 

Este comando crear un servicio HTTP, el cual invocar al servicio creado en PHP, indicando la ubicacin de ste en el atributo "url". El atributo "id" genera el nombre de cualquier objeto. En este caso, el objeto "categoriesRequest" es invocado a travs de su mtodo send() una vez creada la aplicacin (ver el atributo creationComplete()". El atributo "resultFormat" establece el formato del XML a ser tratado, que, en este caso, es el "e4x", el cual permitir tratar el XML de forma sencilla e intuitiva. Por ltimo, el atributo "useProxy" determinar el uso de un proxy en caso de ser necesario (en nuestro caso no lo es).

Para probar el correcto funcionamiento de este servicio, utilizaremos el componente TextArea, el cual mostrar el XML recuperado por el objeto "categoriesRequest". Se incluir el siguiente cdigo justo despus del anterior:

   width="300" height="200" 
   text="{categoriesRequest.lastResult.toString()}"/>

El componente TextArea mostrar una caja de texto grande que permite visualizar varias lneas. El atributo "width" establece el ancho (en pxeles) del componente. El atributo "height" establece el ancho. El atributo "text" contiene el texto a visualizar en el componente. En este caso, el resultado del comando ejecutado entre las llaves ser lo que se visualice. El comando en cuestin es el texto devuelto por el mtodo toString(), correspondiente al XML invocado por el objeto "categoriesRequest". "lastResult" permite posicionarse al inicio del XML obtenido.

El resultado sera el siguiente:

Una vez verificado que se recoge bien el XML, se procede a utilizar el mismo para utilizar los datos obtenidos de forma funcional. En el primer ejemplo se utilizar una lista, la cual mostrar los valores legibles, uno debajo de otro. Cuando se selecciona uno de estos valores legibles, internamente tendr asociado un valor clave, como un cdigo o un identificador. Para ello, el XML debe tener los tags clave y . Para ello, se sustituir el cdigo del componente TextArea por este otro cdigo:

   id="lst_categories" 
   dataProvider="{categoriesRequest.lastResult.category}"/>

El componente List acceder al nivel del tags "category" dentro del XML, recogiendo de cada uno encontrado los atributos "label" y "data", y aplicando el texto y el valor correspondientes a la lista. El atributo "dataProvider" se encargar de acceder a dicho nivel, dentro del XML obtenido en el objeto "categoriesRequest".

El ltimo componente a probar ser DataGrid, que mostrar una tabla con los datos. En este caso, no sera necesario que utilice los tags clave "label" y "data", pudiendo utilizarse los tags deseados. El cdigo para este componente ser el siguiente:

   dataProvider="{categoriesRequest.lastResult.category}">
   
               headerText="ID" 
         dataField="data"/>
               headerText="Nombre" 
         dataField="label"/>
   

"DataGrid" define el objeto de tabla, que se alimentar de los niveles "category" del XML (dataProvider). El tag "mx:columns" define la estructura de columnas de la tabla, cada una de las cuales est representada por el tag "mx:DataGridColumn", estableciendo el texto de cabecera (headerText) y el campo origen de los datos (dataField).

El resultado sera el siguiente:

Technology IT News

Read More...

[Source: Rafinguer Blog: El blog de tecnologa]