Para poder ver y/o establecer el nombre de nuestro dispositivo, el nombre de usuario y el grupo de trabajo al que pertenece, debemos hacer click en la opción Network Identification dentro de Storage & Sharing.

En esta ventana podemos modificar el nombre de nuestra PlayBook, el grupo al que pertenece y el nombre de usuario. Con éste nombre de usuario y la contraseña que ya definimos, vamos a poder acceder al dispositivo desde nuestra computadora.

Ahora debemos hacer click la opción Storage & Sharing en el menú izquierdo. Dentro de esta sección podremos permitir el acceso a los archivos de nuestro dispositivo vía WiFi.

Para permitir el acceso vía USB, debemos activar la primera opción: File Sharing.
En nuestro caso, queremos compartir archivos vía WiFi, por lo que activaremos la segunda opción: Wi-Fi Sharing. Importante: Para evitar que cualquier persona, que esté conectado en nuestra misma red, acceda a nuestros archivos, es altamente recomendable proteger el acceso asignando una contraseña; para eso, debemos activar la tercera opción: Password Protect. También es recomendable cambiar la contraseña con cierta frecuencia, para eso basta con hacer click en el botón Change Password.

Una vez configurado nuestra tableta, abriremos una ventana del Finder en nuestra Mac:

Veremos que aparece nuestra PlayBook en la lista de dispositivos compartidos (lado izquierdo del Finder). Debido a que protegimos el acceso por medio de un password, debemos hacer click en el botón de Conectar como… que se encuentra en la parte superior derecha de la ventana.

Seleccionamos la opción Usuario registrado e ingresamos el Username y Password que definimos en la PlayBook. Después de hacer click en el botón Conectar, veremos las carpetas que están en nuestra tableta:

Dentro de la carpeta media encontramos los directorios de camera, books, documents, etc.

El registro es gratuito en Eventbrite y la cita es hoy martes 26 de abril de 2011 a las 6:30pm hora del Pacífico GMT – 7, 8:30pm hora de México GMT -5.

Publicado con WordPress para BlackBerry.

Este componente tiene las siguientes propiedades:

• enabled: Valor booleano para establecer si el componente está habilitado o no.
• selectedColor: Con esta propiedad podemos establecer el color que estará seleccionado al inicio. También podemos, por medio de ActionScript, determinar el color que está seleccionad actualmente.
• showTextField: Este componente tiene por default un campo de texto donde se muestra el valor hexadecimal del color seleccionado y donde el usuario puede escribir el valor hexadecimal del color que quiere seleccionar.
• visible: Valor booleano. Si es true el componente ColorPicker se mostrará, si es false el ColorPicker no se verá.

Para conocer todos los métodos, propiedades y eventos que conforman la clase ColorPicker, ingresa a la siguiente página.

Tutorial

En este tutorial mostraremos tres ejemplos prácticos del uso del ColorPicker. En el primero cambiaremos el color de un rectángulo usando el ColorPicker. En el segundo, rellenaremos un rectángulo con degradado (dos colores) utilizando la función beginGradientFill; los colores pasados como parámetros a esta función serán obtenidos de dos componentes ColorPicker. Además, por medio de un Slider, el usuario podrá cambiar la rotación del degradado. En el último, cambiaremos el color de un texto dinámico.

Para este tutorial usaremos el Flash CS4. Abre el programa y crea un nuevo documento de Flash.
En el panel Components (Ctrl + F7), dentro de la sección User Interface, busca el componente ColorPicker y arrastra tres de ellos al área de trabajo. Selecciona el primer ColorPicker que tienes en el área de trabajo y dentro del panel Properties asígnale el nombre de instancia de picker1. A los otros componentes asígnales como nombre de instancia picker2 y picker3, respectivamente. Dentro del mismo panel de Components -> User Interface selecciona un componente Slider y arrástralo al área de trabajo. Ponle como nombre de instancia slider. Además, crea dos textos dinámicos con nombres de instancia color_txt y texto_txt.

Ordena los componentes de tu área de trabajo, de tal forma que te quede como en la siguiente imagen:

