PureMVC es un framework open source que implementa el modelo MVC para crear aplicaciones usando ActionScript 3 bajo Flash CS3 y Flex, creado originalmente por Cliff Hall .

Dentro de los planes de desarrollo podemos encontrar que se intenta implementar este framework en diversos lenguajes de programación, tales como:

• ActionScript 2
• ColdFusion
• CSharp
• Java
• Perl
• PHP
• Python
• Ruby

Al implementar el patrón MVC (Modelo-Control-Vista) podemos separar los datos de la aplicación, las vistas (Interfaz de usuario) y la lógica de control en tres “componentes”, para poder reutilizar código y sobre todo hacer nuestras aplicaciones escalabres y mantenibles.

PureMVC separa estos 3 componentes en 3 “actores” dentro del framework:

• Proxies
• Mediators
• Commands

En donde:

Los datos, remotos o locales son manejados por los Proxies.
Las vistas o interfaz de usuario, son manejados por los Mediators.
La lógica de la aplicación es manejada por los Commands los cuales pueden interactuar con los Proxies, los Mediators y pueden activar o ejecutar otros Commands.

Existe un cuarto elemento en PureMVC llamado Facade el cual provee una interfaz simple de comunicación para que los 3 actores principales puedan comunicarse entre sí. Además de que PureMVC implementa un esquema de notificaciones (Eventos) mediante los cuales se puede activar/ejecutar una o varias acciones.

La Práctica Hello PureMVC

Wow. Tanto para solo un Hello World? No siempre trabajar con frameworks significa menos código, además la potencia de estos frameworks se nota al trabajar en aplicaciones medianas-grandes, yo recomiendo usarlo y ustedes mismos verán las ventajas.

En fin espero les sea útil, además de decir que este es el primer video-tutorial de Klr20mg, que piensan al respecto, seguimos con los tutos escritos o seguimos con video?

Enjoy

Enlaces:

PureMVC Home, Download PureMVC

Download Sources

¿Que significa esto?

Significa que podemos crear base de datos locales desde nuestra aplicación de AIR sin la necesidad de que el usuario final instale nada más que el Runtime de AIR.

Con esto podemos crear eliminar modificar bases de datos, tablas, registro etc.

Para propósitos de este tutorial vamos a crear un simple cliente que cree una base de datos si no existe, que cree la tabla con la cual trabajaremos y donde consultaremos, agregaremos y eliminaremos entradas.

Cabe mencionar que para efectos prácticos no posteare todo el código en cada ejemplo. Al final del tutorial estará la clase final así como los archivos fuente para su estudio

Creación de Base de Datos

Al ser una base de datos local, evidentemente dicho archivo se tiene que crear en la maquina del usuario, para saber si la base de datos existe o no, debemos verificar si el archivo existe, para ello hacemos uso de la Clase File

[as]
package com.tmeister.samples.sql
{
import flash.filesystem.File;

public class sqlSample extends MovieClip
{
private var db:File;

public function sqlSample()
{
db = File.applicationStorageDirectory.resolvePath(“myFirst.db”);
(!db.exists) ? createDatabase() : dbExist();
}
private function createDatabase()
{
trace(“Creamos la BD”)
}
private function dbExist()
{
trace(“La Base de datos ya existe”)
}
}
}
[/as]

Con esto sabremos si la base de datos existe o no, si dicha base de datos no existe debemos crearla, pero antes de poder crearla debemos crear una instancia de la clase SQLConnection para poder conectarnos con el engine y después de esto entonces si crear la BD.

[as]
//Importamos las clases para trabajar con SQLite
import flash.data.SQLConnection;
import flash.events.SQLErrorEvent;
import flash.events.SQLEvent;

//Creamos una nueva conexion y seteamos sus respectivos handlers
conn = new SQLConnection();
conn.addEventListener(SQLEvent.OPEN, dbConnOpen);
conn.addEventListener(SQLErrorEvent.ERROR, dbConnError);

//”Abrimos” la base de datos, si no existe se crea
conn.openAsync(db);

// Handlers de los eventos
private function dbConnOpen(e:SQLEvent)
{
trace(“Se conecto a la base de datos “)
trace(“Ya podemos hacer uso de la base de datos.”)
}
private function dbConnError(e:SQLErrorEvent)
{
trace(“Error al conectarse a la base de datos”);
trace(e)
}
[/as]

En esta parte de código asignamos 2 listeners a conn que es nuestra conexión con el engine, Los listeners son:

• SQLEvent.OPEN : El cual se ejecuta cuando la base de datos esta lista para ser usada.
• SQLErrorEvent.ERROR : El cual se ejecuta si un error ocurrió al momento de intentar acceder a la base de datos.

