Bienvenido a Klr20mg

Cronicas de un desarrollador

Actualmente soy Jefe de Desarrollo del area Flash en Sapotek de México en la cual trabajo desde hace mas de 4 años. Desarrollando aplicaciones en Flash para Web mas comúnmente llamadas (RIAs)

Estas en : Blog
  • Decrease font size
  • Default font size
  • Increase font size
  • color default
  • color verde
  • color azul
Introducci贸n a PureMVC Post2PDF Print
March 19th, 2008

La Teor铆a

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.

Read the rest of this entry »
Archivado bajo : ActionScript, MVC, PureMVC, Tutoriales - Este post tiene : 5 Comentarios »
 
Trabajando con SQLite, AIR y FLASH CS3 Post2PDF Print
January 17th, 2008

Air desde su versi贸n beta 2 si no mal recuerdo trae integrado un engine de base de datos SQL mediante SQLite.

驴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

PLAIN TEXT
Actionscript:
  1. package com.tmeister.samples.sql
  2. {
  3.     import flash.filesystem.File;
  4.    
  5.     public class sqlSample extends MovieClip
  6.     {
  7.         private var db:File;
  8.        
  9.         public function sqlSample()
  10.         {
  11.             db = File.applicationStorageDirectory.resolvePath("myFirst.db");
  12.             (!db.exists) ? createDatabase() : dbExist();
  13.         }
  14.         private function createDatabase()
  15.         {
  16.             trace("Creamos la BD")
  17.         }
  18.         private function dbExist()
  19.         {
  20.             trace("La Base de datos ya existe")
  21.         }
  22.     }
  23. }

Read the rest of this entry »
Archivado bajo : AS3, Adobe AIR, Tutoriales - Este post tiene : 7 Comentarios »
 
[Tutorial] Flex2 y Amfphp (RemoteObject) Post2PDF Print
January 28th, 2007

Hace poco mas de un mes se anuncio el lanzamiento de la versi贸n 1.9 alpha de amfphp, esta versi贸n por fin soportaba AMF3 y con ello interactuar totalmente con Flex2. Y el pasado viernes se lanzo la versi贸n beta 2, As铆 que es hora de que nos vayamos enterando de como funciona esta nueva versi贸n =)

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.

鈥渁mfphp 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

PLAIN TEXT
PHP:
  1. <?php
  2.  class HelloWorld
  3.  {
  4.     public function SayHi()
  5.     {
  6.        return "Hi there. =)";
  7.     }
  8.  }
  9. ?>

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

PLAIN TEXT
PHP:
  1. <?php
  2.  class HelloWorld
  3.  {
  4.     public function SayHi()
  5.     {
  6.        return "Hi there. =)";
  7.     }
  8.     private function connectDB()
  9.     {
  10.        //PHP5
  11.        //Solo se puede ejecutar desde la misma clase
  12.     }
  13.     function _localMethod()
  14.     {
  15.        //PHP4
  16.        //Esta funcion tambien sera accesible desde la misma clase unicamente
  17.     }
  18.  }
  19. ?>

3. Configurar Flex2 para trabajar con amfphp

Debemos crear un proyecto b谩sico en Flex.

project1

project2

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

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <services-config>
  3.     <services>
  4.         <service id="amfphp-service" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage">
  5.             <destination id="amfphp">
  6.                 <channels>
  7.                     <channel ref="amfphpId"/>
  8.                 </channels>
  9.                 <properties>
  10.                     <source>*</source>
  11.                 </properties>
  12.             </destination>
  13.         </service>
  14.     </services>
  15.     <channels>
  16.         <channel-definition id="amfphpId" class="mx.messaging.channels.AMFChannel">
  17.             <endpoint uri="http://www.klr20mg.com/amfphp/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/>
  18.         </channel-definition>
  19.     </channels>
  20. </services-config>

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

PLAIN TEXT
XML:
  1. <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 鈥淔lex Compiler鈥 y en la linea de 鈥淎rgumentos adicionales de compilaci贸n鈥 -s services 鈥渟ervices-config.xml鈥 y damos click en 鈥淥k鈥

project3

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

4. Probando la conexi贸n

Lo primero es subir nuestro servicio 鈥淗elloWorld.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铆

PLAIN TEXT
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3.     <!-- Funciones que controlan los eventos del RemoteObject -->
  4.     <mx:Script>
  5.         <![CDATA[
  6.             import mx.rpc.events.FaultEvent;
  7.             import mx.rpc.events.ResultEvent;
  8.             public function onMethodResult(event:ResultEvent):void
  9.             {
  10.                 out_txt.text = "Result "+event.result
  11.                 out_txt.text += "\nDataType "+ typeof(event.result)
  12.             }
  13.             public function onServiceFault(event:FaultEvent):void
  14.             {
  15.                 out_txt.text = "Fault "+event.fault
  16.             }
  17.         ]]>
  18.     </mx:Script>
  19.     <!-- Declaracion del RemoteObject y sus metodos -->
  20.     <mx:RemoteObject
  21.         id="helloService"
  22.         source="Tutorials.HelloWorld.HelloWorld"
  23.         destination="amfphp"
  24.         fault="{onServiceFault(event)}"
  25.         showBusyCursor="true"
  26.     >
  27.        
  28.         <mx:method
  29.             name="SayHi"
  30.             result="{onMethodResult(event)}"
  31.         >
  32.         </mx:method>
  33.        
  34.        
  35.     </mx:RemoteObject> 
  36.     <!-- Layout general-->
  37.     <mx:Panel x="0" y="0" width="250" height="200" layout="absolute" title="Amfphp-RemoteObject">
  38.         <mx:LinkButton x="178" y="135" label="Fault" click="{helloService.invalidMethod.send()}"/>
  39.         <mx:LinkButton x="108" y="135" label="SayHi" click="{helloService.SayHi.send()}"/>
  40.         <mx:TextArea x="7" y="7" width="216" height="121" id="out_txt"/>
  41.     </mx:Panel>
  42. </mx:Application>

vamos a ver parte por parte.

PLAIN TEXT
XML:
  1. <mx:RemoteObject
  2.     id="helloService"
  3.     source="Tutorials.HelloWorld.HelloWorld"
  4.     destination="amfphp"
  5.     fault="{onServiceFault(event)}"
  6.     showBusyCursor="true"
  7. >
  8.    
  9.     <mx:method
  10.         name="SayHi"
  11.         result="{onMethodResult(event)}"
  12.     >
  13.     </mx:method>
  14. </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>

PLAIN TEXT
XML:
  1. <mx:method
  2.     name="SayHi"
  3.     result="{onMethodResult(event)}"
  4. >
  5. </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

PLAIN TEXT
XML:
  1. <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. 8)
Archivado bajo : AMFPHP, Flex, Tutoriales - Este post tiene : 9 Comentarios »
 
[ Regresar ]

 Blog editado por:

Enrique Chavez aka Tmeister
Si los codigos de este sitio te han ayudado y gustas ayudar de alguna forma:

 Compra Links

 Suscribete


AddThis Social Bookmark Button

 Archivo

2008
2007
2006
2005
2004