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.

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.

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.

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 (0x000000), 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 “0x000000” a nuestro campo dinámico color_txt y llamamos la función addChild para agregar el MovieClip al contenedor y visualizarlo.

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

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.

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:

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.

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

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:

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.

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.

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.

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.

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:

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

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.

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

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.

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

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:

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:

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:

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:

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:

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:

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:

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:

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.

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

Al iniciar la aplicación debemos llamar a la función connect pasándole como parámetro el 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:

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:

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

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:

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

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.

Prácticamente, la forma en la que funciona se resume en que podemos crear clases en PHP, acceder a los métodos de esas clases por medio de Flash, Flex o AIR y obtener los datos retornados por esos métodos. Por ejemplo, podemos crear una clase para conectarnos a una base de datos en MySQL. Esta clase podría contener un método para insertar datos a la base, otro método para generar consultas y obtener en nuestra aplicación de Flash, Flex o AIR los registros regresados por la consulta.

En esta entrada veremos cómo está formado el AMFPHP y cómo acceder a él desde Flash CS3. Para una mejor explicación de cómo acceder a AMFPHP haremos una sencilla clase en PHP la cual no accederá a ninguna base de datos (eso lo dejaremos para nuestro próximo tutorial).

Tutorial

1. Baja el archivo amfphp-1.9.beta.20080120.zip de aquí. El amfphp-1.9 lo podemos usar con ActionScript 3 (Flash CS3, Flex y AIR), mientras que la versión anterior puede ser usada con ActionScript 2.

2. Descomprímelo y ponlo en algún directorio de tu servidor Web, en tu directorio htdocs o www en tu localhost. Si lo deseas, puedes renombrar la carpeta y ponerle AMFPHP1.9.

La estructura del directorio quedaría de la siguiente manera (en mi caso, la carpeta AMFPHP1.9 la puse en la carpeta raíz de mi servidor):

--> root ó carpeta raíz
-->AMFPHP1.9 (D)
--> browser (D)
--> core (D)
--> services (D)
--> gateway.php
--> globals.php
--> json.php
--> phpinfo
--> xmlrpc

Donde (D) indica que se trata de un directorio. Observa la carpeta browser, si accediéramos a él desde el navegador observaremos una aplicación creada en Flex donde nos muestra la lista de servicios que tenemos en AMFPHP, como se muestra en la siguiente liga. Si es la primera vez que accedes al browser, aparecerá la siguiente ventana de configuración:

En esta ventana de configuración deberás asegurarte que la dirección del Gateway es correcta. Después de hacer click en el botón Save te aparecerá la lista de servicios. Por default y cuando todavía no hemos creado ningún servicio nuevo, solamente aparecerá el servicio DiscoveryService. Importante: Cuando tenemos servicios que deben acceder a una base de datos o tratan información importante o crítica, lo mejor será no poner el directorio browser en el servidor. Continuando con nuestra estructura de directorios, como podrás imaginar, todos nuestros servicios (clases en PHP) deberán ir en el directorio services.

3. Vamos a crear una sencilla clase de PHP, la cual simulará las operaciones básicas de una calculadora. Sus métodos serán sumar, restar, multiplicar y dividir. Cada método recibirá como parámetro los dos números sobre los cuales hay que hacer la operación. Nota: Este tutorial es solamente para explicar cómo funciona AMFPHP y cómo podemos acceder a él desde Flash. Es por eso que nuestra clase de ejemplo es muy sencilla y muchos de ustedes dirán que no se requiere de PHP para sumar, restar, multiplicar y dividir dos números =0).
En PHP, al igual que en Flash, el nombre del archivo de una clase deberá tener el mismo nombre de la clase; por lo tanto, crea un nuevo archivo PHP, nómbralo Calculadora.php y guárdalo dentro del directorio services de nuestra carpeta AMFPHP19. Coloca el siguiente código dentro de Calculadora.php:

