30 de noviembre de 2009

Compilar CSS a SWF, estilos en sub aplicaciones

Gracias a mi compañero Ciro, que vió la opción Compile CSS to SWF, me dió la solución a un problema que yo había tenido en otra ocasión y no supe como resolverlo, más que copiar todo el estilo en el css principal.

Les explico, cuando trabajas con sub-aplicaciones según la documentación de flex Developing and loading sub-applications los estilos no se heredan, y cada aplicación carga su propio estilo, pero resulta que siempre que hacía la carga de mis subapps (de ahora en adelante les diré así) el estilo no se cargaba., leyendo un poco el PDF, dan la opción de cargar el estilo en tiempo de ejecución, intenté hacerlo con el siguiente código

private function loadStyle():void {
/* Load style module into a child ApplicationDomain by specifying
ApplicationDomain.currentDomain. */
var eventDispatcher:IEventDispatcher = StyleManager.loadStyleDeclarations(
currentTheme + ".swf", true, false, ApplicationDomain.currentDomain);
eventDispatcher.addEventListener(StyleEvent.COMPLETE, completeHandler);
}
La variable current theme es si trabajas con Themes para darle estilo a tu aplicación, yo uso css plano, cambiando un poco la línea

currentTheme + ".swf", true, false, ApplicationDomain.currentDomain); 
por

"estiloSubapp.css", true, false, ApplicationDomain.currentDomain); 
me apareció un error que dice lo siguiente

Error: No se puede cargar el estilo (Error #2124: Loaded file is an unknown type. URL: style.css). style.css.
at ()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\styles\StyleManagerImpl.as:858]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at ModuleInfoProxy/moduleEventHandler()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\modules\ModuleManager.as:1101]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at ModuleInfo/errorHandler()[C:\autobuild\3.4.0\frameworks\projects\framework\src\mx\modules\ModuleManager.as:734]
]
Lo que significa que el StyleManager quería un ".swf " y no un ".css", le comenté a Ciro y es cuando me habla de que él había visto la opción Compile CSS to SWF, ésta opción aparece si le damos botón derecho al archivo ".css" en el panel de navegación del Flex Builder.

Dejando marcada Compile CSS to SWF (ahh por cierto, no esperen encontrar en algún lado el ccs compilado swf, porque no aparece, no se como funcionará) y cambiando nuevamente la línea por. Modificado de acuerdo al comentario hecho por Ciro Durán

Dejando seleccionada la opción Compile CSS to SWF , el compilador automaticamente compila el ".css" a ".swf" y lo exporta en nuestra carpeta "bin-debug" o cuando hagas "export release build" en la carpeta que hagas el exportado.


"estiloSubapp.swf", true, false, ApplicationDomain.currentDomain);
devinez quoi!!,, No tuve ningún problema en cargar mi sub aplicación con su estilo como es.

Saludos, espero les resulte útil.

23 de noviembre de 2009

Flash&Flex developer's magazine

Aprovecho la oportunidad que me da mi amigo Pedro, de editar en su blog para aportar algunas cosas, que en mi aprendizaje voy encontrando, y que como no es camino nuevo, si no camino por el que han de pasar los que empiezan detrás, creo servirá de ayuda.

Quería enlazaros a esta web www.ffdmag.com, especialmente creada para desarrolladores en tecnologías flash y flex.

Tiene apartados muy interesantes como tutoriales de as3, información de eventos, enlaces a otras páginas específicas de flex, componentes y programas desarrollados en las citadas tecnologías, noticias tecnológicas relacionadas con flash&flex, y sobre todo, lo que creo más interesante de todo ello, te puedes descargar revistas con artículos técnicos muy interesantes sobre estas tecnologías, ¡¡totalmente gratis!!.

Que os aproveche.

20 de noviembre de 2009

warning: unable to bind to property '' on class ''

