Anda di halaman 1dari 11

3.

DESARROLLO WEB CON JAVA JSP & SERVLETS


La programacin de aplicaciones web sobre la especificacin de JSP y Servlets es un subconjunto de la plataforma Java EE. Existen muchas formas de estructurar una aplicacin web en funcin de los elementos y patrones de diseo empleados y la complejidad del propio desarrollo (Fuente: INTEGRATING SERVLETS AND JSP: THE MODEL VIEW CONTROLLER (MVC) ARCHITECTURE).

Aplicaciones sencillas o equipo de desarrollo pequeo

Aplicaciones complejas o equipo de desarrollo grande

Invocar a clases directamente desde el cdigo Java: el cdigo Java estar embebido en el JSP. En este caso se programa la lgica de negocio en el JSP. Nada recomendable. Invocar a clases Java de forma indirecta: se embeber el cdigo necesario para invocar a las clases que formen parte de la lgica de negocio. Utilizacin de beans (MVC 1): las clases que formen parte de la lgica de negocio sern implementadas como beans. Utilizacin de una arquitectura MVC 2: un Servlet gestionar las peticiones, invocar a la lgica de negocio, acceder a los datos y guardar el resultado en beans. El Servlet almacenar los resultados en la request y la redirigir al JSP para mostrar los resultados. La pgina JSP utiliza beans. Utilizacin de JSP EL (Expression Language): utilizacin de un lenguaje sencillo y abreviado para manejar los resultados generados por el controlador. Utilizacin de etiquetas personalizadas: se utilizar un gestor de etiquetas basadas en XML. Se requiere de un framework que gestione estas etiquetas de funcionalidad aadida.

QU ES UN BEAN
Un bean es un objeto convencional Java, el cual tiene como propsito encapsular a otros (de ah su nombre) o no. Para que una clase pueda ser tratada como bean debe cumplir con una serie de requisitos bsicos: Debe tener un constructor sin argumentos. Sus atributos (propiedades) deben ser accesibles mediante mtodos getter y setters pblicos. Debe ser serializable.

3.1. SERVLETS
Programas Java que se codifican en forma de clases. Los servlets heredan de la clase HttpServlet y permiten gestionar elementos HTTP mediante las clases: HttpServletRequest: recibe la peticin (mbito de request). HttpServletResponse: genera la respuesta. HttpSession: permite crear una sesin comn a un conjunto de request (mbito de sesin). ServletContext: gestiona la informacin comn a todas las peticiones realizadas sobre la aplicacin (mbito de aplicacin). Se obtiene a partir del mtodo getServletContext() de la clase HttpServlet.

3.2. JSP
http://www.apl.jhu.edu/~hall/java/Servlet-Tutorial/

3.2.1. SCRIPTLES
Pginas HTML con cdigo Java embebido de dos formas: Scriptlets: cdigo Java multi-mensaje entre los smbolos <% %>. Cada mensaje debe ir separado por punto y coma. Expresiones: un mensaje Java que devuelve un resultado. No finaliza con punto y coma y se escribe entre los smbolos <%= %>.

Los elementos HTTP definidos en los servlets estn predefinidos en los JSP, como: request response sesin application

Estos objetos se podrn invocar directamente sin necesidad de definirlos, como se puede ver en el siguiente ejemplo: <%@page contentType="text/html" 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>JSP Page</title> </head> <body> <h1>Bienvenido</h2> La hora actual es: <%= new java.util.Date() %> <% Persona p = new Persona(request.getParameter(nombre)); session.setAttribute(usuario, p); out.println(p.getNombre()); %> </body> </html>
Cdigo 11. Ejemplo de JSP tratando objetos.

Se pueden manipular las diferentes peticiones HTTP mediante el mtodo getHeader(String nombreCabecera). <% if(request.getHeader("user-agent").contains("iPhone")) response.sendRedirect("/m/index.jsp"); %>
Cdigo 12. Ejemplo de JSP manipulando cabeceras HTTP.

3.2.2. JSP TAGS


Otra forma ms estructurada y elegante de implementar el cdigo Java en la pgina JSP es mediante la utilizacin de etiquetas JSP, al estilo HTML. Poseen una funcionalidad muy reducida y se utilizan sobre todo para la creacin y utilizacin de beans. Tambin, se puede especificar de forma aadida el mbito del bean con el parmetro scope.

<jsp:useBean id="hora1" class="service.ServicioHora" scope="session" /> <jsp:setProperty name="hora1" property="hora" value="12" /> <jsp:getProperty name="hora1" property="hora" />

Cdigo 13. Utilizacin de un Bean mediante JSP Tags.

En el caso de que los valores a asignar a las propiedades del bean sean parmetros de una peticin POST/GET, se utilizar param para establecer un parmetro determinado o property=* para asignar todos los parmetros a las propiedades. En este ltimo caso, el nombre de los parmetros deber coincidir con el nombre de la propiedad.