Observa los comentarios antes de cada función; estos comentarios nos dan una descripción de qué es lo que hace cada método y además le estamos indicando qué es lo que nos regresa cada método (@returns). Si bien estos comentarios no son obligatorios, nos ayudarán a recordar en el momento en que queramos modificar el archivo. Además, dentro de la lista de servicios en el browser, cuando seleccionamos alguno de estos métodos se nos mostrará esta descripción (Como prueba, ingresa al navegador, de la lista de la izquierda selecciona la clase Calculadora y posteriormente selecciona de la ventana de la derecha el método dividir. Observarás que antes de los campos de texto para ingresar los números aparece la descripción del método). Ahora ingresa un número dentro del campo de texto $numeroA e ingresa otro número dentro del campo $numeroB, haz click en el botón Call y observa cómo en el área de resultados (Results) se muestra el resultado regresado por el método dividir de nuestra clase Calculadora en PHP.

4. Dentro de nuestra clase podemos utilizar métodos privados, los cuales no podrán ser utilizados desde el navegador de servicios (browser) ni desde nuestras aplicaciones en Flash, Flex o AIR. Esto es útil cuando dichos métodos realizan operaciones importantes o críticas y que requieran de mayor seguridad. Para establecer que un método es privado, bastará con agregarle un guión bajo (_) antes del nombre. Para hacer la prueba, agrega el siguiente código a la clase Calculadora.php (Insértalo antes de la última llave (}) y del tag de cierre de PHP (?>):

Observa cómo en el código anterior el nombre de la función empieza con guión bajo _, eso quiere decir que se trata de un método privado. El código de este método privado lo que hace es regresarnos la fecha y el tiempo del servidor (por medio del método date).

Desde nuestra clase de PHP podemos acceder a ese método privado por medio de otro método. Para acceder a este método es necesario utilizar la palabra clave $this. A continuación te muestro cómo:

El método obtenFechaServidor hace un llamado a la función esteMetodoEsPrivado y almacena en la variable $fecha_hoy el valor regresado por el método privado. Este valor es regresado por el método obtenFechaServidor.

Ingresa a nuestro navegador de servicios, selecciona la clase Calculadora y observa cómo el método esteMetodoEsPrivado no aparece dentro de los métodos de esta clase. Ahora haz click en el botón obtenFechaServidor y posteriormente en el botón Call. En el área de resultados (Results) se mostrará la fecha y hora del servidor.

Antes de pasar a la interfaz y al código ActionScript, te dejo el código completo del archivo Calculadora.php

5. Crea un nuevo documento de Flash en Flash CS3 ActionScript 3.0. Cambia las dimensiones del área de trabajo por 300px de ancho y 190px de alto. Renombra la única capa que existe y ponle de nombre Forma. Agrega 3 textos, 3 TextInput(s) y 4 botones de tal forma que tu forma quede similar a la de la imagen:

El nombre de instancia de cada uno de los TextInput(s) es (de arriba a abajo):

• numeroA_txt

• numeroB_txt

• resultado_txt

El nombre de instancia de cada uno de los botones es (de arriba a abajo):

• mas_btn

• menos_btn

• por_btn

• entre_btn

6. Agrega otra capa y ponle de nombre Acciones. Agrega el siguiente código a dicha capa:

Revisa con atención el código anterior y los comentarios que están insertados en él. Hasta ahora solamente hemos importado las librerías que necesitamos, hemos declarado e instanciado las variables que usaremos a lo largo del programa.

Coloca el siguiente código debajo del anterior. Aquí estamos declarando cuatro métodos que serán llamados dependiendo de si el usuario hizo click en el botón de mas, menos, por o entre. Observa bien que el código de cada uno de estos métodos sólo cambia en la llamada de los métodos de la clase (la última línea de cada método, antes de }), es por eso que sólo comentaré la primera función (suma).

Después del código anterior solamente nos faltan los métodos respuesta y error, además de las acciones de cada uno de nuestros botones:

A continuación puedes ver el SWF funcionando. A este archivo le añadí un campo de texto dinámico en el lado inferior derecho en el cual muestro el resultado de hacer una llamada al método obtenFechaServidor de nuestra clase Calculadora. No olvides bajar los archivos de este tutorial que se encuentran al final de esta entrada.

En esta ocasión veremos cómo realizar consultas de los registros en la base de datos; para esto crearemos una forma en la cual el usuario puede introducir el nombre, teléfono o correo del cliente que está buscando. Los resultados de esta consulta los escribiremos en un archivo HTML y lo mostraremos dentro del componente HTML (aprovechando el post que publiqué hace ya tiempo sobre cómo crear un archivo en AIR).

