Crear controles personalizados en Flex

Una de las ventajas que tiene el desarrollo con el framework de Flex, es la capacidad de crear controles personalizados basados en otros controles es decir, crear controles de usuarios con características especiales, que cumplan con ciertos procesos y que nos ahorren trabajo.

..
Para iniciar, vamos a crear un nuevo proyecto de Adobe Flash Builder 4, para este caso lo llamare ControlPersonalizado, en tipo de proyecto seleccionamos proyecto WEB y utilizamos la SDK4 (con Flex 3 también es posible). Una buena práctica en el desarrollo de software, es tener un proyecto de pruebas, donde se creen las rutinas de prueba, los controles personalizados y todo lo que eventualmente pueda llegar a constituir un problema en el desarrollo, bien sea por su complejidad o por los riesgos del ejercicio.

Presionamos el botón “Finish” para cargar la aplicación.

Una de las ventajas del nuevo Flash Builder, es la posibilidad de trabajar paquetes (package), los paquetes son carpetas lógicas que permiten administrar de una manera ordenada nuestros componentes, clases, y recursos de código, etcétera. En el explorador de proyectos, buscamos la carpeta src, presionamos clic derecho, new package, y lo llamamos Componentes (la primera letra de la palabra debe están en mayúscula).

En el paquete, presionamos clic derecho, new, MXML Component.

Ponemos el nombre del Componente (cómo este funcionará como una clase, entonces la primera letra debe ir en mayúscula al igual que la primera letra de cada palabra compuesta). Para este ejercicio, vamos a crear un Campo de texto que tenga restricciones para que solo acepte números, en el campo Base don, seleccionamos la clase Group, cambiamos el tamaño por defecto a 200px por 200px (estos valores van a cambiar), y presionamos Finish.

Ahora, tenemos un nuevo archivo con código independiente de la aplicación, que también cuenta con un entorno de diseño, sin embargo no lo vamos a utilizar. Después de la etiqueta “s:Group” vamos a crear un campo de texto y debe quedar de esta manera:

Descripción: En la etiqueta s:Group, editamos el valor de ancho y alto, y lo ponemos del mismo tamaño de un campo de texto clásico: 132 x 22.

Creamos una etiqueta TextInput, esto crea un campo de texto en el formulario, el campo id, es muy importante, ya que gracias a este id, podemos acceder directamente a la información del campo. Las propiedades X y Y quedan en 0, para que se alineen al borde superior izquierdo del grupo. La propiedad restrict nos permite restringir o permitir valores dentro del campo de texto, en este caso, el campo solo admite valores numéricos, al intentar ingresar letras o caracteres especiales no será posible entrar ese tipo de datos. Finalmente las propiedades de ancho y alto del campo, las dejamos en 100% cada una, esto asegura que sin importar el tamaño final del control, el campo de texto se acoplara a su contenedor.

Guardamos y vamos al archivo del proyecto, es decir a ControlPersonalizado.mxml, estando en la vista de diseño, vamos al panel components y nos podemos dar cuenta que hay un nuevo control en la carpeta Custom:

Ahora solo basta con arrastrar el control y probar el proyecto:

Si intentamos introducir algún carácter que no sean números, no los acepta el campo de texto. La propiedad restrict se puede adicionar a cualquier campo de texto, la ventaja de hacerlo de esta manera es que no es necesario añadir esa línea cada vez que necesitemos hacer un control numérico, solo basta con crear un componente personalizado y utilizarlo las veces que sea necesario.

Finalmente para acceder a la información del campo de texto, es necesario recurrir al id del control en el formulario y al id del campo de texto, de esta manera:

Lo último que hacemos es poner un botón en el formulario, que al presionar click, llame al método mostrarTexto(), este método muestra una alerta con el texto del campo de texto. Lo realmente importante es que para acceder a la información del campo de texto, solo se necesita poner el nombre del control en el formulario (campo1Txt), el nombre del campo de texto en el componente (campoTexto) y la propiedad text de este último.

Este es el ejemplo:

Espero sus comentarios.

Leer más...

