JQuery en Gadget de Windows 7 (JQuery + JSon + Gadget + WS)
Hola que tal? ya habíamos hablado sobre JQuery + ASP.NET , y un día antes de la charla que tuve que dar sobre Gadget y Win7 , pensé “y que tal JQuery?”, y claro que si, se puede utilizar JQuery en Gadget, en este Post vamos a revisar como conectarnos a un WebService desde el Gadget mediante JQuery, el esquema sería el siguiente:
Para este ejemplo vamos a crear un WS el cual va a retornar un número aleatorio entre 0 y 100, de manera de servir como un indicador, en el escritorio, de algún proceso con acceso a recursos de servidor, además el WS va a tener un retardo de tiempo, esto con la intención de programar un “Cargando” en nuestro Gadget.
Para revisar como conectarse a un WS desde JQuery, te invito a revisar mi Post:
http://geeks.ms/blogs/gperez/archive/2009/05/13/invocando-asp-net-webservices-desde-jquery-con-notaci-243-n-json.aspx
El Código del Servicio Web
<WebMethod(Description:="Numero Aleatorio entre 0 y 100 ")> _ Public Function ObtNumero() As Integer
System.Threading.Thread.Sleep(3000)
Dim i As New System.Random
Return i.Next(0, 100)
End Function
Diseño del Gadget
El Gadget tiene un diseño Básico, en donde mostramos en un <span> el porcentaje (devuelto por el WebService) y un <span> en donde muestra el estado (cargando), junto a un gif animado que nos presenta un ajax loading.
El primer paso es configurar el Manifiesto XML, si quieres saber más sobre los manifiestos de Gadget puedes visitar:
http://msdn.microsoft.com/es-es/library/aa965879(VS.85).aspx
La idea del manifiesto setear los parámetros del Gadget, como nombre, descripción, imágenes, namespace, página htm de interfaz de usuario del gadget entre otras cosas.
Ahora veamos el código del Gadget
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function() {
$("#estado").show();
cargaWS();
});
function cargaWS() {
$("#estado").show();
$.ajax({
type: "POST",
url: http://localhost:3568/Service1.asmx/ObtNumero",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
AjaxOK(msg);
},
error: AjaxError
});
}
function AjaxOK(result) {
$("#texto").show();
$("#estado").hide();
texto.innerHTML = "<b>" + result.d + "%</b>";
setTimeout(cargaWS, 5000);
}
function AjaxError(result) {
$("#texto").show();
$("#estado").hide();
texto.innerHTML = " - Error – ";
setTimeout(appendDateToBody, 30000);
}
</script>
Utilizamos JQuery para la conexión al WS y para mostrar/ocultar los span según corresponda. Utilizamos setTimeout para realizar la llamada al WS cada cierto tiempo (5 segundos si esta todo bien, 30 segundos si hay un error). Puedes ver un muy buen artículo sobre setInterval y setTimeout aca:
http://weblogs.asp.net/bleroy/archive/2009/05/14/setinterval-is-moderately-evil.aspx
Vista del Diseño del Gadget (desarrollado con Visual Web Developer Express)
Como decíamos, es simplemente una página web, y vamos a dejar dentro de una tabla los span para mostrar la información al usuario.
Y Listo!, ya tenemos nuestro Humilde Gadget conectándose a un WS y con un indicador de carga!
Si quieres el código e imágenes del Gadget lo puedes descargar acá:
Puedes buscar más artículos relacionados en este blog sobre gadget pinchando:
http://geeks.ms/blogs/gperez/search.aspx?q=gadget
Espero que te sirva!
Saludos,
Gonzalo