!Ya estoy en youtube! suscribete a mi canal https://www.youtube.com/channel/UC6-tLGUyvfrb9ibuCipFQKg: Integrar Bootstrap en aplicaciones JSF 2.2

Después de meses de investigar, practicar e involucrarme en el paraguas de la tecnología Java EE, me he encontrado con la necesidad de integrar el framework Bootstrap. Bootstrap es un framework para la parte front end de una aplicación web, contiene elementos como menús, formularios, barras de navegación, y muchos otros componentes incluyendo la posibilidad de usar plantillas.

Mi técnica de auto aprendizaje consiste en investigar un ejemplo, reproducirlo y luego estudiar en detalle su funcionamiento, sus reglas y principios. En el caso de Bootstrap y en la mayoría de la tecnología Java EE, hay que tener mucho olfato e intuición porque rara vez los ejemplos funcionan. Esto se debe principalmente a que lo rápido que evolucionan las tecnologías, por ello la importancia de tener conocimientos sólidos de la tecnología Java EE.

En esta entrada voy a compartirles lo que a mi me ha funcionado para poder integrar Bootstrap en un proyecto Java EE para Wildfly 12, Wildfly 12 soporta la versión 2.2 de Java Server Faces. Encontré dos formas de hacerlo, les compartiré ambas.

Pre Requisitos

Java 8

Wildfly 12

Netbeans 8.2 con soporte para JEE

Bootstrap 3.4.1

Pasos para integración, primera opción

1.- Crear un proyecto Maven -> Web Application, llamado test-bootstrap

2.- Descargar Bootstrap 3.4.1 https://getbootstrap.com/docs/3.4/

3.- En el proyecto test-bootstrap. Crear un directorio resources dentro de webapp

4.- Dentro de resources crear un directorio llamado bootstrap

5.- Descomprimir la versión descargada de bootstrap en el paso 3.

6.- Copiar las carpetas css, fonts y js a bootstrap

7.- Renombrar index.html por index.xhtml y copia lo siguiente

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
 <h:head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <meta name="description" content=""/>
  <meta name="author" content=""/>

  <!-- Bootstrap core CSS -->
  <h:outputScript name="bootstrap/js/bootstrap.js" />
  <h:outputScript name="bootstrap/js/bootstrap.min.js"/>
  <h:outputStylesheet name="bootstrap/css/bootstrap.css"/>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" />

  <title>Hello JSF Bootstrap</title>
  <!-- Custom styles for this template -->
  <!--<h:outputStylesheet  library="css" name="starter-template.css"/>-->
 </h:head>
 <h:body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
   <div class="container">
    <div class="navbar-header">
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
     </button>
     <a class="navbar-brand" href="#">Project name</a>
    </div>
<div id="navbar" class="collapse navbar-collapse">
     <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<!--/.nav-collapse -->
   </div>
</nav>
  <div class="container">

   <div class="starter-template">
    <h1>
Bootstrap starter template</h1>
<p class="lead">
Use this document as a way to quickly start any new project.<br/> All you get is this text and a mostly barebones HTML document.</p>
<button type="button" class="btn btn-default btn-lg">
     <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
    </button>
   </div>
</div>
</h:body>
</html>

Para integrar Bootstrap solo hay que agregar los recursos css y js a nuestros componentes xhtml.


<h:outputScript name="bootstrap/js/bootstrap.js" />
<h:outputStylesheet name="bootstrap/css/bootstrap.css"/>

Estuve un tiempo confundido con los recursos css y js, se supone que la ruta de estos recursos, en relación al directorio del proyecto es 'recursos/bootstrap/js/bootstrap.js' y 'recursos/bootstrap/css/bootstrap.css'. Sin embargo, debemos verlo como un recurso de java, como si el directorio resources estuviera en nuestro classpath. Hay variantes sobre como leer y cargar los recursos css y js. Esta es la forma que a mi me funciona.

8.- También deberás editar el archivo web.xml, debemos agregar lo siguiente para que el servlet pueda procesar los documentos xhtml

  <!-- Map these files with JSF -->    
  <servlet-mapping>
   <servlet-name>Faces Servlet</servlet-name>
   <url-pattern>*.xhtml</url-pattern>
  </servlet-mapping>

9.- Ejecutar la aplicación, debes algo similar a mi pagina.

Pasos para integración, segunda opción

La segunda opción consiste en tener los arhicos css, js de Bootstrap en un jar y agregarlo como una dependencia mas de nuestro proyecto.

1.- Seguimos todos los pasos anteriores

2.- Editamos nuestro archivo pom.xml y en la sección de dependencias agregamos lo siguiente

 <!--UI-->
        <dependency>
            <groupid>org.webjars</groupId>
            <artifactid>bootstrap</artifactId>
            <version>3.4.1</version>
        </dependency>

3.- Editamos nuestro archivo index.xhtml, especificamente la sección donde cargamos los recursos css y js de Bootstrap

 <!--UI-->

    <!-- Bootstrap core CSS -->
    <h:outputStylesheet library="webjars" name="bootstrap/3.4.1/css/bootstrap.css"/>
    <h:outputScript library="webjars" name="bootstrap/3.4.1/js/bootstrap.js"/>

He agregado el atributo library y el name lo obtuve desde la pagina de webjars, pero el name lo podemos construir analizando la estructura del jar bootstrap webjar.

Con esta opción podemos borrar el directorio resources

Referencia

https://codeday.me/es/qa/20190123/110785.html

https://www.webjars.org/

!Ya estoy en youtube! suscribete a mi canal https://www.youtube.com/channel/UC6-tLGUyvfrb9ibuCipFQKg

Páginas

sábado, 21 de septiembre de 2019

Integrar Bootstrap en aplicaciones JSF 2.2

Pre Requisitos

Pasos para integración, primera opción

Pasos para integración, segunda opción

Referencia

No hay comentarios:

Publicar un comentario