En esta ocasión no veremos a detalle todo el código que involucra el sistema; sin embargo, puedes encontrar al final de esta entrada los archivos fuentes.
El sistema funciona de la siguiente manera:
- El usuario primero da de alta tipo de monedas en la Sección de Divisas (Su nombre y símbolo).
- Posteriormente el usuario puede dar de alta servicios en la Sección de Servicios (valga la redundancia). Estos servicios son opcionales y pueden seleccionarse cuando un usuario introduce un gasto en el sistema. Ejemplo de servicios: teléfono, gas, luz, educación, restaurantes, entretenimiento, etc.
- Dentro del sistema, el usuario puede dar de alta gastos e ingresos. Estos gastos o ingresos requieren de la fecha, cantidad y divisa con la cual se realizó la operación. De manera opcional se puede introducir un concepto (descripción) y se puede seleccionar un servicio (si se trata de un gasto).

Comenzaremos con el script de nuestra base de datos:

# Host: localhost    Database: codmetr_gastos
# ------------------------------------------------------
# Server version 4.1.22-community-nt

#
# Table structure for table tbldivisa
#
CREATE TABLE `tbldivisa` (
  `INTNUMDIVISA` int(11) NOT NULL auto_increment,
  `STRNOMBRE` varchar(30) NOT NULL default '',
  `STRSIMBOLO` varchar(5) character set utf8 default NULL,
  PRIMARY KEY  (`INTNUMDIVISA`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;

#
# Table structure for table tbloperacion
#
CREATE TABLE `tbloperacion` (
  `INTNUMOPERACION` int(11) NOT NULL auto_increment,
  `DTMFECHA` date NOT NULL default '0000-00-00',
  `STRCONCEPTO` varchar(100) default NULL,
  `NUMCANTIDAD` decimal(10,2) default NULL,
  `INTNUMDIVISA` int(11) NOT NULL default '0',
  `INTNUMSERVICIO` int(11) default NULL,
  `INTOPERACION` int(11) NOT NULL default '0',
  PRIMARY KEY  (`INTNUMOPERACION`)
) ENGINE=MyISAM AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;

#
# Table structure for table tblservicio
#
CREATE TABLE `tblservicio` (
  `INTNUMSERVICIO` int(11) NOT NULL auto_increment,
  `STRNOMBRE` varchar(50) default NULL,
  PRIMARY KEY  (`INTNUMSERVICIO`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;

Del código anterior podemos observar que tenemos una tabla tbldivisa, en la cual almacenamos los tipos de moneda que utilizamos. Una tabla tblservicio donde guardamos los servicios ingresados; y una tabla tbloperacion en donde almacenamos las operaciones (gastos e ingresos). Las relaciones entre divisas y servicios con respecto a las operaciones están dadas por el ID de estas tablas (INTNUMDIVISA e INTNUMSERVICIO).

Ahora veremos el código PHP de nuestra que funcionará como servicio:

<?php
class SistemaGastos
{
	var $sqlstring = "";
	var $server = "localhost";
	var $user =  "usuario_database";
	var $pass = "contrasena_database";
	var $database = "codigometr_gastos";

	var $db = 0;
	var $rs = 0;
	var $row = 0;
	var $recordcount = 0;
	var $EOF = true;

	function _conectarBaseDatos()
	{
		 $this->db = mysql_connect($this->server,$this->user,$this->pass);
   		 mysql_select_db($this->database,$this->db) or die(mysql_error());
	}

	function _ejecutarQuery($strSql)
	{
    		$this->sqlstring = $strSql;
	    	$this->_exec_command();
		return $this->lastid;
    	}

	function _exec_command()
	{
		if ($this->db && $this->sqlstring!="")
		{
			$this->rs = mysql_query($this->sqlstring,$this->db);
			if ($this->rs)
			{
				$this->EOF = true;
				$this->recordcount = mysql_affected_rows();
				$this->lastid = mysql_insert_id();
			}
			else
			{
				$this->recordcount = 0;
				$this->EOF = true;
			}
		}
		else
		{
			$this->recordcount = 0;
			$this->EOF = true;
		}
	}	

	function _destruir()
	{
    		if($this->db)
			mysql_close($this->db);
	}

	/* Métodos para la tabla tbldivisa */
	function insertarDivisa($nombre, $simbolo)
	{
		$this->_conectarBaseDatos();
		$sql = "Insert into `tbldivisa` (`STRNOMBRE`, `STRSIMBOLO`) VALUES ('" . $nombre . "', '" . $simbolo . "')";
		$this->_ejecutarQuery($sql);
		$this->_destruir();
	}

	function modificarDivisa($idDivisa, $nombre, $simbolo)
	{
		$this->_conectarBaseDatos();
		$sql = "Update `tbldivisa` set `STRNOMBRE` = '" . $nombre . "', `STRSIMBOLO` = '" . $simbolo . "' where `INTNUMDIVISA` = " . $idDivisa;
		$this->_ejecutarQuery($sql);
		$this->_destruir();
	}

	function eliminarDivisa($idDivisa)
	{
		$this->_conectarBaseDatos();
		$sql = "Delete from `tbldivisa` where `INTNUMDIVISA`= " . $idDivisa;
		$result = mysql_query($sql);
		$sql = "Delete from `tbloperacion` where `INTNUMDIVISA`= " . $idDivisa;
		mysql_query($sql);
		$this->_destruir();
		return $result;
	}

	function obtenerDivisas()
	{
		$this->_conectarBaseDatos();
		$sql = "Select INTNUMDIVISA, STRNOMBRE, STRSIMBOLO from tbldivisa ORDER BY STRNOMBRE asc";
		$result = mysql_query($sql);

		while ($row = mysql_fetch_object($result))
		{
			$divisas[] = $row;
		}	

		$this->_destruir();

		return($divisas);
	}

	/* Métodos para la tabla tblservicio */
	function insertarServicio($nombre)
	{
		$this->_conectarBaseDatos();
		$sql = "Insert into `tblservicio` (`STRNOMBRE`) VALUES ('" . $nombre . "')";
		$this->_ejecutarQuery($sql);
		$this->_destruir();
	}

	function modificarServicio($idServicio, $nombre)
	{
		$this->_conectarBaseDatos();
		$sql = "Update `tblservicio` set `STRNOMBRE` = '" . $nombre . "' where `INTNUMSERVICIO` = " . $idServicio;
		$this->_ejecutarQuery($sql);
		$this->_destruir();
	}

	function eliminarServicio($idServicio)
	{
		$this->_conectarBaseDatos();
		$sql = "Delete from `tblservicio` where `INTNUMSERVICIO`= " . $idServicio;
		$result = mysql_query($sql);
		$sql = "Delete from `tbloperacion` where `INTNUMSERVICIO`= " . $idServicio;
		mysql_query($sql);
		$this->_destruir();
		return $result;
	}

	function obtenerServicios()
	{
		$this->_conectarBaseDatos();
		$sql = "Select INTNUMSERVICIO, STRNOMBRE from tblservicio ORDER BY STRNOMBRE asc";
		$result = mysql_query($sql);

		while ($row = mysql_fetch_object($result))
		{
			$servicios[] = $row;
		}	

		$this->_destruir();

		return($servicios);
	}

	/* Métodos para la tabla tbloperacion */
	function insertarOperacion($fecha, $concepto, $cantidad, $id_divisa, $servicio, $operacion)
	{
		$this->_conectarBaseDatos();
		$sql = "INSERT INTO `tbloperacion` (DTMFECHA, STRCONCEPTO, NUMCANTIDAD, INTNUMDIVISA, INTNUMSERVICIO, INTOPERACION) VALUES ('" . $fecha . "','" . $concepto . "'," . $cantidad . "," . $id_divisa . "," . $servicio . "," . $operacion . ")";
		$result = $this->_ejecutarQuery($sql);
		$this->_destruir();

		return $result;
	}

	function actualizarOperacion($idOperacion, $fecha, $concepto, $cantidad, $id_divisa, $servicio, $operacion)
	{
		$this->_conectarBaseDatos();
		$sql = "Update `tbloperacion` set `DTMFECHA` = '" . $fecha . "', `STRCONCEPTO` = '" . $concepto . "', `NUMCANTIDAD` = " . $cantidad . ", `INTNUMDIVISA` = " . $id_divisa . ", `INTNUMSERVICIO` = " . $servicio . ", `INTOPERACION` = " . $operacion . " where `INTNUMOPERACION` = " . $idOperacion;
		$result = $this->_ejecutarQuery($sql);
		$this->_destruir();
		return $result;
	}

	function eliminarOperacion($idOperacion)
	{
		$this->_conectarBaseDatos();
		$sql = "Delete from `tbloperacion` where `INTNUMOPERACION`= " . $idOperacion;
		$result = mysql_query($sql);
		$this->_destruir();
		return $result;
	}

	function obtenerOperaciones()
	{
		$this->_conectarBaseDatos();
		$sql = "Select * from `tbloperacion` ORDER BY DTMFECHA asc";
		$result = mysql_query($sql);

		while ($row = mysql_fetch_object($result))
		{
			$operaciones[] = $row;
		}	

		$this->_destruir();

		return($operaciones);
	}

	function realizarConsulta($servicio, $divisa, $concepto, $fecha1, $fecha2, $cantidad1, $cantidad2, $operacion)
	{
		$this->_conectarBaseDatos();
		$sql = "Select top.DTMFECHA, top.STRCONCEPTO, top.NUMCANTIDAD, top.INTNUMDIVISA, top.INTNUMSERVICIO, top.INTOPERACION, td.STRNOMBRE, td.STRSIMBOLO FROM tbloperacion AS top, tbldivisa as td WHERE td.INTNUMDIVISA = top.INTNUMDIVISA";

		/* Selección Concepto */
		if($concepto != "")
			$sql .= " AND top.STRCONCEPTO LIKE '%" . $concepto . "%'";

		/* Selección Divisa */
		if($divisa != 0) {
			$sql .= " AND top.INTNUMDIVISA = " . $divisa . " AND td.INTNUMDIVISA = " . $divisa;
		}

		/* Selección Servicio */
		if($servicio != 0) {
			$sql .= " AND top.INTNUMSERVICIO = " . $servicio;
		}

		if($cantidad1 != "" && $cantidad2 != "")
		{
			if($cantidad1 <= $cantidad2)
				$sql .= " AND top.NUMCANTIDAD BETWEEN " . $cantidad1 . " AND " . $cantidad2;
			else
				$sql .= " AND top.NUMCANTIDADBETWEEN " . $cantidad2 . " AND " . $cantidad1;
		}
		else if($cantidad1 != "")
			$sql .= " AND top.NUMCANTIDAD = " . $cantidad1;
		else if($cantidad2 != "")
			$sql .= " AND top.NUMCANTIDAD = " . $cantidad2;

		/* Selección Operación */
		if($operacion == 3)
			$sql .= " AND top.INTOPERACION >= 1 AND top.INTOPERACION <= 2";
		else
			$sql .= " AND top.INTOPERACION = "  . $operacion;		

		if($fecha1 != NULL || $fecha2 != NULL)
		{
			if($fecha1 != "" && $fecha2 == "")
			{
				$sql .= " AND top.DTMFECHA = '" . $fecha1 . "'";
			}
			else
			{
				$sql .= " AND top.DTMFECHA >= '" . $fecha1 . "' AND top.DTMFECHA <= '" . $fecha2 . "'";
			}
		}

		$sql .= " ORDER BY top.DTMFECHA asc, top.NUMCANTIDAD asc";
		$result = mysql_query($sql);

		while ($row = mysql_fetch_object($result))
		{
			$registros[] = $row;
		}	

		$this->_destruir();

		return($registros);
	}
}
?>

Los métodos que inician con guión bajo (_) son métodos privados y por lo tanto no podemos acceder a ellos desde Flex. Los otros métodos insertarDivisa, modificarDivisa, eliminarDivisa, obtenerDivisas, etc. son métodos públicos a los cuales accedemos desde Flex.
Observa cómo en los métodos obtenerXXX almacenamos los registros en un arreglo y lo regresamos a nuestra aplicación. Los queries en realidad son muy sencillos, por lo que no requieren explicación; solamente observa cómo en los métodos eliminarServicio y eliminarDivisa hacemos el borrado de los registros que involucran estos registros en la tabla tbloperacion. Esto es para evitar que haya inconsistencia en la base de datos.

Ahora veremos el código principal de nuestra aplicación en Flex.
Para poder hacer uso del AMFPHP necesitamos de las librerías NetConnection y Responder.

	import flash.net.NetConnection;
	import flash.net.Responder;

Para poder acceder a los servicios en AMFPHP debemos especificar la ruta en la cual se encuentra el archivo gateway.php de AMFPHP:

	private var gateway:String = "http://www.codigometropoli.com/wp-content/uploads/2008/10/SistemaGastos/AMFPHP1.9/gateway.php";
	private var connection:NetConnection;
	private var responder:Responder;

Al iniciar la aplicación debemos llamar a la función connect pasándole como parámetro el gateway:

function iniciaAplicacion()
{
	connection = new NetConnection;
	connection.connect(gateway);
}

Dentro del constructor de la clase Responder debemos especificar las funciones que se ejecutarán en caso de que la llamada haya sido sido exitosa y en caso de que haya existido un error. Para hacer la llamada al servicio utilizamos la función call; a la cual pasamos como parámetro el nombre de la función que queremos llamar y que se encuentra en la clase SistemaGastos.php, nuestro objeto de la clase Responder y los parámetros que debemos pasarle a la función:

responder = new Responder(insertarOperacionResult, errorConsulta);
connection.call("SistemaGastos.insertarOperacion", responder, param1, param2, param3...);

Del código anterior podemos deducir que el nombre de nuestra clase en PHP es SistemaGastos y que tiene un método público llamado insertarOperacion.

En caso de que la llamada haya sido exitosa, se ejecutará el método insertarOperacionResult:

private function insertarOperacionResult(result:Object):void {
	if(result.toString() != "0")
	{
		restablecerForma();
		Alert.show("Registro almacenado", "Aviso");
	}
	else
		Alert.show("No se pudo almacenar el registro", "Error");
}

En caso contrario, si existiera algún error en la llamada al servicio, la función errorConsulta se ejecutará:

private function errorConsulta(fault:Object):void {
	Alert.show(fault.description, "Error");
	CursorManager.removeBusyCursor();
}

Nuestra forma de alta de operación (Gasto o Ingreso) será la siguiente:

De la imagen anterior puedes saber qué tipo de información estamos solicitando, cuál es la obligatoria (Fecha, Cantidad y Divisa), así como la forma en qué estamos mostrando al usuario las divisas y servicios dados de alta (por medio de ComboBox).

Las partes de código mostradas forman parte de la llamada a una función que se encarga de insertar un registro. El código no tendrá variación cuando se trate de modificar un registro; y cuando se trate de eliminar un registro solamente le pasaremos el ID del registro a eliminar. ¿Pero qué pasa cuando se trata de una consulta? ¿Cómo obtenemos los registros registros regresados por la base de datos? ¿Cómo mostramos esos registros?

Si leíste el tutorial sobre Componente DataGrid y las cuatro entregas del tutorial Sistema de Clientes en AIR sabrás que podemos recorrer cada uno de los registros obtenidos de la base de datos y almacenarlos en un arreglo por medio del método push; posteriormente ese arreglo es pasado al DataGrid como su proveedor de datos (dataProvider).

Primero hacemos la llamada al método realizarConsulta del servicio SistemaGastos:

responder = new Responder(realizarConsultaResult, errorConsulta);
connection.call("SistemaGastos.realizarConsulta", responder, param1, param2, param3...);

Definimos el código de nuestra función realizarConsultaResult:

private function realizarConsultaResult(result:Array):void
{
	if(result != null)
	{
		var totalRegistros:Number = result.length;
		var totales_array:Array = new Array();

		for (var i:int = 0; i < result.length; i++)
		{
	    		...
	       		var divisa_txt:String = result[i].STRNOMBRE;
       			var simbolo_txt:String = result[i].STRSIMBOLO;
	       		...
	    		var cantidad:Number = result[i].NUMCANTIDAD;

		    	if(totales_array.length == 0)
		    		totales_array.push({cantidad:cantidad, divisaID:result[i].INTNUMDIVISA, divisa:divisa_txt, simbolo:result[i].STRSIMBOLO});
	    		else
	    		{
	    			var posicion:Number = regresaPosicionMoneda(totales_array, result[i].INTNUMDIVISA);
		    		if(posicion != -1)
		    		{
	    				var total:Number = totales_array[posicion].cantidad;
	    				total += cantidad;
	    				totales_array[posicion].cantidad = total;
		    		}
		    		else
	    				totales_array.push({cantidad:cantidad, divisaID:result[i].INTNUMDIVISA, divisa:divisa_txt, simbolo:result[i].STRSIMBOLO});
	    			}
data_provider.push({fecha_operacion:DateUtilities.returnReadableDate(result[i].DTMFECHA), concepto:result[i].STRCONCEPTO, cantidad:currencyFormatter.format(result[i].NUMCANTIDAD), cantidad_numero:result[i].NUMCANTIDAD, servicio:servicio_txt, divisa:divisa_txt, operacion:returnTipoOperacion(result[i].INTOPERACION)});
		}

		registros_dg.dataProvider = data_provider;

		info_txt.text = "Total registros: " + totalRegistros + "\n";
		for(var j:Number = 0; j < totales_array.length; j++)
		{
		 	var simbolo:String = totales_array[j].simbolo;
		 	if(simbolo == "?")
		 		simbolo = "€";
		 	currencyFormatter.currencySymbol = simbolo;
		 	info_txt.text += "\n     --> " + totales_array[j].divisa +  " = " + currencyFormatter.format(totales_array[j].cantidad);
		 }
	}
	else
		info_txt.text = "";

	CursorManager.removeBusyCursor();
}

Del código anterior podemos decir que… primero verificamos que el resultado obtenido por el servicio sea distinto de nulo (es decir, que no esté vacío) ya que si no nos mostraría error. En la variable totalRegistros almacenamos el número de registros obtenidos mediante la propiedad length del arreglo. Recorremos el arreglo result por medio de un ciclo for y dentro de este ciclo hacemos las operaciones que requerimos con los valores obtenidos. Observa que para acceder a cada una de las columnas de nuestros registros lo hacemos de la forma result[i].STRNOMBRE, result[i].STRSIMBOLO, result[i].INTNUMDIVISA, etc. donde STRNOMBRE, STRSIMBOLO, … son los nombres de nuestras columnas en la tabla tbloperacion de nuestra base de datos. Dentro del código de nuestro ciclo for estamos sumando (ingreso) o restando (si se trata de gasto) las cantidades pertenecientes a un mismo tipo de moneda; y así mostrar la cantidad ganada o gastada por tipo de moneda.

Dentro del archivo SistemaGastos.php observarás que el código de la función realizarConsulta es largo y está lleno de condicionales. Esto es porque las consultas las podemos realizar de acuerdo a los siguientes criterios:

Hemos llegado al final de este tutorial, no olvidemos revisar el ejemplo y bajar los archivos fuentes.

Este control tiene las siguientes propiedades:

• Columnas con diferente o igual tamaño
• Columnas cuyo tamaño el usuario puede agrandar o disminuir en tiempo de ejecución
• Columnas que el usuario puede reordenar en tiempo de ejecución
• Las cabeceras de las columnas pueden ser personalizables
• Usar un “Item Renderer”específico para mostrar datos, que no sean texto, dentro de cualquier columna. Por ejemplo, podemos crear un Item Rendender para mostrar botones, combobox, botones de radio, iconos, etc. dentro de una columna.
• Ordenar la información mostrada en el DataGrid de acuerdo al criterio de alguna columna en específico.

Si deseas conocer todos los métodos y propiedades que conforman la clase DataGrid, ingresa a la siguiente página y de lado inferior izquierdo, dentro de la lista “All Classes” busca la clase DataGrid. Esta clase pertenece al paquete mx.controls, por lo que también podrías llegar a la información de la clase DataGrid haciendo click en la parte superior izquierda (Packages) en donde dice mx.controls.

Tutorial

Abre el programa Flex Builder 3 y crea un nuevo proyecto (Flex Project) con el nombre DataGridControl. No olvides seleccionar la opción “Web application” como tipo de aplicación (Application type).
En el panel Components, dentro de la sección Controls, busca el control DataGrid y arrástralo al área de trabajo. Selecciona el DataGrid que tienes en el área de trabajo y dentro del panel Properties asígnale el ID de productos_dg.

Haz click en el botón Source para cambiarte de la vista de diseño a la vista de código. Observarás que el programa creó automáticamente el código del DataGrid; este código es similar a:

<mx:DataGrid x="204" y="135" id="productos_dg">
	<mx:columns>
		<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
		<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
		<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
	</mx:columns>
</mx:DataGrid>

Como podrás darte cuenta, este DataGrid recién creado está formado por tres columnas (cada DataGridColumn que se encuentra dentro de los tags mx:columns). El encabezado por default de estas columnas es Column 1, Column 2 y Column 3. Agrega una nueva columna y cambiales el nombre por Producto, Precio Unitario, Cantidad y Total. El código quedará de la siguiente forma:

<mx:DataGrid x="278.5" y="46" id="productos_dg" width="638" height="281">
	<mx:columns>
		<mx:DataGridColumn headerText="Título DVD" dataField="titulo"/>
		<mx:DataGridColumn headerText="Protagonistas" dataField="protagonistas"/>
		<mx:DataGridColumn headerText="Precio" dataField="precio"/>
<mx:DataGridColumn headerText="Año" dataField="fecha"/>
	</mx:columns>
</mx:DataGrid>

En el código anterior podrás ver que también le cambié el valor de la propiedad dataField a cada columna.
La propiedad dataField es el nombre del campo o propiedad a la que hace referencia en el arreglo o colección que contiene la información que llenará el DataGrid. A este arreglo o colección de datos se le conoce como Data Provider (proveedor de datos o de información).

Existen varias formas de llenar de información el dataProvider. La forma más sencilla y menos dinámica es usando el siguiente código:

<mx:dataProvider>
    <mx:Object titulo="Dexter - The complete second season" 		protagonistas="Michael C. Hall" precio="24.99" fecha="2006"/>
    <mx:Object titulo="The Office - Season Four" 					protagonistas="Steve Carell" 	precio="30.99" fecha="2005" />
    <mx:Object titulo="Gilmore Girls - The complete seventh season" protagonistas="Lauren Graham, Alexis Bledel" precio="22.99" fecha="2006" />
    <mx:Object titulo="21 Jump Street - The complete first season" 	protagonistas="Peter DeLuise, Johnny Depp" precio="21.99" fecha="1987" />
    <mx:Object titulo="Friends - The complete ninth season" 		protagonistas="Jennifer Aniston, Courteney Cox, Lisa Kudrow, Matt LeBlanc, Matthew Perry, David Schwimmer" precio="24.99" fecha="2002" />
</mx:dataProvider>

El código anterior deberás colocarlo dentro de los tags <mx:DataGrid>  y </mx:DataGrid>, ya sea antes del código de las columnas o bien después.

Si corres la aplicación verás la información en el DataGrid similar a la siguiente imagen:

De la imagen anterior, podemos ver que automáticamente el ancho de las columnas del DataGrid es el mismo para las cuatro columnas. Para las columnas de Precio y Año es mucho desperdicio de espacio ya que la información de estas columnas es poca. Cambia el código por lo siguiente para ajustar las columnas:

<mx:columns>
	<mx:DataGridColumn headerText="Título DVD" dataField="titulo" width="250"/>
	<mx:DataGridColumn headerText="Protagonistas" dataField="protagonistas"/>
	<mx:DataGridColumn headerText="Precio" dataField="precio" width="50"/>
<mx:DataGridColumn headerText="Año" dataField="fecha" width="50"/>
</mx:columns>

Después de realizar los cambios anteriores, la aplicación se verá igual a la siguiente imagen:

Los títulos de los DVDs y los protagonistas se pueden leer mejor, sin embargo la información no se muestra completa. Si le das click en el borde derecho de cada columna (dentro del área del encabezado) podrás ajustar el ancho de las columnas.

Si haces click sobre el título de la columna Título DVD verás que la información es ordenada alfabéticamente de forma ascendente de acuerdo a los títulos DVD. Si vuelves a hacer click sobre el título de la misma columna la información se mostrará en orden alfabético descendente. Si queremos evitar que una columna se pueda ordenar (en ocasiones esto es necesario cuando usamos ítem renderers en la columna), agrégale la propiedad sortable con el valor de false:

<mx:DataGridColumn headerText="Título DVD" dataField="titulo" width="250" sortable="false"/>

Ahora haz click sobre la columna Precio y, sin soltarlo, arrastra la columna y ponla en medio de la columna Título DVD y Protagonistas. Las columnas, por default, tienen la opción draggable activada, para desactivarlo agrega esta propiedad con el valor de false:

<mx:DataGridColumn headerText="Precio" dataField="precio" width="50" draggable="false"/>

Otra forma de pasarle la información al DataGrid es creando un arreglo y llenándolo con la información que contendrá el DataGrid. Arrastra otro control DataGrid al área de trabajo y ponle de ID productos2_dg. A este nuevo DataGrid ponle la misma cantidad de columnas y propiedades. El código de este DataGrid quedaría:

<mx:DataGrid x="279.5" y="401" id="productos2_dg" width="638" height="281" creationComplete="llenaDataGrid()">

	<mx:columns>
		<mx:DataGridColumn headerText="Título DVD" dataField="titulo" width="250"/>
		<mx:DataGridColumn headerText="Protagonistas" dataField="protagonistas"/>
		<mx:DataGridColumn headerText="Precio" dataField="precio" width="50"/>
		<mx:DataGridColumn headerText="Año" dataField="fecha" width="50"/>
	</mx:columns>

</mx:DataGrid>

Para crear y llenar el arreglo, añade el siguiente código a tu aplicación:

<mx:Script>
	<![CDATA[
		private var data_provider:Array = new Array();

		private function llenaDataGrid() {
		data_provider.push({titulo:"Dexter - The complete second season", protagonistas:"Michael C. Hall", precio:"$24.99", fecha:"2006", imagen:"Dexter.jpg"});
		data_provider.push({titulo:"The Office - Season Four", protagonistas:"Steve Carell", precio:"$30.99", fecha:"2005", imagen:"The_Office.jpg"});
		data_provider.push({titulo:"Gilmore Girls - The complete seventh season", protagonistas:"Lauren Graham, Alexis Bledel", precio:"$22.99", fecha:"2006", imagen:"Gilmore_Girls.jpg"});
		data_provider.push({titulo:"21 Jump Street - The complete first season", protagonistas:"Peter DeLuise, Johnny Depp", precio:"$21.99", fecha:"1987", imagen:"21_Jump_Street.jpg"});
		data_provider.push({titulo:"Friends - The complete ninth season", protagonistas:"Jennifer Aniston, Courteney Cox, Lisa Kudrow, Matt LeBlanc, Matthew Perry, David Schwimmer", precio:"$24.99", fecha:"2002", imagen:"Friends.jpg"});

		productos2_dg.dataProvider = data_provider;
		}
	]]>
</mx:Script>

A pesar de que en este ejemplo estamos poniendo la información directamente en el código y no lo estamos obteniendo dinámicamente, te puedes dar cuenta que de esta segunda forma podemos obtener la información dinámicamente metiendo el código de push dentro de un ciclo for que recorra los registros regresados por un query.

Este post es para explicar a grandes rasgos la finalidad y funcionalidad de un DataGrid. Este post nos servirá como entrada a una serie de tutoriales que pondré en unos días sobre cómo crear, almacenar y eliminar registro de una base SQLite con AIR. Dentro de estos tutoriales usaremos DataGrids para mostrar la información obtenida de la base de datos.

Evento ListEvent.CHANGE

Este evento es uno de los más importantes cuando se está trabajando con DataGrids. Este evento es disparado cuando un usuario selecciona alguno de los registros del DataGrid. Para ejemplificar su uso, mostraremos la imagen del DVD que el usuario seleccionó (sí, para eso le agregamos al arreglo data_provider el nombre de la imagen de cada DVD).
Después de la línea productos2_dg.dataProvider = data_provider; agrega las siguientes líneas:

productos2_dg.addEventListener(ListEvent.CHANGE, muestraImagen);

En la línea anterior de código le estamos diciendo al programa que cada vez que el evento CHANGE se ejecute, llame a la función muestraImagen.
Al finalizar la función llenaDataGrid, crea la función muestraImagen con el siguiente código:

private function muestraImagen(event:ListEvent) {
	imagen_dvd.source = "dvds/" + event.target.selectedItem.imagen;
}

En este código estamos recibiendo como parámetro un evento de tipo ListEvent. Este parámetro nos permite saber sobre qué registro del DataGrid el usuario hizo click (event.target.selectedItem). Además, estamos obteniendo la propiedad imagen (que nosotros establecimos en el dataProvider) de ese registro (event.target.selectedItem.imagen). Recuerda, que además de la propiedad imagen puedes obtener la propiedad event.target.selectedItem.titulo, event.target.selectedItem.precio, event.target.selectedItem.fecha, etc. Genial ¿no? De esta forma podríamos pasarle a cada registro su ID en la base de datos para cuando queramos modificarlo o eliminarlo.
Ya que tenemos la propiedad imagen, se lo pasamos a la propiedad source de image_dvd. Pero… ¿qué es imagen_dvd? imagen_dvd es un componente de tipo Image el cual nos permite cargar y mostrar imágenes en él. Este componente, al igual que el DataGrid,  se encuentra de la sección Control.

A continuación te muestro el código de este control. Antes de cerrar el tag Application (</mx:Application) inserta el siguiente código:

<mx:Image y="497" width="240" height="240" horizontalCenter="0" id="imagen_dvd" themeColor="#000000"/>

Por último nos queda llamar a la función llenaDataGrid, esta función la llamaremos cuando el segundo DataGrid se haya creado. Para eso usaremos la propiedad creationComplete:

<mx:DataGrid y="268" id="productos2_dg" width="638" height="188" creationComplete="llenaDataGrid()" horizontalCenter="0">

¡Listo! Con las líneas que acabamos de crear estamos insertando un control Image para desplegar los JPGs de cada DVD.

¿Te perdiste? No te preocupes, aquí va el código completo de la aplicación.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:DataGrid y="50" id="productos_dg" width="638" height="188" horizontalCenter="0">

		<mx:columns>
			<mx:DataGridColumn headerText="Título DVD" dataField="titulo" width="250" sortable="false"/>
			<mx:DataGridColumn headerText="Protagonistas" dataField="protagonistas"/>
			<mx:DataGridColumn headerText="Precio" dataField="precio" width="50" draggable="false"/>
			<mx:DataGridColumn headerText="Año" dataField="fecha" width="50"/>
		</mx:columns>

<mx:dataProvider>
    	    <mx:Object titulo="Dexter - The complete second season" protagonistas="Michael C. Hall" precio="$24.99" fecha="2006" imagen="Dexter.jpg"/>
    	    <mx:Object titulo="The Office - Season Four" protagonistas="Steve Carell" 	precio="$30.99" fecha="2005" imagen="The_Office.jpg" />
    	    <mx:Object titulo="Gilmore Girls - The complete seventh season" protagonistas="Lauren Graham, Alexis Bledel" precio="$22.99" fecha="2006" imagen="Gilmore_Girls.jpg"/>
    	    <mx:Object titulo="21 Jump Street - The complete first season" protagonistas="Peter DeLuise, Johnny Depp" precio="$21.99" fecha="1987" imagen="21_Jump_Street.jpg" />
    	    <mx:Object titulo="Friends - The complete ninth season" protagonistas="Jennifer Aniston, Courteney Cox, Lisa Kudrow, Matt LeBlanc, Matthew Perry, David Schwimmer" precio="$24.99" fecha="2002" imagen="Friends.jpg" />
	    </mx:dataProvider>

	</mx:DataGrid>
	<mx:Script>
		<![CDATA[
			import mx.events.ListEvent;
			private var data_provider:Array = new Array();

			private function llenaDataGrid() {
				data_provider.push({titulo:"Dexter - The complete second season", protagonistas:"Michael C. Hall", precio:"$24.99", fecha:"2006", imagen:"Dexter.jpg"});
				data_provider.push({titulo:"The Office - Season Four", protagonistas:"Steve Carell", precio:"$30.99", fecha:"2005", imagen:"The_Office.jpg"});
				data_provider.push({titulo:"Gilmore Girls - The complete seventh season", protagonistas:"Lauren Graham, Alexis Bledel", precio:"$22.99", fecha:"2006", imagen:"Gilmore_Girls.jpg"});
				data_provider.push({titulo:"21 Jump Street - The complete first season", protagonistas:"Peter DeLuise, Johnny Depp", precio:"$21.99", fecha:"1987", imagen:"21_Jump_Street.jpg"});
				data_provider.push({titulo:"Friends - The complete ninth season", protagonistas:"Jennifer Aniston, Courteney Cox, Lisa Kudrow, Matt LeBlanc, Matthew Perry, David Schwimmer", precio:"$24.99", fecha:"2002", imagen:"Friends.jpg"});

				productos2_dg.dataProvider = data_provider;
				productos2_dg.addEventListener(ListEvent.CHANGE, muestraImagen);
			}

			private function muestraImagen(event:ListEvent) {
				imagen_dvd.source = "dvds/" + event.target.selectedItem.imagen;
			}
		]]>
	</mx:Script>
	<mx:DataGrid y="268" id="productos2_dg" width="638" height="188" creationComplete="llenaDataGrid()" horizontalCenter="0">

		<mx:columns>
			<mx:DataGridColumn headerText="Título DVD" dataField="titulo" width="250"/>
			<mx:DataGridColumn headerText="Protagonistas" dataField="protagonistas"/>
			<mx:DataGridColumn headerText="Precio" dataField="precio" width="50"/>
			<mx:DataGridColumn headerText="Año" dataField="fecha" width="50"/>
		</mx:columns>

</mx:DataGrid>
	<mx:Image y="497" width="240" height="240" horizontalCenter="0" id="imagen_dvd" themeColor="#000000"/>
</mx:Application>

Dentro de Flex existe la clase WebService, al cual nos permite acceder a Servicios Web en SOAP. En esta entrada usaremos un servicio web que, de acuerdo a nuestra consulta, nos regresa el número teléfonico (lada) internacional (International Dialing code) del país que seleccionemos.

Para este ejercicio usaremos Flex Builder 3 y Flash CS3.

Tutorial

1. Abre Flex Builder 3 y crea un nuevo proyecto (En tipo de aplicación selecciona Aplicación Web). Ponle como nombre de proyecto LadaInternacional. Haz click en el botón de Finalizar.

2. Da click en el botón vista de <em>Diseño</em> y arrastra los siguientes elementos al área de diseño:

- 1 Componente SWFLoader

- 3 Controles Label con los siguientes textos: País, Lada y Respuesta

- 2 Controles Label sin texto; el ID del primero deberá ser pais_lb, y del segundo lada_lb

- 1 Control TextArea con ID info_txt

La distribución deberá ser similar a la siguiente imagen:

3. Baja el siguiente archivo SWF y guardalo en la carpeta raíz de tu proyecto (LadaInternacional).

La imagen del mapa la bajé de FlashKit en esta dirección.

El archivo de Flash está formado por un mapa y unos botones rojos, los cuales muestra el nombre del país al ponerse encima de ellos (rollOver). Los nombres de instancia de cada uno de estos botones son:

- mex_btn: Botón para México

- can_btn: Botón para Canadá

- usa_btn: Botón para Estados Unidos

- arg_btn: Botón para Argentina

- bra_btn: Botón para Brasil

- esp_btn: Botón para España

El código ActionScript que contiene el archivo de Flash es:

mex_btn.addEventListener(MouseEvent.CLICK, muestraCodigo);
can_btn.addEventListener(MouseEvent.CLICK, muestraCodigo);
usa_btn.addEventListener(MouseEvent.CLICK, muestraCodigo);
arg_btn.addEventListener(MouseEvent.CLICK, muestraCodigo);
bra_btn.addEventListener(MouseEvent.CLICK, muestraCodigo);
esp_btn.addEventListener(MouseEvent.CLICK, muestraCodigo);

function muestraCodigo(evento:MouseEvent):void {
	var pais:String = "";
	switch(evento.target.name){
		case "mex_btn":
			pais = "Mexico";
			break;
		case "can_btn":
			pais = "Canada";
			break;
		case "usa_btn":
			pais = "United States";
			break;
		case "arg_btn":
			pais = "Argentina";
			break;
		case "bra_btn":
			pais = "Brazil";
			break;
		case "esp_btn":
			pais = "Spain";
			break;
	}
	root.parent.parent['parentApplication'].llamadaServicio(pais);
}

El código anterior modifica el valor de la variable pais de acuerdo al botón que se hizo click, y se realiza la llamada a la función llamadaServicio que se encuentra en nuestra aplicación de Flex.

4. Selecciona el SWFLoader y en el panel de propiedades haz click en el botón Browse del lado derecho de Source (Fuente). Selecciona el archivo SWF que acabas de bajar (mapa-en-flash.swf) y haz click en el botón abrir.

5. Haz click en el botón de vista Source. Agrega las siguientes líneas de código

<mx:WebService id="codigoLada" wsdl="http://www.webservicex.net/country.asmx?wsdl" fault="Alert.show(event.fault.faultString);" showBusyCursor="true">
		<mx:operation name="GetISD" result="callResultHandler(event)" fault="callFaultHandler(event)">
			<mx:request>
				<CountryName>{pais}</CountryName>
			</mx:request>
		</mx:operation>
</mx:WebService>

En el código anterior primero creamos el tag WebService y establecemos sus propiedades. En este caso, el servicio web que vamos a usar se encuentra en http://www.webservicex.net/country.asmx?wsdl.
La propiedad fault nos permite especificar qué acciones se llevarán a cabo cuando se presente un error. En este caso estamos mostraremos un mensaje de alerta con la información del error.
La propiedad showBusyCursor cuando está en true mostrará como cursor un reloj mientras se esté ejecutando el servicio.

Dentro del tag de operación (operation) especifícamos el nombre de la función que usaremos como servicio. En este caso la función u operación se llama GetISD y el resultado se usará en la función callResultHandler.

El tag de request nos permite especificar el valor de los párametros que se deben enviar al ejecutar el servicio. En el caso de este Web Service, sólo requeremos enviar un párametro cuyo nombre es CountryName. Este parámetro va a tomar el valor de la variable pais.

El nombre de la función (GetISD) y de los parámetros (CountryName) vienen especificados en el descriptor del servicio. Dentro de este archivo se pueden observar las siguientes líneas:

<s:element name="GetISD">
	<s:complexType>
		<s:sequence>
			<s:element minOccurs="0" maxOccurs="1" name="CountryName" type="s:string"/>
		</s:sequence>
	</s:complexType>
</s:element>

6. Ahora veremos el código necesario para recibir la respuesta del servicio web y hacer uso de los datos recibidos. Añade el siguiente código a tu aplicación de Flex:

<mx:Script>
	<![CDATA[
		/* Importamos las librerías que requerimos */
		import mx.controls.Alert; /* Para mostrar el mensaje de Alerta si hubo algún error */
		import mx.rpc.events.FaultEvent; /* Necesario para cuando se presente un error en el evento al tratar de ejecutar el servicio */
		import mx.rpc.events.ResultEvent; /* Lo utilizamos para manejar los resultados del evento */

		[Bindable]
		public var pais:String = ""; /* Variable que usaremos como parámetro para la llamada del servicio */

		/* Esta función es llamada desde el archivo de Flash cuando se hace click en alguno de los botones de los países */
		public function llamadaServicio(country:String):void {
			pais = country; /* Recibimos como parámetro el nombre del país de acuerdo al botón al que le hizo click el usuario */
			codigoLada.GetISD.send(); /* Hacemos la llamada al servicio enviando los datos necesarios.
			Observa que la variable país ya estaba ligada al servicio (Línea 4 del último código ActionScript que puse) */
		}

		/* Esta función es llamada cuando hubo un error al tratar de ejecutar el servicio */
		private function callFaultHandler(error:FaultEvent):void {
			/* Mostramos el error en consola, con un mensaje de alerta y en el campo de texto info_txt */
			trace("Error: " + error.fault.toString());
			Alert.show(error.fault.toString(), "Error");
			pais_lb.text = error.fault.toString();
		}

		/* Esta función es llamada cuando no hubo error y el servicio web nos regresa la respuesta */
		private function callResultHandler(event:ResultEvent):void {
			// Guardamos en una variable de texto el resultado que trae el evento
			var respuesta:String = event.target.lastResult.toString();
			/* Debido a que el Servicio Web nos regresa un XML, estos datos se los pasamos a una variable de tipo XML */
			var XMLresult:XML = new XML(respuesta);			

			/* Mostramos el resultado en las diversas cajas de texto */
			info_txt.text = XMLresult.Table[0].toXMLString(); /* Mostramos el XML regresado */
			lada_lb.text = XMLresult.Table[0].code.toString(); /* Mostramos el valor del nodo code */
			pais_lb.text = XMLresult.Table[0].name.toString(); /* Mostramos el valor del nodo name */
		}

	]]>
</mx:Script>

Aquí va de nuevo todo el código junto de la aplicación en Flex (LadaInternacional.mxml):

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;

			[Bindable]
			public var pais:String = "";

			public function llamadaServicio(country:String):void {
				pais = country;
				codigoLada.GetISD.send();
			}

			private function callFaultHandler(error:FaultEvent):void {
				trace("Error: " + error.fault.toString());
				Alert.show(error.fault.toString(), "Error");
				info_txt.text = error.fault.toString();
			}

			private function callResultHandler(event:ResultEvent):void {
				var respuesta:String = event.target.lastResult.toString();
				var XMLresult:XML = new XML(respuesta);			

				info_txt.text = XMLresult.Table[0].toXMLString();
				lada_lb.text = XMLresult.Table[0].code.toString();
				pais_lb.text = XMLresult.Table[0].name.toString();
			}

		]]>
	</mx:Script>
	<mx:WebService id="codigoLada" wsdl="http://www.webservicex.net/country.asmx?wsdl" fault="Alert.show(event.fault.faultString);" showBusyCursor="true">
		<mx:operation name="GetISD" result="callResultHandler(event)" fault="callFaultHandler(event)">
			<mx:request>
				<CountryName>{pais}</CountryName>
			</mx:request>
		</mx:operation>
	</mx:WebService>
	<mx:SWFLoader y="18" horizontalCenter="14" source="../mapa-en-flash.swf"/>
	<mx:Label y="284" text="País:" fontWeight="bold" color="#F3F7F8" fontSize="14" horizontalCenter="-132"/>
	<mx:Label y="315" text="Lada:" fontWeight="bold" color="#F3F7F8" fontSize="14" horizontalCenter="-129"/>
	<mx:Label y="284" fontWeight="bold" color="#77180E" fontSize="14" width="129" id="pais_lb" horizontalCenter="-24"/>
	<mx:Label y="315" fontWeight="bold" color="#77180E" fontSize="14" width="129" id="lada_lb" horizontalCenter="-24"/>
	<mx:TextArea y="356" width="345" height="126" id="info_txt" horizontalCenter="84"/>
	<mx:Label y="356" text="Respuesta:" fontWeight="bold" color="#F3F7F8" fontSize="14" horizontalCenter="-149" textDecoration="underline"/>
	<mx:LinkButton click="navigateToURL(new URLRequest('www.codigometropoli.com'))" label="www.codigometropoli.com" horizontalCenter="35" bottom="50" fontSize="12" color="#E1E4E4" themeColor="#00BAFF"/>

</mx:Application>

Hemos llegado al final del tutorial, no olvides bajar los archivos y visitar la página de ejemplo.

Post Relacionados:

» Cargar SWF en Flex

Enlaces recomendados:

» Servicio Web en WikiPedia
» Clase WebService (Adobe® Flex® 3 Language Reference)
» Adobe® Flex® 3 Language Reference

Para este ejercicio usaremos Flex Builder 3, que puedes bajarlo de aquí.

Tutorial

1. Abre Flex Builder 3 y crea un nuevo proyecto (En tipo de aplicación selecciona Aplicación Web). Ponle como nombre de proyecto FLEXSwfLoader. Haz click en el botón de Finalizar.

2. Da click en el botón vista de Diseño y arrastra una etiqueta o Label al área de diseño. Asígnale las siguientes propiedades al botón:

- Width: 200 pixeles de ancho
- Color de fuente: Blanco #FFFFFF
- Bold / Verdana / 12px
- ID: resultado
- Borra el texto de la etiqueta

2. Busca el componente SWFLoader dentro de la lista de Controles del panel Componentes. Arrastra el componente al área de Diseño.

3. Baja el siguiente archivo SWF (ActionScript 3.0) y guardalo en la carpeta raíz de tu proyecto (en este caso deberá ir en la carpeta FLEXSwfLoader). Este archivo lo cargaremos en nuestra aplicación de Flex:

En el archivo Flash tenemos un campo de introducción de texto cuyo nombre de instancia es texto_txt; el texto que introduzcamos aquí se mostrará en la etiqueta (Label) resultado en Flex. Debajo de este campo está el botón “Pasar valor a Flex” con nombre de instancia pasar_txt; este botón se encargará de modificar el valor de la variable mensaje, la cual se mostrará en la etiqueta resultado. Por último hay un botón con “Llamar función” como letrero y nombre de instancia llamar_txt; este botón mostrará un mensaje de alerta de Flex.

El código del archivo de Flash es el siguiente:

pasar_btn.addEventListener(MouseEvent.CLICK, pasar_valor);
llamar_btn.addEventListener(MouseEvent.CLICK, llamar_funcion);

function pasar_valor(evento:MouseEvent):void {
     root.parent.parent['parentApplication']['mensaje'] = texto_txt.text; /* En nuestra aplicación de Flex tendremos definida la variable mensaje. Aquí le estamos modificando su valor de acuerdo al texto introducido por el usuario */
}

function llamar_funcion(evento:MouseEvent):void {
     root.parent.parent['parentApplication'].muestraAlert(); /* En nuestra aplicación de Flex tendremos una función llamada muestraAlert, la cual mostrará un mensaje de Alerta en Flex */
}

4. Selecciona el SWFLoader y en el panel de propiedades haz click en el botón Browse del lado derecho de Source (Fuente). Selecciona el archivo SWF que acabas de bajar (flash-in-flex.swf) y haz click en el botón abrir.

5. Cámbiate a la vista de Código (Source) y agrega las siguientes líneas de código:

<mx:Script>
	<![CDATA[
		import mx.controls.Alert; /* Importamos la librería para mostrar el mensaje de Alerta */

		[Bindable]
		public var mensaje:String = ""; /* Variable que modificaremos por medio del SWF. OJO: La variable debe ser pública */

		public function muestraAlert():void { /* Esta función la llamaremos desde el SWF */
			Alert.show("Mensaje de Alerta en Flex"); /* Muestra el mensaje de Alerta */
		}
	]]>
</mx:Script>

Además, asígnale al tag del Label la siguiente propiedad de texto:

<mx:Label text="{mensaje}" ... 

Eso es todo lo que tienes que hacer para llamar a la aplicación de Flex desde el SWF embebido.

Enlaces recomendados:

» SWFLoader Control