09 mayo, 2017

10. Crear una aplicación Web Java en Eclipse con Servlets y JSPs (Parte 10 - CustomTags, Jmesa)

¡Bienvenidos a todos! Esta publicación formará parte de una serie de 13 publicaciones que estaré desarrollando para aprender a desarrollar una aplicación web pura en Java bajo la plataforma JEE usando Servlets y JSPs. Este será un curso en forma de guía para aquellas personas que recién estén empezando en el mundo de la programación web y que todavía no hacen uso de ningún framework.

Haciendo uso de JSPs y Servlets construiremos nuestras aplicaciones webs los cuales se ejecutarán en Apahe Tomcat (Contenedor de Servlets), el cual lo usaremos como servidor de aplicaciones para ejecutar nuestro proyecto. Asimismo, usaremos Eclipse como herramienta IDE (Entorno de Desarrollo Integrado) para la edición y compilación de nuestro código.


Clase 07a


Custom Tags - Etiquetas Personalizadas

El día de hoy aprenderemos a crear etiquetas personalizadas (Custom Tags). Como sabemos, en JSP es posible hacer una librería de clases java que hagan una especie de ampliación de las etiquetas posibles de html, conocidos también como taglibs.

 Recordando publicaciones anteriores...

 Hace 2 publicaciones terminamos de implementar un mantenimiento a una tabla del proyecto el cual veníamos trabajando, por lo que ya sabemos como desarrollar una aplicación web en Java usando Servlet, JSPs, Scriptlets, Espressions, JSTL, DAO, MySQL, properties, mientras que en la clase anterior vimos como usar i18n (Internacionalización) en nuestro proyecto.

 Mi primer taglib

Para empezar debemos de crear un archivo donde vamos a describir todos nuestros tags ese archivo será nuestro taglib.

1. Importamos el proyecto de la clase anterior. Clic aquí para descargar.

 2. Creamos el archivo librería.tld dentro de WebContent/WEB-INF/tag/

3. Creamos el paquete aprendamos.java.etiquetas y dentro crearemos nuestra clases que heredarán de la clase TagSupport o BodyTagSupport, dependiendo o no si nuestras etiquetas tendrán cuerpo.

4. Creamos la página customTag.jsp donde mostraremos dichas etiquetas creadas.

Ejemplos

1) Crear un tag que muestre un mensaje
2) Crear un tag que repita n veces lo definido en el cuerpo del tag
3) Crear un tag que muestre un texto de un color y tamaño definidos como atributos
4) Crear un tag que muestre una lista de elementos
5) Crear un tag que muestre una lista de elementos pasado como atributo
6) Crear un tag que muestre una lista de elementos pasado como atributo  y que al dar clic en una opción redireccione a una página
7) Crear un tag que muestre la fecha del sistema tomado como atributo
8) Crear un tag que muestre la inversa de una cadena pasada en el cuerpo del tag
9) Crear un tag que muestre una colección de elementos
10) Muestre los distritos de nuevoUsuario.jsp usando customTag
11) Muestre el nombre de los usuarios que empiecen con una letra y sean de un distrito en la página logueo.jsp usando customTag

 Vamos a resolver los ejemplos 1, 6, 9, 10 y 11, los demás los dejaré en el archivo de descarga para que lo revisen.

 Ejemplo (1)

 Creamos la clase Etiqueta1.java dentro del paquete aprendamos.java.etiquetas
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
package aprendamos.java.etiquetas;
 
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.tagext.TagSupport;
 
// Este tag no tiene atributos ni cuerpo
public class Etiqueta1 extends TagSupport {
 
 // Este método será llamado por Tomcat cuando encuentre la etiqueta en la
 // página jsp
 @Override
 public int doStartTag() throws JspException {
  try {
   // Simplmente obtiene el Stream de salida getOut() para escribir
   // Escribo la salida del tag
   pageContext.getOut().println(
     "Bienvenido a Aprender Como Jugando...");
  } catch (Exception e) {
   e.printStackTrace();
  }
  // Devolvemos SKIP_BODY para indicar que hace falta evaluar el cuerpo
  return SKIP_BODY;
 }
 
