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

sábado, 21 de septiembre de 2019

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/

domingo, 8 de septiembre de 2019

Animales Nocturnos la pelicula

Hace más de una año que un conocido me platicó sobre la película Animales Nocturnos. No soy mucho de ir al cine, mas por falta de tiempo que por falta de ganas o de dinero. El día de ayer entre a Netflix y me alegré de ver que la película está disponible. Una película que ha pasado desapercibido para la mayoría de las personas.

Me he reflejado en la historia, de hecho escribí una entrada hace años Deja de ser un hombre debil Enterarme de que existe una película que aborda parte de mi percepción de la vida me hace sospechar que muchos hombres hemos sido débiles en algún momento de nuestras vidas.

Recomiendo ver la película, poner atención en los detalles hay mucho aprendizaje sobre la vida , mujeres, y relaciones.

Resultado de imagen para animales nocturnos pelicula

La complejidad del desarrollo de Software

Los programadores descubrimos rápidamente que diseñar y construir software es una tarea compleja y muy propensa a errores. Una y otra vez los proyectos de software fallan porque los equipos no están preparados para enfrentar la complejidad del software.

Como resultado, los proyectos no se terminan a tiempo, el costo sobrepasa lo presupuestado, y lo mas lamentable es que muchas veces no entregan valor al negocio.

Si miramos hacía atrás, el desarrollo de software como profesión tiene solo unas cuantas décadas de vida, la demanda ha ido creciendo, el software se hace presente cada día en varias áreas: educación, finanzas, salud, minería, petroleo, gastronomía, banca, seguridad, milicia, automatización, etc,.

Pero... ¿Por qué es tan complejo desarrollar software? Voy a mencionar los puntos que yo consideró que hacen complejo el software, trataré de ordenarlos lo más que pueda.

1.- Se está creando un Software Innovador, Visionario
El desarrollo de Software ha sido la punta de lanza de la innovación de los últimos 60 años. Al construir un Software nuevo uno se adentra en un terreno desconocido, hay limitaciones técnicas y no existe un marco teórico definido, no hay estado del arte. En este escenario no se tiene muy claro lo que se desea o se tiene muy claro lo que se desea pero la tecnología (algoritmos, poder de procesamiento, hardware) existente no satisface al 100%.

2.- No se hace uso de la Ingeniería de Software
xxxxxx

Hace 4 años decidí estudiar un TSU en desarrollo de Software, ha sido un viaje intenso que ya estoy a punto de concluir, en este viaje he conocido múltiples procesos de desarrollo de software y descubierto algunas buenas practicas.

He aprendido como los procesos de desarrollo han estado evolucionando constantemente, el software también evoluciona todo el tiempo. He descubierto también que el desarrollo de software es un proceso colaborativo, varias personas trabajan en diferentes partes del desarrollo del software con el fin de entregar algo que cubra las necesidades del cliente.

El proceso que hoy esta de moda es el Desarrollo Ágil, un proceso que nos permite entregar constantemente mejoras y requerimientos, hoy sabemos que la única constante en el software es el cambio.

El desarrollo orientado a pruebas (TDD) es una de las buenas practicas que estoy empezando a poner en practica. Aquí una entrada que escribí Usar TDD con criterio

Páginas