Clase2 - Desarrollo Web

Instituto de
Computacin
Facultad de
Ingeniera
Universidad de la
Repblica de Uruguay
Taller de Sistemas de
Informacin 2
Desarrollo Web
27 de Agosto de 2013
Instituto de Computacin Facultad de Ingeniera UdelaR Montevideo, Uruguay 2
Desarrollo web
Desarrollo web es un termino muy
amplio que involucra la construccin de
sitios web que ejecutan en Internet o en
una Intranet
Involucra diferentes especialidades
Generacin de contenido, diseo grfico,
desarrollo de aplicaciones, acceso a bases
de datos, seguridad, scripting, etc.
Desarrollo web
Desarrollar aplicaciones para que puedan
ejecutar en la web (Intranet o Internet) requiere
tener al menos un conocimiento bsico de
como funciona la web
Muchos frameworks simplifican y/o esconden la
complejidad del desarrollo web, sin embargo,
no siempre es posible escaparse de los
conceptos presentes en la web
Como funciona la web?
Cuando navegamos la web, queremos acceder
a un documento en algn lugar (de la web),
para el cual disponemos de una URL (su
direccin)
Debido a que el documento no se encuentra en
el mismo lugar donde esta el navegador,
necesitamos que la computadora donde esta el
documento, ejecute un software especial
denominado web server
Estas solicitudes son enviadas en un protocolo
especial, denominado HTTP (Hyper Text Transfer
Protocolo)
Este se basa en el protocolo TCP/IP, el cual es el
encargado de efectivamente mover datos entre el
cliente (browser) y el servidor (web server)
Los dos elementos principales de HTTP son el
HTTP Request (solicitud)
HTTP Response (respuesta)
1.- Parsing de la URL
El primer paso es analizar la URL del
documento. En general tienen la forma:
Protocolo://Servidor/RequestURI
Protocolo: Indica como debemos comunicarnos
con el servidor
Servidor: Indica que servidor debemos
contactar
RequestURI: Indica el nombre usado por el
servidor para identificar el documento
2.- Enviando la solicitud
Cuando el protocolo es HTTP, el browser
enva al servidor la siguiente solicitud
GET /request-URI HTTP/version
La version es utilizada para indicar al
servidor que version de HTTP se utilizara
El servidor solo ve el string de la solicitud,
sin importar quien la envi
Puede ser un browser, otro servidor, etc.
3.- La respuesta
Cuando el servidor recibe la solicitud,
busca el documento y lo retorna
La respuesta tiene el siguiente formato:

HTTP/[VER] [CODE] [TEXT]
Field1: Value1
Field2: Value2
...Contenido del documento...
3.- La respuesta
HTTP/1.0 200 OK
Server: Netscape-Communications/1.1
Date: Tuesday, 25-Nov-97 01:22:04 GMT
Last-modified: Thursday, 20-Nov-97 10:44:53 GMT
Content-length: 6372
Content-type: text/html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
...contenido del documento...

Que hace el servidor?
Generalmente el servidor esta configurado para
utilizar un directorio en el disco como root
directory
A su vez, en este directorio se define un archivo
por defecto, por ejemplo index.html
Entonces, si solicitamos la
URLhttp://www.domain.com/foo/bar.html,
entonces buscamos el archivo bar.html, bajo la
carpeta foo, bajo el root directory
Que hace el servidor?
Sin embargo, el servidor podra hacer cosas
diferentes
Podra mapear la carpeta /foo con otra carpeta en el
disco que no tenga nada que ver con el root
directory
Podra ejecutar un programa que generara
contenido dinmico, cada vez que se acceda a ese
directorio
El servidor no tiene porque mapear requests
contra una estructura de directorios
HTTP Request
Todos los requests tienen esta estructura

[METH] [REQUEST-URI] HTTP/[VER]
[fieldname1]: [field-value1]
[fieldname2]: [field-value2]
[Cuerpo del request, si existe]
METH representa el mtodo HTTP utilizado
GET, POST, PUT, TRACE, HEAD, DELETE

HTTP Response
El server retorna una fila con el status
code, una serie de headers, una linea en
blanco y luego el documento solicitado
HTTP/1.0 code text
Field1: Value1
Field2: Value2

...Contenido del documento...
Cdigos de estado
Permiten devolver al cliente informacin de la
solicitud, tanto en caso de xito como de fallo

1xx: Informativos
2xx: xito
3xx: Direccin
4xx: Error del cliente
5xx: Error del servidor

Programacin server-side
Los scripts server-side o programas server-
side, son simplemente programas que son
ejecutados en el servidor, en respuesta a una
solicitud de un cliente
Estos scripts producen HTML como salida, el
cual es devuelto al cliente como si este hubiese
pedido un documento
El cliente NO TIENE FORMA DE
DETERMINAR si un script fue utilizado
Por que hacerlo?
Si el programa requiere un gran conjunto de datos,
los cuales se encuentran en el servidor
Si el programa no requiere gran cantidad de
interacciones con el usuario
Si el programa requiere gran poder de
procesamiento
Si el programa requiere datos que sern
recolectados a lo largo del tiempo (search engines)
Existen diversas tecnologas para implementar
estos programas/scripts server side
Dentro de la plataforma Java EE, tenemos una
serie de APIs que permiten implementar
componentes web, los cuales tienen como
principal tarea, la generacin de cdigo HTML
Sin embargo, estos componentes permiten
realizar otras tareas, como acceder a bases de
datos y otros componentes
Haga clic para modificar el estilo de
ttulo del patrn
SERVLETS & JSPS

Web Containers
En Java, la programacin server-side se logra a
travs de los componentes web
Estos componentes web participan del
protocolo HTTP, interceptando el request,
obteniendo valores del mismo y generando una
respuesta
Estos componentes web, ejecutan dentro de un
ambiente, denominado Web Container
Web Modules
Los componentes web y los recursos estticos
como imgenes y documentos, se denominan
recursos web
Un modulo web, es la unidad mnima que
podemos instalar, la cual contiene recursos web
Un modulo web, corresponde o equivale a una
web application
Un conjunto de recursos que colaboran para brindar
una determinada funcionalidad

