Integração SB Admin2 (Bootstrap) com JSF

Estou finalizando o curso da Academia Web na V.Office. Neste, tivemos a oportunidade em integrar o tema SB Admin2 com JSF.

Em paralelo a isso, tive um desafio no trabalho de criar uma aplicação de consulta e autenticação responsiva. Unindo o útil ao agradável, utilizei este tema do bootstrap para me auxiliar. Vejamos como é simples realizar essa integração.

1 – Faça o download do tema;

2 – No eclipse, crie um projeto maven (utilizei o archetype maven-archetype-webapp);

3 – Adicione as dependências necessárias no pom.xml e atualize o projeto.

4 – Atualize o web.xml;

5 – Descompacte o projeto sb-admin 2. Dentro de webapp crie a pasta resources e copie as pastas data, dist e vendor do arquivo descompactado;

6 – Crie o arquivo index.xhtml dentro da pasta webapp e copie o conteúdo do arquivo index.html da pasta extraída para ele. Obs: Mantenha os xmlns do jsf.

7 – Corrija o href dos links, exemplo:

8 – Como está sendo utilizado o XHTML, é necessário fechar algumas tags para evitar erros. Ex:

9 – Agora vamos criar um controller simples para testar o JSF.

10 – Testando no xhtml.

Resultado:

jsf-sb-admin

Conclusão
O template SB Admin é muito útil para quem deseja desenvolver um sistema com uma interface limpa e responsiva. Além disso, o mesmo oferece uma série de componentes customizáveis que facilita muito a vida do desenvolvedor. Para conhecer um pouco melhor o template clique aqui. Caso queira baixar o código fonte desse post, clique aqui.

Deixe uma resposta