 // Este método se llamará cuando se evalue la etiqueta de fin
 @Override
 public int doEndTag() throws JspException {
  // Devolvemos EVAL_PAGE para indicar que se puede
  // seguir con el resto de la página
  return EVAL_PAGE;
 }
 
}

 Declaramos nuestra etiqueta creada en el archivo libreria.tld de la siguiente manera
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE taglib
  PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN"
  "http://java.sun.com/j2ee/dtds/web-jsptaglibrary_1_1.dtd">
<taglib>
 <!-- Es nuestro número de versión para nuestra etiqueta. Puede ser el número
  que queramos -->
 <tlibversion>1.0</tlibversion>
 <!-- Es la versión de jsp que estamos utilizando -->
 <jspversion>1.2</jspversion>
 <!-- Es el prefijo con el que llamaremos a las etiquetas desde el jsp -->
 <shortname>ct</shortname>
 <!-- Es el nombre que queramos dar a nuestra librería de etiquetas. Hay
  varias posibilidades, como poner una direccion web -URI-, pero basta con
  poner un nombre que queramos -->
 <uri>http://milibreria.facilito.com/jsp/ctag/mio</uri>
 
 <!-- Registramos nuestra primera etiqueta -->
 <tag>
  <!-- Nombre del tag -->
  <name>tag1</name>
  <!-- Clase que procesa el tag -->
  <tagclass>aprendamos.java.etiquetas.Etiqueta1</tagclass>
  <!-- Define si el tag tiene cuerpo (jsp) o no (empty) -->
  <bodycontent>empty</bodycontent>
  <!-- Descripcción del tag -->
  <info>Muestra un mensaje</info>
 </tag>
</taglib>

 Mostramos la etiqueta en la página customTag.jsp
1
2
3
4
5
6
7
8
<table>
<tr>
  <td class="etiqueta">Tag1 - tag sin atributos ni cuerpo:</td>
  <td class="control">
   <ct:tag1></ct:tag1>
  </td>
 </tr>
</table>
Ejemplo (6)

Creamos la clase Etiqueta6.java dentro del paquete aprendamos.java.etiquetas
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
package aprendamos.java.etiquetas;
 
import java.io.IOException;
 
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.TagSupport;
 
// Este tag tiene atributos pero no cuerpo
public class Etiqueta6 extends TagSupport {
 
 private String elementos;
 private String nombre;
 private String seleccion;
 
 public String getNombre() {
  return nombre;
 }
 
 public void setNombre(String nombre) {
  this.nombre = nombre;
 }
 
 public String getSeleccion() {
  return seleccion;
 }
 
 public void setSeleccion(String seleccion) {
  this.seleccion = seleccion;
 }
 
 public String getElementos() {
  return elementos;
 }
 
 public void setElementos(String elementos) {
  this.elementos = elementos;
 }
 
 @Override
 public int doStartTag() throws JspException {
  // Obtengo el stream para escribir
  JspWriter out = pageContext.getOut();
  String[] data = elementos.split(",");
  try {
   // Escribo la salida del tag
   out.println("<select name='" + nombre + "'"
     + "onChange='enviar();' >");
   for (String x : data) {
    if (x.trim().equals(seleccion))
     out.println("<option selected>" + x + "</option>");
    else
     out.println("<option>" + x + "</option>");
   }
   out.println("</select>");
  } catch (IOException e) {
   e.printStackTrace();
  }
  return super.doStartTag();
 }
 
}

