Spring / JSF e sua relação com o Front-end

Isso se chama pular etapas. Se vai trabalhar com front-end web, comece estudando pelo básico: HTML, CSS e JavaScript. Depois que estiver apto você usa ferramentas, se for necessário.

Bootstrap é um .css pronto. Se usar sem entender CSS, em algum momento vai passar por apertos para ajustes finos ou algo fora do básico.

JSF/Primefaces é tudo amarrado, vai se complicar se misturar, mas tem um tema que copia o visual do Bootstrap.

Thymeleaf é um template engine, pra processar HTML do lado servidor, não tem CSS amarrado.

Basico, bem basico eu sei, inclusive eu construi uma pagina sem back-end só com bootstrap, e ajustes em CSS e JS, estava visualmente como eu queria, e quando tento transportar isso que eu criei pra um projeto JSF é uma zorra, nada funciona inclusive as tags são outras =(…

E quando tento levar pro Spring algumas coisas funcionam mas em tabelas por exemplo o layout quebra todo… por isso achei que o thymeleaf tivesse seu proprio CSS… Realmente JS é um monstro pra mim, mas com o pouco que sei consigo fazer o que eu quero (bem básico) sem implementar um back-end,

Eu to é apanhando em integrar essas tecnologias, acho que se eu achasse um código com uma tabela html (bootstrap) sendo gerada pelo controller do Spring eu já estaria feito

Eu faço referencia ao html assim:

@GetMapping("/")
    public ModelAndView getIndex() {
         
        ModelAndView mv = new ModelAndView("/index");
        mv.addObject("listaPessoa", pessoaService.findAll());
         
        return mv;
    }

Mas nisso o layout quebra todo

<div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Idade</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="pessoa : ${listaPessoa}">
                            <td th:text="${pessoa.nome}"></td>
                            <td th:text="${pessoa.idade}"></td>
                        </tr>
                    </tbody>
                </table>
            </div>

Algumas coisas funcionam, mas esse é só um exemplo.

Alguns alinhamentos, e elementos que eu adicionei não funcionam da mesma forma de quando tenho esse mesmo código sem Thymeleaf

Isso é fácil de resolver, deixe somente o css do Bootstrap. O framework web da Spring e o engine thymeleaf não dependem e nem geram css por conta própria, mesmo se vier algum css de exemplo apague todos os arquivos e referencias, faz um projeto limpo sob seu controle.

Nunca recomendo JSF, mas se for usar, use os próprios temas/css do Primefaces, senão vai se complicar, pois JSF é muito amarrado.

Fora a dica que te passei, investigue o problema a partir do código que o navegador recebeu, é isso que vale. Voce pode postar aqui o código completo dessa página recebida no navegador com problema. Só um trecho não tem como identificar o problema, principalmente sem as referências dos css e js.

Aqui tem um exemplo bem simples, pelo menos pra iniciar: http://joaoduraes.github.io/2015/02/07/spring-bootstrap-thymeleaf-example.html

E a partir dai vai avançando aos poucos, assim fica mais fácil de identificar problemas.

Eu uso os componentes responsivos do primefaces… funciona de boa… ainda muda pro layout pra mobile e tals…

Já tentou? Me facilitou muito a vida! Continuo no JSF.

https://www.primefaces.org/showcase/ui/misc/responsive.xhtml

Meu problema parecia ser minha referencia ao JavaScript do bootstrap, não entendi o porque, e nem consegui resolver usando o código compilado dele, mas sei que era isso pois quando fiz a importação por CDN funcionou:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Mas eu não gostaria de depender de internet nem de servidor de terceiros pra minha página funcionar, então depois de muito bater cabeça, me dei por vencido (apesar de já ter descoberto meu erro) e parti pro Materializecss que baixei o código compilado fiz a referencia e Tcharan! funcionou perfeitamente.

Estou testando e aprendendo essas tecnologias que sei que são basicamente equivalentes então tanto faz por hora, vou brincar de criar coisas e personalizar agora. Obrigado pelo apoio.

@ardenghe eu até já vi essa parte de responsive do primefaces, mas o primefaces me parece tão engessado que me dá medo, fora que já tenho trauma quando penso em fazer uma simples troca de cor de algum componente, se o tema não resolve já nem tento mais kkkkkk e isso foi o que mais me puxou pra fora da caixa.

E sinceramente, adoro a forma como o JSF trabalha, inclusive o ciclo de vida (que todo mundo odeia), mas vou te falar uma coisa… Quando eu conheci o Spring boot eu quase tive um orgasmo, então se eu quero continuar trilhando esse caminho vou ter que aprender alguma coisa dos responsives front-end. Mas agradeço muito sua opinião, obrigado.

Tranquilo cara! Quando sobra um tempo aqui to estudando Spring tbm… mas só fiz exemplos simples… Parece ser massa!

Duro é migrar um projeto gigante…

Flw, abraço!

O PrimeFaces tem a classe ui-fluid e p:panelGrid para fazer a responsividade, 90% pratico e 10% dor de cabeça.

É facinho alterar os componentes, segue o exemplo abaixo:

<p:componenteA styleClass="primeira-classe segunda-classe classe-nao-importante">
    <p:componenteDentroA styleClass="primeira-classe-dentro">
        <p:componenteFinal styleClass="primeira-classe-final" />
    </p:componenteDentroA>
</p:componenteA>

.css

.primeira-classe.segunda-classe .primeira-classe-dentro .primeira-classe-final
{
    color: blue;
}

Eu to querendo estudar isso ai, mas to sem tempo

Pra quem tá usando SpringBoot (ou JavaEE) e quer usar Bootstrap e PrimeFaces, deem uma olhada nesse projeto de exemplo: https://github.com/adminfaces/admin-starter-springboot

È um projeto baseado nesse tema do PrimeFaces e nesse template.

Basicamente é um tema que vem com Bootstrap e muda o estilo dos componentes do PrimeFaces para se parecer com os componentes do template AdminLTE (também baseado em Bootstrap)

Tem um showcase que mostra os componentnes aqui: http://admin-showcase-admin-showcase.7e14.starter-us-west-2.openshiftapps.com/showcase/

A grande vantagem de se usar o tema admin é que ao inves de ter 3 ou 4 divs aninhadas para montar um box/card você apenas declara um p:panel.

Espero que ajude.

Também dá pra fazer algumas mudanças CSS, no primefaces, inline. <p:component style = “color: red; background: black”/>.

Existem algumas propriedades CSS, que não estão disponíveis em alguns components, mas com o que já tem, acredito que já vá atender a maioria das demandas internas de empresas e industrias no geral.

Este projeto é seu não ? Tenho acompanhado você no git. Parabéns.