Lanzamiento de ADOBE CS5 - El evento

El sábado 17 de Abril, estuve en el evento de lanzamiento de la Suite Adobe CS5 y Flash Builder 4 (FB4), evento organizado por el Adobe User Group Xpert.

Marlon Ceballos hizo una excelente presentación sobre lo nuevo de programas como InDesign, Illustrator, Photoshop y Flash Catalyst, después Andres Rodrigues, nos hizo una demostración de cómo implementar la interfaz diseñada con Flash Catalyst en un proyecto de FB4, en seguida estuve hablando sobre el consumo de WebServices desde FB4 sin necesidad de conocer nada de ActionScript 3 y para finalizar de nuevo Marlon, nos presento algunas de las novedades de Flash Professional, sin duda alguna, una de las herramientas que más cambios ha tenido desde que Adobe la adoptó.

..
Toda la historia detrás del evento es bien larga y tuvo muchos detalles, que es bueno comentar, todo empezó cuando Marlon me pidió el favor de apartar el Auditorio del SENA para hacer el evento de lanzamiento, la fecha y hora del evento cambió muchas veces, unas veces por afán otras veces por falta de comunicación, otras veces por miedo al fracaso y a fin de cuentas el evento quedo programado para las 10:00Am del Sábado 17, las invitaciones fueron enviadas a través de correo electrónico, de Twitter, de Facebook y lo único que nos hizo falta fue hacer comercial en TV y enviar señales de humo. La convocatoria sirvió mucho ya que de manera sorprendente los cupos se agotaron en menos de 48 horas, y todo indicaba que sería un excelente evento.

El viernes el afán por tenerlo todo bien se notaba y personalmente estaba sufriendo ya que no tenía ni presentación ni ejemplo, por falta de tiempo no lo había podido preparar, al hablar con Marlon me dijo que todo estaba preparado y que al parecer yo era el único vago que no tenía nada listo, toda la tarde del Viernes y gran parte de la noche, estuve trabajando en el ejemplo y creo que todo salió muy bien, me fui a acostar temprano y misteriosamente Marlon seguía despierto y yo me fui a descansar.

Al siguiente día, muy a las 9AM llegué y ya había gente haciendo fila y esperando por entrar, entre ellos se encontraba Andres Rodriguez. La entrada la dimos a las 9:30 y Marlon, aun no llegaba, después de mucho esperar al fin recibí la llamada de Marlon pidiendo el favor de ir a recoger la tremenda caja que traía llena de regalos para los asistentes al evento, dentro de la caja misteriosa se encontraban varias camisetas, libros y más libros.

El evento inicio poco antes de las 10AM con la presentación de Marlon sobre InDesign, luego Illustrator (Me encanto la parte del manejo de perspectiva), Photoshop y su magia negra y Flash Catalyst, mostrándonos uno de los ejemplos que se encuentran en su sitio WEB de tutoriales, de inmediato Andres, continuó con su demostración de Flash Builder 4 integrandolo con el proyecto de Catalyst, haciendo la demostración de que tan fácil es crear aplicaciones con el FB4 y más si todo el diseño y la experiencia del usuario la hace un diseñador.

Luego llego mi turno, donde presente una de las novedades de Flash Builder 4, el panel de DATA/Service una poderosa herramienta para hacer conexiones a orígenes de datos como XML, WebServices, HTTPServices, BlazeDS, etc, sin necesidad de crear una sola línea de código, por mi gran boca me comprometí a crear un tutorial de eso en el blog, y muy pronto lo haré (lo sé, ya ha pasado tiempo y no he salido con nada, pero pronto lo haré). Ante la mirada incrédula de la mayoría de los espectadores cree una aplicación que consumía un WebService de ASPX sin necesidad de hacer mucho código y casi todo con el poderoso comando arrastrar y soltar.

Finalmente Marlon Ceballos hizo su presentación sobre Adobe Flash Professional CS5 y nos demostró las novedades en cuanto al nuevo Framework de manejo de texto el TLF, además del nuevo entorno de desarrollo de flash (al fin se puede decir que es un entorno de desarrollo) y la excelente posibilidad de crear proyectos integrados de Flash Professional y Flash Builder.

