DEV Community: Carlos Fortes

Frontend in Liferay 7.4: The Revolution You Need to Know About

Carlos Fortes — Fri, 30 May 2025 13:01:42 +0000

Hey there, fellow dev! If you work with Liferay, buckle up because I'm about to tell you how version 7.4 completely changed the game. You know that feeling when someone finally gets what we actually need? That's exactly what I felt when I started working with these new tools.

I'll be straight with you: frontend development in Liferay will never be the same. And that's AWESOME!

Blade CLI: The Swiss Army Knife That Evolved into a Lightsaber

Remember when Blade was just that little code generator that created portlets? Forget about it! This thing is on another level now. Today, when you type:

blade create -t client-extension-react my-awesome-component

You're not creating those heavy old-school portlets anymore. You're creating actual micro-frontends that live their own lives, with their own deployment cycles. It's like going from a '72 Beetle to a Tesla.

What Really Changed?

Hot-reload that actually works: That torture of waiting 5 minutes to see if the button turned blue or red? Gone. Change it, save it, BAM! It's there on your screen.

Integrated NPM: Want to use that cool lib that came out yesterday? npm install and be happy. No hacks, no workarounds.

Turbocharged local development: Run everything locally, test everything locally, only push to the server when it's perfect.

I literally save about 2 hours a day just by not having to deploy to test every little thing. Seriously, do the math on what that means in a month!

Client Extensions: Bye Bye, Problematic Shared Libraries!

OK, this is the part that gets me most excited. Client Extensions are like those old shared libraries, but on steroids. It's code sharing done right.

Why This is Revolutionary

Picture this: you have an extension running React 18 with the latest TypeScript. Your colleague has another one using Vue 3. In the old days? Conflict for sure. Today? Each one in their own sandbox, everybody's happy.

And the best part: deploy without breaking anything. That's right. Update the extension, deploy it, and the portal doesn't even blink. It's like changing tires while the car is moving (but in a safe way, of course).

In Practice, How Does It Look?

// client-extension.yaml
my-awesome-analytics:
  type: themeJS
  urls:
    - js/analytics-that-works.js

products-catalog-2025:
  type: customElement
  urls:
    - js/catalog.js
  cssURLs:
    - css/stylish-catalog.css
  friendlyURLMapping: products

Simple as that. Declare what you want, where the code is, and Liferay makes the magic happen.

Real Cases That Saved My Day

External service integration: Needed to integrate with a new payments API. Created a Client Extension, developed everything in isolation, tested until perfect. Deploy? 30 seconds. Zero downtime.

Actually reusable components: Created a cool charts component in an extension. Now I use it in 5 different projects. Copy and paste? Never again!

Lexicon/Clay: The Design System That Makes Sense

I'll confess something: I was skeptical about design systems. "Oh, it's gonna make everything rigid," I thought. My friend, how wrong I was!

Lexicon/Clay isn't just a pretty library. It's a complete arsenal that saves you from reinventing the wheel every single day.

Performance You Can Feel

You know when the client complains the site is slow? With Clay, this problem shrinks A LOT. Why?

Reduced bundle size: Everyone uses the same components = less JavaScript to download
Optimized CSS: CSS variables work miracles. Changed the primary color? Changes EVERYTHING without reloading
Smart caching: The browser loves it when you use the same stuff. Load once, use forever

Consistency That Users Thank You For

It's not just about pretty code. It's about happy users. With Clay:

Free accessibility: All components come with ARIA labels, keyboard navigation, everything done right
Predictable behavior: User learns once how a modal works, and all modals work the same
Effortless responsive: Works on desktop, tablet, grandma's phone. All automatic

Code That Makes Sense

import {ClayButton, ClayModal} from '@clayui/core';
import {useLiferay} from '@liferay/frontend-js-react-web';

function MyAwesomeComponent() {
  const [showModal, setShowModal] = useState(false);

  return (
    <>
      <ClayButton 
        displayType="primary"
        onClick={() => setShowModal(true)}
      >
        Click me!
      </ClayButton>

      {showModal && (
        <ClayModal
          observer={observer}
          size="lg"
        >
          <ClayModal.Header>
            Look how cool!
          </ClayModal.Header>
          <ClayModal.Body>
            Beautiful, functional, and accessible component.
            No extra effort!
          </ClayModal.Body>
        </ClayModal>
      )}
    </>
  );
}

Clean, clear, and works anywhere in Liferay. That's what I call productivity!

Stylebooks: Customization Without Headaches

Here's a truth: clients love changing colors. "Oh, this blue is too blue, can you make it more light-blue?"

In the old days? Nightmare. Today? Stylebooks!

How Does This Magic Work?

Stylebooks are like themes on steroids. You define design variables (colors, spacing, shadows) and they propagate to EVERYTHING. Even your Client Extensions automatically get these variables.

/* Your CSS in Client Extensions */
.my-special-card {
  background: var(--primary-background);
  border-radius: var(--border-radius-default);
  padding: var(--spacing-medium);
  /* Gets everything from Stylebook! */
}

Client wants to change the primary color? Go to Stylebook, change it there, and BOOM! Entire site updated. No deploy, no compiling anything.

