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:

image

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.

image 

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.

image

 

 

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)

image

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!

image

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

ScreenCast de Desarrollo de Gadgets en Windows 7

image

Hola!
Acabo de ver en
http://www.microsoft.com/latam/windows/7×7/
Que ya está publicado mi ScreenCast, se me enredó un poco el habla, jejejej y como anécdota, como mi casa estaba en remodelación, estaba sentando en el suelo  ya que esa mesa no tiene mas de 45 cm de alto, con una cámara al frente me ponía más nervioso, entonces me equivoqué varias veces (trabado de habla), una vez que lo logre (yo muy feliz), mi esposa se dió cuenta que la mesa estaba llena de polvo (de la remodelación), por lo que tuve que hacerlo nuevamente…(fail!) jjejeje.

Échale un vistazo a 7×7 ya que se van a estar presentando 7 videos por 7 semanas, lo que dan 49 videos en donde vas a conocer las nuevas características de Windows 7.

Si quieres ver mi ScreenCast (que lo hice con mucho empeño), visita :
http://www.mslatam.com/latam/mediacenter/default.aspx?v=13fbd60a-3b1f-4bf8-a4ba-2a24f5ecc8c9

Nos vemos!!!!
(y recuerda votar por mi blog en : http://www.blogit.ms/)

image

[Tips] RollOver Sencillo con JQuery.

Hola que tal, hace unos días buscando buscando por la red, encontré un código y tras unas modificaciones me sirvió bastante para hacer imágenes de Sustitución, (Sorry por la palabra en ingles, a algunos les molesta).

La idea es tener una función que haga la precarga de las imágenes y que cuando se pase el mouse por encima de ella, se reemplace, esto es lo lógico, pero veamos la forma de hacerlo de manera más eficiente (por lo menos eso creo yo)

Código:

<script src="jquery-1.3.2.js" type="text/javascript"></script>  <script language="jscript" type="text/jscript">

 

      $(document).ready(function() {
          $(".roll").each(function() {
             rollsrc = $(this).attr("src");
              rollON = rollsrc.replace(/.jpg$/ig, "_over.jpg");
              $("<img>").attr("src", rollON);
          });

 

    $(".roll").mouseover(function() {
         imgsrc = $(this).attr("src");
         matches = imgsrc.match(/_over/);
         if (!matches) {
           imgsrcON = imgsrc.replace(/.jpg$/ig, "_over.jpg"); 
           $(this).attr("src", imgsrcON);
              }
          });
          $(".roll").mouseout(function() {
              $(this).attr("src", imgsrc);

          });
      });
  </script> 

Lo primero que hacemos es realizar la precarga de las imágenes que están marcadas con el atributo Class=”roll” estoy es muy importante para el ejemplo , debido a que, al hacer mouseover sobre la imagen marcada con nav y contenga un link(a) lo que vamos a hacer es reemplazarla por una imagen que tenga el el mismo nombre, pero termine en _over.jpg

image

Aunque no se note mucho la imagen de la derecha es más clara, (para el efecto rollover), recuerda el tag de la imagen (class):

<a href="SituacionesApendizaje.aspx"><img class="roll" src="images/menu4_docente.jpg"

Ahora puedes tener seteado en tu carpeta imágenes  las img normales y las over, y setear tu class =roll y automágicamente vas a tener tu Rollover sin mucho esfuerzo. 🙂

Espero que te sea de ayuda, ahhh y otra cosa, te pido un favor grande, en varios post vas a ver este logo:

Get Microsoft Silverlight

 

Me puedes ayudar en este concurso?, mil gracias!

[Tips] Report.NET ,Libreria para para generar PDF en ASP.NET

 

image Alguien me podrá decir que es un post viejo, que no sirve, pero la experiencia de bloggero me dice que los tips más sencillos, son los más vistos, así que me decidí a postear este tip.

Mucha gente busca una librería que le permita generar pdfs programáticamente y de manera fácil (sin utilizar Crystal Reports), bueno, es ahí cuando una vez me tope con Report.NET

Paso 1
Descárgalo!
http://sourceforge.net/project/showfiles.php?group_id=58374&package_id=83913&release_id=463074

Paso 2

Agrega la Referencia

image

Paso 3 A Mover los dedos programado( casi nada!)

El Diseño(aspx) es algo parecido a esto:

image

En seguida, en el botón agregamos el código al botón:
(acá está todo el código)

Imports Root.Reports
Partial Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        Dim report As New Report(New PdfFormatter())
        Dim fd As New FontDef(report, “Helvetica”)
        Dim fp As FontProp = New FontPropMM(fd, 25,    Drawing.Color.Red) 
        Dim page As New Page(report)
        page.AddCB_MM(80, New RepString(fp, tx_texto.Text))
        RT.ViewPDF(report, “MiInforme.pdf”)
    End Sub
End Class

Paso 5
A Probarlo!!!

image
Súper Sencillo!

Ejemplos en la página del Autor:
http://report.sourceforge.net/

Están en C# si los quieres en VB.NET te recomiendo utilizar el convertidos de Código de telerik:

Convertidor de Código Fuente
http://converter.telerik.com/

Espero que te sea de utilidad!.
Saludos,
Gonzalo

[Off-Topic] Cthulhu con boina y bastón, en mi sala!

100_1379

Soy fanático de HP Lovecraft, y hace años encargué que hicieran la figura de Cthulhu en madera, de ciprés de más de 100 años de antigüedad. Hubiese sido genial que el artesano hubiese muerto grotescamente sobre la estatua, le abría dado un toque preciso, bueno eso no ocurrió, y de hace unos años Cthulhu se ha portado bien, no destruye nada y adorna el comedor de la casa.

“Que no está muerto lo que yace eternamente,
y con el paso de los evos, aun la muerte puede morir”.
 

Gracias HP Lovecraft por tantas bizarras historias que tanto inquietan!!!

Si quieres comenzar a leer sus historias te recomiendo que vayas a:

http://www.hplovecraft.com/

[lovecraft.jpg]

Bueno, no todo debe ser 10101010 verdad?
Saludos y gracias por leer este post mega super off-topic!!!

Saludos,

Invitación Oficial: Install Fest Windows 7!!

 

Links de Inscripciones para las Instalaciones:

Opción 1 de Instalación:de 10 a 11hrs.
http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032417992&Culture=es-CL

Opción 2 de Instalación:de 11 a 12 hrs
http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032417993&Culture=es-CL

Opción 3 de Instalación: de 12 a 13 hrs.
http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032417994&Culture=es-CL

Opción 4 de Instalación:de 13 a 14 hrs
http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032417995&Culture=es-CL

Opción 5 de Instalación: de 15 a 16 hrs
http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032417996&Culture=es-CL

Opción 6 de Instalación:16 a 17 hrs
http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032417997&Culture=es-CL

Acelerar Visual Studio 2008 , Consejos…

O como tener muchas visitas en el blog en poco tiempo, pero recopilando info (tratando de acelerar un poco más Visual Studio para no entrar en un día de furia) encontré estos consejos:

Primero, instala del HotFix de VS2008 (enfocado a acelerar el diseñador web)https://connect.microsoft.com/VisualStudio/Downloads/DownloadDetails.aspx?DownloadID=10826

Luego mira los consejos de este Post (vale la pena)
http://labs.episerver.com/en/Blogs/Steve-Celius/Dates/112266/6/Speed-up-Visual-Studio/

Si todo esto no hace ni pio en tu VS2008, trata cambiando tu disco duro a uno más rapido (si estás en un portátil) o  puedes ver este post, en donde el autor cuenta sus historias con los discos ssd, tarjetas de memoria y algunas otras ideas.
http://www.clikear.com/Acelera_Visual_Studio_18845.aspx

Para VS2005:
http://tehdevs.net/2007/11/19/speed-up-visual-studio-2005/

Actualizado:

1)Pueden tambien utilizar un pendrive que tenga un tiempo de acceso relativamente corto (como los Crossair) para utilizar ReadyBoost, a mi me ha dado buen resultado.
2) Desactivar Aero, no lo vas a utilizar si estas desarrollando o no?

