Diferencia entre revisiones de «Adobe Flex En Portlets»

Revisión del 13:20 31 mar 2009

Las aplicaciones Flex son archivos flash desarrollados con un entorno orientado a aplicaciones RIA. Desplegar estas aplicaciones en un portal (JSR 168 - JSR 286) implica empaquetarlas en un fragmento de html y proveer la comunicación necesaria con el portal.

Elementos de este ejemplo

• flexPortlet.mxml Archivo tipo xml con el código fuente de la aplicación Flex que se compilará produciendo un archivo SWF.
• flexPortlet.swf Archivo SWF producto de la compilación de la aplicación Flex. Este archivo binario se inserta en un html y es interpretado y ejecutado por el plugin de Flash del navegador web del cliente.
• flexPortletView.jsp JSP que funcionará como vista del portlet. Producirá el html necesario para incluir el swf y comunicarse con el portal.
• FlexPortlet.java Clase de Java que extendie de GenericPortlet. Funciona como un portlet tradicional. En esta clase se programará el soporte para que el SWF pueda comunicarse con el portal.
• build.xml Script de ant típico para la compilación del proyecto con el agregado de una tarea específica de compilación de Flex.

Un MXML

Este es el código fuente de la aplicación de Flex. Una vez compilado generará un archivo SWF listo para insertarse en un Html y ser interpretado y ejecutado por el navegador del cliente.

En este caso cuenta con tres elementos: un texto a modo de título, un texto a modo de frase que se cambiará dinámicamente y un botón que realiza una acción.

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

     layout="absolute" width="400" height="200">

           x="10"
           y="10" 
           text="Esta es un titulo" 
           fontFamily="Courier New" 
           fontSize="14" 
           fontWeight="bold" 
           fontStyle="normal"/>

           x="10" 
           y="40" 
           fontFamily="Courier New" 
           fontSize="27" 
           fontWeight="bold" 
           fontStyle="normal" 
           id="unaFrase"/>

       <mx:Button 
           x="100" 
           y="110" 
           label="Este es un boton" />

</mx:Application>

El JSP

JSP que funcionará como vista del portlet y desde donde se tendrá acceso al entorno. Este JSP generará el HTML necesario para insertar el SWF de la aplicación Flex.

Desde el JSP se pueden inyectar valores a la aplicación Flex, durante el inicio en el navegador del cliente.

La parte que inserta el swf tiene dos elementos principales: <object> y <embed>. Estos dos elementos sirven para insertar el SWF en diferentes navegadores por lo que los atributos se repetirán prácticamente igual en uno y en otro.

Dentro de estos elementos se utiliza el atributo flashVars para pasar los valores al SWF. En este caso se tomará con un tag de JSP <%=request.getAttribute("unAtributo")%> el atributo "unAtributo" del request del contexto y se lo pasará a una variable con el nombre unAtributo en el SWF.

<%@page contentType="text/html"%> <%@page pageEncoding="UTF-8"%> <%@ page import="javax.portlet.*"%> <%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>


<portlet:defineObjects />

<object

   classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   id="flexPortlet" 
   width="100%" 
   height="100%"
   codebase="http://fpdownload.macromedia.com/get/flashplayer/curren/swflash.cab">
   <param name="movie" 
       value="<portlet:resourceURL  
       id="/WEB-INF/flex/flexPortlet.swf"/>" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="#FF0000" />
   <param 
       name="flashVars" 
       value="unAtributo=<%=request.getAttribute("unAtributo")%>" />
   <param name="allowScriptAccess" value="sameDomain" />

   <embed 
       src="<portlet:resourceURL id="/WEB-INF/flex/flexPortlet.swf"/>" 
       quality="high" 
       bgcolor="#00FF00"
       width="100%" 
       height="100%" 
       name="HolaProject" 
       align="middle"
       play="true"
       loop="false"
       quality="high"
       allowScriptAccess="sameDomain"
       type="application/x-shockwave-flash"
       flashVars="unAtributo= 
           <%=request.getAttribute("unAtributo")%>"				
       pluginspage="http://www.adobe.com/go/getflashplayer">
   </embed>

</object>

El portlet

El portlet no tiene ninguna particularidad, simplemente deriva el procesamiento de la vista al JSP.

public class FlexPortlet extends GenericPortlet {

   ...
   public void doView(RenderRequest request, RenderResponse response) {
       response.setContentType("text/html");
       PortletRequestDispatcher dispatcher = getPortletContext()
            .getRequestDispatcher("/WEB-INF/flex/flexPortletView.jsp");
       dispatcher.include(request, response);
   }
   ...

}

Tarea ant y compilación

Para compilar el MXML es necesario incluir un jar con los task de ant que viene en la distribución del SDK de flex: flexTasks.jar.

En el build de ant se agrega la definición de la tarea de flex y en el target apropiado se agrega la tarea <mxmlc/> que compila los mxml.

   <property name="FLEX_HOME" value="C:\flexSDK3.2.0\"/>
   <property name="APP_ROOT" value=".\src\flex"/>

   <taskdef resource="flexTasks.tasks" classpath="../lib/ext/flexTasks.jar" />

   <target name="compile.flex">
       <mxmlc file="${APP_ROOT}\flexPortlet.mxml" keep-generated-actionscript="false">

           <load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
           <source-path path-element="${FLEX_HOME}/frameworks"/>
       </mxmlc>
   </target>

URLs Opacos

Teniendo en cuenta que las urls de un portal no son transparentes, debemos encontrar un mecanismo para poder comunicarnos con el portal. Esta comunicación puede ser a través de ActionURLs, RenderURLs o ResourceURLs. En cualquiera de los casos la mecánica es la misma, estos URLs deben construirse del lado del servidor en el objeto del portlet o dentro del JSP y pasarse como parámetros al objeto SWF de nuestra aplicación Flex.

Construcción de un URL

Pasarlo como parámetro

Eventos JSR 286

Herramientas

Esta es una forma básica de desarrollar, integrar y comunicarse con aplicaciones Flex. Existen varias herramientas y frameworks que pueden facilitarnos el desarrollo. BlazeDS nos facilita la comunicación con objetos Java desplegados de diversas maneras. FlexBuilder 3 es un entorno que nos facilita el desarrllo de la aplicación Flex. LCDSES facilita el despliegue, interación y servicio de las aplicaciones Flex.

Ver también

BlazeDS LiveCycle Data Services ES FlexBuilder 3