JSF1 2

JavaServer Faces 1.
2
Javier Zamora ezamora@ids.com.mx
Av. Insurgentes Sur 1388 PH 03230, Mxico D.F. (5255) T. 2789 8400 www.ids.com.mx
Ms de 25 aos comprometidos con nuestros clientes, siendo sus socios tecnolgicos. informacin confidencial Direccin de Tecnologa y Calidad
1 1
JavaServer Faces
Intro QuickStart JSF Core Managed Bean Navigation JSF Tags Convertion & Validation Event Hadling Facelets AJAX RichFaces
Temario
informacin confidencial Direccin de Tecnologa y Calidad
JSF
Intro
Introduccin
JavaServer Faces
Java 5 / Java EE 5 Arquitectura basada componentes Controles UI Infraestructura aplicativa
Introduccin
Aplicacin JSF
Introduccin
Tecnologas involucradas
HTTP XHTML/Form Java Servlet JavaServer Page JavaBeans
Introduccin
Patrn MVC
Introduccin
JSF Web App
Introduccin
Framework MVC
Struts** SpringMVC Tapestry GWT
Beneficios JSF 1.2

JavaEE5 Interoperabilidad Intrnseca Estndar (Mojarra, MyFaces, ADF) Controles Avanzados Integracin Ajax
Introduccin
Implementaciones
Mojarra RI http://javaserverfaces.java.net/
Apache Myfaces http://myfaces.apache.org/
RichFaces http://www.jboss.org/richfaces
Icefaces http://www.icefaces.org
PrimeFaces http://www.primefaces.org/
10
JSF
QuickStart
QuickStart
Requerimientos
JDK6** JAVA_HOME Eclipse Helios MyEclipse ApplicationServer V5 Glassfish v2*** WebLogic 11g Jboss 5 DataSource jdbc/cambry Material Curso \\smprodtq2\software\JSF
12
QuickStart
Lista de pasos a realizar
Instalar JDK 6 Descomprimir Eclipse Descomprimir Application Server Configurar Server+Eclipse Importar Proyectos Crear un DataSource jdbc/cambry Deployment
Revisar los elementos que integran la aplicacin:

CambryWeb Bibliotecas (jars) Configuracin
web.xml Faces-config.xml
Page Ctrl View
13
QuickStart
Bibliotecas (jars)
EL JSF + JSP
JSF 1.2
Facelets
Richfaces
14
QuickStart
Configuracin web.xml
JSF
Facelets
15
RichFaces
QuickStart
RichFaces
JSF
16
QuickStart
Configuracin Extra
17
QuickStart
Configuracin faces-config.xml
Soporte Facelets
I18n View I18n MB
MB
MB Controller
Scope
18
QuickStart
Configuracin faces-config.xml
19
QuickStart
JobPage
Contenido de formularios Contenido de Controles Serializable
JobCtrl
Eventos de la Vista Referencia a MB Referencia a Modelo (EJB) Siempre request
20
QuickStart
Vista principalTemplate.xml
Definicin Tags
Eventos
TagJSF Tag Facelets
21
QuickStart
Vista http://localhost:8080/cambry/principalTemplate.faces
22
QuickStart
Vista continuacin http://localhost:8080/cambry/principalTemplate.faces
23
QuickStart
Ejercicio
Crear una pagina para registrar nuevos usuarios en el sistema basndose en el archivo principalTemplate.xml. Recordar encerrar el contenido en <f:view/> <h:form/>. import tags (f,h,ui). Pagina bien formada (XML). Colocar la vista en la carpeta WebRoot , WebContent. Crear un MB tipo Page para almacenar la informacin del usuario (id y contrasea) Crear un MB tipo Controller para atender los eventos de la vista. Solo debe de poder ver la pagina, la funcionalidad no. http://localhost:8080/cambry/nuevoUsuario.faces
24
JSF
Core
JSF Core
<f:view/>
ENCODE XHTML
DECODE
26
JSF Core
Ciclo de Vida (6)
27
JSF Core
Ciclo de Vida
Restore View 1. Crear un rbol de Componentes JSF 2. Primer request va al Paso Final 3. Restaura los valores de cada componente al valor previo.
28
JSF Core
Ciclo de Vida
Restore View 4. Recorre el rbol de componentes asociando el valor nuevo (stream) en una variable temporal
29
JSF Core
Ciclo de Vida
Process Validations 5. Conviernte el nuevo valor (stream) de cada componente a un objeto de cualquier tipo (String, Integer, etc). Variable Local JSF Validator <f:validator/> 6. Si existen Errores de conversin o Validacin va al paso Final
BestPractice <h:messages/>
30
JSF Core
Ciclo de Vida
Update Model Values 7. Se actualiza el MB Page MB Controller de las variables locales (temporales) que tiene cada control asociado.
31
JSF Core
Ciclo de Vida
Invoke Application 8. El mtodo java de nuesto MBController asociado al control commandLink, commandButton es ejecutado. La mayora de las ocasiones debe regresar una cadena con la pagina lgica a desplegar (faces-config).
32
JSF Core
Ciclo de Vida
Invoke Application 8. El mtodo java de nuesto MBController asociado al control commandLink, commandButton es ejecutado. La mayora de las ocasiones debe regresar una cadena con la pagina lgica a desplegar (faces-config).
33
JSF
Managed Bean
JSF MB
JavaBeans
Componente de arquitectura Java SE Programas de software reutilizables que pueden ser desarrollados y ensamblados fcilmente para crear aplicaciones mas complejas. Set execute Get
http://www.oracle.com/technetwork/java/javase/tech/index-jsp-138795.html
35
JSF MB
ManagedBean (Page Bean)
Java Class Propiedades
Objeto asociado a un formulario Objetos para llenado de Controles Vista (Combos, Listas, Radios) Lista de Objetos ( Definido en AbstractPage)
Setter & Getter
setter & getter
36
JSF MB
ManagedBean Controller (Ctrl)
Java Class Propiedades
ManagedBean Page Objecto Servicio (EJB,WebService, SpringBean) JSR 250
Setter & Getter ManagedBean Mtodos Action (eventos) Mtodos Inicializacin Pagina
37
JSF MB
faces-config.xml
Nombre Lgico MB
Scope
package + class
Dependency Injection MB
38
JSF MB
Recomendaciones al definir un MB.
El scope de MB Controllers en la mayoria de los casos debe ser request. El scope de MB Page si se utiliza Richfaces IceFaces debe ser session. El nombre lgico debe empezar con minscula y continuar con el nombre mismo nombre de la clase. JobPage -> jobPage JobCtrl -> jobCtrl El MB Page nunca debe de tener referencias a SpringBeans, WS o EJB . EL MB Page no debe hacer uso de JSR 250
39
JSF MB
JSF expression language (EL)
Lenguage de Expresin que es utilizado en paginas web para accesar a componentes MB del objeto session, request, none, application. #{bean.propiedad} #{bean.mtodo}
JSP expression language (EL)