Parte 4: Consulta a la base de datos en SQLite con AIR

Recuerda que para mantener organizado el código de nuestro proyecto y para evitar que se pierdan con toda la información aquí mostrada, dividí el código del proyecto en archivos .as. Estos archivos estarán almacenados en la carpeta actionscript. La estructura de nuestro proyecto será la siguiente:

Imagen 1: Estructura de la aplicación

Todas las interfaces de este proyecto están incluidas en la carpeta componentes. La interfaz que en esta ocasión veremos es la del archivo ConsultaClientes.mxml. Esta interfaz funciona de la siguiente manera:

Imagen 2: Interfaz del usuario

Al seleccionar la opción "Consultar…" del menú, se mostrará una forma con tres campos de texto, en donde el usuario podrá introducir el nombre, teléfono y correo del cliente que está buscando. Además, en la forma tendremos el botón de Mostrarel cual ejecutará la búsqueda. Los resultados serán mostrados dentro del rectángulo que ves en la parte de abajo de la imagen anterior.

Una vez que el usuario ejecute al búsqueda, si no se encontraron registros que coincidan con los datos buscados, el sistema mostrará dentro del archivo HTML la leyenda "No se encontraron resultados". En caso contrario, el sistema mostrará los resultados de forma similar a la mostrada a continuación:

Imagen 2: Interfaz del usuario

Dicho lo anterior, comenzaremos mostrando la estructura y el código del archivo ConsultaClientes.mxml:

• El ID del TextInput Nombre es nombre_txt
• El ID del TextInput Correo es correo_txt
• El ID del TextInput Teléfono es teléfono_txt
• El ID del componente HTML es HTMLLoader

El código de este archivo es el siguiente:

Observa en el código anterior que el tag principal de este archivo es <mx:Canvas> y no <mx:WindowedApplication>, esto es porque todas las interfaces que están dentro del directorio componentes las desplegaremos dentro de la aplicación principal (Sistema_Clientes.mxml); a la propiedad show del Canvas le estamos especificando que llame a la función abreConexion() una vez que se haya terminado de mostrar el componente. También observa cómo estamos incluyendo el código de ConsultarCliente.as:

Dentro del código del botón Mostrar hacemos la llamada a la función generaConsulta una vez que el usuario haya hecho click en dicho botón. El código de esta función (generaConsulta) y de la función principal (abreConexion) se encuentra dentro del archivo ConsultarCliente.as:

Después de haber importado las librerías necesarias y de haber declarado nuestras variables, escribimos el código de la función abreConexion. Esta función la hemos estado utilizando en las entradas anteriores, por lo que su código no debería causarte ruido.

Antes de ver el código de la función generaConsulta, mostraré el código de la clase HTMLTags:

Como pudiste observar en el código anterior, esta clase lo único que hace es regresarnos los tags del documento HTML que vamos a generar. Por ejemplo, la función getFirstTags nos regresa los primeros elementos que debe llevar el archivo HTML (los tags <html>, <head>, <meta> y los estilos que usaremos <style>). La función getTitleTags la mandaremos a llamar cada vez que recorramos un nuevo registro, le pasaremos como parámetro un texto de tipo "Cliente N" donde N es el valor de un contador que pondremos en el código (Cliente #1, Cliente #2, etc.) y nos regresará un texto con los tags y estilo que debe llevar. A la función getTable1Tags le estamos pasando como parámetro el nombre y la dirección del cliente, y ésta a su vez nos está regresando la información en forma de tabla con el código en HTML. Lo mismo sucede con la función getTable2Tags. La función getRulerTag nos regresa el tag <hr> para mostrar una línea horizontal. Por último, la función getEndTags nos regresa un texto con los tags que nos faltaban por cerrar (</body> y </html>).

Ahora veremos el código de generaConsulta. Presta atención en los comentarios que se encuentran dentro del código:

Observa que al final estamos especificando al control HTML (cuyo ID es HTMLLoader) el archivo HTML que debe mostrar (ConsultaCliente.html dentro de la carpeta HTML).

Hemos llegado al final de esta cuarta parte y de todas las entregas, no olvides bajar los archivos que se encuentran más abajo.