Al final del evento se hizo la repartición de los regalos y cada quien para su casa...no lo creo, realmente cayo un aguacero que nos dejo a muchos encerrados en el SENA hasta que descampara, pero esa es otra historia.

Si asististe al evento deja tus comentarios y si no fuiste, cuéntanos por que? y que crees que hizo falta.

Agradezco mucho a Marlon por la realización de un excelente evento y además por no demandarme por plagiar las fotos de su sitio: http://xpert.com.co/blog/eventos-adobe-cs5-comunidad-adobexpert-balance/ - Ese día no lleve cámara.

Leer más...

Flex y JAVA con BlazeDS

Uno de los grandes enemigos de Flex, es su “imposibilidad” para acceder directamente a las bases de datos o al disco duro de usuario cuando se utiliza en entornos web (SWF), por lo que siempre es necesario utilizar lenguajes diferentes del lado del servidor, lenguajes como JSP, PHP, ASP, ColdFusion entre otros, y en la mayoría de las oportunidades se hace por medio de archivos XML, que para iniciar son muy buenos, pero cuando se manejan grandes volúmenes de datos, es necesario manejar herramientas más poderosas, por eso es que vamos a trabajar con BlazeDS, como puente entre Flex y JAVA.

--

Antes de empezar, tenemos que definir que es BlazeDS, y porque debemos trabajar con él.

BlazeDS: es un servidor remoto, hecho con JAVA para la interacción entre los lenguajes ActionScript 3.0 y JAVA, sirve como un puente de comunicación que se encarga de “traducir” de un lenguaje a otro, para que la interacción entre lenguajes y tecnologías sea transparente y no sea necesario hacer trucos raros a la hora de enviar información de una lado para otro.

¿Cómo empiezo? Es fácil (no me pareció tan fácil al comienzo, sufrimos mucho con unos aprendices para lograrlo, pero esto es para que no le pase a los demás…muchos soldados murieron en la guerra solo para que TU, si TU puedas hacer las cosas sin dificultades, lo menos que puedes hacer es al final de esto dejar tus comentarios!... ese fue el último deseo de los caídos en guerra), primero que todo debes ir a la página de proyectos de código abierto de Adobe, donde encontraras información del SDK de Flex, del proyecto BlazeDS y el proyecto Tamarin, que es un proyecto en conjunto con Mozilla Foundation para el manejo del estándar ECMAScript para el lenguaje ActionScript 3.

Lógicamente debemos ir al link de BlazeDS, donde se encuentra una leve descripción de la herramienta, el link de descarga de los archivos ejecutables y del código fuente del proyecto. Después de presionar donde dice Download BlazeDS now, iremos a la página de detalles de la descarga, donde se explican los términos de uso y nuevas posibilidades para descargar buscamos la primera opción (Release Builds), esto nos lleva a una nueva página donde debemos descargar el BlazeDS Turnkey.

Es un archivo .ZIP que contiene una serie de carpetas y archivos, .WAR, estos últimos archivos, son aplicaciones que nos permiten ver ejemplos de prueba, una consola para el monitoreo de nuestros proyectos y el BlazeDS que cuenta con el código que debemos utilizar para crear los proyectos, sin embargo no vamos a utilizar estos archivos.

Antes de empezar recomiendo crear una copia de seguridad del paquete que descargamos, ya que por efecto de las pruebas varios de esos archivos se pueden dañar.

Después de hacer la copia de seguridad vamos a la carpeta Tomcat, que contiene las carpetas habituales dentro de un Servidor Tomcat Instalado, la idea de este paquete, es instalarlo ya que tiene incorporadas todas las herramientas de BlazeDS sin embargo en ocasiones esto resulta muy dispendioso y genera muchos problemas, así que no vamos a utilizar este tomcat sino que vamos a utilizar uno instalado con el instalador del tomcat que se puede encontrar en su sitio web.

