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
Clase Config (Parsear archivos de configuración) Post2PDF Print
October 14th, 2006

En muchas ocasiones cuando se nos encarga una aplicación dinámica en flash siempre hay un problema al momento de que el cliente cambie los valores de configuración de dicha aplicación mucho mas cuando este ultimo no quiere pagar por una interfaz de configuración =).

Para nosotros como desarrolladores no es nada del otro mundo poder cambiar los valores de un XML pero esto cambia cuando el cliente final sera el encargado de modificar dicho archivo. Cuando decimos XML se quedan con cara de 'ehhh? Y eso con que se come', repito si el cliente no quiere pagar por una interfaz de administración y quiere poder cambiar algunos valores de la aplicación lo mejor es que se le de un archivo de configuración en texto plano.

Ustedes pensaran que para ello podemos usar loadVars con las variables declaradas, el problema, de nuevo desde el punto de vista del cliente final es complicado ya que este debe tener un formato y ademas de que no podemos poner comentarios en el.

Jugando por ahí con Python me encontré con el modulo Config que carga y parsea un archivo de configuración estándar. A que me refiero con archivo de configuración estándar?

El típico archivo que utilizan los programas en linux, por ejemplo apache. Si nunca han visto este tipo de archivos así es como se ve.

###########################################
### This is a sample of a Config file config.txt
### Author: Enrique Chavez aka Tmeister
### Site: http:www.klr20mg.com
### Date: Oct, 14 2006
###########################################

###########################################
### The images path
###########################################

pathImages path/to/folder/

###########################################
### The gallery's name
###########################################

GalleryName this is my test gallery

###########################################
### Your Firstname
###########################################

firstname = Enrique

###########################################
###Your Lastname
###########################################

lastname Chavez

###########################################
###Your Nick =)
###########################################

nick Tmeister

# End File

Bueno, He creado una sencilla clase que se encarga de parsear este tipo de archivos pudiendo acceder a los valores de las variables de una forma simple.

Tomando como ejemplo el archivo de configuración anterior, lo único que tenemos que hacer en nuestra clase o Fla es algo así..

PLAIN TEXT
Actionscript:
  1. import org.utils.Config
  2. import mx.utils.Delegate
  3. class myApp extends MovieClip
  4. {
  5.     private var config : Config;
  6.     function myApp ()
  7.     {
  8.     }
  9.     function onLoad ()
  10.     {
  11.         config = new Config ("config.txt");
  12.         config.addEventListener ("fault", Delegate.create (this, onFault));
  13.         config.addEventListener ("complete", Delegate.create (this, onComplete));
  14.     }
  15.     private function onComplete (obj : Object)
  16.     {
  17.         trace (config.read ("pathImages"))
  18.         for (var i in config.list)
  19.         {
  20.             trace ('key: ' + i + ', value: ' + config.list [i]);
  21.         }
  22.     }
  23.     private function onFault (obj : Object)
  24.     {
  25.         for (var i in obj) trace ('key: ' + i + ', value: ' + obj [i]);
  26.     }
  27. }

Con esto obtenemos algo así:

path/to/folder/
key: nick, value: Tmeister
key: lastname, value: Chavez
key: firstname, value: Enrique
key: GalleryName, value: this is my test gallery
key: pathImages, value: path/to/folder/

Como pueden ver al instaciar la clase se le pasa como parámetro el path del archivo de configuración. Esta clase cuenta con 2 dispatchs, fault y complete los nombres son mas que descriptivos cierto? :)
Por ultimo hay 2 métodos

read que regresa el valor de la variable que se pasa como parámetro y
list que regresa un objeto con todas las variables del archivo de configuración

Por ultimo la clase Config

PLAIN TEXT
Actionscript:
  1. import mx.events.EventDispatcher;
  2. import mx.utils.Delegate
  3.  [Event("complete")]
  4.  [Event("fault")]
  5. class org.utils.Config
  6. {
  7.     private var cfgFile : String
  8.     private var cfg_lv : LoadVars
  9.     public var addEventListener : Function
  10.     private var dispatchEvent : Function;
  11.     private var token : Object
  12.     public var configList : Object
  13.     public function Config (getFile : String)
  14.     {
  15.         EventDispatcher.initialize (this);
  16.         cfgFile = getFile;
  17.         loadConfig ();
  18.     }
  19.     private function loadConfig ()
  20.     {
  21.         cfg_lv = new LoadVars ();
  22.         cfg_lv.load (cfgFile);
  23.         cfg_lv.onLoad = Delegate.create (this, parseCfg);
  24.     }
  25.     private function parseCfg (ok)
  26.     {
  27.         if ( ! ok)
  28.         {
  29.             dispatchEvent (
  30.             {
  31.                 type : "fault", msg : "Cant load file " + cfgFile
  32.             });
  33.             return
  34.         }
  35.         var data : String = unescape (cfg_lv.toString ())
  36.         data = data.split ("=&onLoad=[type Function]").join ("")
  37.         data = data.split ("&onLoad=[type Function]").join ("")
  38.         var lines : Array = data.split ("\n")
  39.         var count : Number = 0;
  40.         token = {
  41.         };
  42.         configList = {
  43.         }
  44.         while (lines [count])
  45.         {
  46.             var actualLine = lines [count ++]
  47.             var firstCharacter : String = escape (actualLine.substr (0, 1));
  48.             if (firstCharacter != "%23" && firstCharacter != "%0D" && firstCharacter != " ")
  49.             {
  50.                 var finalLine = actualLine.split ("\r").join ("")
  51.                 var values : Array = finalLine.split (" ");
  52.                 var finalValue : String = "";
  53.                 for (var i : Number = 1; i <values.length; i ++)
  54.                 {
  55.                     finalValue += values [i] + " ";
  56.                 }
  57.                 finalValue = finalValue.substr (0, - 1)
  58.                 token [values [0]] = finalValue
  59.                 configList [values [0]] = finalValue
  60.             }
  61.         }
  62.         dispatchEvent (
  63.         {
  64.             type : "complete"
  65.         });
  66.     }
  67.     public function read (variable : String) : String
  68.     {
  69.         return token [variable]
  70.     }
  71.     public function get list () : Object
  72.     {
  73.         return configList;
  74.     }
  75. }

