Fragmentos na Liferay

Criar fragmentos no Liferay é uma técnica poderosa para desenvolvedores que desejam oferecer componentes customizados e reutilizáveis em seus sites. Este post aborda o processo de criação de fragmentos, as diferentes abordagens, como utilizá-los no portal e as vantagens de usar essa estratégia para desenvolvimento ágil e eficiente.

O que são Fragmentos no Liferay?

Fragmentos são blocos de código que podem ser usados para construir páginas no Liferay de forma modular. Eles permitem que você crie seções de conteúdo ou funcionalidades específicas que podem ser arrastadas e soltas em uma página por usuários de negócios ou desenvolvedores.

Os fragmentos são compostos por HTML, CSS e JavaScript e podem ser personalizados de acordo com as necessidades do projeto, proporcionando flexibilidade e maior controle sobre a aparência e o comportamento das páginas.

Formas de criar um Fragmento

1. Criação de Fragmentos via Liferay UI

A maneira mais simples de criar fragmentos no Liferay é por meio da interface de usuário (UI) do portal:

• 
  Passo 1: Acesse o painel de controle do Liferay e vá para Design > Fragmentos.


• 
  Passo 2: Crie uma nova coleção de fragmentos (opcional) para organizar seu trabalho.


• 
  Passo 3: Clique em Adicionar Fragmento e defina o nome do fragmento.


• 
  Passo 4: Insira o código HTML, CSS e JavaScript desejado no editor integrado.

Essa abordagem é excelente para desenvolvedores que preferem uma criação rápida e sem a necessidade de configurações externas. Ela permite que você visualize instantaneamente as alterações feitas no fragmento.

2. Desenvolvimento de Fragmentos com o Liferay CLI

Para um controle mais avançado e uso de ferramentas de desenvolvimento modernas, é recomendado usar o Liferay CLI e um editor de código:

• 
  Instale o Liferay CLI:
  

  npm install -g @liferay/cli

• 
  Crie um projeto de fragmento:
  

  liferay new my-fragment-project --type fragment

  cd my-fragment-project

Essa abordagem permite que você use ferramentas como webpack e editores de código como o Visual Studio Code para desenvolver fragmentos de forma profissional e colaborativa. O Liferay CLI também ajuda a fazer deploy local e exportar pacotes para deploy em produção.

3. Desenvolvimento de Fragmentos Personalizados via API

Se você precisa criar fragmentos programaticamente ou integrá-los com processos de automação, o Liferay oferece APIs para isso:

• Utilize a API de Fragmentos do Liferay para criar, atualizar e gerenciar fragmentos dinamicamente. Essa abordagem é útil para equipes que utilizam pipelines de CI/CD e desejam integrar a criação de fragmentos ao fluxo de desenvolvimento contínuo.

Estrutura de um Fragmento

Um fragmento no Liferay geralmente é estruturado em três componentes principais:

• 
  HTML: Define a estrutura do conteúdo.


• 
  CSS: Aplica o estilo ao fragmento.


• 
  JavaScript: Adiciona comportamento interativo.

Exemplo de um Fragmento Simples:

<!-- HTML -->

<div class="custom-fragment">

    <h2>Bem-vindo ao meu Fragmento Personalizado</h2>

    <p>Este é um exemplo de fragmento com HTML e JavaScript.</p>

</div>

/* CSS */

.custom-fragment {

    background-color: #f0f8ff;

    padding: 20px;

    border-radius: 5px;

}

// JavaScript

document.addEventListener('DOMContentLoaded', function() {

    alert('Fragmento carregado com sucesso!');

});

Utilização de Fragmentos

Depois de criar um fragmento, ele pode ser facilmente utilizado nas páginas do Liferay:

• 
  Drag-and-Drop: Acesse o Page Editor, selecione o fragmento e arraste-o para o local desejado na página.


• 
  Edição Inline: Fragmentos podem ter áreas de edição inline que permitem que os usuários façam ajustes sem a necessidade de código.


• 
  Conteúdo Dinâmico: Fragmentos podem ser configurados para buscar conteúdo de APIs externas ou usar dados dinâmicos por meio de variáveis globais e endpoints REST.

Vantagens do Uso de Fragmentos

1. 
   Reutilização e Consistência: Fragmentos podem ser reutilizados em diversas páginas, garantindo consistência visual e comportamental.


2. 
   Desenvolvimento Modular: Permite uma abordagem de desenvolvimento modular, onde equipes diferentes podem trabalhar em diferentes fragmentos simultaneamente.


3. 
   Fácil Manutenção: A separação de HTML, CSS e JavaScript facilita a manutenção e atualização de cada componente.


4. 
   Personalização sem Programação: Usuários com pouco conhecimento técnico podem personalizar fragmentos pré-existentes por meio da interface do Liferay.


5. 
   Desempenho Melhorado: Fragmentos otimizados ajudam a reduzir a carga da página e a melhorar o tempo de resposta, especialmente se usados com práticas modernas de carregamento assíncrono.

Melhores Práticas para Criação de Fragmentos

• 
  Mantenha o Código Limpo e Modular: Separe responsabilidades claramente entre HTML, CSS e JavaScript.


• 
  Use Classes de Estilo Únicas: Para evitar conflitos de CSS, use nomes de classes que sejam únicos e específicos para cada fragmento.


• 
  Teste em Diferentes Dispositivos: Certifique-se de que o fragmento seja responsivo e testado em vários dispositivos para garantir a melhor experiência do usuário.


• 
  Comentários e Documentação: Adicione comentários no código para facilitar a manutenção e compreensão por parte de outros desenvolvedores.

Conclusão

A criação de fragmentos no Liferay oferece uma maneira eficiente e moderna de construir páginas dinâmicas e personalizadas. Com várias opções de desenvolvimento — desde a interface amigável até soluções avançadas com CLI e API — o Liferay atende a desenvolvedores e equipes de negócios, permitindo que entreguem valor rapidamente e com alta flexibilidade.

Fontes para Consulta

1. Documentação Oficial do Liferay DXP:




2. Comunidade Liferay: Liferay Community Forums

Gostou? Deixe um ❤️ e compartilhe com sua rede para que mais desenvolvedores possam explorar fragmentos personalizados em Liferay!