A verdade que ninguém nunca contou a você sobre usar PrimeFaces com Bootstrap no mesmo projeto

Postado por em   ●   26 comentários

Você gosta do visual do Bootstrap e da produtividade do PrimeFaces, e por isso quer fazer uma integração das duas soluções dentro do mesmo projeto?

Várias pessoas já tiveram essa mesma ideia!

E se você já tentou fazer isso, provavelmente teve alguns problemas e várias dúvidas.

Talvez já até xingou o PrimeFaces e disse que é uma biblioteca cheia de gambiarras, né? (já vi disso por aí)

É por isso que eu resolvi esclarecer de uma vez por todas sobre essa desejada integração.

Continue lendo este artigo para aprender sobre:

  • Os principais problemas que acontecem quando você junta PrimeFaces com Bootstrap
  • Como fazer o PrimeFaces trabalhar sem tema próprio
  • Porque essa dificuldade não é um problema do PrimeFaces
  • Um jeito fácil e elegante de deixar o sistema com visual do Bootstrap
  • Web Design Responsivo com PrimeFaces

Gostou do que está por vir? Então compartilhe esse artigo com seus amigos e ajude outros programadores a resolver esse problema.

Compartilhar no Facebook

JSF com Bootstrap: É simples e funciona

Usar Bootstrap com JSF é bem simples. Não tem segredo!

Você baixa o Bootstrap, adiciona os arquivos no seu projeto e define os estilos dos componentes.

Nesse exemplo, usamos apenas as classes table, para estilizar a tabela de dados e btn (com a variação de btn-danger), para definir um visual para o botão de exclusão.

E pronto! Tudo funciona como esperado.

JSF com Bootstrap

Mas você ouviu falar ou já trabalha com PrimeFaces…

…e você sabe o quanto essa biblioteca de componentes pode te ajudar na produtividade e qualidade do seu projeto.

E por algum motivo, você quer juntar as duas coisas: Bootstrap e PrimeFaces.

PrimeFaces com Bootstrap: Um jeito simples, mas que não funciona

Os arquivos do Bootstrap já estão no seu projeto, então é só você alterar a tabela de dados e botão para usar os componentes do PrimeFaces.

Deu tudo errado!

Além de não funcionar com o visual do Bootstrap, ainda “estragou” o visual do PrimeFaces.

Problemas de Integração do PrimeFaces com Bootstrap

E aí começam as suas dúvidas…

“O que é isso? Por que o PrimeFaces não me deixa estilizar a tabela da forma que eu quero?”

Por que não funcionou?

Muita calma…

Antes de tudo, é importante entender que a culpa não é do PrimeFaces.

Qualquer biblioteca de componentes JSF funciona assim.

Aliás, qualquer biblioteca HTML/CSS também funciona assim (daqui a pouco você vai entender o que estou dizendo).

No caso do PrimeFaces, ele “carrega” consigo códigos CSS para estilizar seus componentes.

Afinal, PrimeFaces é uma biblioteca que renderiza componentes ricos. Não teria como fazer isso sem usar suas próprias classes CSS.

Sem generalizar, tenho visto muitos programadores que usam JSF e PrimeFaces que ainda não conhecem muito bem sobre CSS.

E não há nada de errado nisso.

PrimeFaces e outras bibliotecas de componentes foram desenvolvidos para abstrair a maior parte do código HTML/CSS/JavaScript de um projeto.

Dessa forma, até mesmo desenvolvedores menos experientes com web conseguem criar telas muito rápido e com qualidade.

Mas quando surge a necessidade de customização mais avançada, fica muito difícil fazer sem conhecer pelo menos como CSS funciona.

É o caso de querer usar Bootstrap em componentes do PrimeFaces.

O que você precisa entender é que, quando adiciona classes CSS do Bootstrap em um componente que já está sendo estilizado com outras classes CSS de qualquer biblioteca, você está tentando sobrepor uma coisa na outra.

Olhe a imagem abaixo.

PrimeFaces e Bootstrap: inspeção no CSS