Uno de los warning que más detesto en Flex “warning: unable to bind to property 'X' on class 'X'”. Para evitar éste warning en nuestra código, causando posibles errores en la asignación de los datos de nuestras clases, se debe tener en cuenta estas tres (3) cosas:

  1. La clase debe estar marcada como [Bindable]
  2. Todo atributo Bindable debe tener su setter y su getter respectivo.
  3. Los atributos preferiblemente deben ser private (es mi práctica) y por supuestos public los getter y setters.

Posible código propenso a Warning. Error tipo 1

package
{
public class Usuario
{
public var nombre :String;
public var apellido :String;

public function Usuario()
{
}
}
}




Razón: No está marcada como [Bindable].



Posible código propenso a Warning. Error tipo 2 + tipo 3 de una.



package
{
[Bindable]
public class Usuario
{
private var _nombre :String;
private var _apellido :String;

public function Usuario()
{
}

public function get nombre():String{
return this._nombre;
}

public function set apellido(valor:String):void{
this._apellido = valor;
}

public function get apellido():String{
return this._apellido;
}
}
}




Warning: unable to bind property ‘nombre’ on class ‘Usuario’



Razón: No tenemos el setter para nombre



Teniendo en cuenta estos detalles, el unable to bind property desaparecerá, ah y también usando cuando sea necesario el ObjectProxy.





Feliz fin de semana

9 de octubre de 2009

Adobe Poster: ActionScript y Flex Framework

Muchos de ustedes en el grupo de usuarios de facebook han solicitado el Poster de Adobe, bueno, aquí está. Contiene todas las clases de AS3 y Flex.

Many of you have requested on facebook user group the Adobe Poster, well here is it. Contains all AS3 classes and Flex ones.


2 de octubre de 2009

Cómo detectar cambio en un objeto personalizado

hey.. Bueno les cuento, ésta vez me enfrente a cómo detectar cambios en un objeto personalizado, para este ejemplo se llamará Checkpoint y su instancia checkpointInfo, quería detectar cuando se cambiaban los valores de las propiedades de mi objeto, para qué? para cambiar el estado del componente. Pensarán que con [Bindable] funciona, pero no es así en mi caso. El objeto Checkpoint es así:


package
{
[Bindable]
public class Checkpoint
{
public var id :int;
public var evaluated :Boolean;
public var approved :Boolean;
public var title :String;
public var level :String;
public var recommendedPercentage :int;
public var currentPercentage :int;

public function Checkpoint()
{
}
}
}


Entonces, ¿cómo hacer que cuando se cargue la aplicación pasemos de un checkpointInfo con los inicializado en null a los nuevos valores asignados más adelante en nuestro código?. Bueno, con un ObjectProxy.. el ObjectProxy según se define como:

"This class provides the ability to track changes to an item managed by this proxy. Any number of objects can "listen" for changes on this object, by using the addEventListener() method. "


  1. Iniciamos el objeto

  2. Creamos un proxy y le pasamos como parametre nuestro objeto

  3. Ahh por supuesto agregar el EventListener


public var checkpointInfo:Checkpoint;

private function init():void{
checkpointInfo = new Checkpoint();
proxy = new ObjectProxy(checkpointInfo);
proxy.addEventListener(PropertyChangeEvent.PROPERTY_CHANGE,setCheckpointState);
}


setCheckpointInfo(cpi:Checkpoint) es llamada desde fuera del componente, para que asigne los nuevos valores a nuestra variable checkpoint, pero que pasa?.. hay que hacerlo a través del ObjectoProxy, por que si hacemos la asignación checkpointInfo.id = 1500; directamente, el evento PROPERTY_CHANGE no se va a disparar, así que se debe hacer la asignación de la siguiente manera:

public function setCheckpointInfo(cpi:Checkpoint):void{
proxy.id = cpi.id;
proxy.evaluated = cpi.evaluated;
proxy.approved = cpi.approved;
proxy.title = cpi.title;
proxy.level = cpi.level;
proxy.recommendedPercentage = cpi.recommendedPercentage;
proxy.currentPercentage = cpi.currentPercentage;
}


