servicios telemáticos avanzados 6.- aplicaciones web ... · modelo de sw en 3 capas ... nivel web...
TRANSCRIPT
![Page 1: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/1.jpg)
Servicios Telemáticos Avanzados
6.- Aplicaciones Web Orientadas a la Presentación con Java EE
OpenCourseWare 2014
Maider Huarte y Gorka PrietoEscuela Técnica Superior de Ingeniería de BilbaoDepartamento de Ingeniería de ComunicacionesUniversidad del País Vasco (UPV/EHU)
![Page 2: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/2.jpg)
Servicios Telemáticos Avanzados: 6.- NivelWeb.odp
Copyright © 2013-2014 Maider Huarte Arrayago, Gorka Prieto Agujeta
Servicios Telemáticos Avanzados: 6.- NivelWeb.odp lana, Maider Huartek eta Gorka Prietok egina, Creative Commons-en Atribution-NonCommercial-Share Alike 4.0 International License baimenaren menpe dago. Baimen horren kopia bat ikusteko, http://creativecommons.org/licenses/by-nc-sa/4.0/ webgunea bisitatu edo gutun bat bidali ondoko helbidera: Creative Commons, 171 2nd Street, Suite 300, San Francisco, California, 94105, USA.
Servicios Telemáticos Avanzados: 6.- NivelWeb.odp by by Maider Huarte and Gorka Prieto is licensed under a Creative Commons Atribution-NonCommercial-Share Alike 4.0 International License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/4.0/ or, send a letter to Creative Commons, 171 2nd Street, Suite 300, San Francisco, California, 94105, USA.
![Page 3: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/3.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 3/35
Aplicaciones Web Orientadas Presentación
1.- Arquitecturas Multitier1.1.- Introducción1.2.- Tiers
2.- Java EE2.1.- Introducción
3.- Nivel Web en Java EE3.1.- Contenedor Web3.2.- Aplicación Orientada a la Presentación3.3.- Managed Beans3.4.- Java Server Faces (JSF)
Expression Language (EL)3.5.- Facelets
ÍNDICE
![Page 4: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/4.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 4/35
1.- Arquitecturas multitier
● Aplicaciones empresariales como aplicaciones web● Modelo de sw en 3 capas (layers)
○
○
○
● Sw distribuido: arquitecturas multitier○ Niveles vs capas
1.1.- Introducción
![Page 5: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/5.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 5/35
1.- Arquitecturas multitier
● Arquitecturas de 2 tiers○ Cliente
- Ligero: - Pesado
○ Servidor
1.2.- Tiers
2 tiers con cliente ligero
ClienteLigero
Servidor
PL
BL
DL2 tiers con cliente pesado
ClienteLigero
Servidor
BL
DL
PL
BL
![Page 6: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/6.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 6/35
1.- Arquitecturas multitier
● Arquitectura de 3 tiers○ Cliente ligero○ Servidor de aplicaciones○ EIS
1.2.- Tiers
3 tiers
ClienteLigero
Servidorde
Aplicaciones
PL
BL
DL
BD
EIS
![Page 7: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/7.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 7/35
1.- Arquitecturas multitier
● Arquitectura de n-tiers: multitier○ Cliente ligero○ Servidor web○ Servidor de aplicaciones○ EIS
1.2.- Tiers
n-tiers
ClienteLigero
ServidorWeb
PL
BL
DL
BD
EISServidorde
Aplicaciones
![Page 8: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/8.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 8/35
2.- Java EE
● Definición● Modelo de Aplicaciones JavaEE
2.1.- Introducción
Aplicaciones JavaEE: n-tiers
ClienteLigero
(Nivel Cliente) ContenedorWeb
(Nivel Web)
PL
BL
DL
BD
EIS(Nivel EIS)
ContenedorEJB
(Nivel de Negocio)
Servidor JavaEE
![Page 9: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/9.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 9/35
2.- Java EE
● Conceptos JavaEE○ Componentes JavaEE○ Contenedores JavaEE○ Empaquetado de Aplicaciones JavaEE
2.1.- Introducción
Paquete de Aplicación JavaEE.ear
META-INF Módulo Web.war
Módulo EJB.jar
FicherosDDFicheros
DD
application.xml
otro.xml
Otros MódulosOtros Módulos.jar
![Page 10: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/10.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 10/35
3.- Nivel Web Java EE
● Módulos Web
● Funcionamiento del contenedor web○ HTTP-request → objeto Java → componente web○ Componente web → objeto Java → HTTP-response
3.1.- Contenedor Web
Paquete de Módulo Web.war
classesFicheros
DDFicherosDD
web.xml
otro.xml
JSPsJSFsJSPs
JSFs
FicherosDDLibrerías
JavaFicheros
DDFicheros.class
WEB-INF
lib
![Page 11: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/11.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 11/35
3.- Nivel Web en Java EE
● Configuración de módulos web para JBoss○ web.xml
- Mapeo de URLs con componentes► Alias► Servlets, clases
- Ficheros de bienvenida- Parámetros de inicialización del módulo- Mapeo de errores a pantallas de error- Referencias a recursos externos- Seguridad: login-config, security-role, security-constraint
○ jboss-web.xml- context-root- security-domain
3.1.- Contenedor Web
![Page 12: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/12.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 12/35
3.- Nivel Web en Java EE
● JSF: Java Server Faces○ Definición○ Implementaciones
- Mojarra (referencia), MyFaces (Apache), RichFaces (JBoss), ICEFaces, PrimeFaces
○ Vista- Páginas JSF (ficheros .xhtml)
○ Modelo- ManagedBean
►Request, Vista, Sesión, Aplicación○ Controlador
- Servlet Faces- Prepara ejecución de .xhtml, aplica EL
3.2.- Aplicación Orientada a la Presentación
![Page 13: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/13.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 13/35
3.- Nivel Web en Java EE3.2.- Aplicación Orientada a la Presentación
MVC en Java EE con JSF
Nivel Cliente
Nivel Web
Servidor JavaEE
Contenedor Web
Módulo Web
Vista(*.xhtml)
Modelo(Managed
beans)
Controlador(Servlet)
URL del .xhtml
HTML+JS
EL
Desc. despliegue(web.xml)
![Page 14: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/14.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 14/35
3.- Nivel Web en Java EE
● Managed Beans○ JavaBeans○ Anotaciones
- Declaración►@ManagedBean
- Ámbito►@RequestScoped, @ViewScoped, @SessionScoped,
@ApplicationScoped- Otras
►@ManagedProperty►@PostConstruct
○ Configuración manual en faces-config.xml
3.3.- Managed Beans
![Page 15: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/15.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 15/35
3.- Nivel Web en Java EE
● Ficheros JSFs○ Texto plano .xhtml○ Declaración DOCTYPE○ Declaración de librerías de etiquetas para contenido dinámico
- h:, f:, ui:○ Etiquetas HTML puras
- <head></head>- <body></body>
○ Etiquetas para contenido dinámico: cierres- <h:head>- <h:body>
3.4.- Java Server Faces
![Page 16: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/16.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 16/35
3.- Nivel Web en Java EE
● Ficheros JSFs○ Elementos dinámicos de <body>
- Texto► <h:outputText>► <h:outputLabel>
- Tablas► <h:dataTable>► <h:column>
- Agrupación► <h:panelGroup>
- Mensajes► <h:message>
- Enlaces► h:outputLink
3.4.- Java Server Faces
- Formularios► <h:form>► <h:inputText>
▻ required, requiredMessage▻ validator, validatorMessage▻ valueChangeListener
► <h:selectOneRadio>, <h:selectManyCheckbox>, …► <f:selectItem>► <h:commandButton>
▻ type▻ action▻ actionListener
![Page 17: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/17.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 17/35
3.- Nivel Web en Java EE
● Ficheros JSFs○ Atributos comunes
- id- value- rendered
○ EL (Expresion Language): acceso a ManagedBean- ${expresión_EL}- #{expresión_EL}- expresión_EL:
► nombreManagedBean.nombreAtributo► nombreManagedBean.nombreMétodo(parámetros)► operadores aritméticos, de comparación,...
3.4.- Java Server Faces
![Page 18: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/18.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 18/35
● EJEMPLO 1 JSFs: Hello World!
package dl;
public class DatosJB {private String nombre;private short edad;
public DatosJB() {}
public String getNombre() {return nombre;
}
public void setNombre(String nombre) {this.nombre=nombre;
}
public short getEdad() {return edad;
}
public void setEdad(short edad) {this.edad=edad;
}}
3.- Nivel Web en Java EE3.4.- Java Server Faces
JB: dl.DatosJB.java
package pl;
import javax.faces.bean.ManagedBean;import javax.faces.bean.RequestScoped;
import dl.DatosJB;
@ManagedBean@RequestScopedpublic class KaixoMB extends DatosJB {}
MB: pl.KaixoMB.java
![Page 19: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/19.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 19/35
● EJEMPLO 1 JSFs: Hello World!
<!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" xmlns:f="http://java.sun.com/jsf/core"><head><title>1Inicio JSF</title></head> <body>
<h:form><h:outputLabel value="Nombre:" /><h:inputText id="nombre" required="true" value="#{kaixoMB.nombre}" requiredMessage="ERROR: tienes que introducir
tu nombre"/><h:message for="nombre" /><br /><h:inputText id="edad" required="true" value="#{kaixoMB.edad}"
requiredMessage="ERROR: tiene que introducir su edad" validatorMessage="ERROR: la edad no es válida"><f:validateLongRange minimum="0" maximum="150" />
</h:inputText> <h:message for="edad" /><br /><h:commandButton action="2Final" id="submit" value="Enviar" /><h:commandButton id="reset" type="reset" value="Borrar" />
</h:form></body></html>
3.- Nivel Web en Java EE3.4.- Java Server Faces
JSF: 1Inicio.xhtml
<!DOCTYPE html ...> <html xmlns="http://www.w3.org/1999/xhtml" ...>
<head><title>2Final JSF</title></head> <body>
<h2>Kaixo, #{kaixoMB.nombre}! tienes #{kaixoMB.edad} años, verdad?</h2></body> </html>
JSF: 2Final.xhtml
![Page 20: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/20.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 20/35
● EJEMPLO 1 JSFs: Hello World!
<?xml version="1.0"?><web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> <display-name>T6-1AD_JSF_1</display-name> <welcome-file-list> <welcome-file>/1Inicio.xhtml</welcome-file> </welcome-file-list> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.jsf</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.faces</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.xhtml</url-pattern> </servlet-mapping> </web-app>
3.- Nivel Web en Java EE3.4.- Java Server Faces
web.xml
![Page 21: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/21.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 21/35
● EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs
3.- Nivel Web en Java EE3.4.- Java Server Faces
1Inicio.xhtml
ListaMB
OperacionMB
LogicaListaPOJO
LogicaOperacionPOJO
OperacionJB
PRESENTACIÓN LÓGICA DATOS
JSF CLASES JAVA CLASES JAVA CLASES JAVA
Webcontainer
(Nivel Web)
PLBLDL
EJBcontainer
(Nivel de Negocio)
Servidor JavaEE
2Resultados.xhtml
3Final.xhtml
![Page 22: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/22.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 22/35
● EJEMPLO 1 JSFs: Hello World!
package dl;
public class OperacionJB {private float op1;private char op;private float op2;private float res;
public OperacionJB() {}
public void setOp1(float er1) {this.op1=er1;
}
public float getOp1() {return op1;
}
public void setOp(char er) {this.op=er;
}
public char getOp(){return op;
}
//Métodos getters y setters del resto de atributos}
3.- Nivel Web en Java EE3.4.- Java Server Faces
JavaBean: dl.OperaionJB.java
![Page 23: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/23.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 23/35
● EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs
package bl;
import dl.OperacionJB;
public class LogicaOperacionPOJO {
public static void calcularOperacion(OperacionJB e) {float er1=e.getOp1();char er=e.getOp();float er2=e.getOp2();
switch(e.getOp()) {case '+':
e.setRes(er1+er2);break;
case '-':e.setRes(er1-er2);break;
case '*':e.setRes(er1*er2);break;
case '/':e.setRes(er1/er2);break;
default:System.out.println("bl.LogicaOperacionPOJO.calcularOperacion: la operación "+er+" no es correcta");e.setRes(0);
}}
}
3.- Nivel Web en Java EE3.4.- Java Server Faces
POJO: bl.LogicaOperacionPOJO.java
![Page 24: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/24.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 24/35
● EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs
package bl;
import javax.faces.context.FacesContext;import javax.servlet.http.HttpSession;
import java.util.List;import java.util.ArrayList;
import dl.OperacionJB;
public class LogicaListaPOJO {
private List<OperacionJB> lista;
public LogicaListaPOJO() {lista=new ArrayList<OperacionJB>();
}
public List<OperacionJB> getLista() {return lista;
}
public void addOperacion(OperacionJB e) {LogicaOperacionPOJO.calcularOperacion(e);lista.add(e);
}}
3.- Nivel Web en Java EE3.4.- Java Server Faces
POJO: bl.LogicaListaPOJO.java
![Page 25: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/25.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 25/35
● EJEMPLO 2 JSFs: Aplicación Aritmética con JSFspackage pl;
import javax.faces.bean.ManagedBean;import javax.faces.bean.RequestScoped;
import dl.OperacionJB;
@ManagedBean@RequestScopedpublic class OperacionMB extends OperacionJB {}
3.- Nivel Web en Java EE3.4.- Java Server Faces
ManagedBean: pl.OperacionMB.java
package pl;//imports NECESARIOS
@ManagedBean@SessionScopedpublic class ListaMB {
private LogicaListaPOJO lista;
public ListaMB() {lista=new LogicaListaPOJO();
}
public List<OperacionJB> getLista() {return lista.getLista();
}
public void addOperacion(OperacionMB e) {lista.addOperacion(e);
}
public void endSesion() {if (!getLista().isEmpty())
getLista().clear();HttpSession sesion = (HttpSession) FacesContext.getCurrentInstance()
.getExternalContext().getSession(false);sesion.invalidate();
}}
ManagedBean: pl.ListaMB.java
![Page 26: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/26.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 26/35
● EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs
<!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" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"> <h:head><title>1Inicio</title></h:head><body>
<h1>BIENVENID@ A LA APLICACION ARITMETICA</h1><br /><br /><h:form>
<h1>INTRODUZCA LOS DATOS PARA UNA NUEVA OPERACION</h1><h:inputText id="op1" value="#{operacionMB.op1}" required="true" requiredMessage="ERROR: falta el 1er operando" /><h:selectOneMenu id="op" value="#{operacionMB.op}">
<f:selectItem itemValue="+" itemLabel="+"/><f:selectItem itemValue="-" itemLabel="-"/><f:selectItem itemValue="*" itemLabel="*"/><f:selectItem itemValue="/" itemLabel="/"/>
</h:selectOneMenu><h:inputText id="op2" value="#{operacionMB.op2}" required="true" requiredMessage="ERROR: falta el 2º operando"
/><br /><h:message for="op1" style="color:blue" /><br /><h:message for="op2" style="color:blue"/><br /><h:commandButton action="2Resultados" actionListener="#{listaMB.addOperacion(operacionMB)}" id="submit"
value="CALCULAR" /></h:form><h:form>
<h:commandButton action="3Final" id="submit" value="VER OPERACIONES" /></h:form>
</body> </html>
3.- Nivel Web en Java EE3.4.- Java Server Faces
JSF: 1Inicio.xhtml
![Page 27: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/27.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 27/35
● EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs
<!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" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head><title>2Resultados</title></h:head> <body>
<h1>RESULTADO DE LA OPERACION ENVIADA</h1>#{operacionMB.op1}#{operacionMB.op}#{operacionMB.op2}=#{operacionMB.res}<br /><br /><h:form>
<h1>INTRODUZCA LOS DATOS PARA UNA NUEVA OPERACION</h1><h:inputText id="op1" value="#{operacionMB.op1}" required="true" requiredMessage="ERROR: falta el 1er
operando" /><h:selectOneMenu id="op" value="#{operacionMB.op}">
<f:selectItem itemValue="+" itemLabel="+"/><f:selectItem itemValue="-" itemLabel="-"/><f:selectItem itemValue="*" itemLabel="*"/><f:selectItem itemValue="/" itemLabel="/"/>
</h:selectOneMenu><h:inputText id="op2" value="#{operacionMB.op2}" required="true" requiredMessage="ERROR: falta el 2º
operando" /><br /><h:message for="op1" style="color:blue" /><br /><h:message for="op2" style="color:blue"/><br /><h:commandButton actionListener="#{listaMB.addOperacion(operacionMB)}" id="submit" value="CALCULAR" />
</h:form><h:form>
<h:commandButton action="3Final" id="submit" value="VER OPERACIONES" /></h:form>
</body> </html>
3.- Nivel Web en Java EE3.4.- Java Server Faces
JSF: 2Resultados.xhtml
![Page 28: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/28.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 28/35
● EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs
<!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" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets">
<head><title>3Final</title></head> <body>
<h1>RESUMEN DE SESION</h1>Nº de operaciones: #{listaMB.lista.size()}<h:dataTable value="#{listaMB.lista}" var="operacion" border="2">
<h:column><f:facet name="header">OPERACIONES</f:facet>#{operacion.op1}#{operacion.op}#{operacion.op2}
</h:column><h:column>
<f:facet name="header">RESULTADOS</f:facet>#{operacion.res}
</h:column></h:dataTable><p><h:form>
<h:commandButton action="1Inicio" actionListener="#{listaMB.endSesion()}" id="submit" value="EMPEZAR NUEVA SESIÓN" />
</h:form></p>
</body> </html>
3.- Nivel Web en Java EE3.4.- Java Server Faces
<!-- MISMO CÓDIGO QUE EN LA VERSIÓN ANTERIOR --> web.xml
JSF: 3Final.xhtml
![Page 29: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/29.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 29/35
CAMBIADOS
● EJEMPLO 3 JSFs: Aplicación Aritmética con JSFs, otra presentación
3.- Nivel Web en Java EE3.4.- Java Server Faces
ListaMB
OperacionMB
LogicaListaPOJO
LogicaOperacionPOJO
OperacionJB
PRESENTACIÓN LÓGICA DATOS
JSF CLASES JAVA CLASES JAVA CLASES JAVA
Webcontainer
(Nivel Web)
PLBLDL
EJBcontainer
(Nivel de Negocio)
Servidor JavaEE
2Final.xhtml
1Inicio.xhtml
![Page 30: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/30.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 30/35
● EJEMPLO 3 JSFs: Aplicación Aritmética con JSFs, otra presentación
package pl;
//imports NECESARIOS
@ManagedBean@RequestScopedpublic class OperacionMB extends OperacionJB {
private boolean terminada;
public boolean getTerminada() {return terminada;
}
public void setTerminada() {this.terminada=true;return;
}}
3.- Nivel Web en Java EE3.4.- Java Server Faces
ManagedBean: pl.OperacionMB.java
package pl;
//imports NECESARIOS
@ManagedBean@SessionScopedpublic class ListaMB {
private LogicaListaPOJO lista;
//Constructor: IGUAL QUE EN LA VERSIÓN ANTERIOR//getLista: IGUAL QUE EN LA VERSIÓN ANTERIOR
public void addOperacion(OperacionMB e) {lista.addOperacion(e);e.setTerminada();return;
}
//endSesion: IGUAL QUE EN LA VERSIÓN ANTERIOR}
ManagedBean: pl.ListaMB.java
![Page 31: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/31.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 31/35
● EJEMPLO 3 JSFs: Aplicación Aritmética con JSFs, otra presentación
<!DOCTYPE html ...> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"> <h:head><title>1Inicio</title><link rel="stylesheet" type="text/css" href="estilosAplicArit.css"></link></h:head><body>
<h:panelGroup rendered="#{listaMB.lista.isEmpty()}"><h1>BIENVENID@ A LA APLICACION ARITMETICA</h1></h:panelGroup><h:panelGroup rendered="#{operacionMB.terminada}">
<h1>RESULTADO DE LA OPERACION ENVIADA</h1>#{operacionMB.op1}#{operacionMB.op}#{operacionMB.op2}=#{operacionMB.res}
</h:panelGroup><br /><br /><h:form>
<h1>INTRODUZCA LOS DATOS PARA UNA NUEVA OPERACION</h1><h:inputText id="op1" value="#{operacionMB.op1}" required="true" requiredMessage="ERROR: falta el 1er operando" /><h:selectOneMenu id="op" value="#{operacionMB.op}">
<f:selectItem itemValue="+" itemLabel="+"/><f:selectItem itemValue="-" itemLabel="-"/><f:selectItem itemValue="*" itemLabel="*"/><f:selectItem itemValue="/" itemLabel="/"/>
</h:selectOneMenu><h:inputText id="op2" value="#{operacionMB.op2}" required="true" requiredMessage="ERROR: falta el 2º operando" /><br
/><h:message for="op1" style="color:blue" /><br /><h:message for="op2" style="color:blue"/><br /><h:commandButton actionListener="#{listaMB.addOperacion(operacionMB)}" id="submit" value="CALCULAR" />
</h:form><h:form>
<h:commandButton action="2Final" id="submit" value="VER OPERACIONES" /></h:form>
</body> </html>
3.- Nivel Web en Java EE3.4.- Java Server Faces
JSF: 1Inicio.xhtml
![Page 32: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/32.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 32/35
3.- Nivel Web en Java EE
● Ficheros JSFs○ Plantillas con facelets
- Librería de etiquetas facelets- Etiquetas en plantillas
►ui:insert- Utilización de plantillas en JSFs
► ui:composite► ui:define
3.5.- Facelets
![Page 33: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/33.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 33/35
● EJEMPLO 4 JSFs:Aplicación Aritmética con JSFs, otra presentación y FACELETs
3.- Nivel Web en Java EE3.5.- Facelets
estilosAplicacionAritmetica.css
plantilla.xhtml
1Inicio.xhtml
ListaMB
OperacionMB
2Final.xhtml
PRESENTACION NEGOCIO ACCESO A DATOS
JSF CLASES JAVA CLASES JAVA CLASES JAVA
OperacionJB
LogicaOperacionPOJO
LogicaListaPOJO
NUEVOS
CAMBIADOS
![Page 34: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/34.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 34/35
● EJEMPLO 4 JSFs:Aplicación Aritmética con JSFs, otra presentación y FACELETs
h1{text-align:center;}p{text-align:center;}table, th, td{border:1px solid black;border-collapse:collapse;}h2{text-align:center;}
3.- Nivel Web en Java EE3.5.- Facelets
CSS: estilosAplicArit.css
<!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" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"> <h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link rel="stylesheet" type="text/css" href="estilosAplicArit.css" /><title><ui:insert name="TituloDocumento">Aplicación Aritmética</ui:insert></title>
</h:head> <h:body>
<ui:insert name="TituloPagina" /><br /><ui:insert name="Contenido"/><br /><br /><ui:insert name="PiePagina">2013-2014 STA</ui:insert>
</h:body> </html> JSF: plantilla.xhtml
![Page 35: Servicios Telemáticos Avanzados 6.- Aplicaciones Web ... · Modelo de sw en 3 capas ... NIVEL WEB EN JAVA EE 21/35 EJEMPLO 2 JSFs: Aplicación Aritmética con JSFs 3.- Nivel Web](https://reader031.vdocuments.net/reader031/viewer/2022021905/5bad8c4709d3f217678d4e48/html5/thumbnails/35.jpg)
© 2013-2014Maider Huarte Arrayago, Gorka Prieto Agujeta STA: 6.- NIVEL WEB EN JAVA EE 35/35
● EJEMPLO 4 JSFs:Aplicación Aritmética con JSFs, otra presentación y FACELETs
<!DOCTYPE html ...> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:composition template="/plantilla.xhtml"><ui:define name="TituloDocumento">1Inicio</ui:define><ui:define name="TituloPagina">APLICACION ARITMETICA CON JSF, EJB y JPA: INICIO</ui:define><ui:define name="Contenido">
<h:panelGroup rendered="#{listaMB.lista.isEmpty()}"><h1>BIENVENID@ A LA APLICACION ARITMETICA</h1>
<!-- MISMO CÓDIGO QUE EN LA VERSIÓN ANTERIOR --></ui:define></ui:composition></html>
3.- Nivel Web en Java EE3.5.- Facelets
JSF: 1Inicio.xhtml
<!DOCTYPE html ...> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:composition template="/plantilla.xhtml"><ui:define name="TituloDocumento">2Final</ui:define><ui:define name="TituloPagina">APLICACION ARITMETICA CON JSF, EJB y JPA: RESUMEN DE SESION</ui:define><ui:define name="Contenido">
<h1>RESUMEN DE SESION</h1>Nº de operaciones: #{listaMB.lista.size()}<h:dataTable value="#{listaMB.lista}" var="operacion" border="2">
<h:column><!-- MISMO CÓDIGO QUE EN LA VERSIÓN ANTERIOR --></ui:define></ui:composition> </html>
JSF: 2Final.xhtml