Usei a ferramenta de inspeção de código do Chrome para analisar o CSS aplicado às tags <td> (células) da tabela de dados.

Notou algo estranho?

Temos classes CSS do PrimeFaces e do Bootstrap no mesmo elemento <td>.

Isso só pode dar errado!

Imagine, o PrimeFaces define que algo tem uma cor, aí vem o Bootstrap e fala que vai ser de outra cor.

Pense agora em dezenas de outras propriedades de cada elemento estilizado por duas tecnologias.

Só pode virar bagunça!

CSS tem um conceito de especificidade, que determina qual regra vai ser aplicada em cada elemento da página.

Quando você adiciona uma classe do Bootstrap em um componente do PrimeFaces, está criando uma espécie de batalha.

Não dá pra saber o que vai acontecer, porque você não tem controle de nada.

Isso não é um problema do PrimeFaces!

Esse comportamento (batalha de especificidades) não acontece só com PrimeFaces.

É algo natural, quando você está escrevendo o seu próprio código CSS.

Se não tomar cuidado e seguir boas práticas, vai acabar tendo problemas com a especificidade do CSS.

Para ficar ainda mais claro, pense comigo…

Você acharia correto usar Bootstrap e Foundation (um outro framework CSS concorrente do Bootstrap) nos mesmos componentes do seu projeto?

Veja como poderíamos usar Foundation em uma tabela de dados com componentes puros do JSF.

Bem simples. A tabela de dados é automaticamente estilizada e o botão só recebeu a classe CSS button.

E olhe o resultado abaixo.

Foundation com JSF

Perfeito! Estamos usando estilos do Foundation em componentes puros do JSF, que não “carregam” estilos CSS.

Agora, o que acha de adicionar Bootstrap em cima de tudo isso, sem remover o Foundation?

JSF com Foundation e Bootstrap

É… não ficou muito legal!

E poderia ficar ainda pior com mais funcionalidades e um projeto maior.

E isso é um problema com o Bootstrap? Com o Foundation?

Acho que agora você entendeu! :)

Foundation não foi criado pensando na integração com Bootstrap, e vice-versa.

Assim como PrimeFaces não foi criado pensando na integração com Bootstrap ou Foundation, e vice-versa.

São bibliotecas de componentes distintas, com vida própria, independentes.

PrimeFaces não é só uma biblioteca de componentes JSF, é também um “framework” CSS, assim como Bootstrap, Foundation e vários outros.

Uma possível alternativa: PrimeFaces sem temas

Depois de tudo isso, talvez você ainda insista em querer usar Bootstrap (ou qualquer outro framework CSS) nos seus componentes PrimeFaces.

Uma alternativa que algumas pessoas acabam fazendo é configurar o PrimeFaces para não usar nenhum tema.

É só adicionar isso no web.xml.

Essa configuração remove o tema do PrimeFaces, que basicamente são classes CSS que criam o visual dos componentes.

O problema é que algumas classes CSS básicas, que não são específicas de nenhum tema, ainda permanecem.

Veja como fica uma tabela de dados do PrimeFaces sem nenhum tema (e também sem nenhuma classe do Bootstrap).

PrimeFaces sem tema

Pelo menos agora ficou mais “crua”, né?

Então, vamos tentar adicionar as classes do Bootstrap no p:dataTable e p:commandButton e ver como fica.

PrimeFaces sem tema com Bootstrap

Foi quase!

O estilo do botão não está 100% fiel ao que o Bootstrap define, e nem a tabela de dados.

Com algumas inspeções no código e ajustes, pode até ser possível chegar perto do resultado esperado (pelo menos para esse exemplo simples com uma tabela e botões).

E os componentes e recursos mais complexos?

Mas vale a pena definir nenhum tema do PrimeFaces, aplicar as classes do Bootstrap e ir ajustando componente por componente?

Eu vejo pelo menos dois principais problemas e riscos ao decidir por esse caminho:

1. Upgrade de versões do PrimeFaces pode ser muito mais difícil.

2. O PrimeFaces tem dezenas ou até centenas de componentes que o Bootstrap não tem nenhuma classe CSS equivalente.