Power in the Client's Hands (But Controlled)

The best thing about Stylebooks is that you, the dev, set the limits. The client can change colors, fonts, spacing... but within what makes sense. No more "the client broke the layout because they touched where they shouldn't."

Putting It All Together: The Dream Workflow

Now comes the coolest part. When you combine all these tools, development goes like this:

Create the project with Blade: blade create and you already have the structure ready
Develop with Client Extensions: Isolated, testable, reusable code
Use Clay Components: Consistent and beautiful interface without effort
Stylebooks to customize: Happy client, happy you, everybody happy

A Real Day in the Life

Just yesterday, I needed to create a new dashboard. Process:

9am: blade create -t client-extension-react sales-dashboard
9:30am: Already had the base components working with Clay
11am: Complete dashboard, with charts, tables, all responsive
11:30am: Deploy via Client Extension (30 seconds!)
2pm: Client asked to change the colors. Stylebook. 5 minutes.
2:05pm: Having coffee ☕

In the old days? Would easily take 3 days.

Tips from Someone in the Trenches

Start Small

Don't try to migrate everything at once. Take one component, turn it into a Client Extension, watch the magic happen.

Embrace Clay

Resist the temptation to create your own components. Clay has almost everything you need, and what it has is tested, optimized, and accessible.

Stylebooks from the Start

Even if the client doesn't ask for it, set up Stylebooks. Trust me, at some point they'll want to change something.

Documentation is Your Friend

Liferay's docs have improved A LOT. And the community on Slack is super active. Don't be shy about asking questions.

The Future is Now

Folks, I won't lie: migrating to this new model takes a bit of initial work. But the payoff is huge. Faster development, cleaner code, safer deploys, happier clients.

If you're still developing old-school portlets, it's time to evolve. Liferay 7.4 isn't just a version update - it's a paradigm shift.

And the best part: the learning curve isn't as steep as it seems. In two weeks you'll be flying with the new tools.

Conclusion: Is It Worth It?

1000% yes! The combination of Blade CLI + Client Extensions + Clay completely changed my productivity (and mental sanity).

What used to be complex and time-consuming is now simple and fast. What used to be "hope it works" is now "it works and I know why."

If you develop in Liferay, there's no excuse not to dive into these technologies. Your future self will thank you - and so will your clients!

Let's code? 🚀

PS: If you're already using these tools, share your experiences! And if you're not yet, how about starting today? The Liferay community is here to help!

Site Initializers: Automação e Personalização do Ambiente de Desenvolvimento

Carlos Fortes — Thu, 14 Nov 2024 09:57:53 +0000

Olá amig@s,

Se você já configurou um site no Liferay, sabe que pode ser um processo detalhado, exigindo a criação de páginas, a adição de conteúdo, a configuração de layouts e muito mais. Para simplificar e automatizar essa tarefa, o Liferay oferece os Site Initializers. Eles são uma forma de pré-configurar ambientes completos de site com um único deploy, agilizando o desenvolvimento e a implantação de novos sites. Neste post, vamos ver o que são os Site Initializers, como criar um, comparar com outras abordagens de inicialização e compartilhar melhores práticas.

O que são os Site Initializers?

Os Site Initializers são uma forma de definir um conjunto completo de páginas, conteúdo, configurações e até personalizações em um pacote que pode ser implantado facilmente no Liferay. Eles automatizam a criação de sites, proporcionando rapidez e consistência para projetos que precisam de múltiplos sites semelhantes ou de sites com uma estrutura complexa.

Por que usar Site Initializers?

Automação completa: Crie sites completos com páginas, conteúdos, temas e configurações personalizadas com um único deploy.
Consistência: Garante que todos os sites criados tenham a mesma estrutura, aparência e funcionalidades.
Agilidade no desenvolvimento: Economiza tempo configurando ambientes repetitivos manualmente.

Como Criar um Site Initializer

Criar um Site Initializer envolve algumas etapas básicas que podem ser desenvolvidas fora da UI do Liferay, como uma Client Extension.

1. Configuração do Projeto

Primeiro, crie um projeto de Site Initializer usando o Liferay CLI:

npx @liferay/cli new my-site-initializer --type client-extension
cd my-site-initializer

Essa estrutura fornecerá a base necessária para começar a desenvolver o Site Initializer. Certifique-se de que a pasta src tenha as subpastas necessárias, como pages, fragments, style-books, entre outras, que refletem o conteúdo que você deseja incluir no site inicial.

2. Definição do Arquivo de Configuração

No client-extension.yaml, defina as propriedades do Site Initializer:

name: my-site-initializer
type: site-initializer
version: 1.0.0
description: "Meu primeiro Site Initializer"

3. Criação de Páginas e Conteúdo

Dentro da estrutura do projeto, adicione arquivos JSON para descrever a configuração de páginas, widgets e conteúdos. Um exemplo de arquivo JSON para criar uma página inicial (pages/home.json):

{
    "name": "Home",
    "type": "page",
    "layoutTemplateId": "1_column",
    "friendlyURL": "/home"
}

Adicione também conteúdos como web contents ou fragments personalizados, que serão incluídos automaticamente durante a inicialização do site.

4. Deploy e Teste

