Scribd Logo
Upload

Welcome to Scribd!

  • JSF Asíncrono A Través de Ajax

    Uploaded by

    Lobo Del Valle Carlos
    264 views5 pages
    JAVA

    Original Title

    JSF Asíncrono a Través de Ajax

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    JAVA

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    264 views5 pages

    JSF Asíncrono A Través de Ajax

    Uploaded by

    Lobo Del Valle Carlos
    JAVA

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    JSF Asncrono a travs de Ajax

    Las tcnicas Ajax nos permiten complementar nuestras aplicaciones Java, dotndolas de
    procesado asncrono en el lado cliente. Las tareas se realizan de forma paralela, sin interrumpir
    o bloquear la ejecucin del navegador, lo que mejora la experiencia del usuario en nuestra
    aplicacin.
    Siendo la forma ms habitual de realizar nuestras peticiones Rest y cargar datos externos
    estructurados de tipo Json, o bien, ficheros xml.

    Gestin de Eventos en Cliente.


    A partir de la versin de 2.X de primefaces encontramos un amplio soporte AJAX y podemos
    invocar JavaScript desde algunos de nuestros componentes JSF. Si utilizamos JSF 2.X,
    podemos utilizar la etiqueta <f:ajax> dentro de nuestros componentes, para registrar nuestros
    eventos.
    Previamente, en nuestro facelet debemos registrar el componente <h:head>, en lugar de
    declarar directamente la etiqueta <head>. De otro modo, los scripts JSF no podran registrarse
    y no estaran disponibles para la aplicacin.
    Algunos atributos de la etiqueta <f:ajax> a destacar:

    event. Nos permite identificar el nombre del evento ajax que esperamos para el
    componente. Previamente, en la definicin del componente, comprobaremos que lo soporte.
    execute. Es una coleccin de identificadores de elementos (separados por espacios)
    que se tendrn en cuenta en la peticin (ajax request). Estar compuesto por los id de los
    componentes, o bien, por una referencia @this, @form, @all, @none. Si no se especifica este
    atributo, por defecto tomar la referencia @this.
    render. Nuestra coleccin de id's de componentes que se renderizarn. Tambin
    deben estar separados por espacios y podemos utilizar referencias de componentes (@this,
    @all,....). Si no aparece esta etiqueta asume como valor @none.
    listener. Al que hacemos referencia mediante EL, y representa el mtodo que se
    ejecutar en el lado servidor.
    Los componentes primefaces y la etiqueta <p:ajax>, aaden mas atributos:
    update. Id's de componentes a renderizar.
    callbacks javascript. Disponemos de varias etiquetas que lanzan javascript callbacks
    segn el estado de nuestra peticin ajax: onstart, oncomplete, onsuccess, onerror, o
    bien, por eventos registrados en el

    navegador:onclick, ondblclick, onblur, onchange, onfocus, onkeydown, onkeypress,


    onkeyup, onmousedown,onmousemove, onmouseout, y onmouseover.
    immediate . Nos permite indicar cuando se procesarn las peticiones. Cuando es true,
    las acciones son procesadas inmediatamente cuando asignamos un valor, es decir, en la fase
    "apply_request_values". Cuando es "false" el procesamiento se realiza en la fase
    "invoke_application_phase". Es til, cuando deseamos procesar de forma parcial nuestros
    formularios.
    process. Coleccin de identificadores de componentes (separadas por espacios) que se
    procesarn en las peticiones parciales. Tambin podemos utilizar referencias para identificar
    nuestros elementos: @this, @form, @all, @none, y @parent.
    widgetvar. Nos permite aadir un nombre a nuestro componente en el lado cliente,
    que nos permite referenciar nuestro componente una vez rendereizado desde nuestros scripts
    javascript en el lado cliente.
    Con unos ejemplos sencillos podemos hacernos una idea de las posibilidades que tenemos:
    Aadiendo Ajax a nuestros formularios
    Un ejemplo sencillo de ajax utilizando nuestra etiqueta <f:ajax>:

    1. <h:form>
    2.
    <h:inputText id="name" value="#{myBean.field}" />
    3.
    <h:commandButton value="Submit">
    4.
    <f:ajax event="click" execute="@this" render="display"/>
    5.
    </h:commandButton>
    6.
    7.
    <h:outputText value="#{myBean.field}" id="display" />
    8. </h:form>

    Procesamiento parcial
    Modificamos nuestro ejemplo, para realizar un procesamiento parcial de nuestro formulario.
    Recordemos que por defecto la ejecucin apunta al propio componente (@this), siendo
    necesario especificar los componentes a procesar en la peticin. Si no lo hiciramos as, no se
    remitir
    ningn
    valor
    en
    la
    peticin
    ajax.

    1.
    2.
    3.
    4.
    5.
    6.
    7.

    <h:form>
    <h:inputText id="name" value="#{myBean.field}" />
    <h:commandButton value="Submit">
    <f:ajax execute="@form" render="display">
    </h:commandButton>
    <h:outputText value="#{myBean.field}" id="display" />
    </h:form>

    1.
    2.
    3.
    4.
    5.

    <h:form>
    <p:inputText id="name" value="#{myBean.field}" />
    <p:commandButton value="Submit" process="name" update="display"/>
    <p:outputText value="#{myBean.field}" id="display" />
    </h:form>

    Renderizando

    componentes

    fuera

    de

    nuestro

    form

    Hasta ahora, hemos referenciado los identificadores (id) de nuestros componentes


    directamente por su nombre. Lo obvio es que estos nombres no pueden estar duplicados.
    Adems, debemos considerar que estn enmarcados dentro del primer componente padre que
    sea
    contenedor
    (namingContainer).
    Por ejemplo, un componente UIForm (implementa la clase namingContainer) y, es responsable
    de englobar y dar un espacio de nombres a los componentes que contiene.
    En JSF podemos utilizar el carcter "dos puntos" para desmarcarse del namingContainer
    dnde se encuentra nuestro componente, es decir, nos permite acceder directamente a otro
    espacio
    de
    nombres
    de
    otro
    namingContainer.
    Para acceder al viewRoot directamente empezaremos nuestra referencia directamente con el
    carcter "dos puntos", al que aadiremos las referencias a nuestros contenedores. En un
    ejemplo, lo vemos claramente:

    1. <h:form id="form">
    2. <h:outputText id="text" value="#{myBean.myField}"/>
    3. </h:form>
    Para referencia nuestro componente "text" fuera del form, utilizaramos la siguiente referencia:

    1.

    <f:ajax render="form:text"/>

    o, si estuviera en el raz de componentes:

    1.

    <f:ajax render=":form:text"/>

    Callbacks

    javascript

    Podemos invocar nuestros propios scripts javascript. Adems referenciar a nuestros


    componentes
    jsf,
    mediante
    el
    atributo
    widgetvar.
    Por ejemplo, para mostrar una barra de estado de la peticin ajax que estamos realizando:

    1. <p:ajaxStatus onstart="status.show()" oncomplete="status.hide()"/>


    2.
    3. <p:dialog widgetVar="status">
    4.
    Please Wait

    5. </p:dialog>

    O bien, lanzados por un evento en el lado cliente:

    1. <p:commandButton value="Button" onclick="var text='hi'; alert(text);"/>


    Anteriormente, en este artculo ya vimos cmo insertar nuestros script en pginas jsf, lo que
    nos
    permite
    llamar
    a
    nuestras
    propias
    funciones
    javascript.
    Log

    de

    peticiones

    Ajax

    Para ayudarnos a trazar nuestras peticiones ajax, primefaces nos proporciona el componente
    <p:log>
    que
    simplemente
    aadiremos
    a
    nuestro
    formulario
    <p:log/>
    Scope

    de

    nuestra

    aplicacin

    Para utilizar ajax, es conveniente utilizar un scope de tipo @View, de modo que, todos los
    elementos con los que interactuamos estn disponibles en la vista. De este modo, podremos
    navegar con nuestros action, manteniendo todos los elementos disponibles en la vista.
    Los facelets utilizan
    javax.faces.ViewState:

    1.
    2.

    un

    campo

    oculto

    para

    mantener

    las

    vistas

    denominado

    <input type="hidden" name="javax.faces.ViewState"


    id="javax.faces.ViewState" ....

    Las libreras JavaScript de jsf (que se incluirn en el head) se encargan de gestionar este
    campo, que puede llegar a ser bastante pesado. Para reducir el tamao de nuestras peticiones,
    podemos almacenarlo en el lado servidor y, mandar al cliente simplemente una referencia al
    viewState. Simplemente configuramos nuestro web.xml del siguiente modo:

    1. <context-param>
    2.
    <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
    3.
    <param-value>server</param-value>
    4. </context-param>
    Dnde no sea posible utilizar view scope, bien por la propia aplicacin, o bien, por nuestro
    servidor de despliegue, podemos utilizar un scope de tipo Request. En este caso, no ser posible
    actualizar nuestros componentes directamente desde los listeners de nuestro Bean.
    Conclusiones
    Esto es slo lo bsico para comenzar a integrar ajax en nuestras aplicaciones JSF. Ms adelante

    veremos como invocar desde ajax nuestros backing beans y que realicen actualizaciones
    parciales a travs de javascript. Sin olvidar, respuestas ms complejas desde el servidor
    apoyandonos en parmetros callback de javascript.

    You might also like