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
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铆..

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

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
 
October 2nd, 2006

脷ltimamente he estado probando Flex. Estoy realizando una vista en Flex de este blog que pronto podr谩n ver en linea entre otras cosas..

Bien, El tema de hoy va sobre la etiqueta esta etiqueta al momento de debuguear tu aplicaci贸n es de gran ayuda, por ejemplo, digamos que queremos consumir un webServices remoto, algo simple tomar la 鈥淐ita del d铆a鈥.

Cuando agregamos esta etiqueta a nuestro mxml regresa una secuencia detallada de los eventos que se est谩n ejecutando en nuestra aplicaci贸n. Como es un tag para debuguear en nuestra aplicaci贸n final no se vera ning煤n cambio.

El ejemplo es sencillo

Actionscript:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="350" height="100" applicationComplete="init()">
  3.     <mx:Script>
  4.         <![CDATA[
  5.             import mx.events.*
  6.             import flash.xml.XMLDocument
  7.             public function init():void
  8.             {
  9.                 miConexion.GetQuote.send()
  10.             }
  11.             public function onResultOK(event:Event):void
  12.             {
  13.                 var data:XMLDocument = new XMLDocument();
  14.                 data.parseXML(miConexion.GetQuote.lastResult);
  15.                 var out:String = data.firstChild.firstChild.firstChild.firstChild.nodeValue
  16.                 outPut.text = out
  17.                
  18.             }
  19.             public function onResultFault(fault:Event):void
  20.             {
  21.                 trace(fault)
  22.             }
  23.         ]]>
  24.     </mx:Script>
  25.     <mx:TraceTarget />
  26.     <mx:WebService  wsdl="http://www.swanandmokashi.com/HomePage/WebServices/QuoteOfTheDay.asmx?WSDL" id="miConexion">
  27.         <mx:operation name="GetQuote" result="onResultOK(event)" fault="onResultFault(event)" resultFormat="xml" makeObjectsBindable="true"/>
  28.     </mx:WebService>
  29.     <mx:Text x="10" y="10" width="330" height="80" id="outPut" text="Cargando Data Externa"/>
  30. </mx:Application>

as铆 es como se ve nuestra ventana de debugeo si dicha etiqueta

Actionscript:
  1. [SWF] C:\Documents and Settings\Tmeist3r\Desktop\test\bin\test-debug.swf - 730,596 bytes after decompression

Ahora, as铆 es como se ve nuestra ventana de debugueo cuando utilizamos TraceTarget