Registramos el tag creado en el archivo libreria.tld
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- Registramos nuestra sexta etiqueta -->
<tag>
 <name>tag6</name>
 <tagclass>aprendamos.java.etiquetas.Etiqueta6</tagclass>
 <attribute>
  <name>nombre</name>
  <required>true</required>
 </attribute>
 <attribute>
  <name>elementos</name>
  <required>true</required>
 </attribute>
 <attribute>
  <name>seleccion</name>
  <required>true</required>
  <rtexprvalue>true</rtexprvalue>
 </attribute>
</tag>

Mostramos la salida del tag en la página customTag.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
<form action="logueo.jsp">
<table>
<tbody>
<tr>
  <td class="etiqueta">Tag6 - tag con atributos, sin cuerpo</td>
  <td class="control"><script type="text/javascript">
   function enviar() {
    document.forms[0].submit();
   }
  </script> <ct:tag6 elementos="[Seleccione], Mouse, CPU, Teclado, ABC" nombre="cboProductos" seleccion="${param.cboProductos}"></ct:tag6></td>
 </tr>
</tbody></table>
</form>
Ejemplo (9)

Creamos la clase Etiqueta8.java dentro del paquete aprendamos.java.etiquetas
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
package aprendamos.java.etiquetas;
 
import java.io.*;
import java.util.*;
import javax.servlet.jsp.*;
import javax.servlet.jsp.tagext.*;
 
// Este tag tiene atributo pero no cuerpo
public class Etiqueta9 extends TagSupport {
 
 private Collection<?> data;
 
 public void setData(Collection<?> c) {
  data = c;
 }
 
 public int doStartTag() throws JspException {
  try {
   JspWriter out = pageContext.getOut();
   Iterator<?> it;
   for (it = data.iterator(); it.hasNext();) {
    out.print("
<li>" + it.next().toString() + "</li>
");
   }
   return SKIP_BODY;
  } catch (IOException e) {
   e.printStackTrace();
   throw new JspException(e);
  }
 }
 
 public int doEndTag() throws JspException {
  return EVAL_PAGE;
 }
 
}

Registramos el tag creado en el archivo libreria.tld
1
2
3
4
5
6
7
8
9
10
11
12
<!-- Registramos nuestra novena etiqueta -->
<tag>
 <name>etiqueta9</name>
 <tagclass>aprendamos.java.etiquetas.Etiqueta9</tagclass>
 <bodycontent>empty</bodycontent>
 <info>Muestra una Collection</info>
 <attribute>
  <name>data</name>
  <required>true</required>
  <rtexprvalue>true</rtexprvalue>
 </attribute>
</tag>


Mostramos la salida del tag en la página customTag.jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
<tr>
 <td class="etiqueta">Tag9 - Tag con atributos tomados como expresion:</td>
 <td class="control">
  <%@ page import="java.util.Collection"%>
  <%@ page import="java.util.Vector"%>
  <%  Collection coll = new Vector();
   coll.add("uno");
   coll.add("dos");
   coll.add("tres");
  %>
  <ct:etiqueta9 data="<%=coll%>" />
 </td>
</tr>

Ejemplo (10)

 Creamos la clase TagSelectDistritos.java dentro del paquete aprendamos,java.etiquetas
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
package aprendamos.java.etiquetas;
 
import java.io.IOException;
import java.util.List;
 
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.TagSupport;
 
// Otra forma de crear etiquetas es utilizando la clase TagSupport
// Este tag tiene atributos pero no cuerpo
public class TagSelectDistritos extends TagSupport {
 
 private String nombre;
 private List<string> elementos;
 
 public List<string> getElementos() {
  return elementos;
 }
 
 public void setElementos(List<string> elementos) {
  this.elementos = elementos;
 }
 
 public String getNombre() {
  return nombre;
 }
 
 public void setNombre(String nombre) {
  this.nombre = nombre;
 }
 