Nota: El orden de los ColorPicker(s) va de arriba hacia abajo y de izquierda a derecha, de tal forma que el ColorPicker de hasta arriba es picker1. El texto dinámico que está más arriba es color_txt y el texto dinámico de abajo es texto_txt.

Es momento de pasar al código de nuestra aplicación. Renombra la capa donde se encuentran nuestros componentes (generalmente Layer 1) y ponle de nombre Componentes. Agrega una capa con el nombre de Acciones, dentro de esta capa estará todo nuestro código. A continuación explicaré parte por parte el código; recuerda bajar el archivo del tutorial, el cual se encuentra al final de este post.

En nuestra aplicación necesitaremos detectar cuando el usuario seleccionó otro color en alguno de los ColorPicker, o bien cuando desplazó la barra del Slider. Para lo anterior es necesario importar las librerías ColorPickerEvent y SliderEvent.

import fl.events.ColorPickerEvent;
import fl.events.SliderEvent;

Para que podamos pintar con degradado el segundo rectángulo de nuestro ejercicio, haremos uso de las librerías geom y display. Del primero usaremos la clase Matrix; para el segundo usaremos la clase Graphics.

import flash.geom.Matrix;
import flash.display.Graphics;

Además, declararemos una variable llamada radianes, en la cual guardaremos el valor de la rotación del degradado. Para este valor debemos usar radianes y no grados, por lo que ten en cuenta que 1° = PI radianes / 180 (profundizaremos sobre este tema más adelante). Por default, el valor de esta variable será cero.

var radianes:Number = 0;

Primer ejercicio

Ahora veremos el código de nuestro primer ejercicio. Primero crearemos un MovieClip llamado cuadrado; el color de inicio de este cuadrado será el negro (0×000000), el cual lo pasaremos como parámetro a nuestra función dibujaCuadrado (del cual mostraré su código más adelante). Además, le asignamos el texto “0×000000” a nuestro campo dinámico color_txt y llamamos la función addChild para agregar el MovieClip al contenedor y visualizarlo.

var cuadrado:MovieClip = new MovieClip();
dibujaCuadrado(cuadrado, 0x000000);
color_txt.text = "#000000";
addChild(cuadrado);

A continuación veremos el código de la función dibujaCuadrado:

function dibujaCuadrado(clipo:MovieClip, color:uint):void
{
	clipo.graphics.beginFill(color, 1);
	clipo.graphics.drawRect(150, 59, 75, 75);
	clipo.graphics.endFill();
}

En el código anterior, la función dibujaCuadrado recibe como parámetro el MovieClip donde queremos dibujar el cuadrado y color de relleno de éste. El tipo de dato del color es uint (unsigned integer – entero sin signo), este tipo de dato es utilizado en gran medida para el valor de los colores, ya que su máximo valor es el doble que el del tipo de dato int. Para conocer más sobre uint visita esta página.

La primera línea de código de la función dibujaCuadrado establece el color de llenado del cuadrado por medio de la función beginFill. Esta función recibe como primer parámetro el color de relleno y como segundo parámetro el valor del alfa (transparencia). Recuerda que desde el AS3, los valores de alfa van de 0 a 1 y no de 0 a 100.
La segunda línea dibuja el cuadrado en la coordenada x = 100 y y = 150, y con un ancho (width) y alto (height) de 75 pixeles, usando la función drawRect.
La última línea se encarga de aplicar el relleno al MovieClip.

Si corres la aplicación con lo que llevamos ahorita, verás que aparece un cuadrado de color negro del lado izquierdo del primer ColorPicker. Sin embargo, si haces click en picker1 y seleccionas un color verás que no cambia el color del cuadrado. Esto es porque no hemos ligado los eventos del ColorPicker al color del cuadrado, para lograrlo estableceremos dos listeners, uno sobre el evento ITEM_ROLL_OVER y otro sobre el evento CHANGE. El evento ITEM_ROLL_OVER es accionado cuando el usuario se posiciona sobre cualquier color de la paleta de color (valga la redundancia) del ColorPicker. Este evento lo usaremos debido a que en nuestra aplicación queremos mostrar el cambio de color sobre el MovieClip en el momento de posicionarnos en algún color y no al tener que hacerle click. El evento CHANGE es accionado cuando el usuario hace click sobre un color; utilizaremos este evento para mostrar el valor del color seleccionado en el texto dinámico color_txt.