Para fazer o deploy do Site Initializer, empacote a extensão e carregue-a no Liferay:

liferay deploy

Depois de fazer o deploy, vá ao painel de controle do Liferay, crie um novo site e selecione o Site Initializer como a base. Isso aplicará automaticamente todas as configurações e conteúdos pré-definidos.

Aplicação de Site Initializers em Projetos Reais

Os Site Initializers são perfeitos para projetos que precisam de múltiplos sites com a mesma base, como redes de franquias, intranets de grandes empresas ou portais de conteúdo com um layout padrão. Eles também são úteis em ambientes de desenvolvimento onde você precisa recriar um ambiente de teste rapidamente.

Comparação com Outras Abordagens de Inicialização

Critério	Site Initializers	Criação Manual	Estratégias Customizadas
Complexidade	Moderada — configuração com código	Alta — exige configurações repetidas	Alta — exige scripts e APIs customizadas
Tempo de Deploy	Rápido — deploy e criação automáticos	Lento — manual e demorado	Variável — depende do nível de automação
Flexibilidade	Alta — pode incluir tudo, de páginas a temas	Depende da capacidade manual	Muito alta — depende do desenvolvimento
Manutenção	Fácil de manter e atualizar	Difícil, propenso a erros	Exige mais esforço e monitoramento

Melhores Práticas para Uso de Site Initializers

Modularize seus conteúdos: Organize o projeto em seções lógicas, como pages, content, fragments, e style-books, para facilitar a manutenção e a atualização.
Documente os passos de inicialização: Mantenha um README detalhando as funcionalidades e a estrutura do Site Initializer.
Use variáveis consistentes: Defina tokens de estilo nos style-books para garantir consistência visual.
Teste extensivamente: Antes de usar em produção, teste o Site Initializer em um ambiente de desenvolvimento para confirmar que todas as páginas e conteúdos são criados corretamente.
Mantenha backups das versões: Garanta que você tenha versões anteriores em caso de rollback ou necessidade de comparar mudanças.

Criando um Exemplo de Site Initializer com Código

Estrutura do client-extension.yaml:

name: my-company-initializer
type: site-initializer
version: 1.0.0
description: "Site Initializer para novos sites da empresa"

Exemplo de uma página (src/pages/about-us.json):

{
    "name": "About Us",
    "type": "page",
    "layoutTemplateId": "2_columns",
    "friendlyURL": "/about-us",
    "content": [
        {
            "type": "web-content",
            "contentId": "company-overview"
        }
    ]
}

Esse exemplo cria uma página "About Us" que inclui um conteúdo web chamado "company-overview". Com esse tipo de configuração, você pode replicar rapidamente sites completos, garantindo que todos os elementos importantes estejam prontos no momento da criação.

Conclusão

Os Site Initializers são uma ferramenta essencial no Liferay para quem busca automação e consistência na criação de sites. Eles permitem que equipes criem novos ambientes em minutos, com tudo pré-configurado e pronto para uso. Comparados a processos manuais ou customizações complexas, eles são mais rápidos, fáceis de manter e oferecem flexibilidade suficiente para a maioria dos casos de uso.

Explore os Site Initializers e veja como eles podem simplificar e acelerar a criação de sites personalizados no Liferay!

Fragmentos no Liferay

Carlos Fortes — Wed, 13 Nov 2024 09:38:45 +0000

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

Reutilização e Consistência: Fragmentos podem ser reutilizados em diversas páginas, garantindo consistência visual e comportamental.
Desenvolvimento Modular: Permite uma abordagem de desenvolvimento modular, onde equipes diferentes podem trabalhar em diferentes fragmentos simultaneamente.
Fácil Manutenção: A separação de HTML, CSS e JavaScript facilita a manutenção e atualização de cada componente.
Personalização sem Programação: Usuários com pouco conhecimento técnico podem personalizar fragmentos pré-existentes por meio da interface do Liferay.
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

Documentação Oficial do Liferay DXP: Documentação de Desenvolvimento do Liferay DXP
Exemplos e Recursos de Fragmentos: Liferay GitHub
Comunidade Liferay: Liferay Community Forums

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

Client Extension no Liferay

Carlos Fortes — Wed, 13 Nov 2024 01:00:00 +0000

Client Extensions são uma maneira moderna de integrar ou personalizar o Liferay sem a necessidade de desenvolvimento profundo diretamente no servidor. Elas permitem que você mantenha uma arquitetura desacoplada, facilitando o desenvolvimento e a manutenção contínua.

Em resumo, as client extensions são aplicações externas que interagem com o Liferay por meio de APIs e endpoints personalizados, aproveitando tecnologias modernas como React, Angular, e Vue.js.

Passos para criar uma Client Extension no Liferay

1. Preparação do ambiente de desenvolvimento

Antes de iniciar a criação de uma client extension, é necessário configurar o ambiente de desenvolvimento. Certifique-se de que possui as seguintes ferramentas instaladas:

Liferay DXP ou Liferay CE (dependendo da sua versão preferida)
Node.js e npm/yarn (para gerenciar pacotes e dependências)
Liferay CLI (Liferay Project Generator)

2. Configuração do projeto