${bean.propiedad} ${bean.metodo}
EJ
<h:inputText value=#{jobPage.job.jobId} />
40
JSF MB
JSF EL
#{page1.name} #{foo.bar} #{foo[bar]} #{foo[bar]} #{foo[3]} #{foo[3].bar} #{foo.bar[3]} #{customer.status == VIP} #{(page1.City.farenheitTemp - 32) * 5 / 9} Reporting Period: #{report.fromDate} to #{report.toDate}
41
JSF MB
EL Objectos Implicitos
facesContext param paramValues Header headerValues cookie initParam requestScope sessionScope applicationScope
EL palabras reservadas
and false le not div ge lt null empty gt mod or eq instanceof ne true
Literales
Boolean: true & false Integer Float String Null
Operadores
http://goo.gl/F0aLZ
42
JSF MB
JSR 250 Dependency Injection
JSF 1.2 (Annotations) Java 5/6
@Resource @PostConstruct @PreDestroy
43
JSF MB
I18n Message Bundles
messages.properties Botones BXXXXX Mensajes Negocio MXXXXX Etiquetas Vista LXXXXX
44
JSF MB
I18n Message Bundles Configuracin
faces-config.xml
JSF1.2
Nombre logico que se utiliza desde MB y Vista
XHTML
Definido en cada pagina
mx.ids.cambry.web.util.Messages
45
JSF MB
I18n Message Bundles Uso
Nombre lgico
L00002 = Nmero maximo = {0}
46
JSF MB
I18n Message Bundles Uso
MB
47
JSF MB
Ejercicio
Configurar i18n en JSF para agregar nuevos archivos de mensajes para el idioma espaol e ingles. es_MX en_US Utilizarlo en la vista de nuevoUsuario y en los mensajes que se generan desde MB Controller. MB utilizar los metodos heredados de AbstactCtrl. Dar la facilidad al usuario para que cambie el idioma de Espaol a Ingles y Viceversa. principalTemplate.xhtml <ui:define name=header> <h:form/> De acuerdo a las recomendaciones, verificar si se cumplieron en los MB agregados.
48
JSF
Navigation
Navigation
JSF & ManagedBean Ctrl
Determina que vista es la siguiente a mostrar.
JSF faces-config.xml
Configuran reglas de navegacin.
nombre lgico - MBCtrl (returns) - Paginas ( actions)
Nav Job
Pagina Fsica
50
Navigation
Static Navigation
Pagina Lgica $ faces-config.xml
Dynamic Navigation
51
Navigation
<navigation-rule/>
52
Navigation
Ejercicio
Agregar la navegacin Dinmica de nuevoUsuario donde: Simule el registro del usuario. Al llenar todos los campos direccionar a la pagina home De lo contrario regresarlo a la misma pagina Agregar un icono en la URL de pagina de firma.
53
JSF
Tags
JSF Tags
Renders kits
HTML 4.01 Skins
WML SVG Applet
55
JSF Tags
JSF HTML Tags se categorizan de la siguiente manera:
Inputs (input...) Outputs (output...) Commands (commandButton, commandLink) Selection (checkbox, listbox, menu, radio) Layouts (panelGrid) Data table (dataTable) Errors and Messages (message, messages) http://tinyurl.com/2yfjwm
56
JSF Tags
JSF HTML Tags Inputs
MB Page String Integer Double Setter & Getter
57
JSF Tags
JSF HTML Tags Outputs
MB Page String Integer Double Setter & Getter
58
JSF Tags
JSF HTML Tags Commands
MB Controller Atributo value=${jobCtrl.queryAction} Return type: String,void Return null: misma Pagina
59
JSF Tags
MB Controller Atributo value=${jobCtrl.queryAction} Return type: String Return null: misma Pagina
60
JSF Tags
URI Anclas URL MB Page
61
JSF Tags
JSF HTML Tags Selections
MB Page Setters & Getters javax.faces.model.SelectItem Inicializacin Ctrl.initXXX <f:selectItems/> <f:selectItem/>
(1)
(2) (3)
(2)
(1) JSF.Control: List, Array JSF.Contenido:String, Integer (2) JSF.Control: List, Array JSF.Contenido: List<String>, List<Integer> (3) JSF.Control: N/A JSF.Contenido:boolean (1)
(1)
(2)
62
JSF Tags
JSF HTML Tags Error Messages
<h:message/>
TIPO
63
JSF Tags
Ejercicio
Disear la siguiente Pagina con manejo de errores personalizado
64
JSF Tags
JSF HTML DataTable
MB Page java.util.List java.sql.ResultSet javax.servlet.jsp.jstl.sql.Result javax.faces.model.DataModel*Ser
ArrayDataModel ListDataModel ResultDataModel ResultSetDataModel ScalarDataModel
scroller
65
JSF Tags
JSF HTML DataTable
Titulo Tabla Titulo Columna
Contenido
Scroller
66
JSF Tags
JSF HTML DataTable
Variable Rengln Lista de Items MBPage
ID utilizado para Scroller
Titulo Tabla
Registros a Mostrar
Titulo Columna
Contenido Columna
67
JSF Tags
JSF HTML DataTable
JSF Control
ID DataTabla
68
JSF Tags
JSF HTML DataTable
DataModels
Registro Seleccionado
Soporte
69
JSF Tags
JSF HTML DataTable
DataModels
Inicializacin
Uso del Wrapper
70
JSF Tags
Ejercicio
Crear una Pagina que despliegue una lista de usuarios ID Nombre Correo direccin Agregar el control de Paginacin (< rich:datascroller />
71
JSF
Convertion & Validation

Ciclo de Vida
Process Validations 5. Convierte el nuevo valor (stream) de cada componente a un objeto de cualquier tipo (String, Integer, etc). Variable Local JSF Validator <f:validator/> 6. Si existen Errores de conversin o Validacin va al paso Final
BestPractice <h:messages/>
73

Conversiones
JSF HTML Tags Inputs/Outputs <h:message/> string -> Objetos Java, Objetos Java -> string Integer <f:convertDateTime pattern="MM/yyyy" /> Float String
74

Validaciones
JSF HTML Tags Inputs <h:message/>
<f:validateDoubleRange> <f:validateLength> <f:validateLongRange> <f:convertNumber> < f:convertDateTime>
75

I18n default
76

Mi Convertidor Implementar la interface
Regirtrarlo faces-config.xml
77

Mi Validador Implementar la interface
Regirtrarlo faces-config.xml
78

Registro de mensajes i18n
Mi Convertidor y Validador
79

Implementacin Convertidor
mx.ids.cambry.web.util.Messages
80

Implementacin Validador
81

Ejercicio
Crear un convertidor para una tarjeta de crdito (TDC) donde cada cuarteto de dgitos sea almacenado en una propiedad tipo String. Crear un validator que verifique que los primeros 2 dgitos de la tarjeta sean 10 Agregar un mensaje por default en dado caso de no exista
82
JSF
Event Hadling
Event Hadling
JSF soporta 3 tipos de eventos
Value Change events Disparados por componentes de entrada cuando su valor es modificado Action events Generados por: <h:commandButton/> y <h:commandLink/> Phase events Eventos disparados automticamente durante el ciclo de vida de JSF.
84
Event Hadling
Ciclo de Vida
85
Event Hadling
A partir de la fase Apply Request Values, se pueden ir encolando eventos los cuales sern procesados por aquellos componentes registrados para atenderlos. Cada Event Listener puede responder de 3 maneras:
Dejar que el ciclo contine normalmente Invocar FacesContext.renderResponse() Invocar FacesContext.responseComplete() para omitir el resto del ciclo
86
Event Hadling
Ejemplo
JS Event
Binding
MB Ctrl
87
Event Hadling
Action Events
Estos eventos son disparados en la fase Invoke Application En este caso el parmetro actionListener es el que determina el mtodo a ser invocado. Estos mtodos se activan automticamente al ser accionado el botn o la liga, por lo que no es necesario utilizar la funcin onchange.
88
Event Hadling
actionListener vs action
El actionListener no puede dirigir la navegacin. El action s. El action no puede acceder a informacin del evento que dispar el evento (por ejemplo la coordenada del click del mouse). El actionListener s. Los actionListeners se invocan antes que los actions actionListener utilizados para susurrar informacin.
89
Event Hadling
Listeners
Se pueden anexar mltiples Listeners a un componente utilizando los tags: <f:actionListener/> <f:valueChangeListener/>
javax.faces.event.ActionListener
90
Event Hadling
Immediate Components
91
Event Hadling
Immediate Components
92
Event Hadling
Ejercicio
Agregar un actionListener para saber cuantas veces un usuario se equivoca al intentar firmarse a la aplicacin. ClickListener Agregar un botn limpiar con el atributo immediate="true"
93
JSF
Facelets
Facelets
Tecnologa creada especficamente para trabajar con JSF. Lenguaje de plantilla que proporciona un alto desempeo.
Caractersticas
JSF 1.1 JSF 1.2 Expression Languange RenderKit No dependen de un contenedor web
http://facelets.java.net/
95
Facelets
Configuracin
faces-config.xml
web.xml
Dependencias Comunes Facelets
96
Facelets
Ejemplo
XML
97
Facelets
Unified EL
Creado para alinear el EL de JSF y JSP JSP -> ${bean.property} JSF -> #{bean.property} Integra JSTL core & fn
98
Facelets
Templates
Permite definir diseos bsicos con tags facelets, los cuales pueden ser utilizados para definir reas en la pagina que puedan ser sobre escritos.
99
Facelets
Templates
principalTemplate.xhtml
Contenido por default
Tag Facelets
100
Facelets
Templates
Uso principalTemplate.xhtml
Uso de la plantilla
Sobre escritura contenido
101
Facelets
Ejercicio
Crear un proyecto Web/JSF con soporte Facelets Myeclipse capabilities JAR CambryWeb Crear un template con las siguientes reas: Encabezado Men izquierdo Contenido Pie Crear una pagina home que utilice el template y solo sobre escribir el rea llamada contenido.
102
JSF
AJAX
AJAX
Web 1999
104
AJAX
Struts
Web Framework MVC JSP 2.x / EL Interceptores
105
AJAX
AJAX
Asynchronous JavaScript XML
106
AJAX
AJAX
107
AJAX
Primer Aplicacin con uso de AJAX
108
AJAX
Rich Internet Applications (RIA)
Adobe Flex Apache pivot Microsoft Silverlight JavaFX GWT
109
JSF
RichFaces
RichFaces
Qu es RichFaces?
Framework que agrega capacidades Ajax a aplicaciones JSF sin necesidad de escribir JavaScript ni controladores especiales (ManagedBean) http://www.jboss.org/richfaces
111
RichFaces
Arquitectura
112
RichFaces
Arquitectura
Ajax Filter Permite agregar capacidades ajax JSF. Ajax action Components Conjunto de componentes para realizar peticiones ajax Ajax Container Areas de la pagina que deben ser decodificadas durante peticiones ajax Skinnability
RichFaces JavaScript Engine Componente que corre en el navegador web.
113
RichFaces
Ventajas
Ajax JSF 2.0 Open Source (LGPL) Permite controlar las partes de vista que soportaran ajax. Gran Comunidad Documentacin Soporte Facelets Sun RI JSF 1.2 Myfaces 1.2 Application Servers Web Browser
114
JSF
RichFaces QuitStart
115
RichFaces QuickStart
Requerimientos
Conocimientos JSF JDK6** JAVA_HOME Eclipse Helios MyEclipse DataSource jdbc/cambry ApplicationServer V5 Glassfish v2*** WebLogic 11g Jboss 5 DataSource jdbc/cambry Material Curso \\smprodtq2\software\AJAX
116
Bibliotecas (jars)
EL JSF + JSP
JSF 1.2
Facelets
Richfaces
117
Richfaces
JSF
Facelets
118
RichFaces
RichFaces
JSF
119
login.xhtml
RichFaces Tags
120
Ejercicio 1)
Realizar el deployment CambryWeb jdbc/cambry
Ejercicio 2)
Crear un proyecto web con capacidades JSF 1.2, Facelets, y soporte para RichFaces 3.3.3
121
JSF
RichFaces Core
122
RichFaces Core
Limitaciones y Reglas
Ajax Framework no debe de aade o elimina, solo reemplaza elementos de la pagina. No utilizar<f:verbatim/> XMLHTTPRequest utiliza el formato XML (JSP). Componentes RichFaces utiliza sus propios renders.
123
RichFaces Core
Ajax
<a4j:commandButton/> <a4j:commandLink/> <a4j:poll/> <a4j:support/>
124
RichFaces Core
Partial Rendering
125
RichFaces Core
Partial Rendering
Componente a Actualizar
Componentes que deben ser actualizados Con la respuesta de la peticin ajax.
126
RichFaces Core
Partial Rendering
Wrapper para renderear despus de cada peticin
127
RichFaces Core
Queue
eventsQueue RichFaces no encola las peticiones ajax por default
128
RichFaces Core
Queue
requestDelay. Tiempo en milisegundos.
Nombre de la Cola
Tipos de Queue
Global default queue (web.xml) View Scope default queue View Scope named queue Form-based default queue
129
RichFaces Core
<a4j:commandButton/> <a4j:commandLink/>
null = partial Utilizado para ejecutar validaciones del lado de servidor
130
RichFaces Core
Ejercicio
Agregar soporte ajax a la pagina jobCreateUpdate.xhtml Considerar que la validacin sea del lado del servidor. Solo realizar actualizaciones parciales
131
JSF
RichFaces Components
132
<rich:contextMenu/>
133
<rich:dropDownMenu/>
134
Data Iterator
<rich:dataTable/> <rich:column/>
135
Data Iterator
<rich:datascroller/>
136
<rich:calendar/>
137
< rich:suggestionbox/>
138
< a4j:support/>
139
ICEfaces
Qu es ICEfaces?
Extensiones Ajax para JSF http://www.icefaces.org/
140
ICEfaces
Arquitectura
Suave actualizacin de paginas que no requiere una completa actualizacin de la pagina Preserva el contexto de la pagina durante la actualizacin de la pagina, incluyendo scroll, foco del control.
141
PREGUNTAS
142

JSF1 2

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

JSF1 2

Загружено:

Авторское право:

Доступные форматы

JavaServer Faces 1.

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

Beneficios JSF 1.2

informacin confidencial Direccin de Tecnologa y Calidad

Apache Myfaces http://myfaces.apache.org/

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

Revisar los elementos que integran la aplicacin:

Page Ctrl View

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

I18n View I18n MB

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

TagJSF Tag Facelets

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

Setter & Getter

setter & getter

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

JSP expression language (EL)

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

@Resource @PostConstruct @PreDestroy

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

L00002 = Nmero maximo = {0}

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

nombre lgico - MBCtrl (returns) - Paginas ( actions)

informacin confidencial Direccin de Tecnologa y Calidad

Pagina Lgica $ faces-config.xml

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad

informacin confidencial Direccin de Tecnologa y Calidad