La línea “mágica” es

[as]
conn.openAsync(db);
[/as]

Con esta instrucción abrimos la base de datos pasando como referencia el archivo respectivo, si el archivo no existe se crea automáticamente. Hay dos formas de trabajar con SQLite, de forma Síncrona o Asíncrona, en este ejemplo trabajamos con la segunda opción, en una entrada posterior tratare de explicar las diferencias entre cada una de ellas.

Con esto ya tenemos una base de datos creada ahora lo siguiente es crear un tabla

Creación de Tablas

Una vez que ya tenemos nuestra base de datos ahora necesitamos una tabla en donde insertar datos.

Las interacciones hacia la base de datos es exactamente igual que en otros lenguajes de programación (dígase PHP), se crea la conexión a la base de datos se escribe el SQL y se ejecuta la instrucción.

Lo único que cambia en AS3 es que debemos crear una instancia de la clase SQLStatement en la cual seteamos que conexión a DB usar, asignar la cadena de consulta o ejecución (SQL) y asignar los valores.

Todo esto se resume a lo siguiente.

[as]
import flash.events.SQLErrorEvent;
import flash.events.SQLEvent;

private const TABLE_NAME:String = “people”

//Creamos una instancia de la clase
var dbManager:SQLStatement = new SQLStatement();

//Asignamos la conexion a la base de datos
dbManager.sqlConnection = conn

//Asignamos listeners a los eventos
dbManager.addEventListener(SQLErrorEvent.ERROR, sqlError);
dbManager.addEventListener(SQLEvent.RESULT, tableResult);

//Sentencia a ejecutar
var sql:String = “CREATE TABLE ” + TABLE_NAME + ” (“;
sql += “id INTEGER PRIMARY KEY AUTOINCREMENT,”
sql += “name TEXT,”;
sql += “age NUMERIC”;
sql += “)”;

//La sentencia SQL debe ser asignada a la propiedad text del SQLStatement
dbManager.text = sql;

//Por ultimo ejecutamos la sentencia
dbManager.execute();

//Handlers
private function tableResult(e:SQLEvent)
{
trace(“La tabla se creo correctamente”);
}
private function sqlError(e:SQLErrorEvent)
{
trace(“Error: “+ e.error.message);
trace(“Detalles: “+ e.error.details);
}
[/as]

Inserts

Como mencione antes todas las interacciones con la base de datos se deben de hacer mediante una instancia de la clase SQLStatement. Lo único que cambia de acuerdo con el ejemplo anterior (Creación de tablas) es la sentencia SQL y la asignación de los valores de los campos.

Ejemplo de Insert

[as]
import flash.events.SQLErrorEvent;
import flash.events.SQLEvent;

//Creamos una instancia de la clase
var insertManager:SQLStatement = new SQLStatement();

//Asignamos la conexion a la base de datos
insertManager.sqlConnection = conn;

//Asignamos listeners a los eventos
insertManager.addEventListener(SQLEvent.RESULT, insertResult);
insertManager.addEventListener(SQLErrorEvent.ERROR, sqlError);

//Sentencia a ejecutar
var sql:String = “INSERT INTO ” + TABLE_NAME + ” (name, age) VALUES (:name, :age)”;

//Asignacion de valor a los parametros de la sentencia
insertManager.parameters[":name"] = “Tmeister”;
insertManager.parameters[":age"] = “29″;

//La sentencia SQL debe ser asignada a la propiedad text del SQLStatement
insertManager.text = sql;

//Por ultimo ejecutamos la sentencia
insertManager.execute();

//Handlers
private function tableResult(e:SQLEvent)
{
trace(“La tabla se creo correctamente”);
}
private function sqlError(e:SQLErrorEvent)
{
trace(“Error: “+ e.error.message);
trace(“Detalles: “+ e.error.details);
}
[/as]

Aqui vemos cosas nuevas en la sentencia.

Primero

[as]
var sql:String = “INSERT INTO ” + TABLE_NAME + ” (name, age) VALUES (:name, :age)”;
[/as]

Si pueden ver los valores de los campos están precedidos de dos puntos : esto significa que son parámetros de la sentencia.

La clase SQLStatement tiene una propiedad llamada parameters que es un Array en donde se tiene que asignar el valor de cada parámetro escrito en nuestra sentencia, en este ejemplo tenemos 2 parámetros :name y :age entonces necesitamos asignarle valores esto se hace con estas líneas

[as]
insertManager.parameters[":name"] = “Tmeister”;
insertManager.parameters[":age"] = “29″;
[/as]

En realidad es algo simple. no?

Obteniendo datos de la base de datos