A criação de uma client extension começa com a configuração do projeto em si. Utilize o Liferay CLI para inicializar um projeto de extensão:

npx @liferay/cli new <nome-do-projeto> --type client-extension
cd <nome-do-projeto>

Esse comando cria a estrutura básica do projeto, incluindo diretórios específicos para códigos JavaScript/React e arquivos de configuração.

3. Desenvolvimento da extensão

Agora que você tem a estrutura do projeto configurada, é hora de começar a desenvolver a extensão. Dependendo do que deseja criar, o desenvolvimento pode variar. Por exemplo, se você está desenvolvendo um widget React, deve estruturar os componentes dentro da pasta src e configurar corretamente os pontos de entrada no arquivo webpack.config.js.

Exemplo de um componente React simples:

import React from 'react';
import ReactDOM from 'react-dom';

const MeuWidget = () => {
    return <div>Olá, Liferay!</div>;
};

export default MeuWidget;

// Renderização no ponto de entrada
if (document.getElementById('meu-widget-root')) {
    ReactDOM.render(<MeuWidget />, document.getElementById('meu-widget-root'));
}

4. Configuração do manifesto

O Liferay utiliza um arquivo de manifesto (client-extension.json) para identificar e configurar a extensão:

{
    "name": "meu-widget",
    "type": "custom-element",
    "description": "Um exemplo de widget personalizado",
    "friendlyURLMapping": "meu-widget",
    "typeSettings": {
        "htmlElementName": "meu-widget"
    }
}

Esse arquivo define informações essenciais como o tipo da extensão, descrições, URLs amigáveis, e configurações específicas.

5. Teste e deploy

Depois de finalizar o desenvolvimento e configurar o manifesto, é importante testar a extensão localmente para garantir que tudo funcione conforme o esperado.

Build do projeto: Para criar a versão final da sua extensão, execute o comando de build:

  npm run build

Deploy no Liferay: Para fazer o deploy, mova os arquivos compilados para o diretório de deploy do Liferay ou utilize o comando CLI específico para client extensions:

  liferay deploy

6. Integração e configuração no Portal

Uma vez que o deploy for realizado com sucesso, a extensão aparecerá no painel de administração do Liferay. Para configurá-la:

Navegue até a seção de Configurações > Client Extensions.
Adicione a nova extensão ao layout desejado, configurando sua visualização e permissões conforme necessário.

Melhores práticas e dicas

Modularização do Código: Mantenha o código da client extension modular para facilitar a manutenção e evolução do projeto.
Documentação e Comentários: Adicione comentários explicativos e mantenha uma boa documentação interna para que outros desenvolvedores possam entender o propósito e a funcionalidade da extensão.
Segurança: Evite o uso de dados sensíveis diretamente no código da extensão. Utilize APIs seguras para proteger informações confidenciais.
Responsividade: Certifique-se de que a extensão seja responsiva e funcione bem em diferentes dispositivos.

Conclusão

Criar uma client extension no Liferay permite uma enorme flexibilidade para personalizar e estender as funcionalidades do portal, trazendo inovações rápidas e específicas às suas necessidades de negócio. O processo requer conhecimento técnico sobre desenvolvimento de front-end, ferramentas de build e uma compreensão clara do Liferay CLI, mas os resultados podem transformar a experiência de uso para os administradores e usuários finais do portal.

Fontes para Consulta

Documentação Oficial do Liferay DXP: Documentação de Desenvolvimento do Liferay DXP
Exemplos de Código e Recursos Open Source: Liferay GitHub

Gostou? Deixe um ❤️ e compartilhe com sua rede para que mais desenvolvedores possam explorar Client Extensions no Liferay!

Style Books no Liferay: Personalização simplificada com flexibilidade

Carlos Fortes — Tue, 12 Nov 2024 16:19:00 +0000

Se você já trabalhou com o Liferay e pensou em personalizar a aparência das suas páginas sem a complexidade de desenvolver um theme do zero, os Style Books são a solução perfeita. Mas a grande vantagem é que você não precisa escolher entre Style Books e Themes — você pode usar os dois para ter o máximo de flexibilidade e controle. Neste post, vou explicar como usar ambos para customizações robustas, mostrar como criar um Style Book, compará-los com os _themes _tradicionais e compartilhar as melhores práticas.

O que são Style Books?

Os Style Books são uma forma de definir e aplicar estilos personalizados às páginas do Liferay. Basicamente, eles funcionam como uma coleção de variáveis de estilo — pense em cores, tipografias, espaçamentos e outros elementos visuais — que podem ser aplicadas globalmente a um site. O ponto positivo é que, ao contrário dos themes, eles não requerem deploy de código no servidor e podem ser gerenciados diretamente pela interface do Liferay.

Por que usar Style Books?

Customização visual rápida e fácil.
Atualizações em tempo real.
Desenvolvimento sem Java, direto pelo UI do Liferay.
Controle granular sobre elementos de design.

Como usar Themes e Style Books em conjunto

Um dos aspectos mais interessantes do Liferay é que você pode combinar o poder dos Themes e Style Books. Os _Themes _oferecem uma personalização completa e controlada do portal, permitindo modificações profundas que envolvem JavaScript, Java e outras tecnologias de back-end. Por outro lado, os Style Books são ideais para ajustes visuais rápidos e sem deploy.

