Índice

Sobre Layouts

O layout define a composição de uma página e é composto por múltiplos slots. A quantidade, posição e dimensão desses slots é o que define o corpo de um layout. Dessa forma, o layout é a estrutura de uma página, definindo a distribuição dos Widgets que a compõe por meio dos slots.

Slot

Slots são contêineres definidos que são aptos a comportarem widgets. A quantidade, posição e dimensão desses slots é o que define o corpo de um layout. Sendo assim, o layout é o esqueleto de uma página (sua estrutura), definindo a distribuição dos widgets que a compõem através dos slots.

Estrutura de Arquivos

Layouts possuem a estrutura de arquivos semelhante à de um widget comum, e também são empacotados em formato “war”. A estrutura de pastas-fonte de um layout é a que segue:

<codigo-do-layout>
 +-- src
   +-- main
     +-- java (não utilizado, padrão de widgets)
     +-- resources
       +-- application.info
       +-- layout.ftl
       +-- <codigo-do-layout>.properties
       +-- <codigo-do-layout>_en_US.properties
       +-- <codigo-do-layout>_es.properties
       +-- <codigo-do-layout>_pt_BR.properties
     +-- webapp
       +-- META-INF
       +-- resources
         +-- images
           +-- icon.png
         +-- css
         +-- js
       +-- WEB-INF
         +-- web.xml
         +-- jboss-web.xml
   +-- test
     +-- java

Onde:

Para o sistema, o que diferencia um layout de um widget comum é a definição da propriedade “application.type = layout” no arquivo descritor “application.info”. Este arquivo é um descritor detalhado dos widgets e também dos layouts. É através deste que a aplicação tem conhecimento das propriedades do layout, identificação do desenvolvedor, arquivos necessários para sua renderização, arquivos de linguagem e outras propriedades. 

Arquivo application.info

Variáveis Disponíveis no FTL

Os principal arquivo de um projeto de layout é o “layout.ftl”. É neste arquivo que será definido, via marcação HTML e Freemarker, a quantidade e disposição dos slots. 

Para facilitar o desenvolvimento, alguns métodos da camada de negócio são ofertados pela infra-estrutura do WCM e podem ser acessados via Freemarker. As variáveis disponibilizadas são acessadas através da sintaxe ${nome-da-variável} em qualquer local do FTL, a seguir uma lista das variáveis disponíveis:

O objeto “pagetRender” disponibiliza os seguintes métodos do SDK:

Fluxograma de Renderização

Toda página renderizada no WCM possui o mesmo fluxo para sua construção. O primeiro arquivo chamado no processo de renderização é o “master.ftl”, onde são informados os metadados da página. O arquivo master invoca o método “pageRender.renderTheme()”, responsável pela renderização do tema, que por sua vez irá chamar a renderização do layout, onde posteriormente serão renderizadas os widgets que compõem a tela, concluindo a construção da página.

O fluxograma a seguir exemplifica o processo de renderização de uma página:

Criando um Layout

É possível criar um layout a partir do Fluig Studio:

• Selecione um projeto Fluig (ou crie um novo<LINK>);
• Vá no Menu do Studio e escolha: "Arquivo", "Novo" e selecione "Layout". A tela abaixo aparecerá;

• Uma vez que as informações obrigatórias forem informadas, pode-se optar por finalizar o wizard ou seguir para a próxima tela, que contém as informações opcionais

• Finalizando o wizard, o Studio preparará um ambiente semelhante a esse:

• Ou, no caso de ter-se optado por um layout vazio, aparecerá o seguinte conteúdo:

• Para criar um slot, nesse caso, pode-se usar o Snippet "Slot de um Layout" disponível nos exemplos de código do studio.
• Apesar de a estrutura fornecida pelos templates do Studio não serem obrigatórios, é aconselhável o uso de alguns elementos essenciais quando do desenvolvimento de um layout a partir da estaca zero, como por exemplo:

<div class="fluig-style-guide">
    <div id="wcm_header" class="wcm-header-background wcm-header">
        <div class="header-grouper-right">
            <div id="SlotLogin" slot="true" class="slot-header-actions">
                <#list (pageRender.getInstancesIds("SlotLogin"))! as id>
                    ${pageRender.renderInstanceNoDecorator(id)}
                </#list>
            </div>
        </div>
    </div>
    <div id="wcm-content" class="clearfix wcm-background">    
    <#if pageRender.isEditMode()=true>
        <div name="formatBar" id="formatBar"></div>
        <div id="edicaoPagina" class="clearfix">
    <#else>
        <div id="visualizacaoPagina" class="clearfix">
    </#if>
            <div class="editable-slot slotfull layout-1-1" id="slotFullZZZ">
                <div id="SlotZZZ" slot="true" decorator="false" editableSlot="true">
                    <#list (pageRender.getInstancesIds("SlotZZZ"))! as id>
                        ${pageRender.renderInstanceNoDecorator(id)}
                    </#list>
                </div>
            </div>
        </div>
    </div>
</div>