Issuu

Customização de Frontend no Liferay DXP 7.4

Temas, Layouts, Fragmentos, Widgets e React (Extensões de Cliente)

Duração: 2 horas | Público: Desenvolvedores frontend, implementadores e arquitetos de portais com conhecimento básico de Liferay

Objetivos principais:

Dominar o panorama de customização no Liferay 7.4, priorizando Livros de

Estilo, Fragmentos e modelos reutilizáveis

Aplicar temas, layouts e criar Modelos de Página (Página de Conteúdo e Página de Widget) com configurações avançadas de SEO

Personalizar interfaces com Fragmentos nativos e customizados, utilizando Widgets essenciais

Customizar visuais com Livros de Estilo e aplicar FreeMarker em Modelos de Conteúdo Web

Implementar componentes React modernos via Extensões de Cliente (Elementos Customizados)

Agenda do Treinamento

Fundamentos e mudanças no 7.4

Temas, layouts e Modelos de Página 4 compreendendo a nova abordagem de customização

Fragmentos, Widgets e Livros de Estilo

Personalização de UI com componentes nativos e customizados, aplicação de Tokens de Design

Configurações, SEO e modelos

Otimização de páginas, tradução de conteúdo e governança de templates

React com Extensões de Cliente

Implementação de componentes React modernos via Elemento Customizado

Nota: Cada bloco inclui demonstrações ao vivo e exercícios práticos para fixação do conteúdo.

Mapa do Frontend no Liferay 7.4

O que mudou na abordagem de customização

O Liferay 7.4 representa uma mudança significativa na filosofia de customização frontend, priorizando velocidade de desenvolvimento e manutenibilidade através de ferramentas mais modernas e desacopladas.

Temas + Livros de Estilo

Temas continuam existindo para estruturação, mas Livros de Estilo assumem o protagonismo para customizações visuais rápidas através de chaves de Design centralizados.

Layouts e Modelos

Layouts clássicos evoluem para Modelos de Página (Content/Widget) e Páginas Mestre, permitindo reuso e governança eficiente em múltiplos sites.

Widgets + ADTs

Widgets essenciais combinados com ADTs (Modelos de conteúdo web) usando FreeMarker para apresentações avançadas sem duplicar código.

Extensões de Cliente

É possível adicionar diversos tipos de extensões de cliente, como integração de React moderno através de Extensões de Cliente (Elementos Customizados), permitindo desenvolvimento desacoplado. Outras extensões como CSS, JS também são possíveis.

Atenção: Evite muita customização em Temas quando um Livro de Estilo pode resolver o problema de forma mais ágil e manutenível. A nova filosofia é "menos tema pesado, mais componentes reutilizáveis".

Temas no Liferay 7.4

Quando usar e o que mudou

Função do Tema

O tema no Liferay 7.4 continua sendo responsável pelo estruturação da plataforma:

Estrutura HTML base e arquitetura de componentes

Definição de variáveis CSS globais e tokens fundamentais

Configurações de layout master e grid system

Assets compartilhados (fontes, ícones, bibliotecas JS)

Comportamentos JavaScript globais e inicializações

Quando criar tema novo

Mudança radical de identidade visual corporativa

Necessidade de estrutura HTML completamente diferente

Integração com frameworks CSS específicos (ex.: Tailwind)

Requisitos de acessibilidade ou performance muito específicos

Quando ajustar Livro de Estilo

Alterações de cores, tipografia e espaçamentos

Variações de marca para diferentes sites/campanhas

Testes A/B de design e experimentação visual

Customizações que não afetam estrutura HTML

Estrutura essencial de um tema

my-theme/

=%% src/

' =%% css/

' ' =%% _custom.scss

' ' 5%% _variables.scss

' =%% js/

' ' 5%% main.js

' =%% templates/

' ' =%% portal_normal.ftl

' ' 5%% portlet.ftl

' 5%% WEB-INF/

' 5%% liferay-look-and-feel.xml

5%% package.json

