☕️ JSP y JSTL
Diseño Web

Características:

• Simplifican el uso de expresiones en JSPs.
• Permite la ejecución de expresiones fuera de los elementos de scripting de JSP
• Fue introducida con JSTL 1.0 como un mecanismo alternativo al uso de expresiones en Java para asignar valores a atributos
• EL es mucho más tolerante con las variables null y realiza conversiones automáticas de datos Se puede habilitar o deshabilitar el uso de expresiones EL:
  

  <%@ page isELIgnored="false" %>

${nombre}

Definir constantes en el web.xml

<servlet>
	<description></description>
	<display-name>D_sumador</display-name>
	<servlet-name>D_sumador</servlet-name>
	<servlet-class>com.pablomonteserin.jsp.servlets.D_sumador</servlet-class>
	<init-param>
	<param-name>valor</param-name>
		<param-value>
			5
		</param-value>
	</init-param>
</servlet>

ServletConfig conf=getServletConfig();
int valor = Integer.parseInt(conf.getInitParameter("valor"));

Ciclo de una petición con JSP

index.jsp<form action="/ciclo/Controlador">
	<input type="text" name="nombre">

	<input type="submit" value="Como soy?">
</form>

${resultado}

Controlador.java@WebServlet("/Controlador")
public class Controlador extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//Recojo los parámetros que me vienen del jsp
		String nombre = request.getParameter("nombre");

		//Genero un resultado
		String resultado = "Hola " + nombre;
		
		//Ponemos en el objeto request los datos que vamos a enviar al jsp
		request.setAttribute("resultado", resultado);
		
		//Redireccion a index.jsp
		request.getRequestDispatcher("index.jsp").forward(request,  response);
	}
}

JSTL – (Java Server Page Standard Tag Library)

Son un conjunto de etiquetas (tags) standard que encapsulan funcionalidades de uso común para muchas aplicaciones con JSPs.

• Debido a que las etiquetas JSTL son XML, se integran uniformemente con las etiquetas HTML y serán fáciles de usar por alguien que conozca html.
• Las etiquetas JSTL están específicamente preparadas para realizar las tareas que van a tener lugar en la lógica de la presentación.
• EL es usado extensamente en la librería JSTL.

• Agregar mayor sobrecarga al servidor. El código Java embebido en los scriptlets es básicamente copiado en el servlet resultante. En cambio, las etiquetas JSTL, causan un poco más de código en el servlet. En la mayoría de casos esta cantidad no es mensurable pero debe ser considerado.
• Los scriptlets son más potentes que las etiquetas JSTL. Si desea hacer todo en un script JSP pues es muy probable que insertará todo el código Java en él.

Cargar JSTL

1. Dejamos los archivos jstl.jar y standard.jar en la carpeta lib de nuestro proyecto. Descargar librerías.
2. Incluimos las siguientes etiquetas en la cabecera de nuestro jsp:
   

   <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
   <%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %>
   <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
   <%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>

   La dirección http no es buscada en internet, sino en los tld (tag library descriptor) que contienen los jar. El texto concreto de esta url carece de importancia, mientras coincida con la url que posee el tld.

3. <c:out value="Hola Mundo JSTL!"></c:out>
   <c:out value="${param.nombre}" />

getAttribute() vs getParameter()

getParameter() devuelve una cadena de texto:request.getParameter("nombre"); 

${param.nombre} // normalmente no usaremos este código en la vista

setAttribute() envía un objeto:request.setAttribute("nombreAtributo", valorAtributo); // guarda un objeto en el request. 

<%=request.getAttribute("nombreAtributo");%> // devuelve un objeto${nombreAtributo}
<c:out value="${nombreAtributo}" />"

Ejercicio saludo

El usuario debe introducir su nombre en un cuadro de texto. Dicho nombre será enviado a un Servlet que generará el mensaje "Buenas tardes [nombre]". Dicho mensaje llegará de nuevo al jsp, dónde lo mostraremos

Utilizar scriplet, JSTL y EL para recuperar la información.

Directiva para cargar JSTL:<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

Uso de clases y objetos

Instanciar

Instanciar una clase desde un JSP utilizando scriplet.

