Programación Java: Vista

Es un Framework de front-end para JSF que tiene como base a Bootstrap 3 y jQuery-UI que permite crear páginas con Bootstrap de manera simplificada al convertir el código ingresado en HTML con el estilo definido.

Emplear BootsFaces

Existen dos manera de utilizar este Framework, la primera es mediante descarga que genera un archivo *.jar y se debe agregar al proyecto.

La otra forma es emplear un repositorio como Maven o Gradle y agregar las siguientes líneas en los archivos de construcción.

Maven	Gradle
`<dependency> <groupId>net.bootsfaces</groupId> <artifactId>bootsfaces</artifactId> <version>1.4.2</version> <scope>compile</scope> </dependency>`	`compile 'net.bootsfaces:bootsfaces:1.4.2'`

Implementar en un XHTML

Se debe agregar el siguiente atributo-valor xmlns:b="http://bootsfaces.net/ui" que como se aprecia emplea el prefijo "b".

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
   xmlns:h="http://xmlns.jcp.org/jsf/html"
   xmlns:b="http://bootsfaces.net/ui">
<h:head>
   <title>Prueba 05 - BootsFaces</title>
</h:head>
<h:body>
   <!--Código de la página-->
</h:body>
</html>

Ejemplo de aplicación

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
 xmlns:h="http://xmlns.jcp.org/jsf/html"
 xmlns:b="http://bootsfaces.net/ui">
<h:head>
 <title>Prueba 05 - BootsFaces</title>
</h:head>
<h:body>
 <b:navBar brand="INICIO" brandHref="index.html" inverse="true"
  fixed="top">
  <b:navbarLinks>
   <b:navLink value="JSF" href="#"></b:navLink>
   <b:navLink value="Bootsfaces" href="#"></b:navLink>
   <b:dropMenu value="Pruebas">
    <b:navLink value="Prueba 1" href="#"></b:navLink>
    <b:navLink value="Prueba 2" href="#"></b:navLink>
    <b:navLink value="Prueba 3" href="#"></b:navLink>
    <b:navLink></b:navLink>
    <b:navLink header="Otros"></b:navLink>
    <b:navLink value="Resultados" href="#"></b:navLink>
   </b:dropMenu>
  </b:navbarLinks>
 </b:navBar>
 <b:jumbotron>
  <b:container>
   <h1>Encabezado</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
    do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
    enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
    ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
    culpa qui officia deserunt mollit anim id est laborum.</p>
   <p>
    <a href="https://javajhon.blogspot.com/" class="btn btn-lg btn-info">
     Blog sobre Java </a>
   </p>
  </b:container>
 </b:jumbotron>
 <b:container>
  <b:row styleClass="show-grid">
   <b:column span="4">
    <h2>Botones b:commandbutton</h2><br/>
    <h:form>
    <b:commandButton action="j" value="primary" look="primary"/><br/><br/>
    <b:commandButton action="j" value="success" look="success"/><br/><br/>
    <b:commandButton action="j" value="danger" look="danger"/><br/><br/>
    <b:commandButton action="j" value="info" look="info"/><br/><br/>
    <b:commandButton action="j" value="warning" look="warning"/><br/><br/>
    <b:commandButton action="j" value="default" look="default"/><br/><br/>
    </h:form>       
   </b:column>
   <b:column span="4">
    <h2>Botones class btn-*</h2><br/>
    <a class="btn btn-lg btn-primary">primary</a><br/><br/>
    <a class="btn btn-lg btn-success">success</a><br/><br/>
    <a class="btn btn-lg btn-danger">danger</a><br/><br/>
    <a class="btn btn-lg btn-info">info</a><br/><br/>
    <a class="btn btn-lg btn-warning">warning</a><br/><br/>
    <a class="btn btn-lg btn-default">default</a>    
   </b:column>
   <b:column span="4">    
    <h2>Etiquetas</h2>
    <b:dropButton value="DropButton" look="success">
     <b:navLink value="Prueba 1" href="#"></b:navLink>
     <b:navLink value="Prueba 2" href="#"></b:navLink>
     <b:navLink value="Prueba 3" href="#"></b:navLink>
     <b:navLink></b:navLink>
     <b:navLink header="Otros"></b:navLink>
     <b:navLink value="Resultados" href="#"></b:navLink>
    </b:dropButton>
    <b:panelGrid ></b:panelGrid>
    <b:panel></b:panel>
   </b:column>
  </b:row>
  <hr />
  <footer>
   <p>© JavaJhon 2020</p>
  </footer>
 </b:container>
