Etiquetas básicas jsf
- 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