<jsp:useBean id="hora1" class="service.ServicioHora" scope="session" /> <jsp:setProperty name="hora1" property="hora" param="time" /> <jsp:setProperty name="hora1" property="*" />

Cdigo 14. Recuperacin de parmetros y creacin de un Bean mediante JSP tags.

3.2.3. JSTL
http://download.oracle.com/docs/cd/E17802_01/products/products/jsp/jstl/1.1/docs/tlddocs/ http://www.labcom.upcomillas.es/isw2/docs/JSTL.pdf La librera JSTL est definida en la especificacin Java EE. Define un conjunto de etiquetas estandarizadas que simplifica el desarrollo de aplicaciones MVC. Las etiquetas JSTL se organizan en 4 libreras: core: funciones script bsicas como loops, condicionales, y entrada/salida. xml: procesamiento de xml fmt: la internacionalizacin y formato de valores como de moneda y fechas. sql: acceso a base de datos.

El tratamiento bsico de JSTL es poder utilizar cualquier objeto depositado como atributo en la request con la expresin ${objeto.propiedad}, sin necesidad de referenciar a este mbito, ni realizar downcastings. <%@page contentType="text/html" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Ejemplo JSTL</title> <link rel="stylesheet" type="text/css" href="r/estilos.css" /> </head> <body> <p class="titulo">Informacin de las personas de la Base de Datos:</p> <hr> <table border="1" width="200"> <tr> <th>Nombre</th> <th>Edad</th> <th>DNI</th> </tr> <c:forEach var="persona" items="${personas}"> <tr> <td>${persona.nombre}</td> <td>${persona.edad}</td> <td>${persona.dni}</td> </tr> </c:forEach> </table> <br> <a href="/ISW2EjemploMVC/index.jsp">Nueva bsqueda</a> </body> </html>
Cdigo 15. Ejemplo de vista JSTL.

<c:if test="${sessionScope.validado!=null}"> <h1>Bienvenido, ${sessionScope.nombre}.</h1> <h2>Tu cookie de usuario es: ${cookie.usuario.value}</h2> <h2>Tu informacin del navegador: ${header['User-Agent']}</h2> </c:if>
Cdigo 16. Ejemplo de JSTL manipulando distintos tipos de variables: sesin, cookies y cabeceras HTTP.

3.3. ARQUITECTURA MVC


Fuente: http://www.oracle.com/technetwork/articles/javase/servlets-jsp-140445.html

3.3.1. MVC 1

3.3.2. MVC 2

3.1. SESIONES

HttpSession sesion = request.getSession(); sesion.setAttribute("persona", p1); <% if(session.getAttribute("persona")!=null) {%>

3.1. COOKIES
Las cookies permiten persistir informacin en el lado del cliente, vinculando un servidor con el ordenador, y nunca con el usuario. Generalmente, se utilizan para mejorar la experiencia de navegacin del usuario. La creacin de la cookie se realiza en el servidor gracias a la clase Cookie, envindosela al navegador a travs de la response, como se muestra en el cdigo siguiente.

Cookie c = new Cookie("usuario", request.getParameter("usuario")); c.setComment("Control de acceso"); c.setMaxAge(60*60*24); response.addCookie(c);


Cdigo 17. Servlet creando una cookie.

El navegador almacenar la cookie en el navegador.

Y se podr recuperar posteriormente para porcesarla.

<% String valorUsuario = "introduzca su usuario "; Cookie [] cookies=request.getCookies(); if(cookies!=null) { for(int i=0;i<cookies.length;i++) { Cookie c = cookies[i]; if(c.getName().equals("usuario")) usuario = c.getValue(); } } %> <h1>Bienvenido</h1> <form action="/EjemploMVC/Validar" method="POST"> Usuario: <input type="text" name="usuario" value="<%=valorUsuario%>"> <input type="submit" value="Acceder"> </form>
Cdigo 18. Ejemplo de JSP recuperando las cookies del cliente.

3.1. PROTOCOLO HTTP


El protocolo de transferencia de pginas web se trata de un protocolo sencillo con dos comandos principales: GET y POST.

MTODO GET
El mtodo GET se utiliza para solicitar contenidos de un servidor. El formato de la peticin es el siguiente: en primer lugar se solicita el recurso deseado y a continuacin se envan los parmetros que complementan dicha peticin, como host de destino, informacin del navegador y caractersticas que siporta, etc. Un ejemplo de peticin HTTP tipo GET sera: GET /index.html HTTP/1.1 Host: www.upcomillas.es User-Agent: nombre-cliente [Lnea en blanco]

CABECERAS HTTP
A continuacin se listan todas las cabeceras de peticin HTTP obtenidas desde el servidor mediante un servlet. El nombre de la cabecera es el parmetro Java que se debe pasar mediante el mensaje: request.getHeader(String parmetro)

Parmetro cabecera HTTP host connection cache-control user-agent

Valor de ejemplo 192.168.5.24:8084 keep-alive max-age=0 Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.2 (KHTML, like Gecko) Chrome/15.0.874.106 Safari/535.2 text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 gzip,deflate,sdch es-ES,en;q=0.8 ISO-8859-1,utf-8;q=0.7,*;q=0.3

accept accept-encoding accept-language accept-charset

EJEMPLOS DE PETICIONES HTTP


A travs de un sniffer se puede visualizar la estructura de las siguientes peticiones realizadas a modo de ejemplo tipo GET y POST.

Figura 13. Peticin GET de una pgina

Figura 14. Peticin GET con paso de parmetros

Mediante el mtodo POST se envan los datos para que se procesen en el servidor (mediante un formulario). Al igual que ocurre con el mtodo GET, tambin se enva informacin complementaria del navegador en las cabecera. Esta vez, los datos se incluyen en el cuerpo de la peticin en lugar de utilizar el propio comando GET.

Figura 15. Peticin POST

Figura 16. Peticin POST con Cookies

3.2. PERSONALIZACIN DE L A VISTA


Mediante la utilizacin de estos parmetros de la cabecera HTTP se puede personalizar la vista que se le muestra al cliente. La informacin del parmetro HTTP_USER_AGENT puede ser muy til para diferenciar los dispositivos mviles del resto de equipos y hacer el forward a la vista pertinente. A continuacin se muestran diferentes valores de este parmetro para diferentes tipos de dispositivos y navegadores. Safari en iPhone:
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C25 Safari/419.3

Compatibilidad con el motor Mozilla (primer navegador en aparecer en el mercado: Netscape Navigator). Safari en iPAD:

Detalles del sistema

Motor de renderizado: Trident (IE), WebKit (Safari y Chrome), Gecko (Firefox) y Presto (Opera).

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

Blackberry:
Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en) AppleWebKit/534.1+ (KHTML, like Gecko) Version/6.0.0.337 Mobile Safari/534.1+2011-10-16 20:21:10

