Objetivo
El objetivo de esta guía es posibilitar al desarrollador crear componentes WCM vía Fluig Studio.
Construcción de componentes WCM en el Fluig Studio
Inicialmente, acceda el Fluig Studio y cree o abra un proyecto Fluig.
Abra la perspectiva Fluig vía menú Window/Open Perspective/Other.../Fluig (Figura 1).
Figura
1 - Perspectiva Fluig
Creación de Widget
Acompañe los pasos a seguir:
- En el Package Explorer, haga clic con el botón derecho y elija New...
Seleccione la opción Widget.
Rellene los campos obligatorios del componente Widget (Figura 2): Código (campo clave), Nombre y Descripción.
Figura 2 - Creando una nueva Widget (campos obligatorios)
Observación
El campo Código es único (campo clave) y se debe rellenar apenas con letras, números y subrayado (underscore).
- Elija un Template para su widget a partir del botón combo-box o marque Ninguno en el caso que no quiera un modelo.
- Presione Next para continuar (Figura 3) o rellenado de los campos o Finish para concluir.
Figura 3 - Creando una nueva Widget (campos opcionales)
Nota: Los campos Código del desarrollador, Nombre del desarrollador, URL del desarrollador y Categoría son opcionales. El campo Renderizador proporciona apenas una opción: Freemarker. |
Al concluir la construcción de Widget, la estructura del directorio deberá quedar como en la Figura 4 a continuación.
Figura 4 - Estructura de directorios de un proyecto Widget
Donde:
Archivo/Carpeta |
Descripción |
---|---|
<código-de-widget> |
Nombre/Identificador de Widget. |
src/main/java |
Localización de las clases Java, en caso que exista alguna regla de negocio específica de Widget. |
src/main/resources/application.info |
Archivo de configuración de Widget, donde es persistida, entre otras informaciones, el código de Widget, título y desarrollador. Este archivo será más detallado en las próximas páginas de este documento. |
src/main/resources/view.ftl |
Archivo de template del freemarker que será interpretado durante la renderización de Widget. |
src/main/resources/edit.ftl |
Archivo que será interpretado durante la renderización de Widget en modo de edición. Usado para configurar opciones específicas para renderización de Widget, como por ejemplo, filtros de fecha, cotización del dólar, etc. Este archivo es opcional, en caso que no exista, será considerado que la Widget no posee modo de edición, solamente visualización. |
src/main/resources/<código-de-widget>.properties |
Archivo de strings traducibles utilizadas por Widget. Debe poseer derivaciones de acuerdo con el idioma soportado por Widget. El estándar será siempre el código de Widget seguido del sufijo referente a su lenguaje, un archivo de traducción para el idioma inglés quedaría: “código-de-widget_EN_US.properties”. |
src/main/webapp/icon.png |
Ícono que representa la Widget. Será utilizado para representar la Widget en el menú lateral de aplicación, o en cualquier pantalla que necesite una representación visual del componente. Deben poseer la dimensión 55 x 30. |
src/main/webapp/WEB-INF/web.xml |
Descriptor estándar de una aplicación Java para web. |
src/main/webapp/WEB-INF/jboss-web.xml |
Descriptor específico para el JBoss. Debe contener por lo menos la propiedad “context-root”. El context-root representa el contexto Web de Widget y es recomendado que sea el propio código de Widget. |
src/main/webapp/resources/css/<código-da-widget>.css |
Hoja de estilo de Widget. |
src/main/webapp/resources/js/<código-de la-widget>.js |
Archivo Javascript de la Widget (en caso que sea necesario). |
src/main/webapp/resources/images |
Carpeta específica de imágenes de Widget, en caso de ser necesario. |
src/prueba/java |
Carpeta específica para la construcción de pruebas unitarias. |
Ejemplo de código JavaScript
var applicationCodeObj = SuperWidget.extend({ instanceId: null, sociableId: null, init: function() { //code }, bindings: { local: { 'someFunc': ['click_someFunc'] } }, someFunc: function() { } });
Ejemplo de código HTML com FreeMarker (view.ftl)
<#-- crea una div para la widget --> <div class="wcm-widget-class super-widget" <#-- toma el id del objeto applicationCodeObj --> id="applicationCodeObj_${instanceId}" <#-- parámetros de datos para la lista --> data-params="applicationCodeObj.instance({param1: 'teste', param2: 'ok'})"> <#-- crea la internacionalización de widget --> <h1>${i18n.getTranslation('hellow.example.hello')}</h1> </div>
Creación de Layout
Acompañe los pasos a seguir:
- En el Package Explorer, haga clic con el botón derecho y elija New...
Seleccione la opción Layout.
Figura 5 - Creando un nuevo Layout (campos obligatorios)
Rellene los campos obligatorios del componente Layout (Figura 5): Código, Nombre y Descripción.
Elija un Template para su layout a partir del botón combo-box o marque Ninguno en el caso que no quiera un modelo.
Observación
El campo Código debe ser rellenado apenas con letras, números y sublineado (underscore).
Presione Next para continuar (Figura 6) el rellenado de los campos o Finish para concluir.
Figura 6 - Creando un nuevo Layout (campos
opcionales)
Nota: Los campos: Código del desarrollador, Nombre del desarrollador, URL del desarrollador y Categoría son campos opcionales. El campo Renderizador proporciona apenas una opción: Freemarker. |
Al concluir la construcción del Layout, la estructura del directorio deberá quedar como en la Figura 7.
Figura 7 - Estructura de directorios de un proyecto Layout
Nota: La estructura de carpetas y archivos de un componente Layout es prácticamente la misma de un componente Widget. La modificación normalmente se encuentra en el camino src/main/resources/ donde los archivos view.ftl e edit.ftl son sustituidos por el archivo layout.ftl. |
Ejemplo de código FreeMarker (layout.ftl)
<!-- Layout com 3 slots verticales --> <!-- Header --> <div id="wcm_header" class="wcm-header-background wcm-header"> <!-- Group left --> <div class="header-grouper-left"> <a href="home" class="wcm_logo" title="${i18n.getTranslation('layout.label.pagetitle')}"> <#if '${imageLogo}'=='true'> <img src="${serverContextURL}/resources/images/${pageRender.user.tenantId}/logo_image.png"></img> <#else> <img src="${serverContextURL}/resources/images/logo.png"></img> </#if> </a> </div> <!-- Group right --> <div class="header-grouper-right"> <!-- Container login --> <div id="SlotLogin" slot="true" class="slot-header-actions"> <#list (pageRender.getInstancesIds("SlotLogin"))! as id> ${pageRender.renderInstanceNoDecorator(id)} </#list> </div> </div> </div> <!-- WCM Wrapper content --> <div class="wcm-wrapper-content"> <!-- Menú izquierdo --> <nav class="wcm-navigation wcm-menu-background"> <div id="SlotMenu" slot="true"> <#list (pageRender.getInstancesIds("SlotMenu"))! as id> ${pageRender.renderInstanceNoDecorator(id)} </#list> </div> < / nav > <!-- Wrapper --> <div class="wcm-all-content"> <div id="wcm-content" class="clearfix wcm-background"> <!--WIDGETS DEL LAYOUT --> <link type="text/css" rel="stylesheet" href="${contextPath}/resources/css/wcm_layout.css"/> <!-- Donde deberá estar la barra de formateo --> < #if widgetRender. (isEditMode) = true > <div name="formatBar" id="formatBar"></div> <!-- Div geral --> <!-- Hay CSS distinto para Edición/Visualización --> <div id="edicaoPagina" class="clearfix"> <#else> <div id="visualizacaoPagina" class="clearfix"> </#if> <!-- Título de la página --> <div class="slotfull layout-1-1"> <span class="titleArea">${i18n.getTranslation('wcm.layoutdefault.title')}</span> <h2 class="pageTitle">${pageTitle}</h2> </div> <!-- Slot 1 --> <div class="editable-slot slotfull layout-1-1" id="slotFull1"> <div id="SlotC" slot="true" class="slotint" decorator="false" editableSlot="true"> <#list (pageRender.getInstancesIds("SlotC"))! as id> ${pageRender.renderInstanceNoDecorator(id)} </#list> </div> </div> <!-- Slot 2 --> <div class="editable-slot slotfull layout-1-1" id="slotFull2"> <div id="SlotB" slot="true" class="slotint" decorator="false" editableSlot="true"> <#list (pageRender.getInstancesIds("SlotB"))! as id> ${pageRender.renderInstanceNoDecorator(id)} </#list> </div> </div> <!-- Slot 3 --> <div class="editable-slot slotfull layout-1-1" id="slotFull3"> <!-- Widget --> <div id="SlotA" slot="true" class="slotint" decorator="true" editableSlot="true"> <#list (pageRender.getInstancesIds("SlotA"))! as id> ${pageRender.renderInstance(id)} </#list> </div> </div> </div> <!-- FIN DE LAS WIDGETS DEL LAYOUT --> <div id="wcm_footer" class="wcm_footer"></div> </div> </div> </div>
Ejemplo de código JavaScript
// JavaScript Document $(document).ready(function() { /*$(".wcm_config_widgets").click(function() { $(this).parent('li').children('ul').toggle(); });*/ //Utilizado el 'live' para que el event handler no se pierda en la actualización de widgets. $(".wcm_config_widgets").live("click", function(){ $(this).parent('li').children('ul').toggle(); }); $(document).bind('click', function(e) { var $clicked = $(e.target); if (! $clicked.parents().hasClass("wcm_controles_widgets")) $(".wcm_controles_widgets ul li ul").hide(); }); });
Snippets
La opción Snippet proporciona al desarrollador un pequeño tramo de código-ejemplo relacionado a una determinada funcionalidad. El objetivo es proveer un modo rápido y simple para que el desarrollador visualice un ejemplo de código y dé inicio a la construcción del componente.
Acceda el Studio, abra el menú Window y elija la opción Show View/Other... o presione Shift + Alt + Q Q. Abra la carpeta General y elija la opción Snippets (Figura 8).
Figura
8 - Janela Show View
La pestaña/guia Snippets presentará las opciones para Componentes WCM, conforme a lo visto en la Figura 9.
Figura 9 - Janela Show View
Widget
- Guardar parámetros de una widget
- Una función JavaScript que demuestra cómo guardar campos
de pantalla de edición de widget vía atributos de argumentos.
- Una función JavaScript que demuestra cómo guardar campos
de pantalla de edición de widget vía atributos de argumentos.
- Mensaje en la pantalla
- Tramo de código para crear una ventana y exhibir un
mensaje.
- Tramo de código para crear una ventana y exhibir un
mensaje.
- Abrir ventana
- Una función JavaScript que demuestra cómo abrir una
ventana.
- Una función JavaScript que demuestra cómo abrir una
ventana.
- Llamada Ajax/Rest Genérica
- Una función en JavaScript que demuestra una llamada AJAX a un servicio REST.
- Llamada Ajax/Rest (JavaScript)
- Una función en JavaScript que demuestra una llamada AJAX a un servicio REST de consulta al usuario, tratando el JSON recibido y presentando un mensaje del tipo “Hola usuario X”, donde se debe presentar el nombre del usuario retornado en la llamada.
Layout
- Slot de un Layout (FTL)
- Presenta el tramo de código referente a un slot que puede existir dentro del layout.
Autocomplete para FreeMarker y JavaScript
Los archivos Freemarker (extensión ".ftl"), cuando se abren con el "Editor Freemarker del Fluig", poseen autocomplete para las directivas básicas del FTL (iniciadas en "<#") y para las variables de contexto en las interpolaciones del Freemarker ("${}"). Los nombres contextuales disponibles para el autocomplete son widgetRender y pageRender.
Figura 10 - Ejemplo de autocomplete Freemarker
Los archivos JavaScript (extensión ".js"), cuando se abren en un Proyecto Fluig, también poseen autocomplete para las APIs nativas del JavaScript y del Fluig.
Figura 11 - Ejemplo de autocomplete JavaScript
Realizando el deploy del componente
A partir de este momento es posible generar el paquete e instalar el componente en el servidor (hacer el deploy). Para iniciar el procedimiento, seleccione el proyecto y haga clic en el menú File y seleccione la opción Export... (o haga clic con el botón derecho encima del proyecto Widget o Layout).
Nota: Seleccione el proyecto (Widget o Layout) a exportar y haga clic con el botón derecho encima de la carpeta del proyecto para hacer correctamente la instalación. |
Un nuevo Wizard será iniciado para guiarlo (Figura 10).
Figura 12 - Wizard de exportación de componente Fluig WCM (1)
Siga los procedimientos a continuación (Figura 11):
- Seleccione Exportar para servidor Fluig y haga clic en Next.
- Seleccione el servidor para donde el servicio se exportará.
- Haga clic en Finsish.
Figura 13 - Wizard de exportación
de componente Fluig WCM (2)
¡Listo! Esta etapa facilita todo el proceso. Al término, el servidor habrá hecho la instalación del componente y este estará listo para ser utilizado.
Third Party Trademarks
JavaScript is a trademark of Oracle Corporation.
Firefox and Mozilla are registered trademarks of the Mozilla Foundation.
Google, Android and Google Chrome are trademarks of the Google Inc.
Oracle, Java and OpenOffice.org are registered trademarks of Oracle and/or its affiliates. Other names may be trademarks of their respective owners.
Red Hat and JBoss are registered trademarks of Red Hat, Inc. in the United States and other countries.
Any other third party trademarks are the property of their respective owners.