La tecnología JavaServer Faces proporciona una arquitectura de componentes rica y flexible. Incluye un conjunto de clases de componentes UI como UICommand, UIForm y UIInput que descienden de UIComponentBase. Estas clases se pueden incluir en páginas usando etiquetas como <h:form>, <h:commandButton> y <h:inputText>.

1. Miguel Camargo
Laura Mesa

2. Componentes de interfaz de
usuario
• La tecnología JavaServer Faces proporciona una
arquitectura de componentes rica y flexible.
• Un componente puede ser simple
(botón, tabla, etc) o puede tener varios
componentes.
• La tecnología JavaServer Faces proporciona un
conjunto de clases de componentes UI

3. Componentes de interfaz de
usuario
• Todas las clases de componentes UI de
JavaServer Faces descienden de la clase
UIComponentBase, que define el estado y el
comportamiento por defecto de un UIComponent.
• El conjunto de clases de componentes UI incluido
en la última versión de JavaServerFaces:

4. Conjunto de clases UI
• UICommand
• UIForm
• UIGraphic
• UIInput
• UIOutput
• UIPanel
• UISelectItem
• UISelectItems
• UISelectBoolean
• UISelectMany
• UISelectOne

5. Componentes de interfaz de
usuario
• La mayoría de los autores de páginas y de los
desarrolladores de aplicaciones no utilizaran estas
clases directamente sino que incluirán los
componentes en una página usando la etiqueta
correspondiente al componente. La mayoría de
estos componentes se pueden renderizar de
formas diferentes.

6. Componentes de interfaz de
usuario
• La implementación de referencia de JavaServer
Faces proporciona una librería de etiquetas
personalizadas para renderizar componentes en
HTML. Estas son las etiquetas básicas, con su
respectivo componente:

7. Etiquetas Básicas
y Componentes
• UIForm (form) • UICommand (Command Boton)
<h: form> … </h: form> <h:commandButton
value="Aceptar"
action="siguiente"/>
• UIGraphic (Graphic Image)
<h:graphicImage
value="/imagenes/tux.png"/> • UISelectBoolean(selectBooleanCheckbox)
<h:selectBooleanCheckbox
value="#{cuestionario.recibiremail}"/>

8. Etiquetas Básicas
y Componentes
• UIInput (input text)
<h:inputText
value="#{formulario.usuario}" /> • UIInput (inputTextArea)
<h:inputTextarea
rows="3" cols="15"
value="Enter your text here.."/>
• UIInput (inputSecret)
<h:inputSecret
value="#{formulario.password}" />

9. Etiquetas Básicas
y Componentes
• UIOutput (output link)
• UIOutput (Output text) <h:outputLink
<h:outputText value="http://www.hoylodejo.com/">
value="Hola Mundo!"/> <h:outputText value="Pinche
aqui"/>
</h:outputLink>
Hola Mundo
Pinche aqui

10. Etiquetas Básicas
y Componentes
• UISelectMany (selectManyCheckbox)
<h:selectManyCheckbox
value="#{cuestionario.colorespreferidos}">
<f:selectItem itemValue=“red" itemLabel=“Red"/>
<f:selectItem itemValue=“blue" itemLabel=“Blue"/>
<f:selectItem itemValue=“yellow" itemLabel=“Yellow"/>
<f:selectItem itemValue=“green" itemLabel=“Green"/>
<f:selectItem itemValue=“orange" itemLabel=“Orange"/>
</h:selectManyCheckbox>

11. Etiquetas Básicas
y Componentes
• UISelectMany (selectManyListbox)
<h:selectManyListbox
value="#{cuestionario.nacionalidades}">
<f:selectItem itemValue=“italian" itemLabel=“Italian"/>
<f:selectItem itemValue=“greek" itemLabel=“Greek"/>
<f:selectItem itemValue=“austrian" itemLabel=“Austrian"/>
<f:selectItem itemValue=“mexican" itemLabel=“Mexican"/>
</h:selectManyListbox>

12. Etiquetas Básicas
y Componentes
• UISelectMany (selectManyMenu)
<h:selectManyMenu value="#{cuestionario.semana}">
<f:selectItem itemValue=“sunday" itemLabel=“Sunday"/>
<f:selectItem itemValue=“monday" itemLabel=“Monday"/>
<f:selectItem itemValue=“tuesday" itemLabel=“Tuesday"/>
<f:selectItem itemValue=“wednesday" itemLabel=“Wednesday"/>
<f:selectItem itemValue=“thursday" itemLabel=“Thursday"/>
<f:selectItem itemValue=“friday" itemLabel=“Friday"/>
<f:selectItem itemValue=“saturday" itemLabel=“Saturday"/>
</h:selectManyMenu>

