Java EE y Flex, Parte 1: una combinación convincente

Adobe Flex se está convirtiendo en una opción popular para generar el lado del cliente de aplicaciones Java empresariales. En este primero de dos artículos, Dustin Marx demuestra cómo Flex puede ayudarlo a ofrecer interfaces de usuario altamente interactivas que acceden a la lógica empresarial de su aplicación Java EE. Obtenga una introducción práctica para perfeccionar un cliente Flex simple, luego habilítelo para comunicarse con su servidor Java EE. Nivel: principiante

Flex 3 le ofrece otra opción para crear interfaces de usuario basadas en navegador para sus aplicaciones Java EE. Si aún no ha descubierto lo simple que es agregar clientes enriquecidos a aplicaciones empresariales Java con Flex, este artículo podría servirle como punto de entrada. Descubrirá qué beneficios aporta Flex, cómo crear diseños de aplicaciones utilizando la gramática XML de Flex y cómo hacer que su cliente Flex funcione con una aplicación Java EE.

Desarrolladores Java que adoptan Flex

Sabemos que algunos desarrolladores de Java se resisten a Flex como tecnología front-end para Java EE, pero hay un fuerte argumento para darle una oportunidad a Flex. El autor Dustin Marx analiza los factores que impulsan la adopción de Flex en la comunidad Java en una barra lateral de este artículo práctico.

Antes de pedirle que instale Flex y comience a armar una aplicación de muestra, consideremos las ventajas de usar Flex como tecnología del lado del cliente. Flex ofrece ventajas específicas para los desarrolladores de Java y algunas más generales. Veremos ambos.

¿Por qué elegir Flex?

Adoptar una nueva tecnología significa adoptar una curva de aprendizaje, lo que puede resultar convincente. Estas son algunas ventajas generales de usar Flex:

  • Puede escribir código Flex una vez y ejecutarlo en cualquier navegador web para el que exista un complemento de Flash Player. No se requiere ningún código de detección de navegador o de detección de objetos típico de las aplicaciones JavaScript o Ajax.
  • El tiempo de ejecución de destino (Flash Player 9 o posterior) está instalado en más del 95 por ciento de los navegadores web en todo el mundo.
  • Flex se basa en estándares. Su lenguaje de secuencias de comandos (ActionScript 3.0) tiene sus raíces en ECMAScript (la misma especificación implementada por JavaScript), y su lenguaje de diseño es una gramática XML específica llamada MXML. La familiaridad con los estándares subyacentes puede ayudarlo a aprender Flex con relativa facilidad.
  • Flex tiene un mecanismo refrescante y simple para vincular la propiedad de un objeto en una aplicación Flex a la propiedad de otro objeto en Flex. Esta característica adictiva se conoce comúnmente como vinculación de propiedad . (JSR 295: Beans Binding está destinado a agregar esta función al lenguaje Java, pero no se incluirá en Java SE 7.)
  • Puede asociar el front-end basado en Flex con cualquier tecnología de back-end utilizando técnicas que promuevan un acoplamiento flexible. Flex proporciona soporte integrado para la comunicación con back-end a través de servicios web tradicionales basados ​​en HTTP y SOAP.
  • Flex proporciona un rico conjunto de componentes, efectos Flash (que incluyen animación, video y audio) y funciones de accesibilidad que facilitan la adición de riqueza y experiencias altamente fluidas a una aplicación web.

Flex para desarrolladores de Java

Los beneficios generales pueden ser suficientes para atraerlo a Flex, pero hay otros que están dirigidos mayor o totalmente a los desarrolladores de Java.

Uno de estos beneficios es la sorprendente similitud entre Java y ActionScript 3.0 en cuanto a características, conceptos y sintaxis del lenguaje. Los lenguajes utilizan declaraciones condicionales similares, sintaxis de bucle e incluso convenciones de codificación. (Se puede argumentar que ActionScript se parece más a Java que a JavaFX Script). La herramienta de generación de documentación ASDoc similar a Javadoc de Flex usa la misma sintaxis de comentarios que usted usa en Java para generar documentación. La estructura de empaquetado de ActionScript está relacionada con la estructura de directorios exactamente de la misma manera que Java se acerca a los paquetes y directorios.

ActionScript 3 también proporciona funciones orientadas a objetos basadas en clases (como clases en el sentido de Java, herencia e interfaces) y escritura estática. Estas adiciones a lo que la mayoría de nosotros estamos acostumbrados en JavaScript facilitan el aprendizaje y el uso de ActionScript. (ActionScript aún hace que la escritura dinámica y la herencia basada en prototipos estén disponibles para situaciones en las que desea o necesita esas características de JavaScript tradicional).

