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 III

3,679 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Curso richfaces 3.3.3 III

  1. 1. I. Sesión 3 Noviembre 2010 Claudio Chaucca Umana [email_address]
  2. 2. Contenidos I <ul><li>Sesión 3 </li></ul><ul><ul><li>Librerías Core Ajax, UI and Ajax4Java (a4j) </li></ul></ul><ul><ul><li>Ajax Support a4j:support, a4j:region, A4j:include, a4j:poll, a4j:push </li></ul></ul><ul><ul><li>Ajax Output <a4j:include>,<a4j:mediaOutput>,<a4j:outputPanel> </li></ul></ul><ul><ul><li>Rich Output <rich:panel>,<rich:panelBar>,<rich:tabPanel> </li></ul></ul><ul><ul><li>Rich Input </li></ul></ul><ul><ul><li>Rich Select </li></ul></ul><ul><ul><li>Caso: Mantenimiento de clientes. </li></ul></ul>
  3. 3. Ajax Support <ul><li><a4j:actionparam> </li></ul><ul><li><a4j:region> </li></ul><ul><li><a4j:support> </li></ul><ul><li><a4j:poll> </li></ul><ul><li><a4j:push> </li></ul>
  4. 4. <a4j:actionparam> <ul><li><a4j:actionparam> Asigna el valor del atributo assignTo a una propiedad del Manage Bean </li></ul><ul><li>Nos permite actualizar los valores del modelo sin invocar un código java. </li></ul><ul><li>Atributos: </li></ul><ul><ul><li>“ name” nombre del parámetro </li></ul></ul><ul><ul><li>“ value” valor inicial del parámetro </li></ul></ul><ul><ul><li>“ assignTo” propiedad del Manage Bean </li></ul></ul>
  5. 5. <a4j:region> <ul><li><a4j:region> especifica la parte del arbol de componentes a ser procesados en el servidor. </li></ul><ul><li>Todo el formulario es submitted pero solo la parte de la región será procesado. </li></ul><ul><li>Si no se especifica que región actualizar se actualiza la región que inicia el Action. </li></ul>
  6. 6. <a4j:support> <ul><li><a4j:support> mas importante componente de la librería RichFaces. </li></ul><ul><li>Enriquece con capacidades ajax componentes no Ajax JSF </li></ul><ul><li>Todos los demás componentes RichFaces se basan en el mismo principio </li></ul><ul><li>Atributos: </li></ul><ul><ul><li>event.- define el evento javaScript que dará soporte Ajax. </li></ul></ul><ul><ul><li>reRender.- define los ids de los componentes JSF a ser reRendered </li></ul></ul><ul><ul><li>Onsubmit.- código javaScript llamado antes del Ajax request </li></ul></ul><ul><ul><li>Oncomplete.- código javaScript llamado después del Ajax request </li></ul></ul>
  7. 7. <a4j:support>
  8. 8. <a4j:poll> <ul><li><a4j:poll> envía de forma periódica un AjaxRequest al servidor. </li></ul><ul><li>“ interval” Indica la propiedad en milisegundos entre response y request. </li></ul><ul><li>“ timeout” define el tiempo esperado para responder en milisegundo, si no es recibido el response aborta el siguiente request. </li></ul><ul><li>Similar a un timer </li></ul>
  9. 9. <a4j:push> <ul><li><a4j:poll> ejecuta de forma periódica Ajax request al servidor, simulando un push data. </li></ul><ul><li>Envió de mensajes de forma asíncrona a diferencia del <a4j:poll> </li></ul>
  10. 10. Ajax Support <ul><li>Practica 20 minutos </li></ul>
  11. 11. Ajax Output <ul><li><a4j:include> </li></ul><ul><li><a4j:mediaOutput> </li></ul><ul><li><a4j:outputPanel> </li></ul>
  12. 12. <a4j:keepAlive>,<a4j:include> <ul><li><a4j:keepAlive>.- Mantiene con vida un bean por mas de lo que dura un request durante una session </li></ul><ul><li><a4j:include>.- incluye paginas dentro de la pagina padre. </li></ul><ul><li><a4j:include>.- usa las reglas de navegación estándar JSF definidas en faces-config.xml </li></ul>
  13. 13. <a4j:keepAlive>,<a4j:include>
  14. 14. <a4j:keepAlive>,<a4j:include>
  15. 15. <a4j:mediaOutput> <ul><li>Componente que facilita la generación de imagen, video, sonido y otros binarios al vuelo </li></ul><ul><li>Necesita 2 beans MediaBean con la función paint(OutputStream out, Object data) y MediaData con las propiedades de la imagen </li></ul>
  16. 16. <a4j:outputPanel> <ul><li>Es usado cuando sus componentes internos siempre deben ser actualizados independientemente de la propiedad reRender </li></ul><ul><li>Practica 30 minutos (usar jFreeChart para generar la image) </li></ul>
  17. 17. Rich output <ul><li><rich:panel> </li></ul><ul><li><rich:panelBar><rich:panelBarItem> </li></ul><ul><li><rich:panelMenuGroup><rich:panelMenu><rich:panelMenuItem> </li></ul><ul><li><rich:tabPanel><rich:tab> </li></ul>
  18. 18. <rich:panel>
  19. 19. <rich:panel> <f:form> <rich:panel> <f:faces> <h:outpuText> <h:outputText> <h:inputText> <h:panelGrid > DOM Arbol de componentes HtmlForm HtmlPanel getFacets HtmlOutputText HtmlPanelGrid HtmlOutputText HtmlInputText
  20. 20. <rich:panel>
  21. 21. <rich:panel> <ul><li>Practica 15 minutos, crear el control Panel desde java </li></ul>
  22. 22. Rich output <ul><li>Practica 20 minutos crear los sig controles desde java </li></ul><ul><li><rich:tabPanel> </li></ul><ul><li><rich:tab> </li></ul><ul><li><rich:panel> </li></ul><ul><li><rich:panelBar> </li></ul><ul><li><rich:panelBarItem> </li></ul><ul><li><rich:panelMenuGroup> </li></ul><ul><li><rich:panelMenu> </li></ul><ul><li><rich:panelMenuItem> </li></ul>
  23. 23. Rich input <ul><li>Practica 20 minutos </li></ul><ul><li>crear los controles desde java </li></ul><ul><li><rich:calendar> </li></ul><ul><li><rich:comboBox> </li></ul><ul><li><rich:editor> </li></ul><ul><li><rich:fileUpload> </li></ul><ul><li><rich:inputNumberSlider> </li></ul><ul><li><rich:inputNumberSpinner> </li></ul><ul><li><rich:suggestionbox> </li></ul><ul><li><rich:progressBar> </li></ul>Rich selects <ul><li><rich:listShuttle> </li></ul><ul><li><rich:orderingList> </li></ul><ul><li><rich:pickList> </li></ul>http://livedemo.exadel.com/richfaces-demo/richfaces/actionparam.jsf
  24. 24. Caso : Mantenimiento de clientes (60 minutos)
  25. 25. ¡ Gracias !

×