Los archivos Fuente. http://klr20mg.com/archivos/config.zip

Estoy totalmente convencido que la mejor manera para manejar nuestras configuraciones en Flash sigue y seguirá siendo un archivo XML, pero para aquellos necesiten un archivo de texto plano que sirva como archivo de configuración simple con comentarios para los clientes necios jeje esta clase puede ser de utilidad.

Saludos!!
Archivado bajo : ActionScript, Clases AS2 - Este post tiene : 0 Comentarios
 
StageResize Component Post2PDF Print
August 29th, 2006

Últimamente he recibido varios mails en los cuales me preguntan como hice para que en mi sitio tmeister.net el contenido se centre automáticamente dependiendo del tamaño del navegador.

La respuesta es mediante el listener onResize del Stage. Pero es algo difícil de explicar así que decidí crear un componente que lo haga :).

Este componente consta de 4 parámetros los cuales son:

backContent : El path a la imagen o SWF que sera el fondo del sitio

contentPath: El SWF principal el cual es la interfaz principal del sitio, el cual se centrara

backgroundColor: el color de fondo de nuestro sitio, esto es para 2 cosas. Sera el color de fondo que se mostrara mientras se carga el
backContent. Ademas puede ayudar si el backContent tiene alguna transparencia.

TextColor: El color del texto del Preloader. Por el momento el preloader aparece en la esquina inferior izquierda con el siguiente texto Loading background [ / ] con una pequeña animación.

Esto es todo el componente se encargara de todo lo demás.

Ahora el tamaño del SWF que seteamos en el archivo html debe tener las medidas de 100% de ancho y 100% de alto ademas de setear el margen del documento a 0, pueden ver el codigo fuente del HTML del ejemplo y ahi veran mejor a que me refiero.

Un ejemplo del componente lo pueden ver en http://klr20mg.com/stageresize/ simula exactamente lo que hago en mi sitio tmeister.net

Aquí les dejo el Zip con el componente y con los archivos utilizados en el ejemplo. El Fla que contiene el componente es stage.fla.

Por otro lado aprovecho para decirles que aun estamos desarrollando desktoptwo al día de hoy muchos bugs han sido corregidos y estamos por lanzar un par de aplicaciones nuevas. Una interfaz para hacer búsquedas en Yahoo y en Google desde deskoptwo, un visor de Imágenes, un foro. Y pronto vendrán mas aplicaciones.

Bueno, como siempre aquí los archivos fuente stageResize.zip

Enjoy.. 8)

Archivado bajo : ActionScript, Clases AS2 - Este post tiene : 16 Comentarios »
 
amfConnect.as, Clase que facilita el trabajo con AMFPHP Post2PDF Print
June 6th, 2005

He escrito una clase que hace mas sencillo el trabajar con AMFPHP, La clase se encarga de crear el gateway de AMFPHP, instanciar los servicios y hacer las llamadas a los métodos de dichos servicios su eso es simple.

Su uso es algo así

PLAIN TEXT
Actionscript:
  1. import amfConnect;
  2. var rm:amfConnect = new amfConnect("http://klr20mg.com/amfphp/gateway.php");
  3. rm.setService("HelloWorld");
  4. rm.doQuery("getMessage", getData);
  5. function getData(obj) {
  6.     trace(obj);
  7. }

La clase, la documentación y los archivos fuente están disponibles en el FlashWiki

enjoy ;)

empleo ¡ Hay un empleo mejor !
Archivado bajo : AMFPHP, Clases AS2 - Este post tiene : 4 Comentarios »
 
Clase ToolTip Post2PDF Print
March 2nd, 2005

Esto pretende ser la primera clase de una librería de AS2.

Esta clase lo que hace es crear el clásico tooltip sobre un Movieclip, la clase cuenta con 3 métodos para poder modificar el aspecto del tooltip en tiempo de ejecución.

La documentación de la clase la pueden encontrar en ToolTip_doc.html

El archivo .as en ToolTip.as

Por ultimo el archivo FLA como la clase en este archivo ZIP tooltip.zip

Aquí dejo un ejemplo

El código que se uso para este ejemplo es el siguiente

PLAIN TEXT
Actionscript:
  1. var toolTip:ToolTip = new ToolTip();
  2. var t1 = toolTip.make(uno_mc, "Yo soy el Tooltip Uno");
  3. var t2 = toolTip.make(dos_mc, "Yo soy el Tooltip Dos\nCon un salto de linea\nOtro..");
  4. var t3 = toolTip.make(tres_mc, "Yo soy otro tooltip");
  5. uno_btn.onRelease = function() {
  6.     toolTip.setBackground(t1, "0xff00ff");
  7. };
  8. dos_btn.onRelease = function() {
  9.     toolTip.setTitle(t2, "Ya cambie el Texto.");
  10. };
  11. tres_btn.onRelease = function() {
  12.     var textF:TextFormat = new TextFormat();
  13.     textF.color = 0x990000;
  14.     textF.font = "Arial";
  15.     textF.size = 15;
  16.     textF.bold = true;
  17.     toolTip.setStyles(t3, textF);
  18. };

Por cierto con la intención de crear librerías útiles de clases AS2, quisiera que me den sugerencias de que les gustaría usar...
Archivado bajo : Clases AS2 - Este post tiene : 5 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