m2 Lab4 Nuevo

24
GUÍA DE LABORATORIO 2 “JSP, JSTL, EL”

Transcript of m2 Lab4 Nuevo

Page 1: m2 Lab4 Nuevo

GUÍA DE LABORATORIO 2

“JSP, JSTL, EL”

Page 2: m2 Lab4 Nuevo

Tecsup JSP, JSTL, EL

LABORATORIO

Objetivos:

Escribir páginas JSP, utilizando etiquetas JSTL y EL.

Equipos, Materiales, Programas y Recursos :

PC con Sistema Operativo con soporte a Java. IDE para Java Navegador Web (recomendable Firefox) Contenedor de Servlets (recomendable Tomcat)

Introducción:

Los contenedores de Servlets son los servidores donde se ejecutarán los Servlets. Los Servlets son los componentes de Java que se ejecutan en el servidor y construyen páginas Web. En el presente laboratorio se escribirán los primeros servlets que nos permitirán conocer su estructura.

Preparación:

El alumno debe haber revisado previamente el texto del curso, así como también, las presentaciones dadas en la clase de teoría.

Procedimiento y Resultados :

Dpto. de Informática – David Rodríguez - [email protected] Pág. 1

Page 3: m2 Lab4 Nuevo

Tecsup JSP, JSTL, EL

JSP: Etiquetas básicas

EJERCICIO 1

primer.jsp<html><body><%String mensaje = "Java Web";out.println(mensaje);%></body></html>

EJERCICIO 2

expresiones.jsp<html><body><%String curso = "Java Web";%> <%=curso%></body></html>

Dpto. de Informática – David Rodríguez - [email protected] Pág. 2

Page 4: m2 Lab4 Nuevo

Tecsup JSP, JSTL, EL

EJERCICIO 3

area.jsp<html><body>Usando PI igual a <%=pi%>, el área del círculo<br>con un radio de 3 es <%=area(3)%><%!double area(double r) { return r*r*pi;}%><%! final double pi=3.14159; %></body></html>

EJERCICIO 4

comentarios.jsp<html> <body> Comentarios<%-- Comentario 1 --%><!-- Comentario 2 --><%// Comentario 3

/* Comentario 4 */%> </body></html>

Dpto. de Informática – David Rodríguez - [email protected] Pág. 3

Page 5: m2 Lab4 Nuevo

Tecsup JSP, JSTL, EL

EJERCICIO 5

importar.jsp<%@page import="java.util.*" %><html><body><%Date fecha = new Date();String total=fecha.getDate()+"-"+(fecha.getMonth()+1)+"-" + (fecha.getYear()+1900);%><%=total%></body></html>

EJERCICIO 6

inclusion.jsp<html><body><h3>Inclusión</h3>

<%@include file="tabla.jsp" %>

</body></html>

tabla.jsp<table border="1"><tr><td colspan="2">Tabla de Prueba</td></tr><tr><td>Celda 1</td><td>Celda 2</td></tr><tr><td>Celda 3</td><td>Celda 4</td></tr><tr><td>Celda 5</td><td>Celda 6</td></tr></table>

Dpto. de Informática – David Rodríguez - [email protected] Pág. 4

Page 6: m2 Lab4 Nuevo

Tecsup JSP, JSTL, EL

EJERCICIO 7

mostrarcollection.jsp<%@page import="java.util.*"%><html> <body><%Collection<String> c = new ArrayList<String>();c.add("servlets");c.add("jsp");c.add("beans");c.add("tags");

for(String x : c){ out.print(x);

}%></body></html>

Mostrar los datos en una tabla HTML.

Dpto. de Informática – David Rodríguez - [email protected] Pág. 5

Page 7: m2 Lab4 Nuevo

Tecsup JSP, JSTL, EL

Librería JSTL

Copiar las librerías jstl-impl-1.2.jar y jstl-api-1.2.jar

EJERCICIO 8

Pregunta.javapackage trastienda.modelo;

public class Pregunta {

private int idPregunta;private String texto;

// AGREGAR GETTERS & SETTERS

}

demo1.jsp<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@page import="trastienda.modelo.Pregunta,java.util.*"%><html> <body> <% Pregunta p1 = new Pregunta(); p1.setIdPregunta(1); p1.setTexto("¿Qué es jstl?"); Pregunta p2 = new Pregunta(); p2.setIdPregunta(2); p2.setTexto("¿Qué es EL?"); Collection<Pregunta> c = new ArrayList<Pregunta>(); c.add(p1); c.add(p2); request.setAttribute("preguntas", c); %>

