Diferencia entre revisiones de «Adobe Flex En Portlets»
(Página creada con '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 empaque...') |
m (Revertidos los cambios de 190.230.100.80 (disc.) a la última edición de 190.176.150.32) |
||
(No se muestran 47 ediciones intermedias de 6 usuarios) | |||
Línea 1: | Línea 1: | ||
− | 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. | + | [[Categoría: Adobe Flex]] |
+ | [[Categoría: Portlet]] | ||
+ | Las aplicaciones [[Adobe 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 == |
− | Este es | + | * '''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. | ||
− | + | === flexPortlet.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. | ||
+ | |||
+ | Al presionar el botón, la acción que realizará será la de asignar el valor que recibió en forma externa desde el html al texto del elemento ''unaFrase''. | ||
+ | |||
+ | Los atributos recibidos en forma externa a través de '''flashVars''' se ven reflejados en '''Application.application.parameters'''. | ||
<code xml> | <code xml> | ||
<?xml version="1.0" encoding="utf-8"?> | <?xml version="1.0" encoding="utf-8"?> | ||
− | <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="200"> | + | <mx:Application |
+ | xmlns:mx="http://www.adobe.com/2006/mxml" | ||
+ | layout="absolute" | ||
+ | width="400" | ||
+ | height="200" > | ||
− | + | <mx:Label | |
− | + | x="10" | |
− | + | y="10" | |
+ | text="Esta es un titulo" | ||
+ | fontFamily="Courier New" | ||
+ | fontSize="14" | ||
+ | fontWeight="bold" | ||
+ | fontStyle="normal"/> | ||
+ | |||
+ | <mx:Label | ||
+ | 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" | ||
+ | click="unaFrase.text = Application.application.parameters.unAtributo" /> | ||
</mx:Application> | </mx:Application> | ||
</code> | </code> | ||
+ | === flexPortlet.swf === | ||
− | + | Este es el archivo que se generará como resultado de la compilación de flexPortlet.mxml. Es un archivo binario de Flash que se ejecutará del lado del cliente a través del navegador que debe tener instalado el plugin de Adobe Flash Player. | |
− | + | === flexPortletView.jsp === | |
− | <code | + | 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. | ||
+ | |||
+ | Otro valor que hay que generar con un tag de la librería de portlets es la URL (ver [[Adobe Flex En Portlets#URLs Opacos|URLs Opacos]]) del archivo SWF: '''<portlet:resourceURL id="/WEB-INF/flex/flexPortlet.swf"/>'''. | ||
+ | |||
+ | <code xml> | ||
+ | <%@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> | ||
</code> | </code> | ||
− | === | + | === FlexPortlet.java === |
+ | |||
+ | Esta clase se programa como un portlet común. En este caso extiende de GenericPortlet y deriva la construcción de la vista a ''flexPortletView.jsp''. | ||
− | + | Durante el render se cargará también el atributo '''unAtributo''' para que esté disponible en el JSP para asignárselo luego al SWF de la aplicación Flex. | |
<code java> | <code java> | ||
Línea 36: | Línea 128: | ||
public void doView(RenderRequest request, RenderResponse response) { | public void doView(RenderRequest request, RenderResponse response) { | ||
response.setContentType("text/html"); | response.setContentType("text/html"); | ||
+ | request.setAttribute("unAtributo", "Hola mundo!"); | ||
PortletRequestDispatcher dispatcher = getPortletContext() | PortletRequestDispatcher dispatcher = getPortletContext() | ||
.getRequestDispatcher("/WEB-INF/flex/flexPortletView.jsp"); | .getRequestDispatcher("/WEB-INF/flex/flexPortletView.jsp"); | ||
Línea 45: | Línea 138: | ||
</code> | </code> | ||
− | === | + | === build.xml === |
− | + | Existe una tareas ant para la compilar el archivo MXML y generar un SWF. Para utilizarla es necesario incluir en el classpath '''flexTasks.jar''' que puede encontrarse dentro de los directorios del SDK de Flex. | |
− | + | Puntos relevantes: | |
+ | * '''FLEX_HOME''' es la ruta a la home del SDK de Flex. | ||
+ | * '''<mxmlc/>''' es el tag que llama a la tarea del compilador de Flex. | ||
<code xml> | <code xml> | ||
Línea 59: | Línea 154: | ||
<target name="compile.flex"> | <target name="compile.flex"> | ||
<mxmlc file="${APP_ROOT}\flexPortlet.mxml" keep-generated-actionscript="false"> | <mxmlc file="${APP_ROOT}\flexPortlet.mxml" keep-generated-actionscript="false"> | ||
− | |||
<load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/> | <load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/> | ||
<source-path path-element="${FLEX_HOME}/frameworks"/> | <source-path path-element="${FLEX_HOME}/frameworks"/> | ||
Línea 67: | Línea 161: | ||
</code> | </code> | ||
+ | == URLs Opacos == | ||
− | + | Debe tenerse en cuenta que las URLs de un portal no son transparentes. Por eso, para insertar el archivo SWF en el HTML es necesario que el portal codifique la URL a partir de la ruta que se le especifica. Una forma de lograr esto es a través del tag '''<portlet:resourceURL/>''' de la librería de tags de portlets. | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | Otra posibilidad es construirla en la clase Java del portlet y pasarla como atributo del '''request'''. | |
− | + | == Ver también == | |
− | + | * [[Adobe Flex]] | |
− | + | * [[Portlet Specification Api]] | |
+ | * [[JSR 168]] - Java Portlet Specification V1.0 | ||
+ | * [[JSR 286]] - Java Portlet Specification V2.0 |
Revisión actual del 19:17 6 abr 2010
Las aplicaciones Adobe 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.
Contenido
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.
flexPortlet.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.
Al presionar el botón, la acción que realizará será la de asignar el valor que recibió en forma externa desde el html al texto del elemento unaFrase.
Los atributos recibidos en forma externa a través de flashVars se ven reflejados en Application.application.parameters.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="200" >
<mx:Label x="10" y="10" text="Esta es un titulo" fontFamily="Courier New" fontSize="14" fontWeight="bold" fontStyle="normal"/>
<mx:Label 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" click="unaFrase.text = Application.application.parameters.unAtributo" />
</mx:Application>
flexPortlet.swf
Este es el archivo que se generará como resultado de la compilación de flexPortlet.mxml. Es un archivo binario de Flash que se ejecutará del lado del cliente a través del navegador que debe tener instalado el plugin de Adobe Flash Player.
flexPortletView.jsp
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.
Otro valor que hay que generar con un tag de la librería de portlets es la URL (ver URLs Opacos) del archivo SWF: <portlet:resourceURL id="/WEB-INF/flex/flexPortlet.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>
FlexPortlet.java
Esta clase se programa como un portlet común. En este caso extiende de GenericPortlet y deriva la construcción de la vista a flexPortletView.jsp.
Durante el render se cargará también el atributo unAtributo para que esté disponible en el JSP para asignárselo luego al SWF de la aplicación Flex.
public class FlexPortlet extends GenericPortlet {
... public void doView(RenderRequest request, RenderResponse response) { response.setContentType("text/html"); request.setAttribute("unAtributo", "Hola mundo!"); PortletRequestDispatcher dispatcher = getPortletContext() .getRequestDispatcher("/WEB-INF/flex/flexPortletView.jsp"); dispatcher.include(request, response); } ...
}
build.xml
Existe una tareas ant para la compilar el archivo MXML y generar un SWF. Para utilizarla es necesario incluir en el classpath flexTasks.jar que puede encontrarse dentro de los directorios del SDK de Flex.
Puntos relevantes:
- FLEX_HOME es la ruta a la home del SDK de Flex.
- <mxmlc/> es el tag que llama a la tarea del compilador de Flex.
<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
Debe tenerse en cuenta que las URLs de un portal no son transparentes. Por eso, para insertar el archivo SWF en el HTML es necesario que el portal codifique la URL a partir de la ruta que se le especifica. Una forma de lograr esto es a través del tag <portlet:resourceURL/> de la librería de tags de portlets.
Otra posibilidad es construirla en la clase Java del portlet y pasarla como atributo del request.
Ver también
- Adobe Flex
- Portlet Specification Api
- JSR 168 - Java Portlet Specification V1.0
- JSR 286 - Java Portlet Specification V2.0