 @Override
 public int doEndTag() throws JspException {
  // Dibujaremos otro select
  // referenciamos al JSP utilizando el objeto heredado pageContext
  JspWriter salida = pageContext.getOut();
  try {
   salida.print("<select name=");
   salida.print(this.getNombre());
   salida.println(">");
   salida.println("<option value='01'>Lima</option>");
   salida.println("<option value='02'>Independencia</option>");
   salida.println("<option value='03'>Jesus Maria </option>");
   salida.println("<option value='04'>San Isidro</option>");
   salida.println("</select>");
  } catch (IOException e) {
   e.printStackTrace();
  }
  return EVAL_PAGE;
 }
 
}

 Registramos el tag creado en el archivo libreria.tld
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- Registramos nuestra décima etiqueta -->
<tag>
 <name>cboDistritos</name>
 <tagclass>aprendamos.java.etiquetas.TagSelectDistritos</tagclass>
 <attribute>
  <name>nombre</name>
  <required>true</required>
  <rtexprvalue>true</rtexprvalue>
 </attribute>
 <attribute>
  <name>elementos</name>
  <required>false</required>
  <rtexprvalue>true</rtexprvalue>
 </attribute>
</tag>

 Mostramos la salida del tag en la página nuevoUsuario.jsp
1
2
3
4
5
6
7
8
9
10
11
12
<tr>
 <td class="control">Distrito:</td>
 <td>
  <!-- <select name="distrito" >
   <option value="01">Lima</option>
   <option value="02">Independencia</option>
   <option value="03">Jesus Maria</option>
   <option value="04">San Isidro</option>
  </select> -->
  <ct:cboDistritos nombre="distrito"></ct:cboDistritos>
 </td>
</tr>

 Ejemplo (11)


Creamos la clase TagSelectUsuarios.java dentro del paquete aprendamos.java.etiquetas
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
package aprendamos.java.etiquetas;
 
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
 
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.TagSupport;
 
import aprendamos.java.util.MySqlDbConn;
 
// Este tag tiene atributos pero no cuerpo
public class TagSelectUsuarios extends TagSupport {
 
 private String dist;
 private String letra;
 
 public String getDist() {
  return dist;
 }
 
 public void setDist(String dist) {
  this.dist = dist;
 }
 
 public String getLetra() {
  return letra;
 }
 
 public void setLetra(String letra) {
  this.letra = letra;
 }
 
 @Override
 public int doStartTag() throws JspException {
  // Obtener la conexión a bd
  Connection con = MySqlDbConn.obtenerConexion();
 
  // Instrucción sql que seleccione a los usuarios cuyo nombre empiece con
  // una letra "" y el distrito sea ""
  String sql2 = "select * from tbusuario where distrito=? and nombre like ? ";
  try {
   // Preparamos la sententcia
   PreparedStatement pst = con.prepareStatement(sql2);
   // Pasos los parametros
   pst.setString(1, dist);
   pst.setString(2, letra + "%");
   // Ejecutamos el query
   ResultSet rs = pst.executeQuery();
   // Obtengo el stream para escribir
   JspWriter salida = pageContext.getOut();
   try {
    // Escribo la salida del tag
    salida.print("<select name=lista>");
    while (rs.next()) {
     salida.print("<option>" + rs.getString(3) + "</option>");
    }
    salida.print("</select>");
   } catch (Exception e) {
    e.printStackTrace();
   }
  } catch (Exception e) {
   e.printStackTrace();
  }
  // Tag sin cuerpo
  return SKIP_BODY;
 }
 
 @Override
 public int doEndTag() throws JspException {
  return EVAL_PAGE;
 }
 
}

 Registramos el tag creado en el archivo libreria.tld
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- Registramos nuestra onceava etiqueta -->
<tag>
 <name>cboUsuarios</name>
 <tagclass>aprendamos.java.etiquetas.TagSelectUsuarios</tagclass>
 <attribute>
  <name>dist</name>
  <required>true</required>
  <rtexprvalue>false</rtexprvalue>
 </attribute>
 <attribute>
  <name>letra</name>
  <required>true</required>
  <rtexprvalue>false</rtexprvalue>
 </attribute>
</tag>