Android en Samsung Galaxy S II:


Mozilla/5.0 (Linux; U; Android 2.3.3; en-au; GT-I9100 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.12011-10-16 20:22:55

Chrome:
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.2 (KHTML, like Gecko) Chrome/15.0.874.106 Safari/535.2

Internet Explorer:
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB7.1; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E; InfoPath.3)

Firefox:
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8) Gecko/20051111 Firefox/1.5 BAVM/1.0.0

Esta informacin la podemos obtener online mediante la web http://www.useragentstring.com/ o las informacin propia del navegador, about:. La forma de cambiar el tipo de navegador (user-agent), para hacer pruebas con las diferentes vistas creadas es agregando, en el caso de Chrome, el siguiente argumento de inicio: --user-agent="Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1C25 Safari/419.3"

Figura 17. Cmo modificar el valor de agent-user en Chrome.

Para poder probar la apariencia (dimensin) de nuestros contenidos en un dispositivo mvil, desde nuestro propio navegador del PC, se puede utilizar la web: http://www.testiphone.com/ Adems de poder realizar en el Servlet, tambin se puede obtener esta informacin en el lado del cliente mediante JavaScript y en el propio servidor web: JavaScript: <script type="text/javascript"> if((navigator.userAgent.match(/iPhone/i)) if (document.cookie.indexOf("iphone_redirect=false") == -1) window.location = "http://www.upcomillas.com/mobile"; </script>

Servlet: if(request.getHeader("user-agent").contains("iPhone")) vista = "/mobile/index.jsp"; RequestDispatcher rd = request.getRequestDispatcher(vista); rd.forward(request, response);

Apache:
RewriteCond %{HTTP_USER_AGENT} ^.*iPad.*$ RewriteRule ^(.*)$ http://www.upcomillas.com/mobile [R=301]

3.2.1. ESTILO DE APLICACIN WEB PARA IPHONE


Existen personalizaciones de estilo sobre las pginas web que permiten adoptar una apariencia similar al del sistema operativo nativo del dispositivo mvil. Se puede personalizar el ancho del dispositivo, orientacin, tags especiales que permitan utilizar la funcionalidad del telfono mvil (llamadas o sms), etc. En la web http://www.catswhocode.com/blog/10-useful-code-snippets-to-develop-iphone-friendly-websites se muestran 10 consejos muy prcticos. Adems, si se desea aplicar el mismo estilo nativo, se puede hacer uso de frameworks de interfaz de usuario web como iWebKit (http://snippetspace.com/iwebkit/demo/) o iUI (http://www.iui-js.org/).

Ejemplos de etiquetas especficas para dispositivos mviles (tanto para Android como para iOS):

Ajusta la dimensin de la pgina:


<meta name="viewport" content="width=480, initial-scale=1.0"/>

Enlaces inteligentes:
<a href="tel:654111222">Pngase en contacto con nosotros</a> <a href="sms:654111222">

Icono de inicio:
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

Ventana de inicio de la web (iOS):


<link rel="apple-touch-startup-image" href="startup.png">

Habilita el modo pantalla completa (iOS):


<meta name="apple-mobile-web-app-capable" content="yes" />

Anda mungkin juga menyukai