Nota: a la hora de instalar el apache tomcat, recuerda poner usuario y contraseña, preferiblemente admin, admin, ya que es la configuración más utilizada.

Dentro de la carpeta Tomcat que estábamos viendo, vamos a ir a esta ruta: Tomcat/webapps/samples/ en ella encontraremos todos los ejemplos que vienen con este paquete y dos carpetas muy comunes de los proyectos WEB de java, encontramos la carpeta WEB-INF y META-INF, ahora copiamos la carpeta WEB-INF y la pegamos en una nueva carpeta, que puede estar en cualquier sitio dentro de nuestro sistema de archivos, recomiendo poner una carpeta llamada con el nombre de nuestro proyecto, luego una nueva carpeta con el mismo nombre, que es donde vamos a almacenar el código del proyecto y dentro de esa carpeta ponemos la carpeta WEB-INF que acabamos de copiar.

En este caso voy a trabajar con esta ruta: D:/TestBlazeDS/TestBlazeDS

Para la carpeta WEB-INF esta: D:/TestBlazeDS/TestBlazeDS/WEB-INF

Además de eso debemos crear una carpeta para las páginas así: D:/TestBlazeDS/TestBlazeDS/WebPages

Ahora abrimos el IDE Netbeans, también es posible hacerlo con Eclipse o el IDE de desarrollo que utilicen para JAVA, primero que todo debemos crear un nuevo proyecto de JAVA de esta manera:

En Netbeans, Proyecto Nuevo, en categorías seleccionamos JAVA Web y en los tipos de proyectos, ponemos la opción Aplicación Web con código existente (Web Application with existing sources), siguiente.

En la siguiente ventana: Nombre y Ubicación, dejamos los valores de este modo:

Location: Se busca la carpeta que creamos dentro del disco D en mi caso

D:\ TestBlazeDS\ TestBlazeDS

Project name: Es el nombre de nuestro proyecto, podemos poner cualquier nombre, sin embargo es preferible manejar el nombre de la carpeta.

TestBlazeDS

Project folder: Es la misma ubicación del proyecto.

D:\ TestBlazeDS\ TestBlazeDS

Presionamos siguiente, ahora se deben poner los valores del nuevo servidor.

La última ventana de configuración del proyecto es quizás la más importante, debemos dejarla de esta manera:

Web Pages Folder: D:/TestBlazeDS/TestBlazeDS/WebPages

WEB-INF content: D:/TestBlazeDS/TestBlazeDS/WebPages/WEB-INF – Se debe especificar la carpeta WEB-INF que habíamos copiado hace un rato.

Libraries Folder: D:/TestBlazeDS/TestBlazeDS/WebPages/WEB-INF/lib – Se especifica la ubicación de las librerías, que se encuentran dentro de la carpeta WEB-INF.

Source Package Folders: D:/TestBlazeDS/TestBlazeDS/WebPages/WEB-INF/src -- Se indica la ubicación del código de nuestro proyecto, debe ser la carpeta src.

Presionamos terminar y ahora creamos un nuevo paquete llamado Test y una clase de prueba donde debemos crear un método simple que retorno un valor sin recibir parámetros y otro que reciba parámetros y retorne un dato.

Tenemos dos métodos, el primero retorna un String y el segundo recibe un par de enteros y devuelve la suma de los dos.

Al tener los métodos listos, ahora debemos registrar la clase en un archivo de configuración. El archivo se encuentra en WEB-INF/flex/remoting-config.xml, al abrirlo debemos ir al final del archivo, antes del último nodo y poner esto:

Nota: No olviden poner el atributo id para el primer nodo.

Finalmente en el archivo web.xml que se encuentra dentro de la carpeta Configuration Files, debemos poner esto al final, y antes del último nodo:

Limpiamos y construimos el proyecto y lo cargamos en el Tomcat, por medio del archivo .WAR que se crea cuando seleccionamos la opción Clean And Build, este es todo el proyecto por parte de JAVA.