 Mostramos la salida del tag en la página customTag.jsp
1
2
3
4
5
6
7
<tr>
 <td colspan="2">
  <!-- Referenciamos a nuestra librería de Custom TAGs-->
  <%@ taglib prefix="ct" uri="http://milibreri.facilito.com/jsp/ctag/mio"%>
  <ct:cboUsuarios letra="j" dist="01"></ct:cboUsuarios>
 </td>
</tr>

Ejecutamos la aplicación y tendremos lo siguiente

Ingresar en la url http://localhost:8080/LP2-Semana07a/customTag.jsp

 EXTRA LIBRERÍA JMESA

 1. Descargarmos los recursos desde aquí
2. Copiamos los recursos (css, js,images) en /WebContent/
3. Copiamos los jars en /WEB-INF/lib/
4. Ejemplo de uso: Modificamos la página listadoDeUsuario.jsp

 Referenciamos el archivo taglib jmesa.tld, el cual ya esta definido dentro de los recursos de la libreria de jmesa. Podemos verificar entrando a la siguiente ruta del nuestro proyecto /JavaResources/Libraries/WebAppLibraries/jmesa-2.4.4.jar/META-INF/jmesa.tld 
El uri para referenciar es http://code.google.com/p/jmesa
1
2
<!-- Referenciamos a la libreria de jmesa -->
<%@  taglib prefix="jmesa" uri="http://code.google.com/p/jmesa"%>

 Importamos los recuros (css, js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!-- Referenciamos a jquery dado que jmesa utiliza esta libreria de javascript -->
<link href="./css/web.css" rel="stylesheet" type="text/css">
<link href="./css/jmesa.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-1.3.min.js" type="text/javascript"></script>
<script src="./js/jquery.bgiframe.pack.js" type="text/javascript"></script>
<script src="./js/jquery.jmesa.js" type="text/javascript"></script>
<script src="./js/jmesa.js" type="text/javascript"></script>
<script type="text/javascript">
 function onInvokeAction(id, action) {
  $.jmesa.setExportToLimit(id, '');
 
  if (action == 'sort') {
   var limit = LimitManager.getLimit(id);
   var sortSet = limit.getSortSet();
   if (sortSet) {
    var sort = limit.sortSet[limit.sortSet.length - 1];
    removeAllSortsFromLimit(id);
    limit.sortSet[0] = sort;
   }
  }
 
  $.jmesa.createHiddenInputFieldsForLimitAndSubmit(id);
 }
 function onInvokeExportAction(id) {
  var parameterString = $.jmesa.createParameterStringForLimit(id);
  location.href = '${pageContext.request.contextPath}/usuario.do?operacion=lista&'
    + parameterString;
 }
</script>

 Listando usuarios usando JMESA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- Generamos el listado con Jmesa -->
<jmesa:tableFacade id="listado01" items="${requestScope.li_usuarios}" var="usu" maxRows="2" maxRowsIncrements="2,4,6">
 <jmesa:htmlTable>
  <jmesa:htmlRow>
   <jmesa:htmlColumn property="nombre" title="Nombre" sortOrder="asc,desc" />
   <jmesa:htmlColumn property="direccion" title="Direccion" />
   <jmesa:htmlColumn title="Eliminar">
    <a href="usuario.do?operacion=elimina&usuario=${usu.usuario}">E</a>
   </jmesa:htmlColumn>
   <jmesa:htmlColumn title="Modificar" property="x">
    <a href="usuario.do?operacion=cargaModifica&usuario=${usu.usuario}">M</a>
   </jmesa:htmlColumn>
  </jmesa:htmlRow>
 </jmesa:htmlTable>
</jmesa:tableFacade>

Ejecutamos el proyecto

Descargar ejercicio

Corre la voz

No hay comentarios, ¡cuéntame algo!

Me gustaría saber tu opinión. ¡Saludos!

Suscribirse a: Comentarios de la entrada (Atom)
joseltoro© 2019 Todos los derechos reservados