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.

   <dependencies>
        <dependency>
            <groupId>javax</groupId>
            <artifactId>javaee-web-api</artifactId>
            <version>7.0</version>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
            <scope>provided</scope>
        </dependency>

    </dependencies>

4 – Atualize o web.xml;

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
         xmlns="http://java.sun.com/xml/ns/javaee" 
         xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" 
         id="WebApp_ID" version="3.0">
         
    <display-name>Archetype Created Web Application</display-name>
    
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>
    
    <welcome-file-list>
        <welcome-file>index.xhtml</welcome-file>
    </welcome-file-list>  
    
</web-app>

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.

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"> 

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

7 – Corrija o href dos links, exemplo:

    <!-- Bootstrap Core CSS -->
    <link href="/integrando-sb-jsf/resources/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

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

<meta charset="utf-8"/>
<link href="/integrando-sb-jsf/resources/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<hr/>

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

package br.com.karanalpe.integrando.sb.jsf.controller;

import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class IndexMB {
    
    public String imprimirMensagem() {
        return "Olá JSF";
    }

}

10 – Testando no xhtml.

<h1 class="page-header">#{indexMB.imprimirMensagem()}</h1>

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