Para obtener datos de la base de datos es exactamente lo mismo que hicimos para crear la tabla, solamente cambia la sentencia SQL

[as]
import flash.events.SQLErrorEvent;
import flash.events.SQLEvent;
import flash.data.SQLStatement;

private const TABLE_NAME:String = “people”

//Creamos una instancia de la clase
var query:SQLStatement = new SQLStatement();

//Asignamos la conexion a la base de datos
query.sqlConnection = conn

//Asignamos listeners a los eventos
query.addEventListener(SQLErrorEvent.ERROR, sqlError);
query.addEventListener(SQLEvent.RESULT, sqlResult);

//Sentencia a ejecutar
var sql:String = “SELECT * FROM ” + TABLE_NAME + ” order by id”;

//La sentencia SQL debe ser asignada a la propiedad text del SQLStatement
query.text = sql;

//Por ultimo ejecutamos la sentencia
query.execute();

private function sqlError(e:SQLErrorEvent)
{
trace(“Error: “+ e.error.message);
trace(“Detalles: “+ e.error.details);
}
private function sqlResult(e:SQLEvent)
{
var result:SQLResult = e.target.getResult();
for each ( var row:Object in result.data)
{
trace(row)
trace(row.id)
trace(row.name)
//etc
}
}
[/as]

Para obtener el resultado de la consulta de debemos ejecutar la función getResult de la instancia SQLStatement.

[as]
var result:SQLResult = e.target.getResult();
[/as]

Por último solo queda recorrer los resultados, que son devueltos como objetos

[as]
for each ( var row:Object in result.data)
{
trace(row)
trace(row.id)
trace(row.name)
//etc
}
[/as]

Con esto ya podemos comenzar a trabajar con SQLite para manejar información en la maquina local del usuario final.

1.Descargar e Instalar Amfphp 1.9 beta 2.

Descarga el archivo zip de amfphp 1.9, descomprimelo y sube el folder amfphp a algún lugar de tu servidor, el mejor sitio seria el directorio principal de tu sitio. Para comprobar que todo esta correcto haremos la vieja pero siempre efectiva comprobación. En tu navegador escribe la dirección que apunte hacia el archivo gateway.php

Si el folder de amfphp se encuentra en el folder raíz de tu sitio entonces la dirección seria:

http://www.tusitio.com/amfphp/gateway.php

Si todo sale bien debes de ver un mensaje como este.

“amfphp and this gateway are installed correctly. You may now connect to this gateway from Flash.

Note: If you’re reading an old tutorial, it will tell you that you should see a download window instead of this message. This confused people so this is the new behaviour starting from amfphp 1.2.

View the amfphp documentation

Load the service browser”

2. Crear nuestro primer servicio.

HelloWorld.php

<?php
 class HelloWorld
 {
 	public function SayHi()
 	{
 		return "Hi there. =)";
 	}
 }
?>

Si ya habías trabajado con una versión vieja de amfphp te darás cuenta que $this->methodTable se ha eliminado de la estructura de la clase.

$this->methodTable era utilizado para asignar las propiedades de las funciones, sobre todo la descripción, y la forma de acceso, esto ultimo para saber si se podría acceder a la función de forma remota o solo local.

En esta nueva versión como dije antes $this->methodTable dejo de usarse. Ahora esta nueva versión de amfphp asume que todas las funciones pueden accederse remotamente a menos que el nombre de la función comience con guion-bajo “_” o la función sea declarada como privada, esta ultima opción solo esta disponible en php5.

Un ejemplo HelloWorld2.php

<?php
 class HelloWorld
 {
 	public function SayHi()
 	{
 		return "Hi there. =)";
 	}
 	private function connectDB()
 	{
 		//PHP5
 		//Solo se puede ejecutar desde la misma clase
 	}
 	function _localMethod()
 	{
 		//PHP4
 		//Esta funcion tambien sera accesible desde la misma clase unicamente
 	}
 }
?>

3. Configurar Flex2 para trabajar con amfphp

Debemos crear un proyecto básico en Flex.

Ahora necesitamos crear un archivo de configuración para que flex sepa donde buscar nuestros servicios de amfphp.

Para ello creamos el archivo services-config.xml con la siguiente estructura

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
	<services>
		<service id="amfphp-service" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage">
			<destination id="amfphp">
				<channels>
					<channel ref="amfphpId"/>
				</channels>
				<properties>
					<source>*</source>
				</properties>
			</destination>
		</service>
	</services>
	<channels>
		<channel-definition id="amfphpId" class="mx.messaging.channels.AMFChannel">
			<endpoint uri="http://www.klr20mg.com/amfphp/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/>
		</channel-definition>
	</channels>