Então, na minha opinião, não vale a pena!

A alternativa BBSG (Bom, Bonito, Simples e Gratuito)

BBSG é só uma sigla que inventei agora. Pode esquecer. :)

Acredito que nesse momento você já deve ter entendido que:

1. Os problemas gerados ao adicionar Bootstrap (ou qualquer outro framework CSS) com PrimeFaces não é um defeito do PrimeFaces, mas como as coisas funcionam.

2. JSF pode sim funcionar com Bootstrap (usando componentes puros).

3. Tudo é uma questão de escolhas. Não dá para escolher usar tudo e ainda ter um código de qualidade e dentro do seu controle.

Sendo assim, se você não abre mão da produtividade do PrimeFaces, mas não gosta muito (ou já enjoou) do estilo padrão dos componentes…

…na minha opinião, a melhor solução é você usar um outro tema do PrimeFaces que te agrade mais.

O PrimeFaces possui mais de 40 temas, sendo que a maioria são gratuitos!

E algo bem interessante, caso você queira criar páginas com o visual do Bootstrap, é que existe um tema do Bootstrap também.

É só baixar ou adicionar o tema no pom.xml do seu projeto e configurar no web.xml.

O resultado é esse.

PrimeFaces com tema do Bootstrap

Eu sei… o tema não é 100% fiel ao framework CSS com o mesmo nome.

É só um tema com uma inspiração ao Bootstrap, mas não é o Bootstrap!

Mas ao invés de colocar o Bootstrap (não o tema, mas o framework) no seu projeto, você pode só usar o tema “bootstrap” que o PrimeFaces fornece…

…e aí, no lugar de ter que customizar as coisas para funcionar, você customiza só o que não te agrada.

E pronto! Nada mais vai ser afetado. Você fica mais no controle.

PrimeFaces com design responsivo

Se você ainda não ficou satisfeito com essa solução porque gostaria de usar o Bootstrap apenas para criar sistema responsivos, tenho boas notícias!

1. Vários componentes do PrimeFaces já tem suporte a responsividade.

2. O PrimeFaces tem um Grid CSS (mais simples que o Bootstrap, mas talvez já resolva o que você precisa).

3. Você pode gerar uma versão customizada do Bootstrap e usar apenas o sistema de grid que ele fornece.

4. O PrimeFaces possui layouts premium responsivos que são bem elegantes.

E por último, mas não menos importante: Eu posso te ensinar a criar sistemas responsivos com PrimeFaces, incluindo um layout próprio.

Veja esse sistema responsivo.

Projeto do Curso de PrimeFaces Responsivo

É exatamente isso que você vai aprender a criar, passo a passo.

Esse é um workshop online que chamei de “PrimeFaces Responsivo”, mas abrimos as matrículas dele poucas vezes no ano.

Mas tenho uma excelente notícia pra você!

Nesse exato momento, estamos permitindo a entrada de novos alunos por um preço muito especial, por tempo limitado.

Você tem interesse?

Conheça todos os detalhes desse workshop online e faça a sua matrícula agora!

Workshop Online: PrimeFaces Responsivo

Gostou do artigo? Já teve alguma experiência tentando usar PrimeFaces e Bootstrap juntos?

Então deixe seu comentário aí abaixo.

Um grande abraço.

Fundador e instrutor da AlgaWorks. Certificado como programador Java pela Sun, autor e co-autor de diversos livros de Java, Java EE, JPA, JSF e PrimeFaces e palestrante da maior conferência de Java do mundo (JavaOne San Francisco). Iniciou seu interesse por programação aos 14 anos de idade (1995), quando desenvolveu o primeiro jogo de truco online e multiplayer do mundo. Já foi sócio e trabalhou em outras empresas de software como programador, gerente e diretor de tecnologia, mas nunca deixou de programar.