y aquí la función que escucha el cambio en las propiedades de la instancia de nuestro objeto personalizado.


public function setCheckpointState(event:PropertyChangeEvent=null):void{

var cpState:String;

if(checkpointInfo.evaluated){
checkpointInfo.approved ? cpState= APPROVED_STATE : cpState = FAILED_STATE;
}else

cpState = DEFAULT_STATE;

this.setCurrentState(cpState);
}


Eso es todo, saludos.. creanme que había visto ese ObjectProxy pero no sabía que hacía :) Saludos a mis amigos invisibles

30 de septiembre de 2009

Descarga el SDK 3.4 de Adobe Flex

Hola a todos, he tenido poco tiempo para volver a publicar.. entre el postgrado, el trabajo, el ejercicio y la vida social me ha sido algo difícil.. bueno, les comento me estoy pasando al SDK 3.4 me dijeron por ahí que está saliendo el 3.5 no sé! es cómo muy rápido no.. No he leido mucho el release build pero de seguro tiene muchos bichos arreglados (fixed bugs) por si acaso.

Nada, bajenselo cuando tengan chance, creanme que no van a tener ningún problema con sus proyectos actuales si utilizan éste SDK, recomendación .. bajense los 3 archivos que están allí.. los van a guardar en su carpeta de SDKs de Flex que en mi caso es C:\eclipse\flex builder\sdks crean una carpeta llamada 3.4.0 y guardan todo allí..

Luego, en flex buidler.. se van a Windows -> Preferences en el input de filtros escriben SDK, les aparece en el arbol de directorios Flex -> sdks luego new.. y ya deben saber el resto.

Saludos, y disfruten el SDK, open source, y los charts también.. ;)

con referencia a: Adobe - Adobe Flex: Download Adobe Flex 3.4 SDK (ver en Google Sidewiki)

6 de agosto de 2009

Mantener el selectedIndex en una lista

Desarrollando una aplicación tipo correo electrónico me di cuenta que las listas en Flex no mantienen el índice seleccionado cuando el dataProvider obtiene nuevos datos.. por ejemplo: El inbox chequea en el servidor cada 10 minutos. Cuando llega esa respuesta se refresca la lista y nuevamente el selectedIndex es –1. Buscando por ahí (como siempre) leí que hay que escuchar el evento updateComplete() de la lista, guardar el índice seleccionado y listo, el único problema que puede ocurrir es que si los datos que llegan a la lista son más grandes puede haber problemas con el índice guardado. Allí podríamos hacer es guardar todo el objeto seleccionado y usando IViewCursor podríamos buscarlo.

private function onUpdateComplete(event:FlexEvent):void {       
     
     var dg:DataGrid = event.currentTarget as DataGrid;                      
     mailBoxGrid.selectedIndex = lastRollOverIndex;
}

 

lastRollOverIndex es una variable que modifico cada vez que hay un evento itemClick o change en la lista; el change por que si cambias el item con el teclado lastRollOverIndex va a tener el mismo valor.

<mx:DataGrid id="mailBoxGrid"  dataProvider="{mailBoxData}"
             change="onItemChange(event)"
             itemClick="onItemClick(event)"
             updateComplete="onUpdateComplete(event)">

Lista con scroll suavizado. SmoothScrollingList

Hey,.. habían notado que las listas en Flex pasan de acuerdo al tamaño del itemRenderer?? No hace scroll como normalmente es un scroll.. bueno, encontré un componente que hace smoothScrolling.. aquí el ejemplo

Allí el botón para descargar el proyecto.

5 de agosto de 2009

Rhonda: Herramienta de Dibujo 3D



Un compañero de trabajo me pasó este link http://rhondaforever.com/ hace poco.. no se con que está desarrollado pero es realmente sorprendente.