Servlets
Los Servlets son una tecnologa Java que permite
implementar la programacin server side antes
descripta
Son programas Java, que ejecutan en el servidor, y que
generan cdigo HTML dinmicamente, participando del
protocolo HTTP
Estn desarrollados utilizando el lenguaje Java, y
ejecutan dentro de un Web Container, el cual se
encuentra presente dentro de un Application Server
Servlets
Algunas ventajas
Eficientes
Convenientes
Potentes
Portables
Poco costosos
Los servlets ejecutan dentro de un web module,
el cual sera colocado dentro de un web
container
Estructura de un Servlet
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class SomeServlet extends HttpServlet {

public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {

// Leemos el request, obteniendo parmetros si se necesitan

// Usamos el objeto response para preparar la respuesta

PrintWriter out = response.getWriter();

// Usamos el objeto out para escribir la respuesta
}
}
Estructura de un Servlet
Para ser un Servlet, una clase debe
Extender la clase HttpServlet
Implementar los mtodos doXXX, donde XXX representa uno
de los mtodos HTTP disponibles, por ejemplo, doPost, doGet
Los mtodos doXXX son invocados por el Web
Container ante un request que contenga el mismo
mtodo
El objeto PrintWriter se utiliza para escribir la respuesta
que sera devuelta al cliente
Hola mundo Servlet (texto)
package hall;

import java.io.*;

public class HelloWorld extends HttpServlet {


out.println("Hello World");

}
}
package hall;

import java.io.*;

public class HelloWWW extends HttpServlet {
response.setContentType("text/html");
out.println(
"<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 " +
"Transitional//EN\">\n" +
"<HTML>\n" +
"<HEAD><TITLE>Hello WWW</TITLE></HEAD>\n" +
"<BODY>\n" +
"<H1>Hello WWW</H1>\n" +
"</BODY></HTML>");
}
}
Servlet mappings
Para poder invocar la funcionalidad programada en los
mtodos doXXX de un Servlet, necesitamos especificar
que URLs atender cada Servlet
Para esto utilizamos el deployment descriptor de la
aplicacin web (web.xml)
All especificamos
Los servlets que dispondr la aplicacin
Los mapeos de URLs a Servlets disponibles
Servlet declarations
<servlet>
<servlet-name>HelloWorldServlet</servlet-name>
<servlet-class>test.HelloWorld</servlet-class>
<init-param>
<param-name>cant</param-name>
<param-value>5</param-value>
</init-param>
</servlet>

