Como en muchos sistemas el mostrar avisos a los usuarios es algo que se va volviendo cada vez mas necesario ( cambios, dudas generales o que el sistema no va a funcionar tal día) mostrare una manera sencilla de crear un componente que muestre avisos, para esto usare jQuery para manejar la parte de Ajax e interfaz y Java para la conexión con la BD y lógica.
Primero necesitamos las librería de
jQuery y también la libreria
Classy Query , esta última para crear clases en Java Script usando jQuery, y las ponemos en nuestra carpeta respectiva donde tengamos nuestros archivos js, como recomendacion estan deben estar en una subcarpeta llamada lib, ya que los librerias de apoyo.
Una vez que tenemos las librerías seguimos los siguientes pasos:
1. Llamamos las librerías en la página:
<SCRIPT language="JavaScript" src="<%= request.getContextPath() %>/js/lib/jquery.js">
<SCRIPT language="JavaScript" src="<%= request.getContextPath() %>/js/lib/jquery-classy">
2. En el jsp donde queramos el componente creamos un div y le asignamos un ID, en esta caso CAviso, y le ponemos la clase con el estilo que queramos :
<div id="CompAviso" class="avisos"> </div>
3. Creamos un archivo llamado jComponentes.js, este servirá de comunicación entre la interfaz y el servidor, y le ponemos lo siguiente:
var jComponentes = jQuery.Class.create({
init: function(contextPath) {
this.contextPath = contextPath;
this.action = '/servlet/ComponentesAction';
this.waitMsg = '<img src="/myApp/images/load.gif" /> Espere un momento..';
},
mostrarAvisos: function(nombreContenedor) {
$('#'+nombreContenedor).html(this.waitMsg);
$('#'+nombreContenedor).load(
this.contextPath + this.action,
{
component: 'mostrarAvisos'
}
)
}
});
4. Ponemos nuestra clase en el encabezado:
<SCRIPT language="JavaScript" src="<%= request.getContextPath() %>/js/jPortada.js">
5. Ahora falta crear la vista del componente, para esto creamos un jsp llamado avisos.jsp y lo ponemos en la carpeta de componentes, para este ejemplo use la libreria JSTL por lo que es necesario incorporla:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
y dentro del body:
<div class="tituloBox"> Avisos myApp</div>
<c:forEach items="${listAvisos}" var="item">
<b> ${item.fecha} : </b>${item.detalle}<br/>
</c:forEach>
6. Ya para terminar solo lo mandamos a llamar, para esto con el siguiente código es suficiente:
<script type="text/javascript">
var componentes = new jComponentes('<%= request.getContextPath() %>');
componentes.mostrarAvisos('CompAviso');
</script>
En el siguiente post mostrare la parte que corresponde a Java y BD.
