Índice

Sobre Layouts

Índice

maxLevel	4
outline	true
exclude	.*ndice
style	none

Slot

Estrutura de Arquivos

Variáveis Disponíveis no FTL

Fluxograma de Renderização

Criando um Layout

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

widgets que a compõe por meio dos slots.

Image Removed

Image Added

Slot

Slots são contêineres definidos que são aptos a comportarem

Widgets

widgets. A quantidade, posição e dimensão desses slots é o que define o corpo de um

template

layout. Sendo assim, o

template

layout é o esqueleto de uma página (sua estrutura), definindo a distribuição

das Widgets

dos widgets que a compõem através

do

dos slots.

Image Added

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

src

main

+-- main

+-- java (não utilizado, padrão

das

de

Widgets

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:

Arquivo / Pasta	Descrição
<código-do-layout>

: nome

Nome/Identificador do layout

;



src/main/resources/application.info

: arquivo

Arquivo de configuração do layout

,

onde é persistida, entre outras informações, o código do layout, título e
desenvolvedor. Este arquivo será mais detalhado nas próximas páginas deste

documento

;

.



src/main/resources/layout.ftl

: arquivo

Arquivo do

freemarker

Freemarker que será interpretado

durante a renderização do layout

, contém

. Contém a configuração dos

Slots;

slots.



src/main/resources/<código-do-layout>.properties

: arquivo

Arquivo de strings

traduzíveis utilizadas pelo layout. Deve possuir derivações de acordo com o

idioma suportado pelo layout

;

.



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

servidor de aplicação. Deve conter pelo menos a propriedade “context-root”. O context-root

representa o contexto Web do layout e é recomendado que seja o próprio

código do layout

;

.



src/main/webapp/

WEB-INF/glassfish-web.xml: Descritor específico para o
Glassfish. Deve conter pelo menos a propriedade “context-root”. O context-
root representa o contexto Web do layout e é recomendado que seja o próprio
código do layout;

resources/css	Folhas de estilo do layout (caso seja necessário).
src/main/webapp/resources/

css: folhas de estilo do layout (caso seja
necessário);
 src/main/webapp/resources/js: arquivos

js	Arquivos Javascript do layout (caso seja

necessário)

;

.



src/main/webapp/resources/images/icon.png

: ícone

Ícone que representa o

layout, é exibido, por exemplo, durante a criação de páginas para que o

usuário possa pré-visualizar a distribuição de slots do layout.

;
 pom.xml: descritor Maven do layout. Este arquivo será mais detalhado nas
próximas páginas deste documento;

Para o sistema, o que diferencia um layout de um widget

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

Arquivo application.info

Abaixo o detalhamento de todas as propriedades do arquivo application.info:

Arquivo application.info


Propriedade	Descrição
application.type =

<layout> : o

<layout>

O valor layout define que o componente é do

tipo layout, existem outras opções como

Widget e Theme, que não serão
detalhadas neste documento;


widget e theme.

application.code = <código-do-layout>

: identificador

Iidentificador do layout

;

.



application.title = <título-do-layout>

: título

Título do layout

;

.



application.description = <descrição-do layout>

: descrição

Descrição do layout

;

.



application.category = <SYSTEM>

: categoria

Categoria do layout. Propriedade

utilizada para filtro em determinados funções do sistema, esta propriedade é
para uso futuro, atualmente não é utilizada

;

.



application

,

.renderer = <freemarker>

: indica

Indica o tipo de renderizador exigido

(atualmente somente o

freemarker

Freemarker é suportado)

;

.



application.icon = <icon.png>

: ícone

Ícone para representação visual do layout

,
caso

. Caso não informado o sistema assumirá um ícone padrão para sua
representação visual

;

.



developer.code = <developer-

code> : código

code>

Código do desenvolvedor do layout

(uso futuro);


.

developer.

name

name = <TOTVS S.A.>

: nome

Nome do desenvolvedor

(uso futuro);

.



developer.url = <http://www.totvs.com

> :

>	URL do desenvolvedor

(uso futuro);

.



layout.file=layout.ftl = <layout.ftl>

: nome

Nome do arquivo a ser

renderização. Se não informado, será assumido “layout.ftl”

;

.



locale.file.base.

name

name = <prefixo>

: nome

Nome base do arquivo de tradução

,

que

será seguido pelo

Locale

locale (ex.: prefixo_PT_BR e prefixo_EN_US). Se não
informado, será usado o código do layout

;

.



application.resource.css.1 = </resources/css/<codigo-do-layout>.css>

:

opcional

Opcional. Nome do arquivo CSS a ser carregado durante a renderização.

Podem ser informado vários arquivos, o número no final do

dome

nome da

propriedade indica a ordem de carga

;

.

application.resource.js.2 = </resources/js/<código-do-javascript>.js>

:

opcional

Opcional. Nome do arquivo JS a ser carregado durante a renderização.

Podem ser informado vários arquivos, o número no final do nome da

propriedade indica a ordem de carga

;

.

Arquivo pom.xml
O pom é 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.
A estrutura mínima do pom de um layout é a que segue:

slot.SlotMenu = <menu>

Opcional. Entretanto, quando o arquivo .ftl possuir slot de Menu (SlotMenu), é necessário informar qual widget de menu deve ser utilizada. "menu" deve ser informado nesse caso. Entenda melhor aqui.

slot.SlotLogin = <sociallogin>

Opcional. Entretanto, quando o arquivo .ftl possuir slot de Login (SlotLogin), é necessário informar qual widget de login deve ser usada. Apesar de haver mais de um opção para menu, recomendamos a utilização do valor "sociallogin" nesse caso. Entenda melhor aqui.

application.resource.css.1=/portal/resources/css/wcm_responsive_layout.css

Arquivo CSS com configurações globais para a padronização de escrita dos layouts. Sempre necessário incluir.

Informações
A propriedade estará disponível a partir da release 1.8.1 do TOTVS Fluig Plataforma.

application.resource.css.2=/resources/css/responsive_layout.css

Arquivo CSS padrão para o desenvolvimento da responsividade do layout.

Informações
A propriedade estará disponível a partir da release 1.8.1 do TOTVS Fluig Plataforma.

application.responsiveLayout=true

Caso o valor seja true, ilustrará que o layout é responsivo no momento do cadastro de páginas.

Informações
A propriedade estará disponível a partir da release 1.8.1 do TOTVS Fluig Plataforma.

application.newBuilder=true

Se true significa que a página será carregada no novo construtor. Se false significa que a página será carregada no antigo construtor. Entenda melhor aqui.

Informações
A propriedade estará disponível a partir da release 1.8.1 do TOTVS Fluig Plataforma.

Variáveis Disponíveis no FTL

Os principal arquivo de um projeto de layout é o “layout.ftl”. É neste arquivo que será definido

<?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 Slotsslots.

Para facilitar o desenvolvimento, alguns métodos da camada de negócio são
ofertados são ofertados pela infra-estrutura do WCM e podem ser acessados via freemarkerFreemarker.
As 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:

Variável	Descrição



serverBaseURL

:

URL do servidor (sem nenhum contexto)

;

.



i18n

: objeto

Objeto com as strings internacionalizadas

;

.



themeURI

: contexto

Contexto do tema (por exemplo: /themedefault)

;

.



themeURL

:

URL completa do tema (serverBaseURL + themeURI)

;

.



pageId

:

ID da página

;

.



layoutId

:

ID do layout

;

.



layoutURI

: contexto

Contexto do layout (por exemplo: /layoutdefault)

;

.



layoutURL

:

URL completa do layout (serverBaseURL + layoutURI)

;

.



serverContextURL

: contexto

Contexto do sistema

;

.



locale

: objeto Locale

Objeto com a localização selecionada para o usuário

;

.



user

: login

Login do usuário (ou vazio se não está logado)

;

.



tenantId

:

ID do Tenant do usuário logado (-1 se não está logado)

;

.



tenantCode

: código

Código do Tenant do usuário logado (ou vazio se não está

logado)

;

.



pageFriendlyURL

:

URI da página (formado pelo contexto + código da

empresa + código da página)

;

.



wcmEnums

: variável

Variável de acesso aos enum’s da aplicação.

Será detalhado

abaixo;
 wcm: objeto

wcm	Objeto com os serviços disponibilizados pelo SDK do WCM.

Será

detalhado abaixo;
 pageRender: objeto

pageRender

Objeto que também disponibiliza serviços do SDK.

Será
detalhado abaixo;


fluigVersion	Versão do TOTVS Fluig Plataforma.

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

Método	Descrição
PageVO getPage()

: retorna

Retorna um objeto do tipo VO com todas as informações

da página corrente, como sua página pai (caso

haja

exista), páginas filhas, layout e

tema, entre outras propriedades

;

.



List<PageVO> listPageBreadcrumb()

: retorna

Retorna uma lista de páginas

ordenadas em modo de navegação estrutural, possibilitando a localização da

página atual em meio estrutura de páginas do sistema

;

.



void renderInstance(long instanceId)

: método

Método que inicia a renderização de

uma Widget

um widget utilizando o FTL “decoration.ftl”, ou seja, irá renderizar

a Widget

o widget e

seu título no slot onde foi invocado o método

;

.



void renderInstanceNoDecorator(long instanceId)

: método

Método que inicia a

renderização de

uma Widget

um widget utilizando o FTL “nodecoration.ftl”, ou seja, irá

renderizar

a Widget

o widget sem a barra de título, no slot onde foi invocado o método

;

.

boolean isUserLogged()

: retorna

Retorna se existe um usuário logado através do VO

da página

;

.



UserVO getUser()

: retorna

Retorna objeto VO do usuário corrente

,

contendo

informações como nome,

email e

código do Tenant entre outras

propriedades;


propriedades.

Informações
As informações de grupos e papéis do usuário não são apresentadas neste objeto e o uso deste tipo de informação para validações no desenvolvimento de widgets não é recomendado, pois afeta o desempenho do carregamento das páginas.

List<Long> getInstancesIds(Slog slot)

: retorna

Retorna uma lista com ID de

toads
as Widgets

todas os widgets contidas no “slot” informado

;

.



List<Long> getInstancesByCode(String code)

: retorna

Retorna o ID de instância de

todas

as

os widgets com o código informado “code” contidas na página

;

.



boolean hasPermission(long instanceId, String permission)

: verifica se a

Verifica se o widget com o “instanceId” informado

,

possui uma determinada permissão,

conforme a “permission” desejada

;

.



boolean hasViewPermission(long instanceId)

: verifica

Verifica se o usuário logado

possui permissão de visualização

da

do widget

;

.



boolean hasEditPermission(long instanceId)

: verifica

Verifica se o usuário logado

possui permissão de edição para a instancia (“instanceId”) em questão

;

.



String getHomePage()

: retorna

Retorna a URL de acesso a página inicial (home)

;

.



boolean isUserLoggedInOAuthWithConsumerKey(String consumerKey)

:

identifica

Identifica se um usuário logado possui um token válido para o chave de

consumo (“consumerKey”) informada.



List<WidgetVO> listAllowedWidgetsByUser()

: retorna

Retorna a lista de Widgets as

quais o usuário possuí permissão de visualização

;

.



Long getTenantId()

: retorna

Retorna o ID do Tenant do usuário corrente

;

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:

mvn archetype:generate
-DarchetypeGroupId=com.totvs.technology
-DarchetypeArtifactId=layout-wcm
-DarchetypeVersion=4.0.3-SNAPSHOT
-DgroupId=<Group ID do Layout>
-DartifactId=<Artifact ID do Layout>
-Dversion=<Versao do Layout>
-DparentArtifactId=”<ID do artefato pai>”
-DapplicationTitle=”<Titulo do Layout>”
-DapplicationDescription=”<Descricao to Layout>”
-DdeveloperCode=”<Codigo de desenvolvedor>”
-DdeveloperName=”<Nome do desenvolvedor>”
-DdeveloperURL=”<URL do desenvolvedor>”
-DlayoutFile=”<Nome do arquivo layout>” SEM a
extensão “.ftl”
-DapplicationCategory=”<Categoria>”
-DapplicationCategory=”<Categoria>”

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.

.
pageRender.isPreviewMode()	Diz se a página está em modo preview ou não true\|false.
pageRender.isEditMode()	Diz se a página está em modo edição ou não true\|false.

Macros para o uso no FTL dos layouts:

Arquivo que disponibiliza as macros para o layout: "<#import "/wcm.ftl" as wcm />".

Método	Descrição
<@wcm.previewPageAlert />	Alerta no topo da página informando que a página está em modo de pré-visualização.
<@wcm.header />	Widget de cabeçalho da página (independente do tema).
<@wcm.menu />	Widget de menu da página (independente do tema).
<@wcm.editHeader />	Widget de cabeçalho da página no modo de edição.
<@wcm.widgetsList />	Widget que faz a listagem de widgets disponíveis para serem adicionadas em uma página.
<@wcm.renderSlot id="SlotA" editableSlot="true" isResponsiveSlot="true" />	Macro padrão para renderização de um slot. (se o parâmetro isResponsiveSlot for true, implementa o visual novo com as ações novas em uma widget).
<@wcm.footer layoutuserlabel="wcm.layoutdefaultecmdashboard.user" />	Widget padrão para o rodapé da página.

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:

Image Added

Criando um Layout

É possível criar um layout a partir do Fluig Studio. O tutorial com o passo-a-passo encontra-se aqui

Uma vez finalizando o tutorial, o Studio preparará um ambiente semelhante a esse:

Image Added

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

Image Added

Para criar um slot, nesse caso, pode-se usar o Snippet "Slot de um Layout" disponível nos exemplos de código do Studio.
Entenda o impacto na forma como você cria o layout na sessão sobre mudança no layout de uma página

Código do Layout

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:

Deck of Cards

id	samples

Card

id	1
label	1.8.1 e superiores

Bloco de código

language	xml
theme	Eclipse

<#import "/wcm.ftl" as wcm/>

<#-- Variaveis globais para os layouts -->
<#import "/layout-globals.ftl" as globals />

<#if pageRender.isPreviewMode() = true>
	<@wcm.previewPageAlert />
	<@wcm.deviceTogglePreview />
</#if>

<div class="wcm-wrapper-content ${wcmLayoutEditClass!""} ${pageAuthTypeClass!""}">

    <#if pageRender.isEditMode() = false>
        <@wcm.header authenticated=pageRender.isUserLogged()?c />
        <@wcm.menu />
    </#if>

    <div class="wcm-all-content">

        <div id="wcm-content" class="clearfix wcm-background">

            <#if pageRender.isEditMode()=true>
                <@wcm.editHeader />
                <@wcm.widgetsList />
            </#if>

            <div id="${divMasterId!""}">

                <!-- Slot 1 -->
                <div class="editable-slot slotfull layout-1-1" id="slotFull1">
                    <@wcm.renderSlot id="SlotC" editableSlot="true" decorator="false" isResponsiveSlot="true" />
                </div>

                <#if fluigThemeCode != "responsive_theme">
                    <@wcm.footer layoutuserlabel="wcm.layoutdefault.user" />
                </#if>
            </div>
        </div>
    </div>
</div>

Card

id	2
label	1.8.0 e inferiores

Bloco de código

language	xml
theme	Eclipse

<#import "/wcm.ftl" as wcm/>
<@wcm.header public="true"/>
<!-- WCM Wrapper content -->
<div class="wcm-wrapper-content">
    <@wcm.menu />
    <!-- Wrapper -->
    <div class="wcm-all-content">
        <div id="wcm-content" class="clearfix wcm-background">
            <!-- Your content here -->
            <@wcm.footer layoutuserlabel="wcm.layoutdefault.user" />
        </div>
    </div>
</div>

Código do Slot

O código de um slot é composto dos seguintes elementos:

Bloco de código

language	xml

<div class="editable-slot slotfull layout-1-1" id="slotContainer001">
	<@wcm.renderSlot id="Slot001" decorator="false" editableSlot="false" isResponsiveSlot="true" />
</div>

Sobre o primeiro elemento "div":

Bloco de código

language	xml

<div class="editable-slot slotfull layout-1-1" id="slotContainer001"> ... </div>

Propriedade

Função

id="slotContainer001"

slotContainer001: Identificação única do container. Não pode haver outro elemento com esse mesmo código. O tamanho máximo para um ID de slot é 50 caracteres.

class="editable-slot slotfull layout-1-1"

editable-slot e slotfull: Usado pelo renderizador para montar o editor individual de slot.

layout-1-1: Usado para posicionar o slot em um determinado ponto da tela. Será detalhado adiante.

Sobre o segundo elemento "div":

Bloco de código

language	xml

...<@wcm.renderSlot id="Slot001" decorator="false" editableSlot="false" isResponsiveSlot="true" />...

Propriedade	Função
id="Slot001"	Slot001: Identificação única do slot. Não pode haver outro elemento com esse mesmo código
decorator="false"	true: As widgets posicionadas neste slot exibem seus títulos false: As widgets posicionadas neste slot não exibem seus títulos
editableSlot="false"	true: Torna possível inserir e retirar widgets dentro do slot bem como mudar o posicionamento delas false: Não permite qualquer edição no conteúdo do Slot. Slots de cabeçalho, rodapé e login geralmente estão com esse valor
isResponsiveSlot="true"	true: implementa o novo visual com ações novas em uma widget. false: Renderiza o visual antigo.

Posicionamento do Slot

Na primeira "div" do conjunto de elementos de um slot, podemos encontrar o seguinte código:

Bloco de código

language	xml

<div id="slotContainer001" class="editable-slot slotfull layout-1-1">

O valor "layout-1-1" refere-se ao posicionamento daquele layout dentro da página. Segue abaixo a lista dos posicionamentos de slot disponíveis dentro do TOTVS Fluig Plataforma:

Valor	Posição	Largura
layout-1-3	Esquerda	32%
layout-2-3	Esquerda	65%
layout-1-2left	Esquerda	50%
layout-1-1	---	100%
layout-1-2right	Direita	50%
layout-1-3right	Direita	32%

Informações

title	Não se esqueça

Leia a sobre mudança no layout de uma página

Sobre Slots não editáveis

Um layout pode, ou não, conter slots não editáveis. Naqueles fornecidos pelo Fluig Plataforma como templates, há 5 slots que não são editáveis por padrão. Para cada slot não-editável, é necessário criar uma propriedade no application.info relacionado o id do slot ao código da widget que estará contida nele, pois essa é a forma de inserir conteúdo em um slot não-editável.

Slot de Busca:

Bloco de código

language	xml

	<div id="SlotInstantSearch" slot="true" class="slotint slot-header-actions">
		<#list (pageRender.getInstancesIds("SlotInstantSearch"))! as id>
			${pageRender.renderInstanceNoDecorator(id)}
		</#list>
	</div>

Propriedade do application.info:

slot.SlotInstantSearch=widget_search

Slot de Alertas Globais:

Bloco de código

language	xml

	<div id="SlotGlobalAlert" slot="true" class="slotint slot-header-actions">
		<#list (pageRender.getInstancesIds("SlotGlobalAlert"))! as id>
			${pageRender.renderInstanceNoDecorator(id)}
		</#list>
	</div>

Propriedade do application.info:

slot.SlotGlobalAlert=alertpopover

Slot de Login:

Bloco de código

language	xml

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

Propriedade do application.info:

slot.SlotLogin=sociallogin

Slot de Menu:

Bloco de código

language	xml

<@wcm.menu />

Propriedade do application.info:

slot.SlotMenu=menu

Slot de Rodapé:

Bloco de código

language	xml

<@wcm.footer layoutuserlabel="wcm.layoutdefault.user" />

Propriedade do application.info:

slot.SlotUsePolicy=usepolicy

Informações

title	Importante

o valor do parâmetro "layoutuserlabel" deve ser uma chave existente em um dos arquivos .properties do seu projeto

Como exibir/ocultar títulos das widgets no slot

Para exibir o título das widgets no slot é possível utilizar a propriedade decorator na macro renderSlot.
Por padrão os títulos das widgets não são exibidos na utilização da macro renderSlot. Porém é possível exibir os títulos alterando a propriedade decorator="true" no código do slot conforme exibido abaixo. Assim, todas as widgets posicionadas neste slot terão um título visível no topo.

Bloco de código

language	xml

<div id="divSlot1" class="editable-slot">
    <@wcm.renderSlot id="SlotA" decorator="true" editableSlot="true" />
</div>

Resultado:

Image Added

Atalhos

Árvore de páginas

Versões comparadas

Versão antiga 2

Nova versão Atual

Chave

Índice

Sobre Layouts

Slot

Estrutura de Arquivos

Arquivo application.info

Variáveis Disponíveis no FTL

Variáveis Disponíveis no FTL

Fluxograma de Renderização

Criando um Layout

Macros para o uso no FTL dos layouts:

Fluxograma de Renderização

Criando um Layout

Código do Layout

Código do Slot

Posicionamento do Slot

Sobre Slots não editáveis

Como exibir/ocultar títulos das widgets no slot

Atalhos

Árvore de páginas

Histórico da Página

Versões comparadas

Versão antiga 2

Nova versão Atual

Chave

Índice

Sobre Layouts

Slot

Estrutura de Arquivos

Arquivo application.info

Variáveis Disponíveis no FTL

Variáveis Disponíveis no FTL

Fluxograma de Renderização

Criando um Layout

Macros para o uso no FTL dos layouts:

Fluxograma de Renderização

Criando um Layout

Código do Layout

Código do Slot

Posicionamento do Slot

Sobre Slots não editáveis

Como exibir/ocultar títulos das widgets no slot