Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Curso richfaces 3.3.3 II

4,006 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Curso richfaces 3.3.3 II

  1. 1. I. Sesión 2 Noviembre 2010 Claudio Chaucca Umana [email_address]
  2. 2. Contenidos I <ul><li>Sesión 2 </li></ul><ul><ul><li>Arquitectura RichFaces </li></ul></ul><ul><ul><li>Filters, Listeners, Servlets, ViewHandler </li></ul></ul><ul><ul><li>Partial Rendering / reRendering </li></ul></ul><ul><ul><li>Manage beans </li></ul></ul><ul><ul><li>Ajax Validators </li></ul></ul><ul><ul><li>Skinnability </li></ul></ul><ul><ul><li>Handling Resources </li></ul></ul><ul><ul><li>Caso: Registro de usuario </li></ul></ul>
  3. 3. Arquitectura RichFaces
  4. 4. Arquitectura RichFaces <ul><li>Ajax Filter </li></ul><ul><ul><li>Registrar el Filter en el web.xml </li></ul></ul><ul><ul><li>Reconoce multiples tipos de request </li></ul></ul><ul><ul><li>Diagrama de secuencia muestra el procesamiento de un request JSF y un Request Ajax </li></ul></ul><ul><ul><li>Los recursos estáticos o dinámicos son registrados por el Resource builder en el ResourceCache </li></ul></ul>
  5. 5. Arquitectura RichFaces
  6. 6. Arquitectura RichFaces
  7. 7. Arquitectura RichFaces <ul><li>Ajax Action Components.- Los componentes de solicitud de acción son : <a4j:commandButton> ,<a4j:commandLink> , <a4j:poll> y <a4j:support>. </li></ul><ul><li>Ajax Containers.- AjaxContainer es una interface que define un area en el JSF. <a4j:region> es una implementacion de esta interface. </li></ul><ul><li>JavaScript Engine .- corre en el lado del cliente, actualiza las areas del JSF basada en la informacion del Ajax response. </li></ul>
  8. 8. Arquitectura RichFaces
  9. 9. Arquitectura RichFaces <ul><li>Configuracion de Filter. </li></ul><ul><ul><li>Ejemplo de como definir el filtro en el web.xml estandar </li></ul></ul>
  10. 10. Arquitectura RichFaces <ul><li>Configuracion de Filter. </li></ul><ul><ul><li>Ejemplo de como definir el filtro en el web.xml seam </li></ul></ul>
  11. 11. Arquitectura RichFaces <ul><li>Listeners </li></ul><ul><ul><li>Definimos listener en el web.xml </li></ul></ul><ul><ul><li>Ejemplo de definición de listener estandar </li></ul></ul>
  12. 12. Arquitectura RichFaces <ul><li>Listeners </li></ul><ul><ul><li>Ejemplo de definición de listener seam </li></ul></ul>
  13. 13. Arquitectura RichFaces <ul><li>Servlet </li></ul><ul><ul><li>Se define en web.xml </li></ul></ul><ul><ul><li>Ejemplo de definición de servlet estandar </li></ul></ul>
  14. 14. Arquitectura RichFaces <ul><li>Servlet </li></ul><ul><ul><li>Ejemplo de definición de servlet seam </li></ul></ul>
  15. 15. Arquitectura RichFaces <ul><li>View handler </li></ul><ul><ul><li>Se define en faces-config.xml </li></ul></ul>
  16. 16. Partial Rendering <ul><li>RichFaces provee rederizado parcial al framework JSF con capacidades Ajax. </li></ul><ul><li>Minimiza la carga del servidor. </li></ul><ul><li>Ejemplo de renderizado parcial sobre <rich:tabPanel> </li></ul>
  17. 17. Re-Rerendering <ul><li>Componentes que permiten Re-Rendering <a4j:support>, <a4j:commandButton>, <a4j:jsFunction>, <a4j:poll>, <a4j:push> </li></ul><ul><li>reRenderer es un atributo, permite indicar áreas de la pagina que serán actualizadas </li></ul><ul><li>Interacciones Ajax Response </li></ul><ul><li>reRenderer usa algoritmos de busqueda sobre el arbol de componentes http://java.sun.com/javaee/javaserverfaces/1.2_MR1/docs/api/javax/faces/component/UIComponent.html#findComponent(java.lang.String) </li></ul>
  18. 18. Re-Rerendering
  19. 19. Manage Bean <ul><li>Modelo (.java) asociado a los componentes de la interfaz de usuario. </li></ul>
  20. 20. Manage Bean <ul><li>El Managed Bean debe ser declarado en faces-config.xml </li></ul>
  21. 21. Manage Bean <ul><li>Practica 15 minutos </li></ul>
  22. 22. Ajax Validators <ul><li>RichFaces posee 2 componentes para validar la data de ingreso. </li></ul><ul><ul><li><rich:ajaxValidator> </li></ul></ul><ul><ul><li><rich:beanValidator> </li></ul></ul><ul><li>Provee capacidades de validación sobre Inputs JSF </li></ul><ul><li>Permite validación predefinida y validación personalizada </li></ul><ul><li>Validación basada sobre eventos. </li></ul>
  23. 23. < rich:ajaxValidator > <ul><li>Validación en el lado del Cliente </li></ul><ul><li>Validaciones simples en base a etiquetas </li></ul><ul><ul><li><f:validateDoubleRange/> </li></ul></ul><ul><ul><li><f:validateLength/> </li></ul></ul>
  24. 24. < rich:ajaxValidator > <ul><li>Practica 10 minutos </li></ul>
  25. 25. < rich:ajaxValidator > <ul><li>Validaciones personalizadas usando Hibernate </li></ul><ul><li>Referencia en http://www.hibernate.org/hib_docs/validator/reference/en/html_single/ </li></ul>
  26. 26. < rich:ajaxValidator > <ul><li>Librerías requeridas, hibernate-annotations.jar, hibernate-commons-annotations.jar, hibernate-core.jar, hibernate-validator.jarlog4j.jar, slf4j-api.jar, slf4j-log4j12-1.5.8.jar </li></ul>
  27. 27. < rich:ajaxValidator > <ul><li>Practica 20 minutos </li></ul>
  28. 28. < rich:beanValidator > <ul><li>Validaciones personalizadas usando Hibernate </li></ul><ul><li>Validación en el lado del servidor </li></ul>
  29. 29. Skinnability <ul><li>Configura el Skin dentro de web.xml </li></ul><ul><li>Alto nivel de extencion para CSS </li></ul><ul><li>No reemplaza el uso de CSS </li></ul><ul><li>Skins out-of-the-box classic, plain, default, blueSky, ruby, darkX* </li></ul><ul><ul><li>Dentro de richfaces-impl-xxx.jar dentro de /META-INF/skins folder </li></ul></ul>
  30. 30. Skinnability
  31. 31. Skinnability <ul><li>Cambiando Skins en tiempo de ejecución </li></ul>
  32. 32. Skinnability <ul><li>Creando Skin personalizado </li></ul><ul><ul><li>Crear el archivo <name>.skin.properties </li></ul></ul><ul><ul><li>Colocar en META-INF/skins y WEB-INF/classes </li></ul></ul><ul><ul><li>Regsitrar skin en web.xml </li></ul></ul>
  33. 33. Skinnability <ul><li>Creando Skin personalizado en base A </li></ul><ul><ul><li>Crear el archivo ruby16.skin.properties en base a ruby </li></ul></ul><ul><ul><li>Colocar en META-INF/skins y WEB-INF/classes </li></ul></ul><ul><ul><li>Regsitrar skin en web.xml </li></ul></ul>
  34. 34. Skinnability <ul><li>Practica 20 minutos </li></ul>
  35. 35. Handling Resources <ul><li>Carga recursos (.properties), hojas de estilos (.css), javaScript (.js), imagenes etc. </li></ul><ul><li>Componente <a4j:loadBundle> </li></ul><ul><li>Se registra en faces-config.xml </li></ul>
  36. 36. Handling Resources <ul><li>Manage Bean que define la localidad del contexto </li></ul><ul><li>Registrar el Manage Bean en faces-config.xml </li></ul>
  37. 37. Handling Resources <ul><li>Practica 15 minutos </li></ul>
  38. 38. Caso: Registro de usuario <ul><li>Practica 30 minutos </li></ul>
  39. 39. ¡ Gracias !

×