<c:forEach items="${requestScope.preguntas}" var="p" varStatus="i" > ${i.count}.- ${p.texto} <br/> </c:forEach> </body></html>

Dpto. de Informática – David Rodríguez - [email protected] Pág. 6

Page 8: m2 Lab4 Nuevo

Tecsup JSP, JSTL, EL

EJERCICIO 9

demo2.jsp<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %><html><body><c:set var="titulo" value="Este es el TITULO de la PAGINA"/>

${fn:toUpperCase(titulo)}

<br/>${fn:substring(titulo, 2,10)}

<br/>${fn:replace(titulo, "TITULO", "TITLE")}

<br/>${fn:escapeXml("<foo>body of foo</foo>")}

</body></html>

Dpto. de Informática – David Rodríguez - [email protected] Pág. 7

Page 9: m2 Lab4 Nuevo

Tecsup JSP, JSTL, EL

EJERCICIO 10

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

<html> <body>

<h3>IF</h3> <c:if test='${param.ok == "yes"}'> Hola <c:out value="${param.name}!"/> </c:if> <h3>CHOOSE</h3> <c:choose> <c:when test='${param.curso == "java"}'> Curso de Java </c:when> <c:when test='${param.curso == "php"}'> Curso de PHP </c:when> </c:choose> <h3>FOREACH</h3> <table> <tr><th>Value</th> <th>Square</th></tr> <c:forEach var="x" begin="0" end="10" step="2"> <tr><td><c:out value="${x}"/></td> <td><c:out value="${x * x}"/></td></tr> </c:forEach> </table> </body></html>

Dpto. de Informática – David Rodríguez - [email protected] Pág. 8

Page 10: m2 Lab4 Nuevo

Tecsup JSP, JSTL, EL

FORWARD

EJERCICIO 11

ListarPedidosServlet.java. . . protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

System.out.println("Dentro de ListarPedidosServlet");

RequestDispatcher rd = request.getRequestDispatcher("/pedidos.jsp");rd.forward(request, response);

}. . .

pedidos.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Ejercicio</title></head><body>

Esta es la página pedidos.jsp

</body></html>

Dpto. de Informática – David Rodríguez - [email protected] Pág. 9

Page 11: m2 Lab4 Nuevo

Tecsup JSP, JSTL, EL

COMUNICACIÓNEJERCICIO 12

Cliente.javapackage trastienda.modelo;