Actionscript:
  1. [SWF] C:\Documents and Settings\Tmeist3r\Desktop\test\bin\test-debug.swf - 717,747 bytes after decompression
  2. Registering schema namespace: http://www.w3.org/1999/XMLSchema
  3. Registering schema namespace: http://www.w3.org/2000/10/XMLSchema
  4. Registering schema namespace: http://www.w3.org/2001/XMLSchema
  5. Registering schema namespace: http://schemas.xmlsoap.org/soap/encoding/
  6. Registering schema namespace: http://xml.apache.org/xml-soap
  7. Registering schema namespace: http://rpc.xml.coldfusion
  8. '0E6C71D7-0670-186D-74DB-0B47A9E33F2A' producer set destination to 'DefaultHTTP'.
  9. '9828CAB5-C669-81AC-3299-0B47AA9F2817' producer set destination to 'DefaultHTTP'.
  10. 'direct_http_channel' channel endpoint set to http:
  11. Creating WSDL object for http://www.swanandmokashi.com/HomePage/WebServices/QuoteOfTheDay.asmx?WSDL
  12. '127766B4-8379-1647-CADD-0B47AA9FB309' producer set destination to 'DefaultHTTP'.
  13. Loading document http://www.swanandmokashi.com/HomePage/WebServices/QuoteOfTheDay.asmx?WSDL for destination 'DefaultHTTP'
  14. '0E6C71D7-0670-186D-74DB-0B47A9E33F2A' producer sending message '5604ADC7-4155-F995-8E77-0B47AA9F7C90'
  15. 'direct_http_channel' channel sending message:
  16. (mx.messaging.messages::HTTPRequestMessage)#0
  17.   body = (Object)#1
  18.   clientId = (null)
  19.   contentType = "application/x-www-form-urlencoded"
  20.   destination = "DefaultHTTP"
  21.   headers = (Object)#2
  22.   httpHeaders = (Object)#3
  23.   messageId = "5604ADC7-4155-F995-8E77-0B47AA9F7C90"
  24.   method = "GET"
  25.   recordHeaders = false
  26.   timestamp = 0
  27.   timeToLive = 0
  28.   url = "http://www.swanandmokashi.com/HomePage/WebServices/QuoteOfTheDay.asmx?WSDL"
  29. '0E6C71D7-0670-186D-74DB-0B47A9E33F2A' producer connected.
  30. Queueing SOAP operation GetQuote
  31. '0E6C71D7-0670-186D-74DB-0B47A9E33F2A' producer acknowledge of '5604ADC7-4155-F995-8E77-0B47AA9F7C90'.
  32. Processing imports for location http://www.swanandmokashi.com/HomePage/WebServices/QuoteOfTheDay.asmx?WSDL
  33. Parsing schemas
  34. Registering schema namespace: http://swanandmokashi.com
  35. Done parsing schemas: 3 ms
  36. Done processing imports: 581 ms
  37. Parsing services
  38. Parsing individual services
  39. Parsing service: QuoteofTheDay
  40. Parsing binding: http://swanandmokashi.com::QuoteofTheDaySoap
  41. Parsing portType: http://swanandmokashi.com::QuoteofTheDaySoap
  42. Parsed portType: 1 ms
  43. Parsed binding: 6 ms
  44. Parsed service: 11 ms
  45. Done parsing services: 12 ms
  46. WSDL parse took 594 ms
  47. WSDL loaded
  48. Made SOAP Operation for GetQuote
  49. Set active port in service stub: QuoteofTheDay:QuoteofTheDaySoap
  50. Invoking previously queued calls GetQuote
  51. Invoking SOAP operation GetQuote
  52. Initializing SOAP operation GetQuote
  53. Parsing message: http://swanandmokashi.com::GetQuoteSoapIn
  54. Message name is GetQuoteSoapIn
  55. Parsed message: 5 ms
  56. Parsing message: http://swanandmokashi.com::GetQuoteSoapOut
  57. Message name is GetQuoteSoapOut
  58. Parsed message: 5 ms
  59. Asynchronously invoking SOAP Operation: GetQuote
  60. Encoding SOAP request envelope
  61. Encoding SOAP request body
  62. Encoded SOAP Operation request: <?xml version="1.0" encoding="utf-8"?>
  63. <SOAP-ENV:Envelope xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><SOAP-ENV:Body><GetQuote xmlns="http://swanandmokashi.com" /></SOAP-ENV:Body></SOAP-ENV:Envelope>
  64. '0E6C71D7-0670-186D-74DB-0B47A9E33F2A' producer sending message 'E5E1E227-8114-3417-14DB-0B47AD103D57'
  65. 'direct_http_channel' channel sending message:
  66. (mx.messaging.messages::SOAPMessage)#0
  67.   body = "<?xml version="1.0" encoding="utf-8"?>
  68. <SOAP-ENV:Envelope xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><SOAP-ENV:Body><GetQuote xmlns="http://swanandmokashi.com" /></SOAP-ENV:Body></SOAP-ENV:Envelope>"
  69.   clientId = "DirectHTTPChannel0"
  70.   contentType = "text/xml; charset=utf-8"
  71.   destination = "DefaultHTTP"
  72.   headers = (Object)#1
  73.   httpHeaders = (Object)#2
  74.     SOAPAction = ""http://swanandmokashi.com/GetQuote""
  75.   messageId = "E5E1E227-8114-3417-14DB-0B47AD103D57"
  76.   method = "POST"
  77.   recordHeaders = false
  78.   timestamp = 0
  79.   timeToLive = 0
  80.   url = "http://www.swanandmokashi.com/HomePage/WebServices/QuoteOfTheDay.asmx"
  81. '0E6C71D7-0670-186D-74DB-0B47A9E33F2A' producer acknowledge of 'E5E1E227-8114-3417-14DB-0B47AD103D57'.
  82. Decoding SOAP response
  83. Encoded SOAP response: <?xml version="1.0" encoding="utf-8"?><soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><soap:Body><GetQuoteResponse xmlns="http://swanandmokashi.com"><GetQuoteResult><QuoteOfTheDay>All I Really Need To Know I Learned In Kindergarten</QuoteOfTheDay><Author>Robert Fulghum</Author></GetQuoteResult></GetQuoteResponse></soap:Body></soap:Envelope>
  84. Decoding SOAP response envelope
  85. Decoded SOAP response into result [0 millis]

Sin duda esta es una etiqueta que nos puede ahorrar muchos dolores de cabeza al momento de Debugear.

Saludos!!

Archivado bajo : AS3, Flex - Este post tiene : 1 Comentario »
 
