Aplicando efectos a Labels, LinkButtons, Buttons, etc…

Si ya haz jugado con los efectos tan fácil de aplicar que tiene FLEX, te podrás haber dado cuenta que existen ciertos componentes que no “agarran” los efectos o no se animan. Esto ocurre cuando el componente es un Label (etiqueta) o en su defecto, posee un Label interno tal como un Button o un LinkButton. Por defecto, si aplicas un efecto a un Container (contenedor) todos sus hijos toman el efecto. Ejemplo, si creas un Canvas y le agregas un Label y un TextArea y le aplicas un efecto Fade (desvanecimiento) entonces cuando se este animando, solo el TextArea se verá desvanecer y el Label parecerá que aparece o se oculta de inmediato sin ese efecto transitorio de desvanecimiento.

Existen varios trucos para solventar esto. Uno es especificar literalmente a FLEX que tipo de fuente usará el Label. Es sencillo y se hace con una función setStyle pero por otro lado, tendrás que hacer lo mismo por cada Label, Button, …, que tengas en tu Container.

Acá propongo uno muy sencillo que te garantizará funcionar donde sea. Está en AS3. A nivel global creas un BlurFilter y un Array:

private var blur_filter:BlurFilter = new BlurFilter(0,0,0);
private var filtros:Array = new Array();

Luego, internamente en el código agregas el BlurFilter al Array:

filtros.push(blur_filter);

Y todo componente de FLEX tiene la propiedad filters. Bastará con asignar el Array filtros a la propiedad filter del Label, Button, LinkButton, …, para que mágicamente el texto de los Labels, o cualquier componente que tenga texo, se anime:

contenedor_u_objeto.filters = filtros;

Recuerda, basta con aplicar el filtro al contenedor, bien sea un Canvas, Panel, …, para que todos sus hijos se animen en conjunto sin importar que tipo de componentes sean 😛

Anuncios

Sentencia “WITH” para ahorrar código

Vaya que es tedioso cambiar el monton de propiedades de un objeto… Y FLEX suele prestarse para eso cuando se trabajan con estilos sin emplear CSS… Lo siguiente es un ejemplo de como usar la sentencia WITH para agrupar propiedades de un objeto.

Sin uso de la sentencia WITH un codigo en FLEX seria asi…

this.width = 600;
this.height = 300;
this.x = 800/2 – this.width/2;
this.y = 400/2 – this.height/2;
this.setStyle(“hideEffect”, this.parallel);
this.setStyle(“showEffect”, this.parallel);
this.bot_aceptar.label = “Aceptar”;

Usando WITH tendriamos algo menos amontonado…

with(this){
width = 600;
height = 300;
x = 800/2 – width/2;
y = 400/2 – height/2;
setStyle(“hideEffect”, parallel);
setStyle(“showEffect”, parallel);
bot_aceptar.label = “Aceptar”;
}

Security sandbox violation

Estaba haciendo una aplicación en FLEX que requiere el uso de AMFPHP para conectarme con una Base de Datos en Postgres y todo siempre funcionó bien, todo hasta que decidí acceder a mi aplicación desde una URL y no desde el .swf que se genera. El error descrito fue el siguiente:

Error #2044: Unhandled SecurityErrorEvent:. text=Error #2048: Security sandbox violation: http://localhost/SQR/bin-debug/SQR.swf cannot load data from http://127.0.0.1/amfphp/gateway.php.

Es un error muy común y fácil de solucionar. Se genera cuando una aplicación flash trata de acceder a datos que residen en otro dominio web. En mi caso, aunque no lo crean, es porque accedí a mi aplicacion desde mi servidor localhost y dentro de ella tengo un script que pide datos a un servicio bajo el dominio 127.0.0.1. Entonces se preguntaran, ¿no es localhost y 127.0.0.1 lo mismo?

Y mi respuesta es… “No necesariamente”. No es la primera vez que he tenidos problemas asi. Una vez, Windows dejó de reconocer el dominio localhost y debía acceder a mi servidor local siempre desde 127.0.0.1. La solución fue sencilla modificanddo un par de líneas en una subcarpeta de Windows -si ese es el caso de ustedes, googleenlo, es sencillo de resolver :P-

En el mejor de los casos, la solución se consigue cambiando todos los 127.0.0.1 por localhost o viceversa. Esto quiere decir que si en el AS3 tienes referencias a 127.0.0.1 entonces accede a tu aplicacion empleando la URL 127.0.0.1. Para cualquier IP o dominio aplica lo mismo.

En un entorno de producción real, esta modificacion ya no es viable. Para solucionarlo se crea un fichero en XML que va a permitir resolver el problema En este enlace Adobe publica la solución 🙂

Photoshop en la Nube

Ocurre que cada día los  aficionados a la fotografías somos muchos más. Quizás se deba al auge de las cámaras digitales cada vez más livianas, fáciles de usar, económicas y aunque no sepamos mayores detalles técnicos de ellas, resultan que toman fotos maravillosas. Entre mis hobbies personales están el crear panoramas, tengo una Kodak C763 sencilla con quién fotografío muchas cosas de mi día a día. Claro que no siempre la foto queda perfecta, para ello me valgo de varios “juguetes mágicos” que transforman mis fotos en verdaderas piezas de calidad que nada tienen que envidiar a las de un fotógrafo experto 😀