<h1>Con scriplets JSP</h1>
<%= new com.pablomonteserin.model.StringExtendido() %>

<%@page import="com.pablomonteserin.model.StringExtendido"%>
<%= new StringExtendido() %>

Ejercicio: Instanciar

Imprimir utilizando scriptlet (<%= %>) una instancia de la clase Date.

Tener en cuenta que la clase Date pertenece al paquete java.util

Ejemplo – Recuperar un Bean Libro que tiene un metodo getTitulo();

servlet.java 
Libro libro = new Libro("978-84-415-2988-5", "Java 7", 15.8); 
request.setAttribute("libro", libro); 
request.getRequestDispatcher("index.jsp").forward(request, response);

index.jsp (scriplet) 
<% Libro libro = (Libro)request.getAttribute("libro"); %>
<%=libro.getTitulo()%>

index.jsp (EL)
${requestScope.libro.titulo}

index.jsp (JSTL)
<c:out value="${requestScope.libro.titulo}"></c:out>

Obsérvese que utilizando Scriplet es necesario hacer un casteo para recuperar la información y usando EL y JSTL, no.

Ejercicio Instanciar II

La aplicación consta de un servlet, un bean Persona(dni, nombre y dirección) y un fichero jsp.

El flujo de la aplicación comienza en el jsp. Introduciremos los datos pertinentes y al pulsar el botón de envío, los enviaremos al controlador. En el controlador Aquí instanciaremos e inicializaremos un bean Persona.

Luego, utilizando el método

request.getRequestDispatcher("rutaHastaElJSP").forward(request, response);

Aquí mostraremos las propiedades del bean utilizando scriptlet, EL y JSTL.

Ejercicio

request.getRequestDispatcher("rutaHastaElJSP").forward(request, response);

Estructura de control IF

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<h1>Scriptlet JSP</h1>
<%
	int dato1 = 3;
	int dato2 = 5;
	if(dato2 > dato1){
		out.println("dato2 es mayor que dato1");
	}else{
		out.println("dato2 es mayor que dato1");		
	}
%>

<h1>EL</h1>
${5 gt 3}- 1 -${5 > 3} - 2 - ${5 lt 3} - 3 -${5 < 3} - 4 -${5 eq 1}	


<h1>JSTL</h1>
<c:if test="${5>3}">
5 es mayor que 3!
</c:if>

Procesar el formulario en la propia página

<%
	if(request.getParameter("botonEnvio")!=null){
		out.println("boton Pulsado");
	}
%>

<form method="post" action="#">
	<input type="submit" name="botonEnvio" value="botonEnvio"></input>
</form>

Ejercicio

Repetir el ejemplo de la diapositiva anterior usando JSTL

else

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<h1>Scriptlet JSP</h1>
<%
	int dato1 = 3;
	int dato2 = 5;
	if(dato2 > dato1){
		out.println("dato2 es mayor que dato1");
	}else{
		out.println("dato2 es mayor que dato1");		
	}
%>


<h1>JSTL</h1>

 <c:choose>
        <c:when test='${5 > 3}'>
			5 es mayor que 3!
        </c:when>
        <c:otherwise>
			5 no es mayor q 3.
        </c:otherwise>
</c:choose>

Ejercicio

<%
	if(request.getParameter("botonEnvio")!=null){
		out.println("boton pulsado");
	}//Añadir líneas aquí
%>

<form method="post" action="#">
	<input type="submit" name="botonEnvio" value="botonEnvio"></input>
</form>

Ejercicio – repetir el ejercicio de la diapositiva anterior usando JSTL

Ejercicio

Si he pulsado el botón de enviar, imprimir el value del campo de texto; si no, imprimir "Botón no pulsado". Utilizar un scriplet.

Ejercicio

Repetir el ejercicio de la diapositiva anterior usando JSTL.

Mandar formulario

Ejercicio: Mandar un formulario.

Resolver utilizando scriplet, EL y JSTL

Desde una página HTML mandaremos datos a un Servlet. En el Servlet introduciremos la información en un pojo de pedido y finalmente iremos a una página llamada salida.jsp donde mostraremos un mensaje con el pedido realizado.

Ejercicio: Repetir con JSTL

