Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

...

Abra a perspectiva Fluig via menu Window/Open Perspective/Other.../Fluig (Figura 1).

Image RemovedImage AddedFigura 1 - Perspectiva Fluig

...

  1. No Package Explorer, clique com o botão direito e escolha New...
  2. Selecione a opção Widget.

  3. Preencha os campos obrigatórios do componente Widget (Figura 2): Código (campo chave), Nome e Descrição.


    Image RemovedImage Added

    Figura 2 - Criando uma nova Widget (campos obrigatórios)

     

    Observação

    O campo Código deve ser preenchido apenas com letras, números e sublinhado (underscore).

  4. Escolha um Template para sua widget a partir do botão combo-box ou marque Nenhum caso não queira um modelo.
  5. Pressione Next para continuar (Figura 3) o preenchimento dos campos ou Finish para concluir.

Image RemovedImage Added

Figura 3 - Criando uma nova Widget (campos opcionais)

 

Nota

Os campos Código do desenvolvedor, Nome do desenvolvedor, URL do desenvolvedor e Categoria são opcionais. Já o campo Renderizador fornece apenas uma opção: Freemarker.

Ao concluir a construção da Widget, a estrutura de diretório deverá ficar como na Figura 4 abaixo.

Image RemovedImage Added

Figura 4 - Estrutura de diretórios de um projeto Widget

Onde:

Arquivo/Pasta

Descrição

<código-da-widget>

Nome/Identificador da Widget.

src/main/java

Localização das classes Java, caso exista alguma regra de negócio específica da Widget.

src/main/resources/application.info

Arquivo de configuração da Widget, onde é persistida, entre outras informações, o código da Widget, título e desenvolvedor. Este arquivo será mais detalhado nas próximas páginas deste documento.

src/main/resources/view.ftl

Arquivo de template do freemarker que será interpretado durante a renderização da Widget.

src/main/resources/edit.ftl

Arquivo que será interpretado durante a renderização da Widget em modo de edição. Usado para configurar opções específicas para renderização da Widget, como por exemplo, filtros de data, cotação do dólar, etc. Este arquivo é opcional, caso não exista, será considerado que a Widget não possui modo de edição, somente visualização.

src/main/resources/<código-da-widget>.properties

Arquivo de strings traduzíveis utilizadas pela Widget. Deve possuir derivações de acordo com o idioma suportado pela Widget. O padrão será sempre o código da Widget seguido do sufixo referente à sua linguagem, um arquivo de tradução para o idioma inglês ficaria: “código-da-widget_EN_US.properties”.

src/main/webapp/icon.png

Ícone que representa a Widget. Será utilizado para representar a Widget no menu lateral da aplicação, ou em qualquer tela que necessite de uma representação visual do componente. Devem possuir a dimensão 55 x 30.

src/main/webapp/WEB-INF/web.xml

Descritor padrão de uma aplicação Java para web.

src/main/webapp/WEB-INF/jboss-web.xml

Descritor específico para o JBoss. Deve conter pelo menos a propriedade “context-root”. O context-root representa o contexto Web da Widget e é recomendado que seja o próprio código da Widget.

src/main/webapp/resources/css/<código-da-widget>.css

Folha de estilo da Widget.

src/main/webapp/resources/js/<código-da-widget>.js

Arquivo Javascript da Widget (caso seja necessário).

src/main/webapp/resources/images

Pasta específica de imagens da Widget, caso necessário.

src/test/java

Pasta específica para a construção de testes unitários.

Exemplo de código JavaScript

Bloco de código
languagejavascript
var applicationCodeObj = SuperWidget.extend({
    instanceId: null,
    sociableId: null,
    
    init: function() {
        //code
    },
    
    bindings: {
        local: {
            'someFunc': ['click_someFunc']
        }
    },
    someFunc: function() {
    }
});

Exemplo de código HTML com FreeMarker (view.ftl)

Bloco de código
languagehtml/xml
<#-- cria uma div para a widget -->
<div class="wcm-widget-class super-widget"
    <#-- pega o id do objeto applicationCodeObj -->
    id="applicationCodeObj_${instanceId}"
    <#-- parâmetros de dados para a lista -->
    data-params="applicationCodeObj.instance({param1: 'teste', param2: 'ok'})">
    <#-- cria a internacionalização da widget -->    
    <h1>${i18n.getTranslation('hellow.example.hello')}</h1>
</div>

 

Criação de Layout

Acompanhe os passos a seguir:

  1. No Package Explorer, clique com o botão direito e escolha New...
  2. Selecione a opção Layout.

    Image RemovedImage Added

    Figura 5 - Criando um novo Layout (campos obrigatórios)



  3. Preencha os campos obrigatórios do componente Layout (Figura 5): Código, Nome e Descrição.

  4. Escolha um Template para seu layout a partir do botão combo-box ou marque Nenhum caso não queira um modelo.

    Observação

    O campo Código deve ser preenchido apenas com letras, números e sublinhado (underscore).

  5. Pressione Next para continuar (Figura 6) o preenchimento dos campos ou Finish para concluir.