Vale decir que no uso un único programa, para ediciones rápidas de color, tamaño o iluminación empleo el Microsoft Picture Manager, si requiero aplicar filtros o “crear y desaparecer” cosas uso el Photoshop Elements, para crear panoramas empleo el Microsoft Digital Image Suite y solo cuando de verdad necesito modificar la compleja “realidad” uso el todopoderoso Photoshop –no sin antes buscar un tutorial que me explique cómo usarlo- 😛

Todo el software que acabo de mencionar se encuentra instalado en nuestros PCs o Laptops personales, están ajustados a nuestra resolución, ordenamos los enlaces de manera de conseguirlos rápidamente pero ocurre que si por algún motivo nos quedamos sin nuestras máquinas entonces con ellas se aisla todo nuestro laboratorio fotográfico 😦

Por suerte, ya no hay nada que no se encuentre en la Nube… Hay procesadores de texto, hojas de cálculo, gigas de almacenamiento, música, y por supuesto, editores fotográficos… Y que no saben con que fueron hechos? Pues con FLEX! Obvio 😛

Photoshop Express!

Photoshop Express

Es un mini laboratorio digital con lo básico pero a la vez súper útil del Photoshop de nuestras compus. Nos permite tener una cuenta donde almacenar las imágenes en línea y a su vez nos permite editar fotografías desde cualquier dispositivo de almacenamiento que tengamos conectados al computador.

Picnik!

Picnik

Efectos rápidos, bordes, postales y demás. Cuando la aplicación se está cargando, nos recuerda  a un maravilloso juego de MAXIS y Electronic Arts. Lo que tiene Photoshop Express lo tiene este 😀

SumoPaint!

SumoPaint

Mas que un editor es un “creador”. Es un poderoso Paint en la nube. Permite crear arte digital a partir de nada. También permite editar fotografías.

Lo mejor es que todas estas aplicaciones online son gratuitas y por un pequeñísimo precio se incrementa la capacidad de almacenamiento. Pero vamos, si tenemos una SD o una Pendrive, ese almacenamiento no nos importa!

Los invito a utilizarlas, comentarlas si les gusta y recuerden. Su corazón es código FLEX 😀

Los imperios contraatacan… Google con su Chrome OS vs. Microsoft con su Bing

Hoy la gran noticia ha sido el anuncio de Google de sacar su propio sistema operativo Google Chrome OS. El mismo estaría orientado principalmente a equipos portátiles y livianos como netbooks y no precisamente celulares. Para eso Google deja dicho bien claro que seguirá con su proyecto Android para los smartphones. El movimiento ágil de Google busca conectar nuestras portátiles de manera permanente con a sus excelentes servicios, y lo mejor de todo, gratis. Existen muchas personas en el mundo que organizan su vida con Google y que sin él todo sería un desorden. En ese grupo me incluyo… Mi calendario, correo, agenda, anotaciones, documentos importantes, mensajería instantánea –bien sea en texto o por voz-, lector de noticias… Todo lo tengo sincronizado con Google. Pedir una dirección? Google Maps al rescate! Acá podrán leer la noticia original -y en inglés- publicada en el blog de Google.

chrome os

Si bien esta noticia se esperaba pronto, al menos yo la veía venir, lo que nunca me esperé es que Microsoft de verdad se haya propuesto tratar de tomar parte del mercado de las búsqueda, terreno más que dominado por el creador del inmenso Gmail. Bing es el nombre del susodicho y debo decir que es un buscador que funciona… Funciona bien! Poco use el Live Search, me parecía súper pesado visualmente y su velocidad de respuesta me dejaba mal sabor de boca. El nuevo Bing es mucho mas organizado, al usarlo sientes que ha tomado los aciertos de Google al colocar opciones avanzadas de fácil acceso y al parecer, entiende lo que le pedimos. Al buscar mi nombre más el de mi facultad en la universidad, Google me identificó y me colocó de segundo lugar, la primera es un sujeto llamado idénticamente como yo pero en una universidad de Chile XD. Lamentablemente Bing no me coloco ni en sus primeros 20 resultados, identificó a muchos Javieres en mi uni pero ninguno soy yo 😦 Por otro lado, cuando coloco “WinQSpeaker” –un software bastante divertido que desarrollé en mis días de bachillerato- tanto Google como Bing me posicionan de 1ro! 😀

Microsoft intenta ganar terreno en las búsquedas… Su nueva opción es bueno pero… Google tiene más tiempo, la gente ya lo conoce, lo ama y le es fiel… Por otro lado Google quiere darle vida al hardware de tu computadora… Pero por mas amante de Google que seas, seguro lo probarás pero no te despegarás definitivamente de tu amado Linux, Windows o Mac. Yo soy muy openmind y para nada radical, me gustan estas cosas y pruebo de todo con la finalidad de demostrar que el producto ha sido bien hecho. Pero, por allí dicen que…

