Mostrando las entradas con la etiqueta flex. Mostrar todas las entradas
Mostrando las entradas con la etiqueta flex. Mostrar todas las entradas

28 de marzo de 2011

Flex con back-end Java (traducido por mi)

Compatriotas y no compatriotas, Adobe TV un proyecto de traducción de sus videos en cualquier idioma, esto con el propósito de evangelizar sus productos e integrar la comunidad de Adoberos (el que hace los adobes) a nivel mundial.

 

“The Adobe TV Community Translation project extends the reach of Adobe TV content by enabling volunteer translators worldwide to translate videos into any language” [1]

 

Bien, entre las miles de cosas que tengo que hacer, me he puesto a colaborar en el proyectico, y mi primera contribución es la traducción del video de James Ward sobre Flex y Java, James muestra tres tipos de conexiones con el back-end, que son básicamente las formas que tenemos de conectarnos  en Flex con una fuente de datos externa.

 

La primera es con un XML que se obtiene de un JSP, a través de la etiqueta HTTPService podemos hacer la solicitud del XML.

 

La segunda es con SOAP, es decir web services, la etiqueta en flex es WebService y prácticamente es como la etiqueta anterior la diferencia esta en que HTTPService utiliza un url, y WebService un wsdl.

 

Y la tercera forma es a través de BlazeDS que utiliza el AMF (Action Message Format) para hacer la serialización de datos entre Java y Actionscript, la etiqueta utilizada en Flex es RemoteObject, y para utilizarla hay que configurar algunos archivos del lado del servidor para que esto funcione.

 

 

Las otras etiquetas HTTPService y WebService también pueden ser configuradas del lado del servidor todas tiene la propiedad “destination”, y pues para cada una hay un archivo diferente en el servidor que tenemos que configurar para que funcione correctamente.

 

Aquí les dejo el video, espero no haber comido muchos “typos”, el pana decía muchas veces “so”, “so”, (así qué, entonces)… y por ende mi traducción literal de la palabra.

 

Si están interesados en colaborar con la traducción de videos, vayan Adobe TV, y sigan los pasos en la pagina de Translation.

 

 

21 de febrero de 2011

Hoy recibí el titulo de Expero Certificado de Adobe (Adobe Flex Certified Expert)

Hoy y después de tanto tiempo esperando por por esto obtuve el titulo de Experto Certificado de Adobe por supuesto en Flex y AIR.

La verdad ayer estaba bastante asustado por que hoy era el Día en que iba a poder decir que conozco bastante de Flex XD y Adobe lo certifica

El examen de certificación consta de cinco (5) partes para aprobarlo se necesita 67% mi Score: 87% XD

La secciones son las siguientes con mi puntuación es la siguiente XD