20 de julio de 2009

Ria Flex: ChartItemEvent.CHANGE in conflict with IndexChangedEvent

Este es una solución a un problema que se me presento el viernes y lo deje para resolver hoy, TypeError: Error #1034: Type Coercion failed: cannot convert mx.charts.events::ChartItemEvent to mx.events.IndexChangedEvent.

EL problema es que hay un error de conversión de tipo entre ChartItemEvent y IndexChangedEvent: Al hacer click en una columna del gráfico disparaba el error. Este bug está en el SDK de Flex, ver http://bugs.adobe.com/jira/browse/FLEXDMV-1589

La solución es sencilla, agregar un EventListener al Canvas, o el componente principal que contenga al ColumnChart y deter la propagación del event, algo así
private function canvasInit(): void{
this.addEventListener(ChartItemEvent.CHANGE, chartItemEventChange, true, 0, true);

}

private function chartItemEventChange(event: Event): void
{
 event.stopImmediatePropagation();  //Detiene la propagación del evento.
} 

]]>

La solución salió de aquí: Ria Flex: ChartItemEvent.CHANGE in conflict with IndexChangedEvent

15 de julio de 2009

Flex, Flash y Google Analytics

 

Recientemente el equipo de desarrollo y yo estuvimos conversando sobre google analytics (GA), yo había visto un post donde hablaban sobre cómo hacer tracking de contenido Flash y Flex (que es al final lo mismo) en GA, decidimos implementarlo y bueno buscando el post viejo sobre GAforFlash empecé a aplicarlo.

Les echo el cuento rapidito de cómo usarlo, y también les voy a dejar mi clase llamada AnalyticsService.as que está lista para usar después de todo esto, aja:

1. Bájense el archivo gaforflash-1.0.1.319.zip que está aquí http://files.getdropbox.com/u/592105/gaforflash-1.0.1.319.zip

2. Cuando se hayan bajado el archivo, lo descomprimen y lo instalan en su proyecto le dan propiedades -> Flex BuildPath -> LibraryPath -> AddSwc.. y buscan lo el directorio donde descomprimieron el zip y seleccionan lib/anaylitics.swc el otro es para flash.

3. Listo, ya está ahora se bajan mi clases, que es una clase con un método estático sencillo para no tener que instanciar la clase cada rato http://files.getdropbox.com/u/592105/AnalyticsService.as simplemente accedemos a ella de la siguiente manera

Esta línea es del evento show de mi modulo

<Module id="lo quesea" show="{AnalyticsService.trackPage('/home')}"/>

4. Y listo, eso es todos.. estoy esperando que sea mañana a ver si funcionó. :D Luego les comento...

Saludos, cualquier comentario pues nada, lo hacen saber.



Para los que hablan english, aquí esta el link original http://code.google.com/intl/es/apis/analytics/docs/tracking/flashTrackingSetupFlex.html

9 de julio de 2009

The CSS type Selector '$$$' was not processed, because the type was not used in the application.

Hola a todos... este warning es la cosa que más detesto en el flex builder... explico un poco que pasa con ese warning...

Cuando creamos nuestra hoja de css y tenemos selectores de tipo (type selectors) es decir aquellos que se van a aplicar a todos los componentes del mismo tipo por ejemplo un Button, o un Alert