</h:body>
</html>

Fuentes:

BootsFaces. (2018). BootsFaces Showcase. Recuperado de: https://showcase.bootsfaces.net/

Trabajaremos con las siguientes tablas:

Además, le vamos a crear una vista a la tabla "pagos" (para saber como crear este código paso a paso has clic aquí):

CREATE VIEW pagos_view AS
SELECT 
  pagos.idpagos id,
  inquilinos.dni dni,
  CONCAT_WS(" ", inquilinos.nombres, inquilinos.paterno, inquilinos.materno) datos,
  pagos.monto monto,
  DATE(pagos.fecha) fecha,
  TIME(pagos.fecha) hora
FROM pagos INNER JOIN inquilinos 
  ON pagos.inquilino = inquilinos.idinquilinos

Creando el DTO, DAO y su implementación

DTO

¿Cómo crear un DTO desde una tabla de una base de datos? Dale clic

package dto;

import java.time.LocalDateTime;

public class Pagos {
    private Integer idpagos;
    private Integer inquilino;
    private Double monto;
    private LocalDateTime fecha;

    public Pagos() {
    }

    public Integer getIdpagos() {
        return idpagos;
    }
    public void setIdpagos(Integer idpagos) {
        this.idpagos = idpagos;
    }
    public Integer getInquilino() {
        return inquilino;
    }
    public void setInquilino(Integer inquilino) {
        this.inquilino = inquilino;
    }
    public Double getMonto() {
        return monto;
    }
    public void setMonto(Double monto) {
        this.monto = monto;
    }
    public LocalDateTime getFecha() {
        return fecha;
    }
    public void setFecha(LocalDateTime fecha) {
        this.fecha = fecha;
    }
        
}

DAO

¿Cómo crear un DAO para una tabla de una base de datos? Dale clic

package dao;
import java.util.List;

public interface DaoPagos {
    public List<Object[]> pagosSel();
    public String getMessage();
}

Implementación

¿Cómo crear la implementación de un DAO? Dale clic

package dao.impl;

import biblioteca.ConectaBD;
import dao.DaoPagos;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.time.format.DateTimeFormatter;
import java.util.ArrayList;
import java.util.List;

public class DaoPagosImpl implements DaoPagos {

    private final ConectaBD conectaDb;
    private String mensaje;

    public DaoPagosImpl() {
        this.conectaDb = new ConectaBD();
    }

    @Override
    public List<Object[]> pagosSel() {
        List<Object[]> list = null;
        StringBuilder sql = new StringBuilder();
        sql.append("SELECT ")
                .append("id,")
                .append("dni,")
                .append("datos,")
                .append("monto,")
                .append("fecha,")
                .append("hora")
                .append(" FROM pagos_view");
        try (Connection cn = conectaDb.conexionDB()) {
            PreparedStatement ps = cn.prepareStatement(sql.toString());
            ResultSet rs = ps.executeQuery();
            list = new ArrayList<>();
            while (rs.next()) {
                Object[] pago = new Object[6];
                pago[0] = rs.getInt(1);
                pago[1] = rs.getString(2);
                pago[2] = rs.getString(3);
                pago[3] = rs.getDouble(4);
                pago[4] = rs.getString(5);
                pago[5] = rs.getString(6);
                list.add(pago);
            }
        } catch (SQLException e) {
            mensaje = e.getMessage();
        }
        return list;
    }