public class Cliente {

private int codigo;private String nombres;private String paterno;private String materno;

public String getNombreCompleto(){return this.nombres + " " + this.paterno + " " + this.getMaterno();

}

// AGREGAR GETTERS & SETTERS}

ClientesListarServlet.java. . . protected void doGet(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

Cliente c1 = new Cliente();c1.setCodigo(11);c1.setNombres("David");c1.setPaterno("Rodriguez");c1.setMaterno("Condezo");

Cliente c2 = new Cliente();c2.setCodigo(12);c2.setNombres("Juan");c2.setPaterno("Perez");c2.setMaterno("Quispe");

ArrayList<Cliente> clientes = new ArrayList<Cliente>();clientes.add(c1);clientes.add(c2);

// Guardando datos en el scope REQUESTrequest.setAttribute("CLIENTES_REGISTRADOS", clientes);

// Guardando datos en el scope SESSIONHttpSession session = request.getSession();session.setAttribute("CLIENTES_VIP", clientes);

RequestDispatcher rd = request.getRequestDispatcher("clientes_listado.jsp");

rd.forward(request, response);

}. . .

Dpto. de Informática – David Rodríguez - [email protected] Pág. 10

Page 12: m2 Lab4 Nuevo

Tecsup JSP, JSTL, EL

clientes_listado.jsp<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body>

<h3>Listado de Clientes Registrados</h3><%@page import="java.util.ArrayList,trastienda.modelo.Cliente"%><%

ArrayList<Cliente> clientes = (ArrayList<Cliente>) request.getAttribute("CLIENTES_REGISTRADOS");

out.println("<ul>");if (clientes != null) {

for (Cliente x : clientes) {out.println("<li>" + x.getNombreCompleto() + "</li>");

}} else {

out.println("<font color=red>La variable CLIENTES_REGISTRADOS no tiene valor</font>");

}out.println("</ul>");

%>

<h3>Listado de Clientes VIP</h3><%@page import="java.util.ArrayList,trastienda.modelo.Cliente"%><%

ArrayList<Cliente> vip = (ArrayList<Cliente>) session.getAttribute("CLIENTES_VIP");

out.println("<ul>");if (vip != null) {

for (Cliente x : vip) {out.println("<li>" + x.getNombreCompleto() + "</li>");

}}out.println("</ul>");

%>

<a href="clientes_detalles.jsp">Continuar...</a></body></html>

Dpto. de Informática – David Rodríguez - [email protected] Pág. 11

Page 13: m2 Lab4 Nuevo

Tecsup JSP, JSTL, EL

clientes_detalles.jsp<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body>

<h3>Listado de Clientes Registrados</h3><%@page import="java.util.ArrayList,trastienda.modelo.Cliente"%><%

ArrayList<Cliente> clientes = (ArrayList<Cliente>) request.getAttribute("CLIENTES_REGISTRADOS");

out.println("<ul>");if (clientes != null) {

for (Cliente x : clientes) {out.println("<li>" + x.getNombreCompleto() + "</li>");

}} else {

out.println("<font color=red>La variable CLIENTES_REGISTRADOS no tiene valor</font>");

}out.println("</ul>");

%>

<h3>Listado de Clientes VIP</h3><%@page import="java.util.ArrayList,trastienda.modelo.Cliente"%><%

ArrayList<Cliente> vip = (ArrayList<Cliente>) session.getAttribute("CLIENTES_VIP");

out.println("<ul>");if (vip != null) {

for (Cliente x : vip) {out.println("<li>" + x.getNombreCompleto() + "</li>");

}}out.println("</ul>");

%>

<a href="clientes_detalles.jsp">Continuar...</a></body></html>

Dpto. de Informática – David Rodríguez - [email protected] Pág. 12

Page 14: m2 Lab4 Nuevo

Tecsup JSP, JSTL, EL

ETIQUETAS PERSONALIZADAS

- PRIMERA ETIQUETA

PrimerTag.javapackage trastienda.tag;

import javax.servlet.jsp.JspException;import javax.servlet.jsp.tagext.TagSupport;

public class PrimerTag extends TagSupport {

public int doStartTag() throws JspException { try { pageContext.getOut().print("Esta es mi primera etiqueta."); } catch (Exception ex) { throw new JspException("Error al crear la primera etiqueta"); } return SKIP_BODY; }}

/WEB-INF/EtiquetasPersonalizadas.tld<?xml version="1.0" encoding="UTF-8"?>

<taglib version="2.0">

<tlib-version>1.0</tlib-version> <short-name>EtiquetasPersonalizadas</short-name> <uri>/WEB-INF/EtiquetasPersonalizadas</uri>

<tag> <name>mensaje</name> <tag-class>trastienda.tag.PrimerTag</tag-class> <body-content>empty</body-content> </tag> </taglib>

test_tag1.jsp<%@taglib uri="/WEB-INF/EtiquetasPersonalizadas" prefix="mistag" %><html><body><mistag:mensaje/></body></html>

Dpto. de Informática – David Rodríguez - [email protected] Pág. 13

Page 15: m2 Lab4 Nuevo

Tecsup JSP, JSTL, EL

- ETIQUETA PONER EN MAYÚCULA

PonerEnMayusculaTag.javapackage trastienda.tag;

import java.io.IOException;

import javax.servlet.jsp.JspException;import javax.servlet.jsp.JspWriter;import javax.servlet.jsp.tagext.BodyTagSupport;

public class PonerEnMayusculaTag extends BodyTagSupport { public int doStartTag() throws JspException { return EVAL_BODY_BUFFERED; } public int doAfterBody() throws JspException { try { JspWriter out = bodyContent.getEnclosingWriter(); String text = bodyContent.getString(); out.print(text.toUpperCase()); } catch (IOException e){ throw new JspException(e.getMessage()); } return SKIP_BODY; }}

/WEB-INF/EtiquetasPersonalizadas.tld… <tag> <name>PonerEnMayuscula</name> <tag-class>trastienda.tag.PonerEnMayusculaTag</tag-class> <body-content>JSP</body-content> </tag> …

test_tag2.jsp<%@taglib uri="/WEB-INF/EtiquetasPersonalizadas" prefix="mistag" %><html><body><mistag:PonerEnMayuscula>Curso de Java</mistag:PonerEnMayuscula></body></html>

Dpto. de Informática – David Rodríguez - [email protected] Pág. 14

Page 16: m2 Lab4 Nuevo

Tecsup JSP, JSTL, EL

- ETIQUETA QUE MUESTRA UN ARREGLO COMO TABLA

MostrarArregloComoTablaTag.javapackage trastienda.tag;

import javax.servlet.jsp.JspException;import javax.servlet.jsp.JspWriter;import javax.servlet.jsp.PageContext;import javax.servlet.jsp.tagext.TagSupport;

public class MostrarArregloComoTablaTag extends TagSupport { private String nombreAtributo; private String nombreScope; public void setNombreAtributo(String nombreAtributo){ this.nombreAtributo = nombreAtributo; } public void setNombreScope(String nombreScope){ this.nombreScope = nombreScope; }

private int getScopeAsInt(){ if("request".equals(nombreScope)){ return PageContext.REQUEST_SCOPE; } if("session".equals(nombreScope)){ return PageContext.SESSION_SCOPE; } if("application".equals(nombreScope)){ return PageContext.APPLICATION_SCOPE; } return PageContext.PAGE_SCOPE; } public int doStartTag() throws JspException { try { String[] cadenas = (String[])pageContext.getAttribute(nombreAtributo, getScopeAsInt()); JspWriter out = pageContext.getOut(); out.print("<table border=\"1\">"); for(int i=0; i<cadenas.length; i++){ out.print("<tr><td>"+cadenas[i]+"</td></tr>"); } out.print("</table>"); } catch (Exception e){ throw new JspException(e.getMessage()); } return SKIP_BODY; }}

/WEB-INF/EtiquetasPersonalizadas.tld

Dpto. de Informática – David Rodríguez - [email protected] Pág. 15

Page 17: m2 Lab4 Nuevo

Tecsup JSP, JSTL, EL

… <tag> <name>MostrarArregloComoTabla</name> <tag-class>trastienda.tag.MostrarArregloComoTablaTag</tag-class> <body-content>empty</body-content> <attribute> <name>nombreAtributo</name> <required>true</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <name>nombreScope</name> <required>true</required> <rtexprvalue>false</rtexprvalue> </attribute> </tag>…

test_tag3.jsp<%@taglib uri="/WEB-INF/EtiquetasPersonalizadas" prefix="mistag" %><html><body> <% String[] cadenas = {"uno", "dos", "tres"}; request.setAttribute("cadenas", cadenas); %> <mistag:MostrarArregloComoTabla nombreAtributo="cadenas" nombreScope="request"/></body></html>

- EJERCICIO: ETIQUETA PERSONALIZADA

Escribir una etiqueta que realice lo siguiente:

Página JSP:<%@taglib prefix="c" uri="/WEB-INF/tags/CabeceraTag.tld"%><%@taglib prefix="t" uri="/WEB-INF/tags/TablaTag.tld"%><%@taglib prefix="p" uri="/WEB-INF/tags/PieTag.tld"%>

<c:cabecera titulo="Tecsup" keyword="Programación en Java"> Esta es la página principal</c:cabecera>

<h1>Contenido de mi página</h1><%String[][] productos = { {"1","libro"}, {"2","borrador"}, {"3","lapicero"}};pageContext.setAttribute("productos", productos);%><t:tabla arreglo="productos"/>

<p:pie contenido="Copyright @ 2011 por Tecsup"/>

Dpto. de Informática – David Rodríguez - [email protected] Pág. 16

Page 18: m2 Lab4 Nuevo

Tecsup JSP, JSTL, EL

Resultado en HTML:<html> <head> <title>Tecsup</title> <meta name=”keyword” content=”Programación en Java”/> </head> <body> <b>E</b>sta <b>E</b>s <b>L</b>a <b>P</b>ágina <b>P</b>rincipal <br/>

<h1>Contenido de mi página</h1>

<table border=”1”> <tr><th>Id</th><th>Descripción</th> <tr><td>1</td><td>Libro</td></tr> <tr><td>2</td><td>Libro</td></tr> <tr><td>3</td><td>Lapicero</td></tr> </table>

<h3>Copyright @ 2011 por Tecsup</h3> </body></html>

Conclusiones:

En la presente sesión, se las páginas JSP.

Dpto. de Informática – David Rodríguez - [email protected] Pág. 17