1. 1.

Miguel CamargoLaura Mesa

2. 2. Componentes de interfaz de usuario La tecnologa JavaServer Faces proporciona una
arquitectura de componentes rica y flexible. Un componente puede ser simple (botn, tabla,
etc) o puede tener varios componentes. La tecnologa JavaServer Faces proporciona un
conjunto de clases de componentes UI
3. 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
versin de JavaServerFaces:
4. 4. Conjunto de clases UI UICommand UIForm UIGraphic UIInput UIOutput UIPanel
UISelectItem UISelectItems UISelectBoolean UISelectMany UISelectOne
5. 5. Componentes de interfaz de usuario La mayora de los autores de pginas y de los
desarrolladores de aplicaciones no utilizaran estas clases directamente sino que incluirn los
componentes en una pgina usando la etiqueta correspondiente al componente. La mayora de
estos componentes se pueden renderizar de formas diferentes.
6. 6. Componentes de interfaz de usuario La implementacin de referencia de JavaServer Faces
proporciona una librera de etiquetas personalizadas para renderizar componentes en HTML.
Estas son las etiquetas bsicas, con su respectivo componente:
7. 7. Etiquetas Bsicas 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. 8. Etiquetas Bsicas 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. 9. Etiquetas Bsicas 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. 10. Etiquetas Bsicas 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. 11. Etiquetas Bsicas 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. 12. Etiquetas Bsicas 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. 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. 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. 15. Etiquetas Bsicas 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>
16. 16. BackBeans Estos beans se referencian en el fichero de configuracin 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 peticin, que estar asociado a estas pginas.
17. 17. Pasos para usar BackBeans1. El usuario realiza en su navegador una peticin de
navegacin 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
configuracin de JSF.3. Dar valores a las propiedades de los elementos JSF de la pgina. En
su versin ms sencilla una expresin JSF sera del tipo #{mibackbean.propiedad}.4. El servidor
devuelve al usuario una pgina creada a partir de una pgina JSP que incluye etiquetas JSF,
cuyos valores se extraern del backbean asociado y actualizado.
18. 18. Respuesta a acciones De usuarios Un formulario web consta de: Etiquetas que muestran
informacin, campos editables, el botn de envo del formulario. El controlador JSF dispone de
un conjunto de etiquetas que permiten definir formularios JSF
19. 19. Navegacin entre paginas Cuando se ejecuta una peticin que incluye una accin se
ejecuta el mecanismo de navegacin de JSF. Este valor es utilizado junto con las reglas de
navegacin creadas en el fichero de configuracin de JSF para determinar la pgina que se
debe enviar como respuesta al usuario. Las reglas de navegacin definen: La pgina de origen,
la etiqueta de destino, la pgina de destino para cada etiqueta, Si es un envo directo interno o
una redireccin externa.
20. 20. Etapas del procesamiento De peticin1. Restaurar los componentes de la vista (restore
view).2. Aplicar los valores de la peticin.. (apply request values).3. Procesamiento de las
validaciones (process validations).4. Actualizar los valores del modelo (update model values).5.
Invocacin a la aplicacin (invoke application)6. Generacin de la pgina (render response).
21. 21. Gestin de los beans JSF gestiona automticamente la creacin y el acceso a los beans
que utilizan las pginas jsp. Cuando se crean los beans?. JSF busca el bean cada vez que se
menciona en la pgina, en el orden en que aparecen en la pgina. Cmo se hace esto
internamente?. Al procesar la pgina JSP, las etiquetas JSF aaden cdigo que busca el bean
mencionado en cada expresin EL.
22. 22. Bibliografa 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