    @Override
    public String getMessage() {
        return mensaje;
    }
}

Se puede apreciar que la función "pagosSel" devuelve un "List" pero no de "Pagos" sino tipo "Object[]", esto porque la vista no devuelve los mismo elementos ni tipos que hace la tabla. Es muy importante recordar que a la vista solo se le hace consultas de tipo "SELECT", no debemos intentar actualizar o eliminar, pues nos dará error.

Servlet y Validator

¿Cómo crear un validator y Servlet para una tabla de una base de datos? Dale clic

Validator

package web.validator;

import dao.DaoPagos;
import dao.impl.DaoPagosImpl;
import java.util.List;
import javax.servlet.http.HttpServletRequest;

public class PagosValidator {

    private final HttpServletRequest request;
    private final DaoPagos daoPagos;

    public PagosValidator(HttpServletRequest request) {
        this.request = request;
        this.daoPagos = new DaoPagosImpl();
    }

    public String pagosSel() {
        String result = null;
        List<Object[]> list = daoPagos.pagosSel();
        if (list != null) {
            request.setAttribute("list", list);
        } else {
            result = daoPagos.getMessage();
        }
        return result;
    }
}

Servlet

package web.servlet;

import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import web.validator.PagosValidator;

@WebServlet(name = "PagosServlet", urlPatterns = {"/Pagos"})
public class PagosServlet extends HttpServlet {

    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");

        String accion = request.getParameter("accion");
        accion = (accion == null) ? "" : accion;
        String result;
        String target = "pagosSel.jsp";

        PagosValidator validator = new PagosValidator(request);

        switch (accion) {
            case "SEL":
                result = validator.pagosSel();
                break;
            case "":
                result = "Solicitud requerida";
                break;
            default:
                result = "Solicitud no reconocida";
        }

        if (result != null) {
            request.setAttribute("message", result);
        }

        RequestDispatcher dispatcher = request.getRequestDispatcher(target);
        dispatcher.forward(request, response);
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    @Override
    public String getServletInfo() {
        return "Short description";
    }

}

Los JSP con la vista

¿Cómo crear un JSP para una tabla de una base de datos? Dale clic

El JSP que realiza la llamada al Servlet: pagos.jsp

 
<%response.sendRedirect("Pagos?accion=SEL");%>

El JSP que recibe los datos del Servlet: pagosSel.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Reporte de pagos</title>
        <script src="jq/jquery-3.3.1.min.js" type="text/javascript"></script>
        <script src="js/pagos.js" type="text/javascript"></script>
    </head>
    <body>
        <a href="index.html">Regresar</a><br/>
        <c:if test="${message != null}">
            <div>${message}</div>
        </c:if>
        <table border="1">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>DNI</th>
                    <th>NOMBRES Y APELLIDOS</th>
                    <th>MONTO PAGADO</th>
                    <th>FECHA</th>
                    <th>HORA</th>
                </tr>
            </thead>
            <tbody>
            <c:forEach var="f" items="${list}">                
                <tr>
                    <td>${f[0]}</td>
                    <td>${f[1]}</td>
                    <td>${f[2]}</td>
                    <td>${f[3]}</td>
                    <td>${f[4]}</td>
                    <td>${f[5]}</td>
                </tr>
            </c:forEach> 
        </tbody>
    </table>
</body>
</html>

El resultado sería:

ID	DNI	NOMBRES Y APELLIDOS	MONTO PAGADO	FECHA	HORA
1	31378082	LUISA PAUCAR NARRO	400.0	2019-10-21	21:34:35
2	43331042	AUGUSTO SOTOMAYOR NARVAJO	300.0	2019-10-18	18:30:00

Programación Java

Páginas

viernes, 19 de junio de 2020

BootsFaces