Mas sabe diablo por viejo que por diablo

Y a eso le sumo…

Zapatero a su zapato

Todo poderoso FLEX – Una introducción

Creo que puedo crear una serie de entradas honrando al poderoso FLEX y consiguiendo seguidores mediante mi evangelización.  No vean esto tan raro, la verdad es que sí existen evangelistas de FLEX, trabajan en Silicon Valley y viajan por las naciones demostrando el poder de la creación más valiosa de Adobe. Me pregunto si la antigua Macromedia se arrepiente de haber vendido su tecnología -antiguamente Macromedia FLASH- al ver en lo que se ha convertido su hijo prodigio.

Adobe Flex Logo

Existen muchas entradas técnicas en cientos de blogs y sitios especializados que también honran tributo a esta maravilla del Web 2.0.

Qué puedo hacer con FLEX?

Con un único código, tu aplicación se ejecutará en tu escritorio -ejecutándose sobre Adobe Air- o desde cualquier navegador web que lo soporte, actualmente, todos los que tengan el plugin de Flash.  FLEX es multiplataforma, el SDK y el compilador está disponible tanto en Windows como en Linux.

Si has programado en Java, FLEX será un paseo para ti. Puedes construir la aplicación de tus sueños empleando AS3, lenguaje script full orientado a objetos; emplear el FLEX Builder para construirlas de manera gráfica simplemente arrastrando y ordenando los componentes de interfaz como más te guste y asignando propiedades y eventos en MXML -lenguaje de etiquetado XML de FLEX-

Como había mencionado anteriormente, FLEX puede ejecutarse en tu navegador sin embargo eso no implica que esté ejecutándose desde la web. Las aplicaciones en FLEX se descargan en su totalidad en tu equipo y su capacidad de procesamiento queda limitada solo por la velocidad y capacidad del hardware de tu computador. Esto depende, por supuesto, de la naturaleza de la aplicación. Ejemplo, un editor de imágenes basado en FLEX se descargará y podrá funcionar sin necesidad de volverse a conectar; esto es gracias a que FLEX se integra perfectamente con el sistema operativo de tu equipo permitiéndole tener acceso a tu carpeta de imágenes y cualquier lugar de tus dispositivos de almacenamiento. Por otro lado, si la aplicación es una herramienta colaborativa, entonces si requerirá de una conexión para enviar audio, video o mensajes.

Cuando creas una aplicación en FLEX, tienes a tu disposición acceso a toda la tecnología multimedia que puedas imaginar. En combinación con Flash Interactive Server, puedes crear aplicaciones que se comuniquen con otras instancias de la misma en tiempo real y transmitir audio y video, archivos, mensajes entre objetos, entre otros. Todo de manera síncrona o asíncrona.

Lo siguiente es una combinación de enlaces de interés para ver qué es FLEX, donde se encuentra FLEX en nuestro día a día y lo que se puede hacer con él.

Sitio oficial del proyecto

http://labs.adobe.com/technologies/flex/

Compilación de Aplicaciones basadas en FLEX

http://flex.org/showcase/

http://designingwebinterfaces.com/great-flex-ux

Blogs amigos Evangelistas

http://blog.flexexamples.com/

http://flex.org/

En el próximo post dejaré mas detalles técnicos de FLEX y las ventajas para el programador, diseñador o aficionado al mundo de creación de contenido y aplicaciones web.

Un mini juego de Damas en C

Hace un par de días una profesora en la universidad me pidió que por favor le hiciera de manera express un juego de damas en C a su sobrinita… Resulta que la muchacha estudia es ingeniería industrial en una reconocida universidad del país, pero tal como ocurre con mis alumnos biólogos y químicos, la programación no se les da mucho. Ella me suministró un código que ya había empezado sin embargo el mismo no hacía nada e iba a tardar más tiempo comprendiendo su tosco estilo que programando yo mi propia versión. Para que no se dieran cuenta que era “copiado”, realicé el juego sin agregar mayores características:

  • Son dos equipos, los rojos y los blancos
  • Los rojos se mueven primero
  • Para moverse se elige la coordenada de la ficha y la dirección del movimiento
  • Si un equipo falla su movimiento entonces le toca el turno al contrario
  • Solo se evita salirse del tablero al tratar de realizar un movimiento y moverse a una casilla ocupada por una ficha del mismo color
  • No se corona, la ficha llega al otro extremo y listo
  • Salen mensajes explicando el evento ocurrido al mover la ficha
  • Si es posible, una ficha se come a una de su color opuesto

Adicionalmente el código fue realizado en dos horas, probado a medias y existe algo de redundancia en las condiciones… Por favor que eso no de pie a que me consideren un mal programador… Simplemente me dio fastidio depurarlo, optimizarlo y además, debía parecer que lo hizo una persona con poca experiencia programando 😛

Archivo fuente

Para compilar y ejecutar en Linux

g++ damas.c –o damas
./damas