Í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>
 +-- pom.xml (packaging: war)
 +-- 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

Arquivo pom.xml

O pom.xml é um arquivo fundamental do Maven. Deve ficar na raiz da estrutura de arquivos do layout. Consiste em um XML com informações do projeto e detalhes das configurações utilizadas pelo Maven para construir o projeto. É neste descritor que são inseridas informações como a dependência de outros projetos, plugins, profiles e versão, entre outras. Sua estrutura mínima para  um layout é a que segue:

<?xml version="1.0" encoding="UTF-8"?>

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 

        xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

        <modelVersion>4.0.0</modelVersion>

        <groupId>[grupID]</ groupId>

        <artifactId>[grupID]</artifactId>

        <packaging>war</packaging>     

        <name>[Nome do layout]</name>

        <description>[Descrição do layout]</description>

        <properties>

            <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

        </properties>

        <build>

            <plugins>

                <plugin>

                    <groupId>org.apache.maven.plugins</groupId>

                    <artifactId>maven-compiler-plugin</artifactId>

                    <configuration>

                        <source>1.7</source>

                        <target>1.7</target>

                    </configuration>

                </plugin>

            </plugins>

        </build>

    </project>

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 as
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

Para facilitar a criação de projetos do tipo Layout, foi criado um Archetype Maven.
Um Archetype é um template de projeto Maven, previamente configurado e
estruturado.
O uso do Archetype permite criar um projeto com a estrutura de pastas fontes
idêntica à citada no tópico “Estrutura de Arquivos”, deixando para o desenvolvedor
apenas o trabalho de alterar/adicionar arquivos conforme sua necessidade específica.
A seguir, um passo a passo exemplificando a criação de um layout:

Pré-Requisitos
 JDK 1.7 instalado;
 Apache Maven 3.0.4 (ou superior) instalado;
 Acesso ao Nexus da TOTVS configurado.
Abra uma janela do terminal (ou prompt do DOS) e navegue até a pasta onde deseja
que o layout seja criado. Digite a seguinte linha de comando:

Onde:

Onde:
 DarchetypeVersion: versão do archetype para gerar o layout. Pode ser
omitido. Deve ser informado caso queira gerar para uma versão em
específico.
 DgroupId: groupId do Layout. Parâmetro obrigatório.
 DartifactId: artifactId do Layout. Parâmetro obrigatório.
 Dversion: versão do Layout. Parâmetro obrigatório.
 DparentArtifactId: ID do artefato pai. Parâmetro obrigatório, se não
informado, assumirá "wcm-architecture".
 DapplicationTitle: Título do Layout. Pode ser omitido, porém deverá ser
informado posteriormente.
 DapplicationDescription: Breve descrição do Layout. Pode ser omitido,
porém deverá ser informado posteriormente.
 DdeveloperCode: Código de desenvolvedor. Cada empresa ou grupo deve
padronizar um código. Esse código será usado para validações internas de
permissionamento. Se não informado, assumirá "TOTVS".
 DdeveloperName: Nome da empresa que desenvolveu o Layout. Se não
informado, assumirá "TOTVS S.A.".
 DdeveloperURL: URL da empresa que desenvolveu o Layout. Se não
informado, assumirá "http://www.totvs.com".

DlayoutFile: Nome do arquivo do Layout. Se não informado, assumirá
"layout".
 DapplicationCategory: Categoria do Layout. Se não informado, assumirá
"SYSTEM".
Após a execução do comando, deve ser criada a estrutura de pasta fonte padrão no
diretório escolhido.