picker1.addEventListener(ColorPickerEvent.ITEM_ROLL_OVER, overHandler);
picker1.addEventListener(ColorPickerEvent.CHANGE, changeHandler);

Al producirse el evento ITEM_ROLL_OVER, se llamará a la función overHandler.
Al producirse el evento CHANGE, se llamára a la función changeHandler.
A continuación, veremos el código de estas dos funciones:

function overHandler(event:ColorPickerEvent):void
{
    var numero:uint = event.target.selectedColor;
   dibujaCuadrado(cuadrado, numero);
}
function changeHandler(event:ColorPickerEvent):void
{
	var numero:uint = event.target.selectedColor;
	var color:String = event.target.hexValue.toString();
	color_txt.text = "#" + color.toUpperCase();
	dibujaCuadrado(cuadrado, numero);
}

No olvides que, por tratarse de eventos, estas dos funciones reciben como parámetro el evento generado.
En la función overHandler, obtenemos el color seleccionado del componente que generó el evento (en este caso, picker1). Ese color lo almacenamos en una variable local llamada numero la cual es de tipo uint. Después, llamamos a la función dibujaCuadrado (cuyo código lo vimos más arriba) pasándole como parámetro el MovieClip del cuadrado y el color seleccionado.
En la función changeHandler, al igual que en la función anterior, obtenemos el color seleccionado del componente que generó el evento (picker1). En esta función, además de guardar el valor del color seleccionado en formato uint, obtenemos el valor hexadecimal del color seleccionado para mostrarlo en nuestro campo dinámico color_txt (para el usuario es más fácil hacer uso del valor hexadecimal de un color que su valor uint). Posteriormente hacemos la llamada a la función dibujaCuadrado.

Si corres la aplicación verás que al posicionarte encima de un color de la gama de picker1, el MovieClip del cuadrado cambia de color. Además, si seleccionas alguno de los colores, el texto dinámico color_txt muestra el valor del color seleccionado.

Segundo ejercicio

Como lo comenté más arriba, en este segundo ejercicio veremos cómo aplicar un degradado a otro MovieClip cuadrado. Este degradado estará formado por dos colores, los cuales serán obtenidos de los ColorPicker picker2 y picker3. Primero estableceremos el color por default (el cual estará seleccionado desde un inicio) del picker2 y picker3.

picker2.selectedColor = 0x0000CC;
picker3.selectedColor = 0x66FF00;

Para este ejercicio vamos a crear otro MovieClip en el cual dibujaremos un cuadrado. El MovieClip se llamará cuadraodDeg:

var cuadradoDeg:MovieClip = new MovieClip();
dibujaCuadradoDegradado(cuadradoDeg, 0x0000CC, 0x66FF00);
addChild(cuadradoDeg);

Hasta ahora, el único cambio es que mandamos a llamar la función dibujaCuadradoDegradado, la cual recibirá la referencia del MovieClip y los dos colores que formarán el degradado.

El código de la función dibujaCuadradroDegradado es el siguiente:

function dibujaCuadradoDegradado(clipo:MovieClip, color1:uint, color2:uint)
{
    var matriz:Matrix = new Matrix();
    matriz.createGradientBox(80, 80, radianes, 150, 165);
    clipo.graphics.beginGradientFill(GradientType.LINEAR, [color1, color2], [1, 1], [1, 255], matriz, SpreadMethod.PAD, InterpolationMethod.LINEAR_RGB);
    clipo.graphics.drawRect(150, 165, 80, 80);
    clipo.graphics.endFill();
}

Para crear el degradado necesitamos la función createGradientBox, la cual recibe cómo parámetros el ancho y alto del degradado, el valor de rotación del degradado (en radianes) y la distancia en pixeles para trasladar el degradado hacia la izquierda (tx) y hacia abajo (ty). Esta función pertenece a la clase Matrix, por lo tanto declaramos la variable matriz para usar la función.