Button{ color: #00000; }

Alert {color: #00000;}

Esos, son type selectors... que pasa: si dentro de nuestra aplicación principal .MXML NO hacemos referencia a ningún Button o Alert, en los problems nos va a aparecer unos hermosos Warnings que dicen:

The CSS type selector 'Button was not processed, because the type was not used in the application.    Dashboard/src    Dashboard.mxml    line 42    1247154055453    184589

The CSS type selector 'Alert' was not processed, because the type was not used in the application.    Dashboard/src    Dashboard.mxml    line 42    1247154055453    184589

Solución

Googleando la encontré... Hay dos maneras la primera no me funcionó que es buscar el flex-config.xml que está en mi caso C:\Program Files\Adobe\Flex Builder 3 Plug-in\sdks\3.3.0\frameworks ahí... y buscar la línea que dice

<!-- Run the AS3 compiler in a mode that detects legal but potentially incorrect -->
<!-- code.                                                                       -->
<show-ActionScript-warnings>true</show-ActionScript-warnings> y luego cambiarla a false...

(eso a mi no me funcióno.. me aparecen igual los warnings)

La segunda opción (que si me funcionó) es poner dentro de los parametros de compilación de nuestro proyecto la siguiente líena..

-compiler.show-unused-type-selector-warnings=false

Para los  que no saben donde está eso.. dentro del flex navigator le dan botón derecho a su mouse, y seleccionan Properties al final.. de ahí en las opciones de la izquierda seleccionan Flex Compiler.. pegan la línea en el cuadro que dice Additional Compiler Arguments..

Y listo.. No más Warnings de type selectors..

Otra solución:

No creen en sus hojas de estilos selectores de tipo, sino clases de estilos..

.button{ color="#00000"}

o Button.ButtonColorBlack {color="#00000}

Saludos espero les sirva...

29 de junio de 2009

Flex Decompiler

Esto es de mi otro blog que no actulizo pero lo voy a poner aquí que va mejor con Flex

HP lanzó una aplicación llamada SWFScan, ésta aplicación permite encontrar vulnerabilidades en los archivos .swf creados con Flash, Flex o cualquier otro programa cuya salida corra en la plataforma de Adobe Flash Player.

HP SWFScan is a free Windows-based security tool to help developers
find and fix security vulnerabilities in applications developed with the Adobe
Flash Platform. The tool is the first of its kind to decompile applications
developed with the Flash platform and perform static analysis to understand
their behaviors. This helps developers without security backgrounds identify
vulnerabilities hidden within the application which cannot be detected with
dynamic analysis methods.


(I've tested this app, and it's really good.. it gets all your code and checks if there are errors, or possible vulnerabilities )

Most of the time it gets you trace statements you left in your code.. here's a sample code from my preloader code...

private function onRSLDownloadProgress(findBundle:flash.events::ProgressEvent)
{
// debugfile: \TrunkWorkspace\DashboardRefactored\src;com\thinkglish\preloader;SWFPreloader.as
this.isRslDownloading = true;
this.rslBytesTotal = findBundle.bytesTotal;
this.rslBytesLoaded = findBundle.bytesLoaded;
this.rslPercent = Math.round(this.rslBytesLoaded / this.rslBytesTotal * 100);
trace("onRSLDownloadProgress: rslBytesLoaded " + this.rslBytesLoaded);
trace("onRSLDownloadProgress: rslBytesTotal " + this.rslBytesTotal);
trace("onRSLDownloadProgress: " + this.rslPercent + "%");

return;

}



and here's what SWFScan tells me what to do

Summary
An indication that the trace() function is being utilized was detected due to the presence of debug messaging.This can represent a serious security concern as path names and other information can be revealed. Recommendations include removing all debugging messaging from the application code before it is placed on production servers.

Fix

Set 'Omit Trace Actions' to 'true'. The Omit Trace Actions flag in Flash development environments tells the compiler to remove any trace commands when creating the compiled SWF file. This will make the published SWF smaller and it will remove any excess information or actions from the SWF.
References

Adobe:
Creating more secure SWF web applications

OWASP:
OWASP Flash Security Project




For more information...
http://www.communities.hp.com/securitysoftware/blogs/spilabs/archive/2009/03/20/exposing-flash-application-vulnerabilities-with-swfscan.aspx

9 de junio de 2009

Preloader con soporte de RSL

hey,.. modificando el preloader de mi aplicación no estaba seguro de cómo mostrar el progrso de mis librerías. Googleando encontré éste post http://coding.bhirschmann.de/2008/03/20/preloader-for-flex-with-rsl-support/ y allí la solución.. la clave era agregar event handlers del tipo RSLEvent

override public function set preloader( preloader:Sprite ):void
{
preloader.addEventListener( ProgressEvent.PROGRESS , SWFDownloadProgress );
preloader.addEventListener( Event.COMPLETE , SWFDownloadComplete );
preloader.addEventListener( FlexEvent.INIT_PROGRESS , FlexInitProgress );
preloader.addEventListener( FlexEvent.INIT_COMPLETE , FlexInitComplete );

preloader.addEventListener( RSLEvent.RSL_PROGRESS, onRSLDownloadProgress );
preloader.addEventListener( RSLEvent.RSL_COMPLETE, onRSLDownloadComplete );
preloader.addEventListener( RSLEvent.RSL_ERROR, onRSLError );

}

29 de mayo de 2009

Regular Expression - Expresiones Regulares


Hola a todos.. buscando una expresión regular que evaluara un URL, encontré este post con un enlace a una aplicación que contiene muchos tipos de expresiones regulares.. está demasiado fino.. espero les sea de utilidad.


El creador de la aplicación Ryan Swanson, la pueden ver directamente en el url http://ryanswanson.com/regexp/#start

22 de mayo de 2009

Utilizando el IViewCursor en Flex

Estuve haciendo una aplicación tipo buzón de correo. Tenía que encontrar el id de un usuario en la lista de contactos dado. Para encontrarlo dentro del ArrayCollection sin tener que hacer un for, utilizé un cursor, todo fino cuando encuentra lo que quiero, pero cómo obtener el index de lo que se encontró?... Bueh.. hice lo siguiente, el ArrayCollection tiene un método que se llama getItemIndex que recibe como paramétro un Objeto.. así que bueno.. esto fue lo que resolví.

1. Primero ordenamos la lista
private function sortCollection():void{
var col:ICollectionView = nuestroArrayCollection;
var sort:Sort = new Sort();
       
       //Los ordeno por id, 
       sort.fields = [new SortField("id",true,false,true)];
      
      //Asignamos la instancia de sort al CollectionView
      col.sort = sort;

      //Refrescamos la lista
      col.refresh();
}

2. Buscamos el id dentro de la colección de la siguiente manera:


//Creamos un cursor con la interfaz IViewCursor
private var myCursor          :IViewCursor;

//Asignamos a myCursor lo siguiente
myCursor = nuestroArrayCollection.createCursor()

//Usamos el método findAny un Object de lo que queremos buscar, en este caso mi arrayCollection tiene un atributo id, lo que hacemos es crear el objeto con esa información {id:studentId}
myCursor.findAny({id:studentId});

//Y finalmente, para obtener el indice o el objeto encontrado por el Cursor, usamos los métodos que ya trae el ArrayCollection (getItemAt, o getItemIndex)
indexContactList    = nuestroArrayCollection.getItemIndex(myCursor.current);


Y ya, es todo, leyendo un poco sobre el IViewCursor en langref explica que si tenemos una colección con ids únicos, el método findAny, es más efectivo que findFirst, o findLast.

Para más información: http://www.adobe.com/livedocs/flex/3/langref/mx/collections/IViewCursor.html

15 de abril de 2009

Sobre Adobe Flex

Hola a todos, como muchos deben saber Adobe Flex es uno de los mejores frameworks para el desarrollo de RIA, no voy a postear muchas entradas por aquí, solo alguna que otra solución que me parezca interesante, si quieres contactarme, utiliza la ventanita de yahoo para cualquier pregunta que tengas sobre Flex.

Hay demasiada información subida en línea, así que aprender Flex será super fácil si aún no lo sabes..

Saludos, y ya sabes.. me contactas por el yahoo, o por mail pedrovarela86@gmail.com