13. <h:graphicImage value="/imagenes/duke.gif"/>
Conjunto de clases UI
• UISelectOne (SelectOneRadio) • UISelectOne (selectOneMenu)
<h:selectOneRadio <h:selectOneMenu
value="#{cuestionario.fumador}"> value="#{cuestionario.cargo}">
<f:selectItem itemValue="si" <f:selectItem itemValue=“gerente"
itemLabel=“Yes"/> itemLabel=“Gerente"/>
<f:selectItem itemValue="no" <f:selectItem itemValue=“vendedor"
itemLabel="No"/> itemLabel=“Vendedor"/>
</h:selectOneRadio> </h:selectOneMenu>

14. <h:graphicImage value="/imagenes/duke.gif"/>
Conjunto de clases UI
• UISelectOne (selectOneListbox)
<h:selectOneListbox value="#{cuestionario.sexo}">
<f:selectItem itemValue=“female" itemLabel=“Female"/>
<f:selectItem itemValue=“male" itemLabel=“Male"/>
</h:selectOneListbox>

15. Etiquetas Básicas
y Componentes
• UIPanel (PanelGrid y PanelGroup)
<h:panelGrid columns="3" border="4">
<h:panelGroup>
<h:graphicImage url="tux.png"/>
<h:outputText value="Columna 1"/>
</h:panelGroup>
<h:outputText value="(1,1)"/>
<h:outputText value="(1,2)"/>
<h:outputText value="(1,3)"/>
<h:outputText value="(2,1)"/>
<h:outputText value="(2,2)"/>
<h:outputText value="(2,3)"/>
</h:panelGrid>

17. BackBeans
• Estos beans se referencian en el fichero de configuración de
JSF en el apartado de managed beans, ya que son beans
gestionados por el controlador JSF.
• Cada JSF está formada por una JSP que contiene un
formulario y un backbean.
• El controlador JSF registra en el servidor un tipo especial de
petición, que estará asociado a estas páginas.

18. Pasos para usar
BackBeans
1. El usuario realiza en su navegador una petición de navegación a
una url.
2. Asociarle los backbeans. Los beans que no existan se crean
llamando a los constructores de sus clases, definidos en la
seccion de managed beans del fichero de configuración de JSF.
3. Dar valores a las propiedades de los elementos JSF de la página.
En su versión más sencilla una expresión JSF sería del tipo
#{mibackbean.propiedad}.
4. El servidor devuelve al usuario una página creada a partir de una
página JSP que incluye etiquetas JSF, cuyos valores se extraerán
del backbean asociado y actualizado.

19. Respuesta a acciones
De usuarios
• Un formulario web consta de: Etiquetas que
muestran información, campos editables, el botón
de envío del formulario.
• El controlador JSF dispone de un conjunto de
etiquetas que permiten definir formularios JSF

20. Navegación entre
paginas
• Cuando se ejecuta una petición que incluye una acción se
ejecuta el mecanismo de navegación de JSF.
• Este valor es utilizado junto con las reglas de navegación
creadas en el fichero de configuración de JSF para
determinar la página que se debe enviar como respuesta al
usuario. Las reglas de navegación definen: La página de
origen, la etiqueta de destino, la página de destino para
cada etiqueta, Si es un envío directo interno o una
redirección externa.

21. Etapas del procesamiento
De petición
1. Restaurar los componentes de la vista (restore view).
2. Aplicar los valores de la petición.. (apply request
values).
3. Procesamiento de las validaciones (process
validations).
4. Actualizar los valores del modelo (update model
values).
5. Invocación a la aplicación (invoke application)
6. Generación de la página (render response).

22. Gestión de los beans
• JSF gestiona automáticamente la creación y el acceso a los
beans que utilizan las páginas jsp.
• ¿Cuando se crean los beans?. JSF busca el bean cada vez
que se menciona en la página, en el orden en que aparecen
en la página.
• ¿Cómo se hace esto internamente?. Al procesar la página
JSP, las etiquetas JSF añaden código que busca el bean
mencionado en cada expresión EL.

23. Bibliografía
• http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pa
gina=IntroduccionJSFJava#_Toc225422696
• http://www.ibm.com/developerworks/ssa/rational/library/10/c
ustomized-data-binding-to-third-party-javaserver-faces-
controls/index.html
• http://es.scribd.com/doc/28079982/Curso-de-JSF-2-0
• http://www.suarezdefigueroa.es/manuel/DFSI/Java/teoriajsf.
html