Image RemovedImage Added

Figura 6 - Criando um novo Layout (campos opcionais)

Nota

Os campos: Código do desenvolvedor, Nome do desenvolvedor, URL do desenvolvedor e Categoria são campos opcionais. Já o campo Renderizador fornece apenas uma opção: Freemarker.

Ao concluir a construção do Layout, a estrutura de diretório deverá ficar como na Figura 7.

Image RemovedImage Added

Figura 7 - Estrutura de diretórios de um projeto Layout

 

Nota

A estrutura de pastas e arquivos de um componente Layout é praticamente a mesma de um componente Widget. A alteração normalmente encontra-se no caminho src/main/resources/ onde os arquivos view.ftl e edit.ftl são substituídos pelo arquivo layout.ftl.


Exemplo de código FreeMarker (layout.ftl)

Bloco de código
languagehtml/xml
<!-- Layout com 3 slots verticais -->

<!-- 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">
    <!-- Menu esquerdo -->
    <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 DO LAYOUT -->
        <link type="text/css" rel="stylesheet" href="${contextPath}/resources/css/wcm_layout.css"/>
            <!-- Onde deverá estar a barra de formatação -->
            <#if widgetRender.isEditMode()=true>
            <div name="formatBar" id="formatBar"></div>
            <!-- Div geral -->
            <!-- Há CSS distinto para Edição/Visualização -->
            <div id="edicaoPagina" class="clearfix">
            <#else>
            <div id="visualizacaoPagina" class="clearfix">
            </#if>
            <!-- Titulo da 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>
            <!-- FIM DAS WIDGETS DO LAYOUT -->
            <div id="wcm_footer" class="wcm_footer"></div>
        </div>
    </div>
</div>

Exemplo de código JavaScript

Bloco de código
languagejavascript
// JavaScript Document
$(document).ready(function() {
    /*$(".wcm_config_widgets").click(function() {
        $(this).parent('li').children('ul').toggle();
    });*/
    
    //Utilizado o 'live' para que o event handler não se perca na atualização 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

A opção Snippet fornece ao desenvolvedor um pequeno trecho de código-exemplo relacionado a uma determinada funcionalidade. O objetivo é prover um modo rápido e simples para que o desenvolvedor visualize um exemplo de código e dê início a construção do componente.

Acesse o Studio, abra o menu Window e escolha a opção Show View/Other... ou pressione  Shift + Alt + Q Q. Abra a pasta General e escolha a opção Snippets (Figura 8).

Figura 8 - Janela Show View

 

A aba/guia Snippets apresentará as opções para Componentes WCM, conforme visto na Figura 9.

Image RemovedImage Added

Figura 9 - Janela Show View

 

Widget

  • Salvar parâmetros de uma widget
    • Uma função JavaScript que demonstra como salvar campos de tela de edição da widget via atributos de argumentos.

  • Mensagem na tela
    • Trecho de código para criar uma janela e exibir uma mensagem.

  • Abrir janela
    • Uma função JavaScript que demonstra como abrir uma janela.

  • Chamada Ajax/Rest Genérica
    • Uma função em JavaScript que demonstra uma chamada AJAX a um serviço REST.
  • Chamada Ajax/Rest (JavaScript)
    • Uma função em JavaScript que demonstra uma chamada AJAX a um serviço REST de consulta ao usuário, tratando o JSON recebido e apresentando uma mensagem do tipo “Olá usuário X”, onde deve ser apresentado nome do usuário retornado na chamada.

Layout

  • Slot de um Layout (FTL)
    • Apresenta o trecho de código referente a um slot que pode existir dentro do layout.

Realizando o deploy do componente

A partir deste momento é possível gerar o pacote e instalar o componente no servidor (fazer o deploy). Para iniciar o procedimento, selecione o projeto e clique no menu File e selecione a opção Export... (ou clique com o botão direito em cima do projeto Widget ou Layout).

Nota

Selecione o projeto (Widget ou Layout) a ser exportado e clique com o botão direito em cima da pasta do projeto para fazer corretamente a instalação.

Um novo Wizard será iniciado para guiá-lo (Figura 10).

 

Image RemovedImage Added

Figura 10 - Wizard de exportação de componente Fluig WCM (1)


Siga os procedimentos abaixo (Figura 11):

  1. Selecione Exportar para servidor Fluig e clique em Next.
  2. Selecione o servidor para onde o serviço será exportado.
  3. Clique em Finsish.

 

Image RemovedImage Added

Figura 11 - Wizard de exportação de componente Fluig WCM (2)

 

Pronto! Esta etapa facilita todo o processo. Ao término, o servidor terá feito a instalação do componente e este estará pronto para ser utilizado.

Third Party Trademarks

...