</services-config>

La única linea que nos interesa y que debemos modificar es la siguiente:

<endpoint uri="http://www.klr20mg.com/amfphp/gateway.php" class="flex.messaging.endpoints.AMFEndpoint">

Modificando la ruta hacia donde esta nuestro archivo gateway y guardandolo en el folder raíz de nuestro proyecto.

Una vez que tenemos nuestro archivo, dar click derecho sobre el nombre del mismo e ir a propiedades. Se abrirá una ventana de propiedades, obviamente, seleccionamos del menú izquierdo la pestaña “Flex Compiler” y en la linea de “Argumentos adicionales de compilación” -s services “services-config.xml” y damos click en “Ok”

Ahora ya estamos listos para trabajar con amfphp 1.9 y Flex.

4. Probando la conexión

Lo primero es subir nuestro servicio “HelloWorld.php” el cual creamos en el paso 2.

Este servicio debe de estar dentro del folder amfphp/services, dentro, puedes crear folders anidados sin ningún problema en este caso lo colocare en la carpeta Tutorials/HelloWorld.

Creamos una pequeña interfaz la cual constara de un un par de LinkButtuns, un TextArea contenidos dentro de un panel cuyos botones ejecutaran los métodos remotos de amfphp.

Algo así

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<!-- Funciones que controlan los eventos del RemoteObject -->
	<mx:Script >
		<![CDATA[
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			public function onMethodResult(event:ResultEvent):void
			{
				out_txt.text = "Result "+event.result
				out_txt.text += "\nDataType "+ typeof(event.result)
			}
			public function onServiceFault(event:FaultEvent):void
			{
				out_txt.text = "Fault "+event.fault
			}
		]]>
	</mx:Script>
	<!-- Declaracion del RemoteObject y sus metodos -->
	<mx:RemoteObject
		id="helloService"
		source="Tutorials.HelloWorld.HelloWorld"
		destination="amfphp"
		fault="{onServiceFault(event)}"
		showBusyCursor="true"
	>

		<mx:method
			name="SayHi"
			result="{onMethodResult(event)}"
		>
		</mx:method>

	</mx:RemoteObject>
	<!-- Layout general-->
	<mx:Panel x="0" y="0" width="250" height="200" layout="absolute" title="Amfphp-RemoteObject">
		<mx:LinkButton x="178" y="135" label="Fault" click="{helloService.invalidMethod.send()}"/>
		<mx:LinkButton x="108" y="135" label="SayHi" click="{helloService.SayHi.send()}"/>
		<mx:TextArea x="7" y="7" width="216" height="121" id="out_txt"/>
	</mx:Panel>
</mx:Application>

vamos a ver parte por parte.

<mx:RemoteObject
	id="helloService"
	source="Tutorials.HelloWorld.HelloWorld"
	destination="amfphp"
	fault="{onServiceFault(event)}"
	showBusyCursor="true"
>

	<mx:method
		name="SayHi"
		result="{onMethodResult(event)}"
	>
	</mx:method>
</mx:RemoteObject>

En este tag como se puede ver creamos nuestro RemoteObject los parámetros son:

id : El nombre con el cual haremos referencia
source: el path a partir del folder amfphp/services, donde se encuentra nuestro servicio en el servidor,
destination: el identificador seteado en el tag <destination> del archivo services-config.xml
fault: El método que sera ejecutado al momento de que ocurra un error.
showBusyCursor: Mientras dure la ejecución del método remoto flex mostrara el cursor de ocupado

Dentro del tag RemoteObject debemos agregar los métodos a los cuales vallamos a acceder desde Flex y definir la función que se ejecutara cuando el método se haya ejecutado con éxito.

Esto lo hacemos definiendo el tag <mx:method>

<mx:method
	name="SayHi"
	result="{onMethodResult(event)}"
>
</mx:method>

los parámetros son:

name: El nombre del método que se ejecutara, que es el mismo que tenemos en nuestro servicio.
result : asignamos la función que se ejecutara cuando el método remoto se ejecute.

Por ultimo, debemos ejecutar dichos métodos desde nuestra interfaz, en este ejemplo se ejecutan mediante un LinkButton

<mx:linkbutton x="108" y="135" label="SayHi" click="{helloService.SayHi.send()}">

Al momento de dar click enviamos la petición de ejecución del método SayHi que esta definido dentro del RemoteObject helloService, simple cierto?

Este es el resultado final.

Aqui estan los archivos completos del proyecto. helloworld-amfphp19.zip

Con esto podemos comenzar a trabajar y a aprovechar todas la ventajas que amfphp nos ofrece.

Cheers.