Ahora, abrimos Flash Builder 4 (con respecto a Flex Builder 3 no hay muchos cambios) y creamos un nuevo proyecto WEB y en la opción de tecnologías del servidor, seleccionamos J2EE, Use remote object Access service y seleccionamos BlazeDS.

Presionamos siguiente y ahora debemos configurar la información del servidor de esta manera:

En Root Folder: C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\TestBlazeDS

En Root URL: http://localhost:8080/TestBlazeDS/

Context Root:/TestBlazeDS/

Cuando hacemos esta configuración, debemos presionar el botón Validate Configuration, que evalúa si la información es adecuada y si se puede hacer la conexión, en la parte inferior el campo Output Folder, debe quedar asi:

C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\TestBlazeDS\TestBlazeF-debug

Presionamos finalizar ya que no vamos a añadir librerias al proyecto y creamos un formulario de esta manera:

RemoteObject, es el encargado de generar la conexión entre JAVA y Flex, y el atributo destination debe llamarse igual a como está en la configuración de JAVA. finalmente agregamos el código:

El método init() se llama desde la propiedad applicationComplete de la etiqueta Application, el método saludar() es llamado por el evento click del botón saludar y el método sumar() es llamado por el botón sumar.

Esto es TODO, realmente es solo un poco comparado con todo lo que permite hacer BlazeDS, en un próximo tutorial mostraré como enviar objetos entre clases, y manejar vectores de JAVA como proveedores de datos para controles de Flex.

Espero que les sirva, y dejen sus comentarios!

------

Leer más...

Flash Builder 4 - Versión Final

Hoy es un maravilloso día, no porque en Colombia estemos de día festivo (no sé ni siquiera que estamos festejando), ni porque está haciendo un día soleado con pájaros trinando en los arboles y las nueves estén diciendo “buenos días amiguitos”, no, nada de eso importa en estos momentos, lo realmente importante es que Adobe ha lanzado hoy la versión final de Adobe Flash Builder 4 que ya se puede descargar.

--

Esta mañana abrí como de costumbre mi twitter y note que había muchísimo ruido alrededor del trabajo con Adobe Builder 4, tutoriales paginas con información de interés y videos de todo tipo inundaron rápidamente mi navegador, al punto que tuve que abrir 2 ventanas y empezar a catalogar pestañas por las que más importancia tenían, aun escribiendo este post me encuentro leyendo varias publicaciones tanto de los grupos de usuarios Adobe de todo el mundo, como de gente como yo que escribe nada más porque si y todas dicen: Adobe Flash Builder FINAL!!.

Así es, ya está disponible la versión final de Adobe Flash Builder 4, pero no es solo esto, también está disponible la última versión del SDK Flex 4 y Adobe Coldfusion Builder. Lo novedoso es que el SDK de flex, trae nuevas herramientas, entre las cuales se destacan los servicios para conexión a redes sociales, que aseguran una conexión transparente y rápida con aproximadamente 14 de los líderes de las redes sociales, como Facebook, Twitter, MySpaceID, LinkedIn entre otras.

Otra de las grandes ventajas que trae Flex 4 es la implementación de la arquitectura SPARK, que se encargará del manejo grafico de los controles de Flash Builder, permitiendo meternos en el núcleo de los controles y cambiar su configuración grafica desde el mismo lenguaje, la ventaja es que la lógica del control se separa de la parte visual optimizando de manera notable (espero que así sea) el rendimiento de las aplicaciones WEB y de escritorio.

Por otra parte el nuevo Flex trae un completo entorno de depuración para nuestras aplicaciones, que soporta puntos de interrupción sometidos a condiciones, evaluación de expresiones (algo que hacía falta en las versiones anteriores) y toda una serie de herramientas para hacer más fácil la depuración de aplicaciones hechas con Flash Builder.

Recuerda que hay muchísima información en la web y que hay decenas de sitios donde se puede aprender a trabajar con Flex, para iniciar también es muy recomendable descargar el Tour de Flex.

Recomiendo visitar sitios como: Adobe TV, Flex.org y en general entrar al sitio web de Adobe para conocer lo nuevo de Adobe Flash Builder 4

Leer más...