Posteriormente hacemos uso de la función beginGradientFill. Esta función recibe los siguientes parámetros:

• type: Especifica el tipo de degradado que se va a utilizar (lineal o radial). GradientType.LINEAR, GradientType.RADIAL.
• colors: Arreglo con el valor de los colores que formarán parte del degradado.
• alphas: Arreglo con los valores del alfa (transparencia) de cada uno de los colores del parámetro anterior. El valor del alfa va de 0 a 1.
• ratios: Arreglo con los valores de la proporción de distribución. Este valor define el porcentaje del ancho (width) donde el color se muestra al 100%. El valor puede ir de 0 a 255, donde el 0 representa la posición de hasta la izquierda y 255 representa la posición de hasta la derecha de la caja del degradado.
• matrix: La variable de la clase Matrix que definimos con anterioridad y con la cual utilizamos el método createGradientBox.
• spreadMethod: Especifica el método de propagación (spread) a utilizar. Este valor puede ser PAD (rellenar), REFLECT (reflejo) y REPEAT (repite el degradado a lo ancho de la caja).
• interpolationMethod: Método de interpolación. Su valor puede ser linearRGB y RGB.

Por último dibujamos nuestro cuadrado y usamos el método endFill para aplicar el relleno.
Al igual que en el ejercicio anterior, debemos establecer listeners para el picker2 y picker3. Estos listeners se ejecutarán cuando se presente el evento CHANGE en los ColorPicker y llamarán a la función cambiaDegradado.

picker2.addEventListener(ColorPickerEvent.CHANGE, cambiaDegradado);
picker3.addEventListener(ColorPickerEvent.CHANGE, cambiaDegradado);

La función cambiaDegradado llamará a su vez a la función dibujaCuadradoDegradado, cuyos parámetros son el MovieClip al cual se le aplicará el degradado y los colores seleccionados del picker1 y picker2.

function cambiaDegradado(event:ColorPickerEvent)
{
	dibujaCuadradoDegradado(cuadradoDeg, picker2.selectedColor, picker3.selectedColor);
}

Si corres la aplicación verás que aparece un cuadrado con degradado azul y verde. Si seleccionas otro color de cualquiera de los ColorPicker picker2 y picker3, el degradado cambiará. Ahora solo nos falta programar la función del Slider slider para cambiar la rotación del degradado. A este slider le agregaremos un listener cuando se ejecute el evento THUMB_DRAG, es decir, cuando el slider es presionado y movido por el mouse.

slider.addEventListener(SliderEvent.THUMB_DRAG, cambiarRotacion);

Selecciona el componente Slider que está en tu área de trabajo y en el Inspector de Componentes (Shift + F7) ponle las siguientes propiedades:

Inspector de Componentes del Slider

De la imagen anterior se observa que el valor mínimo del Slider será 0 mientras que el máximo es de 180. Esto es porque queremos que el rango del valor de rotación sea de 0° a 180°. En el momento en que nosotros obtenemos el valor del Slider (cuando se ejecuta el listener) debemos cambiar el valor de grados a radianes, por medio de la fórmula (Math.PI / 180) * grados.

function cambiarRotacion(event:SliderEvent)
{
	var grados:Number = event.value;
	var rads:Number = (Math.PI / 180) * grados;
	radianes = rads;
	dibujaCuadradoDegradado(cuadradoDeg, picker2.selectedColor, picker3.selectedColor);
}

La última línea de la función cambiarRotacion llama a la función dibujaCuadradoDegradado, la cual al ser llamada utilizará el nuevo valor de la variable radianes.

Tercer ejercicio

En este tercer ejercicio cambiaremos el color de un texto dinámico de acuerdo al color seleccionado del ColorPicker picker4. Además, estableceremos el arreglo de colores que queremos mostrar en el picker4.
Primero vamos a ocultar el campo de texto del picker4 para evitar que el usuario introduzca el valor de un color distinto a los mostrados en el arreglo:

picker4.showTextField = false;

Para establecer los colores a mostrar dentro de este componente utilizamos la propiedad colors, la cual recibe un arreglo de colores:

picker4.colors = [0xFFFFFF, 0x004070, 0x4b8cdb, 0xa1c8f7, 0x6fb543,
		  0xddb0cf, 0xf8ccd5, 0xffe8a1, 0xfdd382, 0xf2ec87,
		  0x307ec7, 0x57a3de, 0xcbe8f5, 0x4781b3, 0x1c5485];

Ahora establecemos el número de colores que queremos mostrar por fila, es decir, la cantidad de columnas de colores a mostrar dentro del ColorPicker. En nuestro caso queremos que sea de 5 en 5.

picker4.setStyle("columnCount", 5);

El color por default de nuestro texto dinámico será negro, por lo tanto seleccionamos el color negro en el picker4.

picker4.selectedColor = 0x000000;

Para poderle cambiar el color a un texto dinámico, debemos crear una variable de tipo TextFormat. Recuerda que el nombre de instancia de nuestro texto dinámico es texto_txt, y para aplicarle el formato debemos utilizar el método setTextFormat.

var formato:TextFormat = new TextFormat();
formato.bold = true;
formato.color = 0x000000;
formato.size = 16;
formato.font = "Arial";
texto_txt.setTextFormat(formato);

Por último solo nos queda añadirle un listener al picker4 y establecer la función que cambiará el color:

picker4.addEventListener(ColorPickerEvent.CHANGE, cambiaTexto);

function cambiaTexto(event:ColorPickerEvent)
{
	formato.color = picker4.selectedColor;
	texto_txt.setTextFormat(formato);
}

Este componente tiene los siguientes parámetros:

• dayNames: Arreglo con los nombres de los días de la semana. Por default y por los nombres en ingles, el valor es [S, M, T, W, T, F, S]
• disableDays: Arreglo con los días de la semana que queremos que aparezcan deshabilitados. Ej. Sábados y Domingos ([0,6])
• firstDayOfWeek: Día de comienzo de la semana. El valor por default es cero y eso significa que el primer día de la semana será el domingo. En caso de querer establecer el lunes como el primer día de la semana, cambia el valor por 1.
• monthNames: Nombre de los meses. Por default los nombres de los meses están en inglés, sin embargo en esta parte los podemos poner en español.
• showToday: Variable booleana para establecer si deseamos señalar el día de hoy en el calendario. Por default el valor es true.

Para conocer todos los métodos, propiedades y eventos que conforman la clase DateField, ingresa a la siguiente página.

Tutorial

Para este tutorial usaremos el Flash 8. Abre el programa y crea un nuevo documento de Flash.
En el panel Components (Ctrl + F7), dentro de la sección User Interface, busca el componente DateField y arrástralo al área de trabajo. Selecciona el DateField que tienes en el área de trabajo y dentro del panel Properties asígnale el nombre de instancia de fecha. Dentro del mismo panel de Components -> User Interface selecciona un componente Button y arrástralo al área de trabajo. Ponle como nombre de instancia mostrar_btn y como label “Mostrar fecha”.

Renombra la capa donde se encuentran estos componentes (generalmente Layer 1) y ponle de nombre Componentes. Agrega una capa con el nombre de Acciones y dentro de esta capa pega el siguiente código:

mostrar_btn.onRelease = function()
{
	trace("Fecha Seleccionada: " + fecha.selectedDate);
}

Lo que hace el código anterior es mostrar en el panel Output el valor de la fecha seleccionada. Si el usuario no seleccionó alguna fecha, el mensaje mostrará el valor de undefined. Observa que de esta forma es fácil validar si el usuario seleccionó una fecha, de la siguiente forma:

if(fecha.selectedDate == undefined)
{
	trace("El usuario no seleccionó fecha");
}

Cuando el usuario selecciona una fecha, el valor de esa fecha seleccionada es mostrado dentro del rectángulo del DateField. Haz la prueba y verás que el campo de la fecha te despliega un valor similar al mostrado en la siguiente imagen:

Si haces click en el botón de Mostrar fecha, el valor obtenido por la propiedad selectedDate será: Wed Dec 3 00:00:00 GMT-0600 2008. Es posible que en estos momentos te preguntes de qué le sirve al usuario mostrarle la fecha en ese formato si lo más seguro es que tu usuario final hable español; o peor aún ¿de qué te sirve el formato regresado por la propiedad selectedDate si lo que quieres es guardar el valor en una columna de tipo Date de una base de datos?

