Árvore de páginas

Versões comparadas

Chave

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

...

  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, Nome e Descrição.


    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 na caixa combo-box um template 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.

...

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 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. Serão apresentados três opções de componente WCM: Widget e Layout.
  3. Selecione a opção Layout.

    Image Added

    Image RemovedFigura 9 5 - Criando um novo Layout (campos obrigatórios)



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

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

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

Image Removed

Image Added

Figura 10 5 - 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 116.Image Removed

Image Added

Figura 11 6 - 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 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
<!-- Header -->
<div id="wcm_header" class="wcm-header-background wcm-header">
    <!-- Grouper left -->
    <div class="header-grouper-left">
        <a href="home" class="wcm_logo" title="Fluig">WCM</a>
    </div>
    <!-- Grouper 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">
            <#else>
            <div id="visualizacaoPagina">
            </#if>
            <!-- Titulo da página -->
            <div class="slotfull layout-1-1">
                <span class="titleArea">${i18n.getTranslation('application.title')}</span>
                <h2 class="pageTitle">${pageTitle}</h2>
            </div>
            <!-- Slot 1 -->
            <div class="editable-slot slotfull layout-1-1" id="slotFull1">
                <textarea id="slot1_txtarea_top" class="ta_slot cke-ta"></textarea>
                <div id="SlotC" slot="true" class="slotint">
                    <#list (pageRender.getInstancesIds("SlotC"))! as id>
                        ${pageRender.renderInstanceNoDecorator(id)}
                    </#list>
                </div>
                <textarea id="slot1_txtarea_bottom" class="ta_slot cke-ta"></textarea>
            </div>
            <!-- Slot 2 -->
            <div class="editable-slot slotfull layout-1-1" id="slotFull2">
                <textarea id="slot2_txtarea_top" class="ta_slot cke-ta"></textarea>
                <div id="SlotB" slot="true" class="slotint">
                    <#list (pageRender.getInstancesIds("SlotB"))! as id>
                        ${pageRender.renderInstanceNoDecorator(id)}
                    </#list>
                </div>
                <textarea id="slot2_txtarea_bottom" class="ta_slot cke-ta"></textarea>
            </div>
            <!-- Slot 3 -->
            <div class="editable-slot slotfull layout-1-1" id="slotFull3">
                <textarea id="slot3_txtarea_top" class="ta_slot cke-ta"></textarea>
                <!-- Widget -->
                <div id="SlotA" slot="true" class="slotint">
                    <#list (pageRender.getInstancesIds("SlotA"))! as id>
                        ${pageRender.renderInstance(id)}
                    </#list>
                </div>
                <textarea id="slot3_txtarea_bottom" class="ta_slot cke-ta"></textarea>
            </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();
    });
    
});

 

...