example - p:ajax

Barra de estado JSF/información del estado de la conexión

Question

Me gustaría implementar un tipo de información para mis usuarios sobre el estado del progreso. He encontrado varios componentes como:

Estado de Richfaces o estado de conexión de IceFaces

Por lo tanto, me gustaría agregar algo así a mi página, especialmente para las solicitudes de Ajax. ¿Cuál es la forma más fácil de implementarlo? No me gustaría utilizar uno de esos componentes, sino programar uno propio, pero no me puedo imaginar cómo y cuánto esfuerzo se necesita :-)

Estoy agradecido por las ideas ...

Answer 1

La implementación JSF estándar no proporciona un componente listo para usar para esto. Sin embargo, la especificación JSF 2.0 describe lo siguiente en el capítulo 13.3.5.2:

13.3.5.2 Eventos de supervisión para todas las solicitudes de Ajax

La API de JavaScript proporciona la función jsf.ajax.addOnEvent que se puede usar para registrar una función de JavaScript que se notificará cuando ocurra cualquier evento de solicitud / respuesta de Ajax. Consulte la Sección 14.4 "Registro de funciones de devolución de llamada" para más detalles. La función jsf.ajax.addOnEvent acepta un argumento de función de JavaScript que se notificará cuando se produzcan eventos durante cualquier ciclo de evento de solicitud / respuesta de Ajax. La implementación debe garantizar que la función de JavaScript que se registra debe ser llamada de acuerdo con los eventos descritos en la Sección TABLA 14-3 "Eventos".

Aquí puede encontrar un blog de uno de los desarrolladores de Mojarra que contiene ejemplos básicos. Aquí hay un extracto de relevancia:

<h3> Status:</h3>
<textarea id="statusArea" cols="40" rows="10" readonly="readonly" />

Un área de texto simple, ni siquiera enganchado en el modelo de datos del servidor back-end.

Luego, en nuestro javascript (para la demostración, en un archivo cargado por separado, aunque podría estar tan fácilmente en la página) tenemos:

var statusUpdate = function statusUpdate(data) {
    var statusArea = document.getElementById("statusArea");
    var text = statusArea.value;
    text = text + "Name: "+data.source.id;
    if (data.type === "event") {
        text = text +" Event: "+data.name+"/n";
    } else {  // otherwise, it''s an error
        text = text + " Error: "+data.name+"/n";
    }
    statusArea.value = text;
};

// Setup the statusUpdate function to hear all events on the page
jsf.ajax.addOnEvent(statusUpdate);
jsf.ajax.addOnError(statusUpdate);