Cambiar el formato de la fecha mostrada en el DateField

Para cambiar el formato de la fecha bastará con hacer uso de la propiedad dateFormatter. A esta propiedad hay que establecerle la función o método que se encargará de regresar la fecha en el formato especificado. Supongamos que queremos que la fecha se muestre como 03/12/2008, para eso tendríamos que añadir el siguiente código:

fecha.dateFormatter = function(fecha_sel:Date)
{
	var dia:String = fecha_sel.getDate() < 10 ? "0" +  fecha_sel.getDate() :  fecha_sel.getDate();
	var mes:String = (fecha_sel.getMonth() + 1) < 10 ? "0" +  (fecha_sel.getMonth() + 1) :  (fecha_sel.getMonth() + 1);
	return dia + "/" + mes + "/" + fecha_sel.getFullYear();
}

Esta función recibe cómo parámetro la fecha seleccionada por el usuario. De esa fecha podemos obtener el día usando la función getDate(); esta función nos regresa un valor de 1 a 31. Para obtener el número de mes de la fecha seleccionada usamos la función getMonth(); esta función nos regresa un valor de 0 a 11 donde el 0 equivale al mes de Enero y 11 al mes de Diciembre. La función getFullYear() nos regresará el valor del año seleccionado con el formato completo (es decir, de cuatro dígitos. Ej. 2005).
En nuestro ejemplo queremos que el mes y el día tengan dos dígitos, es por eso que en nuestro código verificamos si el número de día o mes es menor que 10, si es así le agregamos un cero al inicio.
Dentro de la función anterior podemos actualizar el valor de una variable global para guardar la fecha en el formato que deseemos de acuerdo a la base de datos que utilicemos o a nuestras necesidades. Por ejemplo, suponiendo que la fecha la tenemos que almacenar de la forma 2008-12-03, podremos considerar el siguiente código:

var fecha_seleccionada:String = “”;
fecha.dateFormatter = function(fecha_sel:Date)
{
	var dia:String = fecha_sel.getDate() < 10 ? "0" +  fecha_sel.getDate() :  fecha_sel.getDate();
	var mes:String = (fecha_sel.getMonth() + 1) < 10 ? "0" +  (fecha_sel.getMonth() + 1) :  (fecha_sel.getMonth() + 1);
	fecha_seleccionada = fecha_sel.getFullYear() + “-“ + mes + “-“ + dia;
	return dia + "/" + mes + "/" + fecha_sel.getFullYear();
}

Deshabilitar días de la semana en el componente DateField

Como lo dije al inicio del tutorial, la propiedad disabledDays nos permite especificar por medio de un arreglo qué días de la semana queremos que aparezcan deshabilitados. Supongamos que queremos realizar una aplicación estilo agenda para anotar nuestras juntas de trabajo. Para evitar equivocarnos, al momento de realizar la selección de fecha, y establecer una junta de trabajo un sábado o domingo, podemos deshabilitar estos días de la siguiente manera:

fecha.disabledDays = [0, 6];

Del código anterior, el número cero hace referencia al día domingo, mientras que el día seis hace referencia al día sábado.

Deshabilitar fechas o rango de fechas en el componente DateField

Para deshabilitar una fecha o bien un rango de fechas debemos usar la propiedad disabledRanges. Esta propiedad puede ser un arreglo de objetos cuyo tipo de dato es Date, o bien un objeto que contiene las propiedades rangeStart y rangeEnd y cuyos valores deben ser un objeto Date.

Continuando con el ejemplo anterior (el de la aplicación estilo agenda), imaginemos que vamos a salir de vacaciones del 20 al 28 de diciembre, y por lo tanto queremos deshabilitar esos días. El siguiente código nos permitirá hacerlo:

fecha.disabledRanges = [{rangeStart: new Date(2008, 11, 20), rangeEnd: new Date(2008, 11, 28)}];

Recuerda que el número de meses comienzan en 0, por lo tanto para el mes de diciembre el número es el 11.

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.