Repetir el ejercicio de la diapositiva anterior utilizando JSTL.

Ejercicio: Cambiar color body utilizar scriplet

Ejercicio

Repetir el ejercicio anterior utilizando JSTL.

Ejercicio

La combo debe recordar la opción seleccionada tras hacer submit.

Pista!:
Una opción de una combo está seleccionada si tiene su atributo
selected con el siguiente valor:
selected = "selected"

Ejercicio

Hacer una calculadora que haga uso de los operadores aritméticos +, -, *, /. Al pulsar el botón de envío realizará la operación seleccionada.

Ejercicio

Repetir el ejercicio anterior usando JSTL.

Estructura de control: bucle for

<%
	for(int i=0; i<10; i++){
		out.print(i);
	}
%>

Ejercicio: imprimir los números pares que hay dentro de los 1000 primeros números naturales

Nota: El operador “%” nos da el resto de dividir un número entre otro. 

Ej: 7%2=1

Bucle con JSTL

<c:forEach begin="0" step="1" end="10" var="variable">
	<c:out value="${variable}"></c:out>
</c:forEach>

Recorrer una collection

<c:forEach var="libro" items="${libros}">
	<c:out value="${libro.titulo}"></c:out>
</c:forEach>

Recorrer una collection con contador

<ul>
	<c:forEach var="persona" items="${requestScope.collection}"
		varStatus="status">
		<li>item <c:out value="${status.count}" /> - 
				 <c:out value="${status.index}" /> 
			<c:if test="${status.first}">(this is the first item!)</c:if> 
			<c:if test="${status.last}">(this is the last item!)</c:if>
		</li>
	</c:forEach>
</ul>

Ejercicio: recorrer una collection de personas y maquetar el resultado de la siguiente forma. La carga de información de la colección la haremos mediante un Servlet; sin usar base de datos.

Descargar recurso

Asignar valor a variables con JSTL

<c:set var="nombreVariable" value="valor"/>
<c:out value="${nombreVariable}" />
${nombreVariable}

Session

Hola Servidor! Esta es mi primera petición. Te paso el parámetro nombre con el value Juan

Ok, pero no voy a recordarte. Lo mejor será que te dé un identificador de sesión. Debes pasármelo cada vez que me hagas una petición. Así sabré que eres tú.

Hola de nuevo!. Esta es mi segunda petición. Te paso el parámetro edad. Mi ID es 38... me recuerdas?

Vamos a ver... 38... oh! Aquí estás! La última vez me dijiste que te llamabas Juan!.

El identificador de sessión es una COOKIE llamada JSESSIONID

Creación de la sesión

La sesión se crea automáticamente al ingresar a la página web, o bien cuando una sesión termine.

Podemos ver el valor de JSESSIONID:${pageContext.session.id}

Matar una sesión

Configurando un timeout en el web.xml<web-app ...>
	<servlet>
		...
	</servlet>
	<session-config>
		<session-timeout>15</session-timeout>
	</session-config>
</web-app>

La sesión será anulada tras 15 minutos de inactividad.

Asignando un timeout desde código java:session.setMaxInactiveInterval(60*20);

Argumento en segundos (en este caso,) 20 minutos

Método invalidatesession.invalidate();

Si el cliente tiene las cookies deshabilitadas... URL rewriting