Dica: Documente todos as chaves e variáveis globais do tema em um guia de estilo interno. Isso facilita a manutenção e garante consistência entre diferentes desenvolvedores da equipe.

Criação de Temas com Blade CLI

Agilizando o Desenvolvimento de Frontend

O Blade CLI é a ferramenta de linha de comando oficial do Liferay que simplifica e acelera a criação de projetos Liferay, incluindo temas.

Ele oferece templatesprontos que aderem às melhores práticas e à arquitetura recomendada.

Geração do Tema

Utilize o comando blade create -t theme [nome-do-tema] na pasta do seu espaço de trabalho Liferay para scaffoldar a estrutura básica do tema.

Personalização do Código

Modifique os arquivos SCSS (em src/css), FreeMarker (em src/templates) e JavaScript (em src/js) para aplicar suas customizações visuais e funcionais.

Construção e Implantação

Compile o tema com blade deploy a partir da raiz do projeto do tema. Isso gerará o arquivo WAR e o implantará automaticamente na sua instância Liferay.

Dica: O Blade CLI garante que seu tema esteja alinhado com as convenções do Liferay, facilitando atualizações e manutenibilidade futura.

Layouts e Modelos de Página

Visão geral e estratégias de reuso

O Liferay 7.4 oferece uma arquitetura robusta de modelos que permite criar, reutilizar e governar layouts de forma eficiente em toda a plataforma.

1 Página de Conteúdo vs Página de Widget

Página de Conteúdo: Editor visual arrastar-e-soltar com Fragmentos, ideal para páginas de marketing e conteúdo editorial. Permite mapeamento direto de campos de conteúdo.

Página de Widget: Layout tradicional baseado em portlets/widgets, seu uso é menos frequente a partir do 7.0, porém pode ser utilizado em alguns casos específicos para desenvolvimento mais rápido.

3 Páginas mestre

Definem elementos comuns a múltiplas páginas (header, footer, navegação). Alterações na Master Page se propagam automaticamente para todas as páginas que a utilizam, facilitando a manutenção.

Modelos de Página

2

Modelos reutilizáveis que definem estrutura, Fragmentos e configurações iniciais. Podem ser aplicados na criação de novas páginas, acelerando desenvolvimento e garantindo consistência visual.

Tipos: Modelo de Página de Conteúdo, Modelo de Página de Widget, Modelo de Página de Exibição (para exibição de conteúdo estruturado).

4 Salvar como modelo

Funcionalidade que permite transformar qualquer página existente em um modelo reutilizável. Útil para capturar layouts bem-sucedidos e replicá-los rapidamente em novos projetos ou sites.

Criando e Gerenciando Modelos de Página

Templates de Conteúdo e Templates de Widget

Criar modelo do zero (Página de Conteúdo)

Acesse:Menu ³ Design ³ Modelos de Página1.

Clique:"Novo" ³ "Modelo de Página de Conteúdo"2.

Configure:Nome, descrição e thumbnail3.

Construa:Arraste Fragmentos e configure layout4.

Defina:Áreas editáveis vs. fixas5.

Salve: Publique o modelo para uso6.

Salvar página existente como modelo

Abra a página que deseja transformar em modelo1.

Clique no menu de opções (î ) no topo2.

Selecione "Converter para Modelo de Página"3.

Defina nome, coleção e permissões4.

Confirme para criar o modelo5.

Aplicar modelo em novos sites/projetos

Ao criar uma nova página, selecione o modelo desejado na galeria. O conteúdo e estrutura serão copiados, mas você pode editá-los livremente sem afetar o modelo original.

Versionamento e boas práticas

O Liferay mantém histórico de versões dos modelos. Use o painel de versões para:

Comparar alterações entre versões

Reverter para versões anteriores se necessário

Dica: Estabeleça uma taxonomia clara para organizar modelos (ex.: Marketing/Institucional/Produto) e documente o propósito de cada um.

Biblioteca de Fragmentos Nativos

Componentes prontos para uso

O Liferay 7.4 oferece uma biblioteca extensa de Fragmentos nat ivos que cobrem os casos de uso mais comuns, permitindo construção rápida de páginas sem necessidade de código customizado.