September 12th, 2006

Aral Balkan ha hecho lo que hasta el d铆a de hoy es la mejor rese帽a sobre Apollo.

Que es Apollo?

Apollo es una aplicaci贸n para desarrollar RIAs ( Rich Internet Application ) multiplataforma que esta desarrollando Adobe, con la cual se podr谩 desarrollar tanto en Flash, Flex, HTML Ajax entre otros, El 鈥渢arget鈥 ser谩n RIAs que podr谩n usarse desde el desktop del usuario.

En Fin este post es de lectura obligada.

http://aralbalkan.com/729

Saludos!! 8)

Archivado bajo : Adobe AIR - Este post tiene : 2 Comentarios »
 
September 12th, 2006

Mientras el blog sigui贸 creciendo (No tanto como lo deseo :) ) se fue haciendo un poco dif铆cil la navegaci贸n entre los post y ya que el sitio no cuenta con una b煤squeda, aun mas dif铆cil se hacia.

Es por ello en el apartado de Categor铆as y Archivos (en la barra lateral) implemente, por medio de un par de plugins de wordpress, una navegaci贸n por medio de 谩rbol (tree) en la cual pueden encontrar cualquier post publicado en el blog, como comente, est谩n ordenados por categor铆a y por fecha.

Ademas de que se agrego una categor铆a de blog sobre Flex. ;)

Yo digo que se ve bien 8). que opinan?

Archivado bajo : General - Este post tiene : 4 Comentarios »
 
September 5th, 2006

A pocas horas de publicar el post Comunidades Flex en espa帽ol, en donde comentaba que no exist铆a ninguna comunidad en Espa帽ol. Amanezco con la noticia de que Carlos Rovira junto con Xavi Beumala han lanzado un portal-comunidad sobre Flex y si, en espa帽ol llamado MadeInFlex..

Bueno, era de esperarse era solo cuesti贸n de tiempo para que apareciera algo, y la verdad para mi es mas que suficiente jeje. Estos 2 personajes si que saben de lo que hablan.

Acerca de MadeInFlex

"Made In Flex es un sitio web en espa帽ol que pretende unificar aquellas necesidades creadas entorno a la plataforma Flex de Adobe. En definitiva, un punto de encuentro para desarrolladores, empresas y todo aquel interesado en esta nueva generaci贸n de RIAs(Rich Internet Applications).

Los recursos planteados son muy diversos: Noticias, Grupo de Usuarios de Adobe, Lista de Correo, Casos de Uso o Art铆culos por nombrar solo algunos. Es de esperar que se a帽adan m谩s conforme desarrollemos la idea entre todos."

Bueno, por lo pronto ya estoy inscrito en la lista, ya ver谩n mis dudas por ah铆. :)

No me queda mas que desearles toda la suerte del mundo y espero poder colaborar con ustedes de alguna forma (Por lo menos haciendo preguntas :P)

Enhorabuena. 8)

Archivado bajo : Flex - Este post tiene : 1 Comentario »
 
September 4th, 2006

A partir del lanzamiento oficial de Adobe Flex 2 me he puesto a probarlo realmente a conciencia, las 鈥減ruebas鈥 son claramente desde una perspectiva de un desarrollador en Flash.

Bueno los resultados de estas pruebas los publicare en un Post posterior.

El tema del post es 鈥淐omunidades de Flex en espa帽ol鈥. Cuando estaba investigando sobre Flex me di cuenta que no existe ning煤n sitio en espa帽ol dedicado a Flex, hay unos cuantos blogs dignos de leer aunque los autores son de habla hispana los contenidos son en Ingles aunque de muy buena calidad.

ASFusion
OscarTrelles
Carlos Rovira

Me encontr茅 con un foro sobre Flex en after-hours pero parece que se postea una pregunta cada mes jeje.. tal como en mi blog. :)

Bueno el punto es 驴no existen comunidades en espa帽ol de Flex? 驴Valdr谩 la pena crear un comunidad de Flex en espa帽ol?

Por mi parte me gustar铆a crear algo, pero no se realmente si exista el material humano para poder crear una comunidad como tal,

Ahora el por que me interesa? Simplemente para poder ir aprendiendo juntos, se puede decir que estoy en un nivel medio-bajo, si no es que bajo en Flex y tener un lugar donde preguntar, donde compartir sobre temas de inter茅s mutuo etc seria interesante.

Que les parece? Creamos algo?

Archivado bajo : Flex - Este post tiene : 6 Comentarios »
 
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 »
 
Entradas Anteriores Entradas Siguientes

 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