Cenário combinado:

Theme: Use-o para criar a estrutura geral do site, incluir elementos específicos de layout e recursos que exigem código de backend.
Style Book: Use-o para aplicar estilos e variar a aparência de forma rápida, sem precisar modificar o código do theme. Ideal para realizar mudanças de última hora ou adaptar o visual para campanhas temporárias.

Essa combinação permite que você mantenha a consistência do design e faça ajustes rápidos sem o processo de recompilação e redeploy do theme.

Criando um Style Book do zero

1. Acesse a Área de design do Liferay

Vá até o Painel de Controle > Design > Style Books. Lá, você verá uma lista de Style Books existentes e a opção para criar um novo.

2. Crie um novo Style Book

Clique em Adicionar Style Book e dê um nome a ele. Você verá a interface onde pode definir variáveis de estilo, como:

Cores primárias e secundárias.
Tipografia padrão (tipos de fonte e tamanhos).
Espaçamentos e margens.

3. Defina estilos customizados

Aqui está o truque: você pode definir estilos de forma visual. Se quiser ir além, pode também inserir customizações CSS para ter ainda mais controle.

Exemplo de CSS customizado:

body {
    font-family: 'Roboto', sans-serif;
}

h1, h2, h3 {
    color: var(--primary-color);
}

Essas variáveis podem ser aplicadas de forma consistente ao longo do site, e qualquer atualização no Style Book reflete automaticamente em todas as páginas que o utilizam.

Aplicando Style Books com _Themes _ativos

Depois de criar e configurar o seu Style Book, ele pode ser aplicado mesmo se um _theme _personalizado estiver ativo. Isso permite que você mantenha o layout e a funcionalidade do theme, mas faça ajustes visuais rápidos com o Style Book.

Vá para Configurações do Site (Painel de Controle > Sites > Site desejado > Design > Configurações de Estilo).
Selecione o Style Book desejado.
Salve as alterações para ver a nova aparência do site com o theme base e as mudanças do Style Book.

Comparação: Style Books vs. Themes

Critério	Style Books	Themes
Complexidade	Baixa — ideal para customizações rápidas	Alta — envolve desenvolvimento com Java e Gulp
Deploy	Não requer deploy de código	Requer deploy e build no servidor
Flexibilidade	Configuração via UI, fácil de ajustar	Total, mas com complexidade de código
Uso de Código	Possibilidade de CSS customizado	Full control (JavaScript, CSS, Java, etc.)
Atualização	Rápida e em tempo real	Exige recompilação e redeploy

Vantagens de usar Themes e Style Books em Conjunto

Personalização Completa e Flexível: O theme oferece uma base sólida, enquanto o Style Book permite ajustes rápidos.
Menos Tempo de Deploy: Pequenas mudanças podem ser feitas com o Style Book sem necessidade de recompilar o theme.
Consistência com Variabilidade: Aplique variações de design para diferentes seções ou campanhas sem alterar o theme base.
Redução de Custos de Desenvolvimento: Menos tempo gasto para ajustes visuais, permitindo que a equipe de desenvolvimento se concentre em outras funcionalidades complexas.

Melhores práticas para uso de Style Books

Mantenha as Variáveis Consistentes: Use nomes descritivos para facilitar o entendimento.
Evite Estilos em Conflito: Se estiver usando um theme, garanta que os estilos do Style Book complementem os do theme, em vez de sobrescrevê-los de maneira imprevisível.
Testes e Validação: Teste o site em diferentes dispositivos para confirmar a responsividade e a aplicação correta dos estilos.
Aproveite para Testar Novas Ideias: Style Books são uma ótima maneira de experimentar novas paletas de cores e fontes sem mexer na base de código do theme.

Conclusão

Os Style Books oferecem uma solução prática e rápida para customizações visuais no Liferay. Usados em conjunto com themes, eles permitem personalização total com facilidade de manutenção e aplicação. Com essa abordagem, você pode aproveitar o melhor dos dois mundos — a robustez de um theme personalizado e a flexibilidade de atualizações rápidas de estilo com os Style Books.

Fontes para Consulta

Documentação Oficial do Liferay DXP: Documentação de Desenvolvimento do Liferay DXP
Exemplos de Código e Recursos Open Source: Liferay GitHub

Explore as possibilidades dos Style Books e veja como eles podem transformar a maneira como você gerencia a aparência do seu site no Liferay!

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

Personalizar o Liferay para atender às necessidades específicas da sua empresa

Carlos Fortes — Tue, 12 Nov 2024 13:18:49 +0000

Personalizar o Liferay para atender às necessidades específicas da sua empresa pode melhorar bastante a experiência do utilizador e a eficiência operacional. Neste post, vamos fazer um overview de como personalizar temas, configurar páginas, usar templates, criar portlets customizados, além de utilizar Style Books, Fragmentos e Client Extensions.

Personalização de Temas

O que são Temas no Liferay?

Os temas no Liferay definem a aparência e o layout do portal. Eles controlam a estética e a disposição das páginas, permitindo uma personalização completa para refletir a identidade visual da sua empresa.