Onde encontrar e como adicionar

No editor de páginas, clique na aba "Fragmentos e Widgets" no painel lateral esquerdo

2. Arraste o Fragmento desejado para a área de edição3.

Navegue pelas coleções: Basic Components, Content Display, Featured Content, Footers, Navigation Bars

Configure o conteúdo e estilos no painel direito4.

Publique a página para aplicar as alterações5.

Padrões de Fragmentos disponíveis

Containers: Section, Container, Grid - estruturas para organizar conteúdo

Grades: Layouts de 2, 3, 4 colunas com variações responsivas

Cartões: Card básico, Card com imagem, Card horizontal

Banner: Hero banner, Sliders/Carrosséis de imagens

Títulos e Parágrafos: Heading (H1-H6), Rich Text, Quote

Mídia: Imagem, Vídeo, Vídeo Externo (YouTube/Vimeo)

Navegação: Menu, Breadcrumb, Abas, Acordeões

Formulários: Botão, Grupo de Botões, Redes Sociais

Dicas de acessibilidade

Ao trabalhar com Fragmentos, sempre considere:

Semântica HTML: Use headings na ordem correta (H1 ³ H2 ³ H3), não pule níveis

Texto Alternativo: Sempre preencha textos alternativos descritivos para imagens

Landmarks: Use Fragmentos que geram tags semânticas (header, nav, main, footer)

Responsividade: Teste em diferentes tamanhos de tela e com zoom de 200%

Configuração de Fragmentos

Cada Fragmento possui opções configuráveis no painel direito:

Geral: Conteúdo, links, mapeamento de campos

Estilos: Cores, tipografia, espaçamentos, bordas

Avançado: Classes CSS customizadas, atributos HTML

Ao vivo (demo): Vamos arrastar um Fragmento de Card para a página, editar seu conteúdo, mapear uma imagem e ajustar os estilos visuais em tempo real.

Criando Fragmentos Customizados

Estrutura e boas práticas

Quando os Fragmentos nativos não atendem suas necessidades, você pode criar Fragmentos customizados com HTML, CSS, JavaScript e campos configuráveis.

Estrutura de um Fragmento

Um Fragmento customizado é composto por quatro arquivos principais:

index.html: Estrutura HTML do componente

main.css: Estilos CSS isolados main.js: Comportamentos JavaScript (opcional) configuration.json: Campos configuráveis

Exemplo de HTML

</div>

<div class="card-content"> <h3 class="card-title"> ${configuration.title}

</h3>

<p class="card-description"> ${configuration.description} </p>

<a href="${configuration.linkUrl}" class="card-link" > ${configuration.linkText}

</a>

</div>

Boas práticas de desenvolvimento

CSS Isolado

Use classes específicas e evite seletores genéricos. Prefira .custom-card ao invés de .card. Considere usar metodologia

BEM para nomenclatura.

Responsividade

Use media queries e unidades relativas (rem, em, %). Teste em diferentes dispositivos e orientações.

Documentação Oficial

Desenvolvendo Fragmentos de Página

Tipos de Configuração de FragmentosC

Exemplo de configuration.json

{ "fieldSets": [ { "label": "Conteúdo", "fields": [ { "name": "title", "type": "text", "label": "Título", "defaultValue": "Título do Card" }, { "name": "description", "type": "text", "label": "Descrição", "typeOptions": { "multiline": true } }, { "name": "imageUrl", "type": "image", "label": "Imagem" }, { "name": "imageAlt", "type": "text", "label": "Texto alternativo" } ] }, { "label": "Estilos", "fields": [

{ "name": "bgColor", "type": "colorPalette", "label": "Cor de fundo", "defaultValue": "#FFFFFF"

Sem dependências globais

Não dependa de bibliotecas JavaScript externas não incluídas no Liferay. Se necessário, inclua a biblioteca no próprio Fragmento ou use Extensões de Cliente.

Performance

Minimize JavaScript, evite manipulações DOM pesadas e use lazy loading para imagens quando apropriado.