Árvore de páginas

Índice

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:

  1. En el Package Explorer, haga clic con el botón derecho y elija New...
  2. Seleccione la opción Widget.

  3. 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).

  4. Elija un Template para su widget a partir del botón combo-box o marque Ninguno en el caso que no quiera un modelo.
  5. 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:

  1. En el Package Explorer, haga clic con el botón derecho y elija New...
  2. Seleccione la opción Layout.

    Figura 5 - Creando un nuevo Layout (campos obligatorios)



  3. Rellene los campos obligatorios del componente Layout (Figura 5): Código, Nombre y Descripción.

  4. 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).

  5. 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.

  • Mensaje en la pantalla
    • 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.

  • 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):

  1. Seleccione Exportar para servidor Fluig y haga clic en Next.
  2. Seleccione el servidor para donde el servicio se exportará.
  3. 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.

  • Sem rótulos