Como Criar um Tema Personalizado

Instalação do Liferay Theme Generator: Primeiramente, instala o gerador de temas Liferay usando o npm:
```
npm install -g generator-liferay-theme
```
Criação do Tema: Cria um novo tema com o comando:
```
yo liferay-theme
```
Desenvolvimento e Customização: Personaliza os arquivos CSS, JavaScript, e templates dentro da estrutura do tema.
Deploy do Tema: Faz o deploy do tema no teu portal Liferay.

Configuração de Páginas

Criando e Configurando Páginas

Acesso ao Painel de Controle: No Liferay, vai até ao Painel de Controle e seleciona "Páginas do Site".
Criação de Páginas: Clica em "Adicionar Página" e escolhe o tipo de página (página em branco, com layout, etc.).
Configuração de Layout: Personaliza o layout da página arrastando e soltando diferentes componentes (portlets).
Aplicação de Temas: Aplica o tema personalizado que criaste para alterar a aparência das páginas.

Uso de Templates

Templates de Exibição

Templates de exibição permitem definir como o conteúdo será mostrado aos utilizadores. Eles são especialmente úteis para personalizar a aparência de blogs, wikis e outros aplicativos de conteúdo.

Criação de Template: No Painel de Controle, vai até "Templates de Exibição" e clica em "Adicionar".
Desenvolvimento: Utiliza a linguagem Freemarker (ou Velocity) para definir a estrutura e o estilo do conteúdo.
Aplicação de Template: Aplica o template de exibição ao conteúdo específico que desejas personalizar.

Criação de Portlets Customizados

O que são Portlets?

Portlets são componentes de interface que podem ser adicionados a páginas no Liferay. Eles são semelhantes a widgets e podem ser usados para mostrar diferentes tipos de conteúdo e funcionalidades.

Criando um Portlet Customizado

Configuração do Ambiente de Desenvolvimento: Certifica-te de que tens o SDK do Liferay configurado.
Criação do Portlet: Utiliza o comando abaixo para criar um novo portlet:
```
blade create -t mvc-portlet -d [diretório] [nome-do-portlet]
```
Desenvolvimento: Personaliza o código do portlet conforme necessário, utilizando Java para a lógica de backend e JSP (ou outras tecnologias de frontend) para a interface.
Deploy do Portlet: Faz o deploy do portlet no Liferay e adiciona-o à página desejada.

Uso de Style Books

O que são Style Books?

Style Books são coleções de estilos que permitem definir visualmente a aparência de componentes e páginas dentro do Liferay. Eles facilitam a aplicação de uma identidade visual consistente em todo o portal.

Como Criar e Aplicar Style Books

Acesso ao Painel de Controle: Vai até "Design" e seleciona "Style Books".
Criação de um Style Book: Clica em "Adicionar Style Book" e define os estilos para diferentes elementos, como fontes, cores e espaçamentos.
Aplicação do Style Book: Aplica o Style Book às páginas ou seções desejadas para garantir uma aparência consistente.

Uso de Fragmentos

O que são Fragmentos?

Fragmentos são pequenos blocos de conteúdo que podem ser combinados para criar páginas personalizadas. Eles permitem uma construção de páginas mais modular e flexível.

Como Criar e Usar Fragmentos

Acesso ao Painel de Controle: Vai até "Conteúdo e Dados" e seleciona "Fragmentos".
Criação de Fragmentos: Clica em "Adicionar Fragmento" e constrói o fragmento utilizando HTML, CSS e JavaScript.
Adição de Fragmentos às Páginas: Arrasta e solta os fragmentos nas páginas para construir layouts personalizados de forma rápida e fácil.

Uso de Client Extensions

O que são Client Extensions?

Client Extensions são uma nova forma de estender a funcionalidade do Liferay, utilizando tecnologias modernas como React, Angular, ou Vue.js. Elas permitem uma integração mais suave e flexível com o front-end moderno.

Como criar e usar Client Extensions

Configuração do Ambiente de Desenvolvimento: Configura o ambiente para desenvolvimento de Client Extensions, incluindo Node.js e o Liferay CLI.
Criação de uma Client Extension: Utiliza o comando abaixo para criar uma nova Client Extension:
```
liferay new client-extension
```
Desenvolvimento: Desenvolve a Client Extension utilizando o framework de tua escolha (React, Angular, Vue.js, etc.), integrando com APIs do Liferay conforme necessário.
Deploy da Client Extension: Faz o deploy da Client Extension no Liferay e adiciona-a às páginas ou aplicativos desejados.

Conclusão

Personalizar o Liferay pode parecer desafiador no início, mas com estas orientações, podes adaptar a plataforma para atender exatamente às necessidades da tua empresa. Desde a personalização de temas e configuração de páginas até o uso de templates, criação de portlets customizados, Style Books, Fragmentos e Client Extensions, o Liferay oferece uma ampla gama de ferramentas para criar um portal verdadeiramente único e eficiente.

Nos próximos posts, irei aprofundar cada um destes tópicos, fornecendo tutoriais detalhados e exemplos práticos. Fica atento para aprender mais sobre como tirar o máximo proveito do Liferay!

