Árvore de páginas

Versões comparadas

Chave

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

Índice

Índice
maxLevel4
outlinetrue
stylenone
exclude.*ndice
stylenone

Objetivo

O objetivo deste guia é apresentar as ações necessárias para a criação de uma biblioteca personalizada.

Conceito

Uma biblioteca personalizada é um arquivo com snippets de códigos que podem ser reaproveitados na criação de layouts. A Biblioteca WCM é parte integrante da plataforma, porém, existe a possibilidade do usuário desenvolvedor criar a sua própria biblioteca.

Como criar a biblioteca?

Para criar a sua própria biblioteca, é necessário efetuar os seguintes passos:

Deck of Cards
id1
Card
id1
labelPasso 1
titlePasso 1

 Acesse

  • Acessar a pasta de templates que fica localizada em
: Diretório de instalação
  • [Instalação do fluig
>
  • ]/repository
>
  • /wcmdir
>
  • /templates.

Image Added

 

Card
id2
labelPasso 2
titlePasso 2

 

  • Dentro da pasta
de
  • templates,
crie
  • criar um arquivo
.
  • com a extensão ftl.
Exemplo
  • Por exemplo: "custom.ftl".
Informações

O arquivo da biblioteca pode conter vários snippets de código.

Image Added

 

Como criar snippets novos?

Para criar snippets novos é necessário inserir uma macro nova no arquivo ftl da biblioteca, conforme mostrado a seguir:

Bloco de código
languagexml
<#macro NOME_DA_MACRO PARAMETRO1>
  <!-- Conteúdo da snippet -->
</#macro>
 
<#macro helloWorld>
  <h1>Hello world!</h1>
</#macro>

Snippet com parâmetros

Abaixo segue um exemplo de snippet que utiliza um parâmetro:

Bloco de código
<#macro funcao param1>
  <h1>${param1}!</h1>
</#macro>  

Como utilizar a biblioteca?

A importação da biblioteca personalizada segue o mesmo exemplo da importação da Biblioteca WCM.

...

Bloco de código
<#import "/custom.ftl" as custom/>
 
<@wcm.helloWorld/>
<@wcm.funcao param1="Exemplo de importação da biblioteca customizada"/>

Material para referência

Para mais informações sobre como criar snippets de código, acesse a documentação do freemarker e/ou utilizar o código abaixo como exemplo:

...