Crear Interfaces de Usuario (UI)........................ 100%
Diseño y arquitectura del sistema de Flex .............. 88%
Programación de aplicaciones Flex con ActionScript ..... 91%
Interacción con fuentes de datos y servidores .......... 62% :(
Uso de Flex en AIR ..................................... 80%

La primera parte es todo lo relacionado al diseño de interfaces, los componentes, los contenedores, componentes personales, las opciones de diseño, las restricciones de ubicación de los componentes, etc.

Diseño y arquitectura del sistema de Flex, se refiere a todo lo que tiene que ver con el funcionamiento de Flex como tal, me refiero a los Bindings, manejo de eventos, el mecanismo de Bubbling, etc.

La tercera parte, todo lo que tenga que ver con ActionScript

Aquí si es medio tricky por que te preguntan sobre LCDS, acostumbrado a usar BlaseDS no he tenido la oportunidad de conocer mucho sobre los conceptos de LCDS pero sin embargo me "meti un puñal" como decimos en Venezuela sobre el tema.. a pesar de el puñal no me fue tan bien.. otra de las razones es la mala costumbre de MATE XD con todas sus etiquetas propias del framework se te olvidan las opciones para acceder a datos de los componentes originales de Flex.

y por último AIR... solo una aplicación he desarrollado completamente en AIR, y pues éste tema al igual que LCDS me tenía preocupado.. cuando vi en el checklist de los puntos que iban para AIR.. decía.. Si quieres hacer una Base de Datos local en SQL que método utilizas???... XD no sabía ni siquiera que Adobe AIR tiene SQLLite embebido dentro del ambiente., de allí otro puñal.. que aquí les dejo el docu, están en inglés pero espero traducirlo algún día.. y si no, más abajo les posteo el link de AIR en español, la documentación oficial de AIR de Adobe en nuestro idioma


Aquí la guía completa en español de Adobe AIR, es la 1.5 pero funciona igual..

http://help.adobe.com/es_ES/AIR/1.5/devappsflash/devappsflash.pdf

23 de noviembre de 2010

Los saltos de línea en textos

Nunca es tarde para seguir aprendiendo, y menos Flex. Por cosas tan sencillas como estas aún no he querido presentar la certificación, hoy les quiero comentar sobre los saltos de línea, por lo general nuestras aplicaciones tienen un monton de texto; cada vez que tenía que agregar un texto que incluyera más de un parrafo usaba el htmlText y meter el \n para que agarrara el salto de línea, el \n sigue funcionando pero no sabía el uso del caracter XML "&/#13;" el cual podemos usar en el MXML tranquilamente,


Entonces, en resumen texto AS usamos \n, y texto en MXML usamos " ".

19 de enero de 2010

Cómo controlar el volumen en una aplicación de manera global.

Hey saludos a todos, tiempo tiempo sin postear nada nuevo más que los iconitos que conseguí de flex builder, en fin.

Si han tenido la necesidad de trabajar con sonido en sus aplicaciones habrán visto que la manera más sencilla según la ayuda de flex es con la clase Sound

request("click.mp3"); var s:Sound = new Sound(req);


Bien, eso funciona.. si quieres bajar o subir el volumen de ese sonido en particular usamos SoundTransform aplicado a ese canal de sonido, algo así



var snd:Sound = new Sound(new URLRequest("bigSound.mp3")); 

var trans:SoundTransform = new SoundTransform(0.6, -1);


Pero.. que pasa cuando queremos bajar el volumen para toda nuestra aplicación y no solo para ese sound, fácil, usando SoundMixer y aplicando un SoundTransform



SoundMixer.soundTransform = new SoundTransform(1, -1);


Por ejemplo si queremos usar un HSlider o VSlider para subir y bajar el volumen de manera global en nuestra aplicación haríamos lo siguiente:



Este ejemplo incrusta (Embed) el sonido dentro de una Clase, pero lo importante es el uso de la clase estática SoundMixer para el control del volumen.



<?xml version="1.0" encoding="utf-8"?>

<!--Ejemplo de como controlar el nivel de volumen globalmente para una aplicación -->
<!--Creado por Pedro Varela para Flex en español-->
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" styleName="plain" horizontalAlign="center" verticalAlign="middle"
applicationComplete="loadSound();">

<mx:Script>
<![CDATA[
[Embed(source="armin.mp3")]
private var soundClass:Class;

[Bindable]
private var armin:Sound;

[Bindable]
private var channel:SoundChannel;

private function loadSound():void{
armin = new soundClass() as Sound;
}

private function play():void{
channel = armin.play();
channel.addEventListener(Event.SOUND_COMPLETE, onFinishSong);
repro.enabled=false;
}

private function stop():void{
SoundMixer.stopAll();
repro.enabled=true;
}

private function onChangeVolSlider(event:Event):void{
SoundMixer.soundTransform = new SoundTransform(event.currentTarget.value);
}

private function onFinishSong(event:Event):void{
deten.enabled = false;
repro.enabled = true;
}
]]>
</mx:Script>

<mx:Grid>
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="100%" height="100%" horizontalAlign="center" verticalAlign="middle">
<mx:Button id="repro" label="Reproducir" click="{play()}"/>
<mx:Button id="deten" label="Detener" click="{stop()}"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%" height="100%">
<mx:GridItem width="100%" horizontalAlign="center" verticalAlign="middle">
<mx:HSlider minimum="0" maximum="1" labels="[0,50,100]" height="42" id="volSlid" change="onChangeVolSlider(event)" showDataTip="false" liveDragging="true" allowTrackClick="true" value="1"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
</mx:Application>


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

6 de agosto de 2009

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.

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

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