La capacidad de Flex para comunicarse con un back-end Java EE mediante servicios web basados ​​en HTTP o SOAP es muy útil, pero no está limitado a esos enfoques de comunicación. Blaze DS, un producto de código abierto independiente de Adobe, le brinda una flexibilidad aún mayor para comunicarse entre un front-end Flex y un back-end Java EE. BlazeDS le permite utilizar JMS para la comunicación y le permite utilizar la comunicación remota de objetos con Java. BlazeDS también agrega beneficios potenciales de rendimiento porque utiliza el formato binario AMF3 para una comunicación más rápida de lo que normalmente se experimenta con XML.

Un producto de código abierto de terceros llamado GraniteDS ofrece aún más opciones para aplicar un front-end basado en Flex a una aplicación Java EE. GraniteDS ofrece soporte para el formato binario AMF3 y también algunas funciones que no están disponibles con BlazeDS. Por ejemplo, GraniteDS ofrece herramientas y marcos de servicio para integrar más fácilmente Flex con back-end basados ​​en EJB 3, Spring Framework, Guice o Seam.

Al hablar de Flex hasta ahora, he usado repetidamente las palabras simple y fácil . Pero no solo confíe en mi palabra. La mejor manera de comprender lo simples y fáciles que son los conceptos básicos de Flex es probándolos usted mismo. En las siguientes secciones, implementará una aplicación de muestra, la refactorizará para agregar funciones y reducir el código repetitivo, y luego establecerá la comunicación entre su nuevo cliente basado en Flex y un servlet Java.

Adquirir e instalar Flex

Los ejemplos de este artículo utilizan el SDK de Flex 3.2. Si desea compilar y ejecutar los ejemplos, descargue el SDK de Flex (incluido el compilador y el depurador de la línea de comandos). Un solo archivo ZIP contiene el SDK de Flex para múltiples plataformas.

Descomprima el archivo en una ubicación obvia, como C:\flex_sdk_3_2. Para su comodidad, agregue la ubicación del bindirectorio Flex SDK en la ruta para que las herramientas de la línea de comandos se puedan ejecutar desde cualquier directorio. Me gusta crear una FLEX_HOMEvariable de entorno que apunte a la ubicación del SDK de Flex y luego agregar $FLEX_HOME/bino %FLEX_HOME%\binal PATH. Puede verificar una instalación correcta de Flex ejecutando el comando mxmlc -version, como se muestra en la Figura 1.

Aunque no es necesario crear y ejecutar los ejemplos, es posible que le interese descargar FlexBuilder 3, que está disponible sin costo durante un período de prueba. FlexBuilder le permite utilizar cualquier editor de texto (como JEdit o vim) o Java IDE (como NetBeans o Eclipse) para escribir y mantener archivos MXML y ActionScript. Aptana Studio y Spket IDE incluyen soporte específico para editar archivos relacionados con Flex.

MXML: diseño flexible con XML

Flex usa MXML para definir el diseño de una aplicación Flex. Los archivos de diseño flexible generalmente se nombran con una .mxmlextensión. El código MXML debe tener un formato XML correcto y utilizar espacios de nombres XML. El ejemplo del Listado 1 muestra una aplicación Flex simple pero completamente funcional, escrita completamente con MXML, que muestra una lista de artículos seleccionados de JavaWorld.

Listado 1. Ejemplo de MXML estático

Debido a que este ejemplo es estático, no muestra muchas de las ventajas de Flex y Flash. Sin embargo, sirve como una buena introducción a MXML.

Todo el código del Listado 1 es XML bien formado. La mayoría de las líneas de XML en el Listado 1 están relacionados con las mismas líneas de código (la repetición de GridRowelementos con anidada GridItemy Labelelementos). Se utilizan para definir una cuadrícula de pantalla estático con el Gridcomponente y sus GridRowy GridItemsub-elementos. El uso de , y organizar y presentar datos de una manera similar a como los elementos de la tabla HTML

, y
, respectivamente, se utilizan con frecuencia.

Este primer ejemplo de MXML también demuestra la etiqueta raíz utilizada en todas las aplicaciones MXML. Esta etiqueta incluye un ancho y un alto explícitos para la aplicación Flex. El mxprefijo está asociado con el espacio de nombres Flex XML como parte de este elemento raíz.

Utilizará el compilador de línea de comandos de Flex mxmlc, para compilar los ejemplos de este artículo. Los valores predeterminados de Flex (definidos en el flex-config.xmlarchivo) son suficientes para las necesidades de los ejemplos, lo que facilita la compilación mxmlc. Suponiendo que la primera lista MXML se guarda en un archivo con nombre Example1.mxml, lo compila con este comando:

mxmlc Example1.mxml

De acuerdo con la configuración predeterminada, este archivo MXML se compila en un archivo SWF, llamado Example1.swf, que se coloca en el mismo directorio que el archivo MXML desde el que se generó. Puede ejecutar el archivo SWF abriéndolo en un navegador web o simplemente ingresando el nombre completo del archivo en la línea de comando. El archivo SWF renderizado se parece a la Figura 2.