<servlet>
<servlet-name>LoginServlet</servlet-name>
<servlet-class>test.LoginServlet</servlet-class>
</servlet>
Servlet mappings
<servlet-mapping>
<servlet-name>HelloWorldServlet</servlet-name>
<url-pattern>/helloServlet/*</url-pattern>
</servlet-mapping>

<servlet-mapping>
<servlet-name>LoginServlet</servlet-name>
<url-pattern>/loginServlet/*</url-pattern>
</servlet-mapping>
Interactuando con un Servlet
Las paginas HTML pueden enviar informacin a un
Servlet, a travs de formularios HTML

<form method=POST action=/Usuarios/loginServlet>
Nombre:
<input type=text
name=firstname/>
Apellido
<input type=text name=lastname/>
</form>
Login.html
LoginServlet
HTTP Request
METH POST
firstname=Pablo
lastname=Gomez
Pablo Gomez
HTTP Response
Pablo Gomez
Web Contexts
Los web contexts permiten que los componentes
web puedan compartir e intercambiar informacin
Supongamos que tenemos una aplicacin web
con un carrito de compras
Un servlet se puede encargar de actualizar el contenido
del objeto carrito
Otro servlet genera el HTML necesario para mostrar el
contenido de dicho carrito
Web Contexts
Application Server
Web Application 1
Web Application 2
Servlet 1
Servlet 2
Web Context
Web Contexts
Tenemos cuatro posibles contextos en una
aplicacin web

Application context
Session context
Request context
Page context
Solo aplica a paginas JSP
Application context
Implementa la interfaz
javax.servlet.ServletContext
Desde cualquier Servlet, podemos obtener una
referencia al contexto invocando el mtodo:
this.getServletContext()

Provee los mtodos
Object getAttribute(String key);
void setAttribute(String key, Object value);
Application context
public class HolaMundoServlet
extends HttpServlet {

public void doGet(
HttpServletRequest request,
HttpServletResponse response) {

ServletContext ctx = getServletContext();
ctx.setAttribute("fechaProceso",
new Date());
... construccion de la respuesta ...
}
}
Application context
public class ChauMundoServlet
extends HttpServlet {

public void doGet(
HttpServletResponse response) {

ServletContext ctx = getServletContext();
Date fecha =
(Date)ctx.getAttribute("fechaProceso");
... construccion de la respuesta ...
}
}
Session context
HttpSession es el objeto que representa a
la sesion del usuario
Puede ser obtenido a partir del objeto
Request en cada servlet
HttpSession session = request.getSession();
Provee los metodos:
Object getAttribute(String key);
void setAttribute(String key, Object value);
Session context
Carrito carrito = new Carrito();
HttpSession session = request.getSession();
session.setAttribute(carrito,carrito);

Carrito carrito = (Carrito)
session.getAttribute(carrito);
Session context
Los session context sirven para mantener
informacin (estado) asociado a cada uno de los
clientes conectados a una aplicacin web
Debido a que HTTP es un protocolo stateless, los
requests seguidos de un mismo cliente no pueden
relacionarse
El web container necesita implementar un
mecanismo de tracking que le permita identificar
pedidos que vienen desde un mismo cliente
Session context
Forward / Include
Un componente web puede delegar el
procesamiento de un HttpRequest a otro
componente web.
Usamos javax.servlet.RequestDispatcher
Esta provee 2 mtodos:
void forward(ServletRequest request,
ServletResponse response);
void include(ServletRequest request,
ServletResponse response);
Forward / Include
Para poder instanciar un
RequestDispatcher hay que utilizar el
ServletContext de la aplicacin web
RequestDispatcher dispatcher =
getServletContext().getRequestDispatc
her("/holamundo");
dispatcher.forward(request, response);
dispatcher.include(request, response);
Forward / Include
public class Servlet1 extends HttpServlet {
public void doGet(

request.setAttribute("cliente",
"Juan Perez");
RequestDispatcher dispatcher =
this.getServletContext().
getRequestDispatcher("/holamundo");

dispatcher.forward(request, response);
}
}
Forward / Include
public class Servlet2 extends HttpServlet {

public void doGet(

String cliente = request.
getAttribute("cliente");

out.println("El cliente es: " + cliente);
}
}
Paginas JSP
Las paginas JSP son documentos HTML, que
pueden contener codigo Java embebido entre
sus tags
En los lugares de la pagina en los que deba
generarse contenido dinmico, se colocan tags
especiales, que indican la presencia de dicho
contenido
En general son de la forma <% y %>, <%= y
%>, etc.
Paginas JSP
Por ejemplo, podemos tener lo siguiente en una
pagina JSP:
<html>
<body>
La hora actual es:
<%= new Date().toString() %>
</body>
</html>
Paginas JSP
En general las paginas JSP reciben la
extensin .jsp, pudiendo ser colocadas en
cualquier lugar de la aplicacin web
No requieren mappings
No tienen porque ir dentro del WEBINF
En general las paginas JSP tienen mas la
apariencia de paginas HTMLs que de Servlets
Son document-oriented
Funcionamiento
Elementos de scripting
Dentro de la pagina JSP podemos embeber
diferentes construcciones en Java, para dar
dinamismo a la pagina
Los elementos de scripting permiten insertar
cdigo Java en el cuerpo del servlet generado
Tenemos tres tipos de elementos:
Expressions de la forma <%= .... %>
Scriptlets de la forma <% .... %>
Declarations de la forma <%! .... %>
JSP Expressions
Es utilizada para colocar el valor de una
expresin Java directamente en la salida
del servlet generado
Es de la forma:
<%= Java Expression %>
La expresin es evaluada, convertida a
String (a travs del mtodo toString) y
luego colocada en la salida del servlet
JSP Expressions
La expresin es evaluada en tiempo de
ejecucin (al momento de hacer el
request de la pagina)
Por este motivo, la expresin tiene
acceso a toda la informacin de dicho
request
Por ejemplo:
Current time: <%= new java.util.Date() %>
JSP Expressions
Para simplificar las expresiones, existen una
serie de objetos implcitos
request: HttpServletRequest
response: HttpServletResponse
session: HttpSession
out: PrintWriter asociado al response
Por ejemplo:
Your hostname: <%= request.getRemoteHost()
%>
JSP Scriptlets
Si necesitamos realizar una tarea mas compleja
que una expresin, entonces podemos insertar
cdigo Java arbitrario a travs de un scriptlet
Los scriptlets tienen la siguiente forma:
<%
int x = 0;
int y = 10;
out.print(La suma es: + (x+y));
%>
JSP Scriptlets
El cdigo dentro de un scriptlet es insertado tal
cual como fue escrito
Cualquier cdigo HTML esttico antes o
despus del scriptlet es insertado sin cambios
<% if (Math.random() < 0.5) { %>
Have a <B>nice</B> day!
<% } else { %>
Have a <B>lousy</B> day!
<% } %>
JSP Scriptlets
El cdigo anterior se convierte en esto...
if (Math.random() < 0.5) {
out.println("Have a <b>nice</b>
+ "day!");
} else {
out.println("Have a <b>lousy</b>
+ "day!");
}
JSP Declarations
Una declaracin permite colocar mtodos
y campos en el cuerpo principal del
servlet generado
Tienen la siguiente forma:
<%! Java Code %>
Por ejemplo:
<%! private int accessCount = 0; %>
Accesses to page since server reboot:
<%= ++accessCount %>
JSPs y Servlets
Al momento de construir una aplicacin utilizando estos
dos componentes, tenemos diferentes opciones de
diseo
Los Servlets son componentes que estn orientados a
la programacin Java, sin embargo, pueden generar
contenido HTML
Las JSPs son documentos, orientados, a la generacin
de contenido HTML, sin embargo, pueden contener
cdigo Java
Que usamos?...
JSP: Model 1
JSP + Servlets: Model 2
Haga clic para modificar el estilo de
ttulo del patrn
JAVA SERVER FACES
Que es/provee JSF?
Es un framework (estndar) para el
desarrollo de aplicaciones web en la
plataforma Java EE
Por este motivo, es y provee mltiples
elementos a la vez

Que es/provee JSF?
Es un conjunto de controles de UI, junto con
los handlers necesarios para manipular sus
eventos
o Por ejemplo, un componente Botn, junto con el
handler del evento OnClick

Que es/provee JSF?
Es un framework para el desarrollo de la UI,
independiente de la tecnologa concreta que
se utiliza
o Por ejemplo, podemos generar grficos en
formato diferente a HTML, y usando protocolos
diferentes a HTTP

Que es/provee JSF?
Es un framework basado en MVC
o Utiliza las mismas estrategias que MVC
o Tenemos vistas, las cuales presentan la
informacin
o Modelos los cuales almacenan la informacin
o Controllers que permiten interconectar ambos
elementos

Que es/provee JSF?
Brinda soporte de AJAX
o JSF 2.x brinda soporte de AJAX, el cual es
relativamente sencillo de incorporar a las
aplicaciones
o Asimismo, las bibliotecas que extienden la
funcionalidad de JSF (Primefaces), tambin
incorporan soporte de AJAX
Que es/provee JSF?
Es una alternativa a
o Servlets/JSP con MVC
o Struts 2.0
o jQuery
o GWT
o Spring MVC

Ejemplo
Ejemplo
Implementacin
JSF es parte de la especificacin Java EE 6
Es necesario contar con una implementacin
de dicha especificacin
o Reference Implementation, de Oracle
o MyFaces, de Apache
Un servidor de aplicaciones con soporte para
JSF, debe incorporar estas bibliotecas
o JBoss, Glassfish, etc.

Implementacin
Complementando a la implementacin
tenemos bibliotecas de extensin
o Generalmente agregan mas controles
o Permiten customizar mas la apariencia
Algunos ejemplos
o Richfaces
o Primefaces

Un ejemplo mas completo
Esta aplicacin se denomina RegistroJSF
o La veremos funcionando en el practico el martes
Es una aplicacin web sencilla para el
registro de usuarios
La idea es utilizarla para mostrar los
diferentes conceptos con los que nos iremos
encontrando al profundizar en JSF

Estructura de la aplicacin
Elementos de la aplicacin
web.xml
o Descriptor general de la aplicacin web, se usa
para establecer las paginas de bienvenida de la
aplicacin
register.xhtml
o Contiene el formulario de registro de usuario
confirm.xhtml
o Contiene los datos ingresados antes, luego de un
proceso de validacin En caso de error, se vuelve
a la pagina anterior

Elementos de la aplicacin
done.xhtml
o Muestra un mensaje de xito al finalizar el ingreso
del usuario al sistema
UserBean.java
o Contiene los datos ingresados por el usuario,
almacenados temporalmente por la aplicacin
o Contiene tambin unos mtodos simples de
validacin sobre los datos ingresados
Estructura de la aplicacin
UserBean : JavaBean@ServerSide
Ensamblado
El ensamblado de la aplicacin sigue las
reglas tpicas de una aplicacin web
A nivel de Java EE, la aplicacin web sera un
Dynamic Web Proyect
Una vez empaquetado el war lo
desplegamos en el servidor de aplicaciones
El comportamiento es similar a cualquier
aplicacin web

web.xml
confirm.x
html
confirm.xhtml
La pagina presenta la informacin almacenada
por UserBean, cargada en el paso previo de
registro y validacin de usuarios
Si se presiona EDIT, volvemos a register.xhtml
Si se presiona CONFIRM, se crea el usuario en
el sistema
Los datos son desplegados utilizando el
componente <h:outputText>
o <h:outputText value="#{userBean.firstName}"/>
o <h:outputText value="#{userBean.lastName}"/>
confirm.xhtml
Los botones con las acciones disparadas desde
la pagina son codificadas con el componente
<h:commandButton>
o <h:commandButton value="Edit" action="register" />
o <h:commandButton value="Confirm"
action="#{userBean.addConfirmedUser}" />
Si se da de alta el usuario, entonces se pasa a
la pagina done.xhtml, la cual despliega que el
usuario fue dado de alta

Entoncessi tenemos esta pagina
rbol de componentes
Ciclo de vida
La secuencia de eventos que es disparada
cada vez que se solicita una pagina JSF
Consiste en una serie de etapas bien
diferenciadas
Las tareas de este ciclo de vida, deben
hacerse en toda web application, hecha con
JSF o no
Estas tareas ocurren en forma transparente
para el desarrollador

6 etapas
Modelo de navegacin
Basado en la idea de un conjunto de reglas
de navegacin
Estas reglas definen
o Una pagina de inicio (from-view-id)
o Uno o mas casos de navegacin, los cuales
tienen
o Un String denominado outcome
o Una pagina destino (to-view-id)

Regla de navegacin
Regla de navegacin
Y el outcome?
Puede determinarse en forma hardcoded,
tanto en la pagina XHTML como en un event
handler
o En el ejemplo anterior, tanto en la pagina como
en el mtodo addConfirmedUser, se generaban
outcomes hardcoded
Puede hacerse dinmicamente, retornando
dicho String desde un event handler, pero
calculndolo en el servidor

Requisitos de instalacin
Java
o Para ejecutar con Tomcat 6, necesitamos Java 5
o superior
o Para ejecutar con Tomcat 7, necesitamos Java 6
o superior
Un IDE
o Por ejemplo, Eclipse

Requisitos de instalacin
Un servidor
o Los que soporten Servlet API 2.5 (Tomcat),
necesitan dos jars, jsf-api.jar y jsf-impl.jar, y
opcionalmente el jar para JSTL 1.2
o Los que soporten Java EE 6, ya tienen el soporte
incluido de JSF y JSTL incorporado (Jboss 7,
Glassfish 3)

Implementaciones
Mojarra (Oracle)
o http://javaserverfaces.java.net
o Ejecuta en cualquier server con soporte de
Servlets 2.5
o Glassfish 3 / JBoss 6
MyFaces (Apache)
o http://myfaces.apache.org/core20/
o Ejecuta en cualquier server con soporte de
Servlets 2.5
o Geronimo 3 / JBoss 6

Para crear una aplicacin
JARs
o Necesitamos los JARs de JSF (jsf-api.jar y jsf-
impl.jar)
o En un servidor JavaEE 6 podemos obviarlo
faces-config.xml
o Es un archivo central de configuracin que
utilizan las aplicaciones JSF
o En realidad al principio, puede estar vaco
Para crear una aplicacin
web.xml
o Debemos definir el Faces Servlet (procesa las
solicitudes de paginas JSF)
o Debe contener un mapping para la url-pattern *.jsf
o Define la PROJECT_STAGE en Development
Paginas
o Las creamos como documentos XHTML
(pagina.xhtml)
o Accedemos mediante la url .... pagina.jsf

faces-config.xml
Colocamos el archivo vaco en la carpeta
WEB-INF (Sirve para declarar el tipo de
versin de JSF que queremos utilizar)

web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5">
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
Estructura de una pagina
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">

<h:head>

</h:head>
<h:body>

<h:form>

</h:form>

</h:body>
</html>
Siempre son en formato XHTML
La direccin de acceso, es diferente a la ruta fsica
Se acceden con extensin *.jsf
Pero se escriben como paginas xHTML, *.xhtml
Managed Beans (@Server)
@ManagedBean
public class SomeBean {
private String someProperty;

public String getSomeProperty() { }
public void setSomeProperty() { }
public String actionControllerMethod() {

}
// Other methods
}
Son JavaBeans (POJOs)
Siempre para cada propiedad, tenemos un getter y setter
La visin desde afuera de las propiedades, se hace en base al setter y getter
Flujo de control / Ciclo de vida
Es el conjunto de pasos ordenados que se
llevan a cabo desde que ejecutamos una
tarea en una pagina, y obtenemos un
resultado en el browser
Implica toda una serie de pasos que ocurren
entre el cliente y el servidor
El objetivo es que sea transparente para el
usuario

pagina.xhtml

<h:commandButton ....
action=#{someBean.someMethod}
pagina.xhtml

GET pagina.jsf
pagina.xhtml

HTML dinmico

Correspondiente a la pagina JSF
pagina.xhtml

Submit del formulario
POST pagina.jsf
Instanciamos someBean
pagina.xhtml

POST pagina.jsf
Ejecutamos la accin
(someMethod)
pagina.xhtml

POST pagina.jsf
Ejecutamos la accin
(someMethod)
Acceso a lgica de negocio
(EJB, WebService, BD)
pagina.xhtml

POST pagina.jsf
Ejecutamos la accin
(someMethod)
Valor
retornado
pagina.xhtml

POST pagina.jsf
Ejecutamos la accin
(someMethod)
Valor
retornado
result1.xhtml
result2.xhtml
resultN.xhtml
pagina.xhtml

POST pagina.jsf
Ejecutamos la accin
(someMethod)
Valor
retornado
result1.xhtml
result2.xhtml
resultN.xhtml
Resultado del submit. Corresponde a la pagina ResultN.xhtml
Otro ejemplo
Tenemos cuatro paginas
Una pagina inicial con un botn
Tres paginas resultado posibles
Al presionar el botn, en el servidor se elige
al azar una pagina resultado

Otro ejemplo
Es una aplicacin web (con las bibliotecas antes
presentadas)
Una pagina de inicio
o <h:commandButton
action="#{navigator.choosePage}"/>
Un bean
o Llammosle Navigator, sera un ManagedBean
o Con un mtodo choosePage
Tres posibles paginas destino
o page1.xhtml, page2.xhtml, page3.xhtml

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"

<h:head></h:head>
<h:body>

<fieldset>
<legend>Random Results Page</legend>
<h:form>
Press button to get one of three possible results pages.
<br/>
<h:commandButton value="Go to Random Page"
action="#{navigator.choosePage}"/>
</h:form>
</fieldset>

</h:body></html>
start-page.xhtml
package example;

import javax.faces.bean.*;
Import java.util.*;

@ManagedBean
public class Navigator {
private String[] resultPages =
{ "page1", "page2", "page3" };

public String choosePage() {
int idx = new Random().nextInt(3);
return resultPages[idx];
}
}
Navigator.java, managed bean
<h:head>
<title>Result Page 1</title>
<link href="./css/styles.css"
rel="stylesheet" type="text/css"/>
</h:head>

<h:body>
<table class="title">
<tr><th>Result Page 1</th></tr>
</table>
<p/>
<h2>One. Uno. Isa.</h2>
<p>Blah, blah, blah.</p>
</h:body>
</html>
page1, page2, page3, todas con extension .xhtml
Managed beans
En el proceso antes descripto, podemos usar
los managed beans para comunicar
informacin desde el lado cliente
Cuando usamos esto:
o <h:inputText value="#{someBean.someProp}"/>
Cuando el form se submitea, se toma el valor
del textfield y se pone en el bean
(setSomeProp)
Cuando el form se despliega, se invoca
getSomeProp, para cargar el textfield

Managed beans
Los managed beans son request-scoped por
defecto
Se instancia dos veces
o Cuando el formulario se despliega
o Cuando el formulario se enva (submit)
Tambin podemos usar la propiedad
directamente en la pagina (no como un valor)
o #{someBean.someProp}

Otro ejemplo
Una aplicacin web que contenga
o Una pagina para seleccionar un lenguaje
o Y segn el valor seleccionado, se navegue a
o Una pagina de error (si no existe el lenguaje)
o Una pagina de warning (si el lenguaje no se
puede usar con JSF)
o Una pagina de confirmacin (si el lenguaje se
puede usar con JSF)



<h:body>

<fieldset>
<legend>Choose JSF Language</legend>
<h:form>
Enter programming language that can be used to implement
JSF managed beans:<br/>
<h:inputText value="#{languageForm.language}"/><br/>
<h:commandButton value="Check Language"
action="#{languageForm.showChoice}"/>
</h:form>
</fieldset>

</h:body></html>
choose-language.xhtml
package examples;

import javax.faces.bean.*;

@ManagedBean
public class LanguageForm {

private String language;

public String getLanguage() {
return(language);
}

public void setLanguage(String language) {
this.language = language.trim();
}

LanguageForm.java
public String showChoice() {
if (isMissing(language)) {
return("missing-language");
} else if (language.equals("Java") ||
language.equalsIgnoreCase("Groovy")) {
return("good-language");
} else {
return("bad-language");
}
}

private boolean isMissing(String value) {
return((value == null) ||
(value.trim().isEmpty()));
}
}
LanguageForm.java

<h:head>

</h:head>
<h:body>
<tr><th>Missing Language</th></tr>
</table>
<h2>Duh! You didn't enter a language!
(<a href="choose-language.jsf">Try again</a>)</h2>
<p>Note that using separate error pages for missing
input values does not scale well to real applications.
The later section shows better approaches.
</p>
</h:body>
</html>
missing-language.xhtml

<h:head>

</h:head>

<h:body>
<tr><th>Bad Language</th></tr>
</table>

<h2>Use #{languageForm.language} in JSF?
Be serious!</h2>
</h:body>
</html>
bad-language.xhtml
#{bean.property} o <h:outputText
value=#{bean.propery}/> escapean el contenido de la
propiedad. Por eso no es necesario escapear
explcitamente

<h:head>

</h:head>
<h:body>
<tr><th>Good Language</th></tr>
</table>
<h2>Good choice.</h2>
<p>In the Oracle (Mojarra) JSF 2 implementation</p>
</h:body>
</html>
good-language.xhtml
Visin general
Histricamente la parte mas pesada y
costosa de una aplicacin web, consista en
el procesamiento de los requests generados
por los clientes web
Es muy comn encontrar en Servlets o
paginas JSP cdigo como el siguiente:
o String firstname =
request.getParameter("firstname");
o String lastname =
request.getParameter("lastname");

Ciclo de vida?
Realiza todo el procesamiento a nivel de
backend mencionado anteriormente
o Si no fuera realizado automticamente, debera
programarse manualmente, como se hace con
Servlets/JSPs
El ciclo de vida toma los requests
provenientes del cliente, y los sincroniza con
un conjunto de componentes de UI
mantenidos server-side

Fases
El ciclo de vida se encuentra dividido en
fases, cada una de las cuales se encarga de
una tareas especifica del proceso server-side
o Restore View
o Apply Request Values
o Process Validations
o Update Model Values
o Invoke Application
o Render Response

Fases
Restore View
La Faces View, es una representacin server
side de los componentes que forman la
interfaz de usuario
Es un rbol de componentes de UI
Es tarea de esta etapa, restaurar este rbol
de componentes de una interaccin anterior,
o crear un nuevo rbol para un nuevo
request

Restore View
Cuando se crea una nueva View, esta es
almacenada en una clase llamada
FacesContext
FacesContext sirve como un lugar de
almacenamiento para todos los datos
relacionados con el procesamiento del
request, en el ciclo de vida de dicho request
FacesContext se encuentra presente
siempre, ya que es administrada por JSF

Apply Request Values
El objetivo de este paso es procesar los
diferentes parmetros que puedan venir
dentro del request
Cada componente de la View esta listo en
este momento para recibir una actualizacin
de los valores que puedan venir del cliente
Estos valores siempre llegan de la forma
name-value, donde el name y el value son de
tipo String

Process Validations
Esta etapa se encarga de la validacin y
conversin de los datos
Los componentes pueden tener asociados
validadores y convertidores
Todo componente que falle en su validacin
o Tendr su atributo valid en false
o Tendr un mensaje asociado (FacesMessage) el
cual sera encolado en el FacesContext
o Cuando la respuesta sea enviada, estos
mensajes podrn ser desplegados

Process Validations
Update Model Values
Asumiendo que la validacin y conversin
fue superada, es hora de colocar la
informacin en el modelo
Este proceso se realiza para los objetos que
han sido asociados (value binding) a los
valores de los componentes de UI
Esta es una de las etapas mas interesantes,
ya que aqu es donde se produce parte de la
magia de JSF

Invoke Application
Todas las etapas anteriores corresponden al
50% de las tareas tpicas con una aplicacin
web
El otro 50% consiste en tomar los datos
recibidos y hacer algo til con estos, como
por ejemplo invocar un mtodo externo para
procesar los datos recibidos
En esta etapa, los custom action code son
invocados
o Action Methods y Action Listener Methods

Invoke Application
En esta etapa tambin ocurren las
navegaciones a otras paginas
Cuando los Action Methods devuelven un
String
o con el outcome de una regla de navegacin para
la pagina actual, entonces se realiza el proceso
de navegacin a otra pagina de la aplicacin
o con el nombre de la pagina a la que queremos
navegar (usando navegacin implcita, como los
ejemplos anteriores)

Render Response
Es la etapa final del proceso, cuando la
respuesta es construida y entregada al cliente
En esta etapa tambin se almacena el estado
de la View, de forma de poder restaurarla en
subsiguientes requests
En esta etapa es donde se realiza la unin del
cdigo esttico en la vista, junto con el cdigo
dinmico de la misma
o En general el desarrollador no debe intervenir en esta
etapa

Render Response
Actions y ActionListeners
Los componentes que disparan eventos en
JSF, son los commandButtons (botones) y
los commandLinks
Ambos tienen los atributos actionListener y
action

Cuando se presiona el commandButton, JSF
invoka el ActionListener durante la fase
Invoke Application
En este podemos realizar cualquier
procesamiento relacionado con el botn que
presionamos
Firma del mtodo Action Listener
o public void <Nombre>(ActionEvent evt)
Immediate
Immediate
Si Immediate esta en true, entonces el ciclo
de vida se saltea cualquier etapa de
validacin y conversin, navegando
directamente a donde nos interesa
<h:commandButton value="Cancel"
action="main" immediate="true" />

PhaseListener
Es un componente que permite interceptar
las etapas del ciclo de vida de JSF
Es muy similar a un Filter en el caso de
Servlets
El listener permite ejecutar cdigo antes y
despus de un cambio de etapa del ciclo de
vida de JSF

PhaseListener
public class MyListener implements PhaseListener {

public PhaseId getPhaseId() {
return PhaseId.RENDER_RESPONSE;
}

public void beforePhase(PhaseEvent event) {
...
}

public void afterPhase(PhaseEvent event) {
...
}
}
PhaseListener
Debemos configurarlo en el web.xml
<lifecycle>
<phase-listener>
com.test.application.MyListener
</phase-listener>
</lifecycle>
POJOs
Los objetos Java que almacenan informacin
de una aplicacin, y que no implementan o
extienden ninguna interfaz o clase de un
framework, se denominan POJOs
POJO = Plain Old Java Object
Trabajar utilizando POJO para representar el
Model del MVC, desacopla completamente la
tecnologa de vista usada para presentacin
del modelo utilizado

Managed Bean
Un POJO que es declarado al framework JSF,
se denomina managed bean (o bean
administrado)
Nunca debemos realizar un new() para crear
una instancia de un nuevo managed bean
Son inicializados en demanda por el container
en runtime
Cualquier clase Java que se adhiera a las
convenciones de nombre de los JavaBeans,
puede ser registrada como managed bean
Managed Bean
Managed Bean
El nombre del bean determina como las
expresiones EL accedern a la informacin
de este
El scope determina el tiempo/lugar de vida
del bean, para otros componentes de la
aplicacin

Managed Bean
Lo anterior es equivalente a:
Managed Bean
El archivo faces-config.xml no es necesario
para el registro de managed beans
Sin embargo, es posible utilizarlo, en cuyo
caso, la sintaxis es la siguiente:

Managed Bean
Para acceder a las propiedades de los
beans, utilizamos el Expression Language de
JSF, muy similar (idntico cambiando $ por
#) al utilizado para JSP
Por ejemplo:
o <h:outputText value="#{userBean.firstName}" />
Tambin podemos poner directamente en la
pagina la expresin EL
o <td>#{userBean.firstName}</td>

Scopes
none o @NoneScoped
o Son instanciados en demanda por otro managed
bean
o Seguirn vivos en el sistema, mientras el bean
que los referencie siga vivo
request o @RequestScoped
o Las instancias de los managed beans con este
scope existirn mientras el HTTP request del
pedido actual exista

Scopes
view o @ViewScoped
o Las instancias de los managed beans estarn
asociadas a la vista actual
o Si el usuario navega fuera de la vista actual, los
beans registrados sern eliminados
session o @SessionScoped
o Los managed beans estaran asociados a la sesin
del usuario
application o @ApplicationScoped
o Como antes, pero las instancias se almacenan en el
application scope

Value Expressions
Son la forma ms comn de uso de las
expresiones EL
Permiten obtener valores evaluados
dinmicamente o establecer el valor de una
propiedad de un bean, usando siempre una
expresin compacta
Por ejemplo:
o <h:outputText value="#{userBean.firstName}"/>

Value Expressions
Pueden ser usadas tambin para actualizar
las propiedades de los managed beans
Por ejemplo, si un componente implementa
EditableValueHolder, y esta asociado a una
propiedad:
o <h:inputText value="#{userBean.firstName}"/>
En el momento del postback al servidor, si el
valor ha cambiado, sera aplicado al managed
bean

Value Expressions
Es posible utilizar el operador . (punto),
para navegar una jerarqua de objetos
o <h:outputText
value="#{userBean.homeAddress.street}"/>
Para acceder a elementos de un array, una
lista o un mapa, podemos usar el operador [
]
o <value>#{moreSports[0]}</value>

Method Expressions
Son utilizadas para invocar mtodos pblicos no
estticos de los managed beans
Por ejemplo:
o <h:commandButton value="Confirm
Los nicos operadores validos para las method
expressions son el punto y los corchetes (. y [])
EL no provee un mecanismo para pasar
parmetros , a fin de mantener el lenguaje
simple

Method Expressions
Method Expressions
Method Expressions
Podemos tambin invocar mtodos
arbitrarios, pasando argumentos, siempre y
cuando devuelvan un String
Method Expressions
Modelo de navegacin
Es uno de los aspectos mas elegantes de
JSF
Permite especificar el flujo de paginas
completo de la aplicacin
Tenemos dos tipos de Navegacin
o Navegacin implcita
o Navegacin basada en reglas XML
Navegacin implcita
Consiste en poner directamente en las
paginas JSF los nombres de las paginas
El sistema de navegacin de JSF busca por
paginas xhtml con el mismo nombre que las
etiquetas puestas en los eventos

Navegacin implcita
Navegacin implcita
Cuando se presiona el botn Register, el
sistema de navegacin busca por una pagina de
nombre confirm.xhtml en la aplicacin
En la pagina confirm, tenemos lo siguiente:
o <h:commandButton value="Edit" action="register" />
o <h:commandButton value="Confirm"
Si presionamos Edit, volvemos a la pagina
register.xhtml

Navegacin implcita
Navegacin basada en reglas
Las diferentes reglas que definen el flujo de
paginas de una aplicacin se encuentran
almacenadas en un archivo XML
Una ventaja importante de tener este tipo de
archivo centralizado de reglas, es que facilita
el mantenimiento en la aplicacin
Por ejemplo, cuando renombramos una
pagina
Separa el concepto lgico y fsico de la vista
en el flujo de paginas de JSF

Forma general
Wildcards
Wildcards
Redirects
Redirects
En el ejemplo original para el login, cuando el
usuario se logueaba y proceda a la pagina
success.xhtml, la url en el browser aun deca
http://...login.xhtml...
Esto se debe a que el contenido de la pagina
success.xhtml era enviado al browser, sin que el
browser solicitara directamente esa pagina
Al insertar el <redirect/>, estamos obligando al
browser a buscar esa pagina, con lo que sera
desplegada en la URL

Controles HTML
Controles HTML
UIForm Form
UIInput inputText
UIInput inputSecret
UIInput inputHidden
UIInput inputTextArea
UIOutput outputText
UIOutput outputLabel
UIOutput outputLink
UIOutput outputFormat
UIMessage UIMessages
UISelectBoolean selectBooleanCheckbox
UISelectMany selectManyCheckboxList
UISelectOne selectOneMenu
UIPanel panelGrid
UIPanel panelGrid
UIData / UIColumn dataTable
UIData / UIColumn dataTable
Conversin de datos
Es el proceso que nos permite determinar
que un conjunto de datos tiene el tipo
correcto
En general, convertimos valores de tipo
String en otros tipos, como ser Date, Float,
Integer, etc.
Podemos usar convertidores estndar, o
convertidores customizados

Convertidores estndar
Si hacemos un binding contra un Integer o un
int, entonces la conversin ocurre
automticamente
Por ejemplo:

<%-- age --%>
<h:outputLabel value="Age" />
<h:inputText id="age" size="3"
value="#{contactController.contact.age}">
</h:inputText>
Convertidores estndar
Por ejemplo, si queremos manejar una fecha
como MM/yyyy, entonces podemos hacer
esto:

<h:outputLabel value="Birth Date" />
<h:inputText id="birthDate"
value="#{contactController.contact.birthDate}">
<f:convertDateTime pattern="MM/yyyy"/>
</h:inputText>

<h:message for="birthDate" />
Convertidores customizados
La conversin de datos customizada, es
necesaria cuando debemos convertir un
campo en nuestro formulario, en un objeto
especifico de nuestra aplicacin
Algunos ejemplos:
o Un String en un objeto PhoneNumber (codigo de
area, prefijo, etc.)
o Un String en un objeto Name (primer nombre,
segundo nombre)

Para crear un convertidor customizado,
debemos crear una clase Java que:
o Implemente la interfaz
javax.faces.convert.Converter
o Implementar el mtodo getAsObject() que toma
un String y retorna un objeto como puede ser
PhoneNumber anterior
o Implementar el mtodo getAsString() que realiza
la operacin inversa al anterior mtodo
o Registar el convertidor en el faces-config.xml

Queremos convertir un campo con
informacin de la hora, minutos y segundos,
en un entero con la cantidad de segundos
que eso representa
Por ejemplo, 00:01:00 equivale a 60
segundos
Creamos la clase hr_mi_se_Converter que
implementa la interfaz Converter

import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.*;
import javax.faces.application.*;

public class hr_mi_se_Converter implements Converter {

public Object getAsObject(FacesContext facesContext,
UIComponent uiComponent,
String param){
...
}

public String getAsString(FacesContext facesContext,
Object obj) {
...
}
}
public Object getAsObject(FacesContext facesContext,
String param){

try {
String hr_mi_se[] = param.split(":");
int seconds =
Integer.parseInt(hr_mi_se[0])*60*60 +
Integer.parseInt(hr_mi_se[1])*60+
Integer.parseInt(hr_mi_se[2]);
return new Integer(seconds);
} catch (Exception exception) {
throw new ConverterException(exception);
}

}
public String getAsString(FacesContext facesContext,
Object obj) {

try {
int total_seconds = (int)((Integer)obj).intValue();
int hours=(total_seconds)/(60*60);
int rem=(total_seconds)%(60*60);
int minutes=rem/60;
int seconds=rem%60;
String str_hours=""+hours;
String str_minutes=""+minutes;
String str_seconds=""+seconds;
if(hours<10) str_hours="0"+hours;
if(minutes<10) str_minutes="0"+minutes;
if(seconds<10) str_seconds="0"+seconds;
return str_hours+":"+str_minutes+":"+str_seconds;
} catch (Exception exception) {
throw new ConverterException(exception);
}
}
faces-config.xml
<?xml version="1.0"?>

<faces-config>
............
............
<converter>
<converter-id>
hr_mi_se_Converter
</converter-id>
<converter-class>
hr_mi_se_Converter
</converter-class>
</converter>
...........
...........
</faces-config>
Validadores
El propsito de la conversin y validacin es
asegurar que los datos han sido limpiados
antes de actualizar informacin en el modelo
De esta forma, podemos hacer asumpciones
sobre el estado de los datos al momento de
hacer la invocacin a funciones del negocio
Permite que los manejadores de eventos se
concentren en la lgica del negocio y no
tanto en problemas de presentacin

Validacin estndar
JSF provee tres componentes estndar para
validacin
DoubleRangeValidator
o El valor debe ser double, y debe estar en los rangos
especificados
LongRangeValidator
o El valor debe ser long, y debe estar en los rangos
especificados
LengthValidator
o El valor debe ser String, y su largo debe estar en los
rangos especificados

Validacin estndar
<%-- age --%>
<h:outputLabel value="Age"/>
<h:inputText id="age" size="3"
value="#{contactController.contact.age}">
<f:validateLongRange minimum="0"
maximum="150"/>
</h:inputText>
<h:message errorClass="errorClass" />
Validacin estndar
<%-- First Name --%>
<h:outputLabel value="First Name"/>
<h:inputText id="firstName" required="true"
value="#{contactController.contact.firstName}"
size="10" >
<f:validateLength minimum="2"
maximum="25" />
</h:inputText>
<h:message for="firstName" />
Validacin estndar
Si bien es muy til, existen escenarios en
donde la validacin estndar no es muy til
Correo electrnico, Direcciones web,
Nmeros telefnicos, etc.
En estos casos, no queda mucha mas opcin
que escribir nuestra propia validacin

Validacin customizada
Podemos crear componentes de validacin
customizados, que pueden ser reutilizados
entre aplicaciones
Para esto, debemos seguir una serie de
pasos
Crear una clase que implementa la interfaz
javax.faces.validator.Validator
Implementar el mtodo validate()

Validacin customizada
Registrar el validador en el archivo faces-
config.xml
Utilizar el tag <f:validate/> en las interfaces
Por ejemplo, creamos un validador para
controlar el cdigo postal ingresado...

public class ZipCodeValidator implements Validator {
private static final String ZIP_REGEX = "[0-9]{5}";
private static final String
PLUS4_OPTIONAL_REGEX = "([ |-]{1}[0-9]{4})?";
private static Pattern mask = null;
static {
mask = Pattern.compile(ZIP_REGEX + PLUS4_OPTIONAL_REGEX);
}
public void validate(FacesContext context,
UIComponent component, Object value)
throws ValidatorException {
String zipField = (String) value;
Matcher matcher = mask.matcher(zipField);
if (!matcher.matches()) {
FacesMessage message = new FacesMessage();
message.setDetail("Zip code not valid");
message.setSummary("Zip code not valid");
message.setSeverity(FacesMessage.SEVERITY_ERROR);
throw new ValidatorException(message);
}
}
}
Registramos el validador
<validator>
<validator-id>
zipCode
</validator-id>
<validator-class>
validators.ZipCodeValidator
</validator-class>
</validator>
Usamos el validador
<%-- zip --%>
<h:outputLabel value="Zip" />
<h:inputText id="zip" size="5"
value="#{controller.contact.zip}">
<f:validator validatorId="zipCode"/>
</h:inputText>
<h:message for="zip"
errorClass="errorClass" />

Clase2 - Desarrollo Web

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Clase2 - Desarrollo Web

Uploaded by

Copyright:

Available Formats

Instituto de

You might also like