Si todo esto no sirve, puedes mirarte al espejo y lucir de esta manera:


Si tienen más consejos compartámoslos , por que esta foto me la saqué hoy…

😉
Saludos,
Gonzalo

 

Get Microsoft Silverlight

Install Fest Windows 7, Viernes 19 de Junio en Concepción!!

Así es! y por que Santiago no es Chile, tenemos este evento en Concepción, la agenda del evento:
Viernes 19 de Junio 2009

Charlas:
9:00 a 10:00       “Bienvenida a Install Fest y Demo Windows 7”, Alejandro Pacheco y Violeta Arévalo, Microsoft Chile
10:00 a 11:00      “Modo XP de Windows 7”, Pablo Campos
11:00 a 12:00     “Desarrollando videojuegos con Microsoft XNA” Matías Salgado, Pablo   Salgado y Juan Muñoz
Break (Coffee + sorteos )
14:00 a 15:00      “Desarrollo de Gadget en Windows 7”, Gonzalo Pérez
15:00 a 16:00      “Windows 7 + IE8, una experiencia de usuario más segura.”, Maximiliano Marín Bustos
16:00 a 16:15      Cierre Evento y Sorteo Final

Install Fest de Windows 7

10:00 a 11:00      Install Fest Windows 7 RC Horario 1
11:00 a 12:00      Install Fest Windows 7 RC Horario 2
12:00 a 13:00      Install Fest Windows 7 RC Horario 3
13:00 a 14:00      Install Fest Windows 7 RC Horario 4
14:00 a 15:00      Install Fest Windows 7 RC Horario 5
15:00 a 16:00      Install Fest Windows 7 RC Horario 6

Lugar : Universidad Andrés Bello, Sede Gran Concepción- Autopista Concepción – Talcahuano 7100

IMPORTANTE

Si vas a traer tu equipo, asegúrate de respaldar toda la información que te es relevante, ya que se van a realizar instalaciones limpias, es decir, se va a formatear el equipo, si tenias Windows Vista , trata de traer los controladores (drivers) de tu equipo para acelerar el proceso de puesta a punto de tu pc, puedes traer Notebooks, Netbooks, PC de Escritorio, etc.

Si traes tu computadora de escritorio, nosotros te facilitamos monitores, pero los demás periféricos, como teclados, mouse, webcams, incluyendo cables de poder, por favor tráelos .

Espero que puedan asistir a las charlas o al install fest! , nos vemos allá
Saludos,
Gonzalo