Espero que este guia te ajude a começar a personalizar o Liferay! Deixe um ❤️ e compartilha a tua experiência nos comentários ou pergunta se precisares de ajuda com alguma etapa do processo. Estamos aqui para ajudar!

Introduction to Liferay: An Overview

Carlos Fortes — Tue, 12 Nov 2024 12:20:32 +0000

Hello friends,

Having worked with Liferay for a few years, I often get questions like:

But what is Liferay?

Why use Liferay?

What does a Liferay developer do?

In this post, I will try to introduce Liferay, show how to install the platform with Docker, and provide some resources for further learning.

What is Liferay?

Liferay is an open-source enterprise portal platform that simplifies the creation of engaging digital experiences. It offers robust content management, collaboration, and personalization features, making it a popular choice for businesses looking to build powerful web portals.

Key Features:

Collaboration Portal: Liferay offers collaboration features like blogs, forums, wikis, and calendars that enable user interaction and collaboration.
Content Management: Allows efficient creation, publication, and management of content, including documents, web pages, images, and videos.
Application Integration: Facilitates integration with other applications and systems, allowing users to access information from different sources in one place.
Personalization: Provides advanced personalization features to tailor the user experience to individual preferences.
Security: Robust security features to protect sensitive data and ensure compliance with regulations.
Scalability: Designed to be scalable, allowing organizations of different sizes to implement solutions based on Liferay.
Open Source: Distributed under the GNU General Public License (GPL).
Low-Code/No-Code: Recently adopting low-code or no-code approaches to make application development accessible to non-technical users.

Liferay offers two main editions: Community Edition (CE) and Liferay DXP (Digital Experience Platform).

Community Edition (CE): The free and open-source edition of Liferay, available for download and use under the GNU General Public License (GPL).
Liferay DXP: The enterprise edition of Liferay requiring a paid license, offering additional features aimed at organizations needing advanced capabilities, enterprise support, and stability guarantees.

Due to its flexibility and extensibility, Liferay is often used by organizations to develop corporate portals, intranets, extranets, and other collaborative web solutions. Written in Java, it can run on various application servers, making it a versatile choice for developing complex web platforms. The official Liferay documentation is a great place to learn more.

Why Use Liferay?

For Small and Large Companies

Flexibility: Enables the creation of personalized digital experiences to meet specific business needs.
Scalability: Ideal for both small businesses and large corporations, adapting to company growth.
Cost-Effective: The Community Edition is free, making it ideal for businesses with limited resources. Companies can start with CE and upgrade to DXP as they grow.

Advantages Over Other CMS

Headless Architecture: Unlike traditional CMS, Liferay allows content to be published on any platform or device, offering greater flexibility.
Integration with Other Technologies: Robust APIs that facilitate integration with other tools and systems like CRM, marketing, and web analytics.
Advanced Content Management: Features like no-code content creation, workflow management, and content personalization.

Competitors and Competitive Advantages

Some competitors of Liferay include:

WordPress: Great for blogs and small sites but may lack the robustness needed for large corporate portals.
Drupal: Highly flexible and powerful but can be more complex to set up and manage.
Joomla: Suitable for medium-sized sites but may not offer the same scale and level of customization as Liferay.

How to Get Started with Liferay?

Initial Steps:

Assessment and Planning: Evaluate your needs and plan how Liferay can meet your specific demands.
Installation and Configuration: Install Liferay and configure the platform according to your needs.
Training and Development: Train your team to use Liferay and develop customized content and functionalities.
Integration and Testing: Integrate Liferay with other platforms and systems, and conduct tests to ensure everything works correctly.

Test with Docker

The quickest way to test the platform is by using Docker.

Step-by-Step Guide:

Install Docker: Ensure Docker is installed on your machine. You can find detailed instructions on the Docker official site.
Pull Liferay Image: Run the following command to download the Liferay image from Docker Hub:
```
docker pull liferay/portal:latest
```
Access Liferay: Open your browser and go to http://localhost:8080. Follow the initial setup instructions for Liferay.

Where to Learn More?

Besides the official Liferay documentation, check out the blog for the latest news. I also recommend the official Slack and the YouTube channel. For beginners, the Simplify Tecnologia YouTube channel offers excellent videos on Liferay installation and configuration.

Hopefully, you now have a basic understanding of what Liferay is and successfully installed Liferay using Docker. This is the starting point for exploring the vast possibilities Liferay offers in corporate web development.

Share your experience in the comments or ask if you need help with any installation steps. We are here to help!

Mas afinal o que é esse tal de Liferay?

Carlos Fortes — Fri, 17 Nov 2023 12:39:50 +0000

Olá amig@s,

Trabalhando com o Liferay há alguns anos, recebo sempre perguntas do tipo:

Mas o que é o Liferay?
Por que utilizar Liferay?
O que o programador Liferay faz?

Neste post, tentarei dar uma introdução ao Liferay, mostrando como fazer uma instalação da plataforma com Docker e alguns recursos para saber mais.

O que é o Liferay?
O Liferay é uma plataforma de portal corporativa de código aberto que simplifica a criação de experiências digitais envolventes. Ele oferece recursos robustos de gerenciamento de conteúdo, colaboração e personalização, tornando-se uma escolha popular para empresas que buscam construir portais web poderosos.