out.println(''<a href=''\<a href=\'''' + response.encodeURL(''/BeerTest.do'')+''\''>click me</a>'';

Add the extra session ID info to this URL

Sessión

Usar variables de sesión es más rápido, pero cuesta memoria RAM.

Usar la base de datos es más lento pero no consume RAM.

En la RAM del servidor se almacenará el identificador de sesión y los objetos vinculados a ella.

En una COOKIE del cliente se almacenará dicho identificador de sesión.

Para almacenar un valor en la sessión

HttpSession session = request.getSession();
session.setAttribute("valor", valor);

Listener de sesión

Crear un listener de sesión: Btn derecho sobre un package → new → Listener → Escribo el nombre → next → HTTP session events → Livecycle → marco la check

Será posible modificar el contenido inicial de la sesión desde el session listener:

public void sessionCreated(HttpSessionEvent request){
	HttpSession session = request.getSession();
}

Recuperar y guardar un ArrayList en la sesión

Antes de usar el ArrayList que vamos a recuperar de la sesión, tendremos que comprobar que no sea nulo u obtendremos una NullPointerException.

HttpSession session = request.getSession();
	
ArrayList <Libro> libros = (ArrayList <Libro>) session.getAttribute("libros");
if(libros == null){
	libros = new ArrayList<Libro>();
}
libros.add(libro);
//Nota: en caso de que session.getAttribute nos devuelva null, será necesaria la siguiente línea. Si no devuelve null, no será necesaria, ya que el ArrayList estaría apuntando a la sesión y al modificar el ArrayList se estaría modificando directamente el valor que está en la sesión.
//session.setAttribute("palabras", al);

Ejercicios Sesión

CRUD contra la sesion

Hacer una página con alta, baja modificación y consulta de una Persona.

Los atributos de dicha persona serán nombre, dni y edad

Descargar recurso

Ejercicio sumatorio

Hacer un proyecto web nuevo en el que a través de un formulario se vayan sumando dos números introducidos por el usuario.

En un campo de tipo input aparecerá la suma de los dos números introducidos

En otro campo aparecerá la suma de todos los números introducidos desde el comienzo de la sesión.

En otro campo más aparecerá la suma desde que arrancamos el servidor

Para ello, desde una página index.jsp enviaremos la información a un controlador servlet que realizará las operaciones necesarias. El resultado de estas operaciones será devuelto a la página de inicio index.jsp.

El botón limpiar mata la sesión. Esto será procesado por el controlador servlet.

Para acceder al ámbito de la aplicación usaremos:

ServletContext ctx = getServletContext();

Ejercicio librería con sesión

Hacer un CRUD para los libros de una librería. Usaremos un SessionListener los datos de la base de datos en un ArrayList que almacenaremos en la sesión. A partir de ahí, todas las operaciones las haremos contra dicha sesión.

En caso de terminar antes, intentar que los cuadros de modificación se actualicen al cambiar el valor de la combo.
Para ello, cuando la combo cambie, enviaré la id del libro, la compararé con la id de los libros almacenados en el arraylist y devolveré los datos del libro para el cual hubo coincidencia.

Descargar ejercicio calidades con JPA

Ejercicio librería – con Map

Repetir el ejercicio de la diapositiva anterior utilizando un TreeMap para almacenar la información en vez de un ArrayList.

Métodos del TreeMap:
objetoTreeMap.put(Object key, Object value);
objetoTreeMap.remove(Object key);
objetoTreeMap.get(Object key);
objetoTreeMap.firstEntry().getValue();

Recorrer un Map:
<c:forEach var="libro" items="${sessionScope.libros}">
	<option value="<c:out value="${libro.value.id}" />" 
...

Ejercicio: Lista de palabras

Hacer un formulario que permita añadir palabras a un ArrayList. Dicho ArrayList será almacenado en la sesión. Con código EL iremos visualizando el contenido del ArrayList:

${ArrayListPalabras}

Inclusión de JSP's

<%@ include file="Header.html" %>

La inclusión se ejecuta en tiempo de traducción, se genera un único fichero java a partir de uno o varios JSP.

No permite importar una dirección url.

<jsp:include page="Header.jsp" />

Esta es la etiqueta que usualmente usamos.

Es la versión xml de la directiva anterior.

<c:import url="http://google.es" />

Para usarla hay que importar la librería jstl.

Es igual que <jsp:include, pero con más posibilidades.

Permite importar url's externas.

Ejercicio

Hacer dos páginas web cuyas secciones cabecera y botonera sean cargadas con la etiqueta <jsp:include ... />

Para realizar este ejercicio tendremos que crear cuatro documentos:

• cabecera.html
• botonera.html
• pagina1.jsp
• pagina2.jsp

Ejercicio

Ahora los links de la botonera enlazarán con la propia página, pasándole un parámetro que será recogido y usado para que una etiqueta <c:choose> procese el parámetro y cargue el contenido correspondiente.

Para realizar este ejercicio necesitaremos 3 páginas:

• contenido1.html
• contenido2.html
• index.jsp