26 comentários sobre “A verdade que ninguém nunca contou a você sobre usar PrimeFaces com Bootstrap no mesmo projeto

  1. Wladimir Bandeira -

    Eu aprendi muito com os cursos do AlgaWorks, são conhecimento que não se aprende em nenhum outro lugar, mas era bom que essa instituição começasse a foca em curso voltado para arquiteturas em RestFull.

    1. Thiago Faria de Andrade Autor do post-

      Obrigado, Wladimir!

      Já iniciamos com conteúdos sobre REST também.
      Lançamos um livreto e no mês passado um workshop de APIs RESTful. Estamos trabalhando em um curso mais avançado agora.

  2. Vinicius Martins -

    Excelente artigo Thiago. Parabéns!
    Já fiz experimentos semelhantes, tentando integrar componentes de bibliotecas JSF como RichFaces/PrimeFaces com frameworks de CSS ricos como jQueryUI/Bootstrap e também cheguei nesta mesma conclusão apresentada por você.
    Contudo, esperava que você fosse mencionar o framework BootsFaces (http://www.bootsfaces.net/)… Estou trabalhando em um projeto em que estamos tentando mesclar o BootsFaces com o PrimeFaces (O primeiro para implementar layout e responsividade e o segundo para usufruir da rica biblioteca de componentes).
    Vocês da AlgaWorks já testaram algo neste sentido?

    1. Thiago Faria de Andrade Autor do post-

      Valeu, Vinicius.

      Nunca testei, mas se for só pra usar o sistema de grid do Bootstrap, uma opção é baixar só o CSS do Bootstrap que tem isso.

      Poderia falar de várias outras coisas no artigo, mas ele ficou muito longo. Deixa pra falar de BootFaces em outro artigo.

      Abraço.

  3. Rodrigo -

    Qual o hoario da palestra Thiago ?

    1. Thiago Faria de Andrade Autor do post-

      Qual palestra, Rodrigo? :)

  4. Marcus Vinicius -

    Muito bom post. Creio que agora o entendimento entre uma e outra ferramenta fique claro para aqueles que gostam de misturar as coisas. Sei que existe uma ferramenta que personaliza temas do primefaces mas creio que muita gente não saiba fazer ou conhece a mesma. Fica a dica para um próximo post. Abraços!

  5. Thiago Oliveira -

    Muito bacana seu artigo, acompanho seu trabalho a algum tempo.
    Faço uso do Primefaces em meus projetos também, e uma solução que encontrei para customizar é criar meu próprio tema através do site http://jqueryui.com/themeroller/

    Fica a dica a todos!

    Abraço

  6. Leandro Gustavo Neis -

    Parabéns. Me esclareceu muitas dúvidas que tinha a respeito. Principalmente na questão JSF + Bootstrap.

  7. Euclides -

    Muito Didático, continua gostei

  8. Marcus Rodrigues -

    Parabéns pelo post. Já comprei o workshop, para aumentar meu conhecimento. Os cursos e workshops da Algaworks, semprem acrescentam informações, que a gente perderia muito tempo buscando na net.

    Abraços.

  9. Luis Henrique -

    Bacana! Eu estava tentando integrar esses dois, alguns componentes até vai, mas outros ficam fora de esquadro, o jeito é se contentar com um ou outro haha

  10. Anderson Pinto Alves -

    Ha alguma previsão de nova turma?

  11. Alysson -

    Cara, eu usei o bootstrap para montar o layout da página (menus, login, header, footer).
    E nos formulários e listas eu usei o primefaces com o tema bootstrap.
    No caso do menu por exemplo, utilizei componentes do JSF (que não aplica estilo visual) e usei as classes do bootstrap.

  12. David -

    Olá. Gostaria de saber em qual versão do Primefaces o treinamento é baseado. Obrigado.

    1. Thiago Faria de Andrade Autor do post-

      Olá David,

      No workshop PrimeFaces Responsivo nós usamos a versão 5.3.

  13. Marcelo Gomes -

    Thiago, excelente. Ajudou muito.

  14. Edenilson Medenonça Dos Santos -

    Olá Thiago blz, então fiz o workshop implementei o código o projeto configurando, porém quando adapto ao jpa, hibernate os dados do banco são listados normalmente nas minhas classes, mais no layout não! um exemplo seria no selectOneMenu, não lista as informações! o que acontece, aguardo resostas, abraços Thiago!

  15. Márcio -

    Na opinião de vocês, primefaces e jsf estão perdendo mercado para outras tecnologias web? Não sei se é porque eles são java e vou citar como exemplo tecnologias como angularjs, o próprio bootstrap, serem compatíveis também com outras linguagens que eu possa ter essa impressão.

  16. Diego -

    A um tempo atrás enfrentei esse problema do layoute e como precisava de algo mais “apresentável” assumi os riscos de baixar um tamplate com Bootstrap e integrar com o JSF.. Foi bem difícil integrar mas consegui .. rs .. O layoute ficou legal porém perdi a opção de usar alguns componentes do Prime, eles simplesmente não funcionavam, exemplo do Mask .. Ele trava a view toda ..rsrs
    No momento estou enfrentando novamente, preciso aplicar um novo layoute a outro projeto e não sei o que fazer, não quero mais essa experiência do “ajuste tecnico” misturando as tecnologias rsrs

  17. Henrique -

    O primefaces 6 ja vem integrado com bootstrap?
    Você enxerga semelhanca entre primefaces e angular?
    Voce ja utilizou o bootsfaces?
    Otimo post, mas o titulo da a entender que sim é possivel integrar as 2 tecnologias.

  18. Márcio Almeida -

    Olá, estou gostando do curso de JSF+Primefaces mas cada dia fico mais confuso. O que você acha que devo seguir, JSF de vez ou AngularJs2, se fala muito que JSF não vai durar, tem um modelo ruim, em particular eu adoro o jeito de fazer a aplicação em JSF. Estou fazendo curso dos dois e usando o Primefaces e o PrimeNG(para angularjs2). A grande dúvida é para se ter uma ótima produtividade em desenvolvimento de aplicação corporativa com alguns módulos mobile e de via útil longa o que seguir?? Obrigado.

    1. Thiago Faria de Andrade Autor do post-

      Olá Márcio,

      Essa pergunta é muito complicada. Eu acho que a melhor pessoa para decidir é você, baseado na sua experiência, no seu projeto, no prazo que você tem, etc.

      Falam que JSF vai morrer há pelo menos uns 8 anos, e até hoje é bastante usado para aplicações corporativas. Nesse tempo, surgiram outros frameworks que ficaram famosos e já estão realmente morrendo antes de JSF.

      Não dá pra prever. Ninguém sabe quando isso realmente vai acontecer. Pelo menos o JCP continua trabalhando nas novas versões do JSF.

      Dito isso, apesar de algumas pessoas criticarem Angular 2 (todas as tecnologias tem isso), eu estou gostando também. O framework é legal, mas acho o ferramental/configurações um pouco complicado para quem está começando. Se você já tem experiência com isso, deve levar em consideração também. Considere também que o PrimeNG, apesar de já ter muitos componentes, ainda não tem todos que o PrimeFaces possui.

      Nunca estamos 100% seguros sobre o tempo que um framework vai durar. Por exemplo, muitas pessoas sentiram essa segurança com Angular 1.x e se frustraram.

      Abraço.

  19. Ilton Barbosa -

    Oi Thiago, algumas pessoas me disseram que não é recomendável utilizar PrimeFaces em sistemas onde ocorrem muitos acessos simultâneos. Dizem também que o PrimeFaces consome muita memória do servidor chegando a comprometer a performance do sistema. Essa informação tem sentido?

    1. Thiago Faria de Andrade Autor do post-

      Olá Ilton, tudo bem?

      Estamos falando de quantos acessos?

      Isso depende muito. Pela minha experiência, geralmente problemas de lentidão em sistemas corporativos estão nos códigos que o programadores fazem, e não em frameworks ou bibliotecas.

      Para sistemas comerciais/corporativos, nunca tive nenhum problema com PrimeFaces. Sempre atendeu muito bem, inclusive para call centers.

      Agora se você está desenvolvendo um próximo Facebook, aí provavelmente não é a melhor solução mesmo.

      Abraço.

Deixe um comentário