Principais Características:

Portal de Colaboração:
Oferece recursos de colaboração, como blogs, fóruns, wikis e calendários, que permitem a interação e a colaboração entre os usuários.
Gestão de Conteúdo:
Permite a criação, publicação e gerenciamento de conteúdo de maneira eficiente. Isso inclui documentos, páginas da web, imagens e vídeos.
Integração de Aplicações:
Facilita a integração com outras aplicações e sistemas, permitindo que os usuários acessem informações de diferentes fontes em um único local.
Personalização:
Oferece recursos avançados de personalização para adaptar a experiência do usuário de acordo com preferências individuais.
Segurança:
Possui recursos robustos de segurança para proteger dados sensíveis e garantir a conformidade com regulamentações.
Escalabilidade:
Projetado para ser escalável, permitindo que organizações de diferentes tamanhos implementem soluções baseadas no Liferay.
Código Aberto:
Distribuído sob a Licença Pública do GNU (GPL).
Low-Code/No-Code:
Facilita o desenvolvimento de aplicações por usuários não técnicos.

O Liferay oferece duas edições principais: Community Edition (CE) e Liferay DXP (Digital Experience Platform).

Community Edition (CE):
É a edição gratuita e de código aberto do Liferay. Pode ser baixada e usada sem custos, de acordo com os termos da Licença Pública Geral GNU (GPL).
Liferay DXP:
É a edição empresarial do Liferay e requer uma licença paga. A DXP inclui funcionalidades adicionais e é destinada a organizações que precisam de recursos avançados, suporte empresarial e garantias de estabilidade.

Devido à sua flexibilidade e extensibilidade, o Liferay é frequentemente utilizado por organizações para desenvolver portais corporativos, intranets, extranets e outras soluções web colaborativas. Ele é escrito em Java e pode ser executado em diversos servidores de aplicação, tornando-o uma escolha versátil para o desenvolvimento de plataformas web complexas. A documentação oficial do Liferay é um ótimo lugar para se aprender mais sobre.

Por Que Usar o Liferay?
Empresas Pequenas e Grandes
Flexibilidade: Permite criar experiências digitais personalizadas para atender às necessidades específicas de cada negócio.

Escalabilidade:
Ideal tanto para pequenas empresas quanto para grandes corporações, adaptando-se ao crescimento da empresa.
Custos Reduzidos:
A Community Edition é gratuita, ideal para empresas com poucos recursos. As empresas podem iniciar com a CE e, conforme crescem, migrar para a DXP.

Vantagens em Relação a Outros CMS
Arquitetura Headless: Diferente de CMS tradicionais, o Liferay permite que o conteúdo seja publicado em qualquer plataforma ou dispositivo, oferecendo maior flexibilidade.

Integração com Outras Tecnologias:
O Liferay oferece APIs robustas que facilitam a integração com outras ferramentas e sistemas, como CRM, marketing e análise web.
Gerenciamento de Conteúdo Avançado:
Funcionalidades avançadas como criação de conteúdo sem código, gerenciamento de fluxo de trabalho e personalização de conteúdo.

Concorrentes e Vantagens Competitivas
Alguns concorrentes do Liferay incluem:

WordPress:
Excelente para blogs e sites pequenos, mas pode faltar a robustez necessária para grandes portais corporativos.
Drupal:
Muito flexível e poderoso, mas pode ser mais complexo de configurar e gerenciar.
Joomla:
Bom para sites de tamanho médio, mas pode não oferecer a mesma escala e nível de personalização que o Liferay.

Como Começar com o Liferay?

Passos Iniciais:
Avaliação e Planejamento: Avalie suas necessidades e planeje como o Liferay pode atender às suas demandas específicas.
Instalação e Configuração:
Instale o Liferay e configure a plataforma de acordo com suas necessidades.
Integração e Testes:
Integre o Liferay com outras plataformas e sistemas, e realize testes para garantir que tudo funcione corretamente.

Testar com Docker
A forma mais rápida de testar a plataforma é fazendo uso do Docker.

Guia Passo a Passo:
Instalação do Docker: Certifique-se de ter o Docker instalado em sua máquina. Você pode encontrar instruções detalhadas no site oficial do Docker.

Pull da Imagem do Liferay: Execute o seguinte comando para baixar a imagem do Liferay da Docker Hub:

docker pull liferay/portal:latest

Acesso ao Liferay: Abra seu navegador e acesse http://localhost:8080. Siga as instruções de configuração inicial do Liferay.

Muito Bom, Mas Onde Posso Aprender Mais Sobre?
Além da documentação oficial do Liferay, há o blog que traz sempre boas novidades. Recomendo também o slack oficial e o canal no YouTube.

Bom, ficamos por aqui, sendo que:

Você ficou com uma noção do que é o Liferay.
Concluiu com sucesso a instalação do Liferay utilizando Docker.
Ficou com um ponto de partida para explorar as vastas possibilidades que o Liferay oferece em termos de desenvolvimento web corporativo.

Compartilhe sua experiência nos comentários ou pergunte se precisar de ajuda com alguma etapa do processo de instalação. Estamos aqui para ajudar!