Intellisense de jQuery en VS 2008

El mes pasado vimos cómo Microsoft está ampliando el soporte para jQuery. En las últimas semanas he estado trabajando con el equipo de jQuery para añadir el soporte del intellisense de jQuery en VS 2008 y en Visual Web Developer 2008 Express (que es gratuito). Y ya está disponible para descarga.

Pasos para habilitar el intellisense de jQuery en VS 2008

Estos son los pasos que tenemos que seguir:

Paso 1: Instalar VS 2008 SP1

VS 2008 SP1 añade un intellisense para JavaScript mucho más rico, y añade  el relleno de código par aun gran rango de librerías JavaScript.

Podéis descargar VS 2008 SP1 y Visual Web Developer 2008 Express SP1 aquí.

Paso 2: Instalar el parche de VS 2008 KB958502 para soportar “-vsdoc.js”

Hace dos semanas publicamos un parche que podemos aplicar en VS 2008 SP1 y en VWD 2008 Express SP1 que hace que Visual Studio compruebe la presencia de un archivo opcional “-vsdoc.js” cuando se referencia una librería JavaScript, y si está presente lo usa para lanzar el motor de intellisense de javaScript.

Estos archivos pueden incluir comentarios XML que contengan documentación de ayud para los métodos de JavaScrip, así como intellisense adicional para firmas JavaScript dinámicas que no pueden ser inferidas automáticamente. Podéis aprender más sobre este parche aquí. Y podéis descargarlo desde aquí.

Paso 3:  Descargar el archivo jQuery-vsdoc.js

Hemos trabajado con el equipo de jQuery para unir el archivo jQuery-vsdoc.js que contiene todos los comentarios y el soporte para el intellisense necesarios para los métodos de jQuery. Podéis descargar tanto jQuery como el archivo jQuery-vsdoc desde la página oficial de descargas del sitio jQuery .com:

Guardad el archivo jquery-vsdoc.js al lado del archivo jquery.js en vuestro proyecto (y aseguraros que lso prefijos se corresponden con el nombre del archivo de jquery):

Podéis referenciar al archivo estándar de jQuery con un elemento html <script/> de la siguiente manera:

O podéis añadir una referencia usando el control <asp:scriptmanager/> o añadiendo un comentario ///<reference/> al principio de un archivo .js

Cuando hagáis esto VS buscará un archivo –vsdoc.js en el mismo directorio donde esté el archivo de script que estáis referenciando, y si lo encuentra lo usara para proporcionar el intellisense. La anotación

Por ejemplo, podéis usar jQuery para hacer una petición JSON, y obtener intellisense para el método (seguido del símbolo $):

Así como intellisense para los parámetros del método $.getJSON():

El intellisense seguirá funcionando si anidamos una función callback en la llamada al método. Pro ejemplo, podréis querer iterar sobre cada objeto JSON que devuelve el servidor:

Y por cada uno de los ítems que podamos ejecutar hacer otra llamada callback:

Podemos usar la función de cada callback para añadir dinámicamente una imagen a un alista (el atributo src de la imagen apuntará a la url que devuelva la imagen JSON):

Y en cada imagen creada dinámicamente podemos añadir un manegador de ventos para que cuando se haga click desaparazca con una animación:

Fijáos que el intellisense de jQuery funciona limpiamente en cada nivel de nuestro código.

Trucos con el Intellisense de Java Script.

Jeff King del equipo de herramientas web publicó un post esta semana en el que respondia a varias preguntas comunes sobre cómo funciona el intellisense de JavaScript en VS 2008. Os recomiendo que lo leáis.

Un truco del que habla y que os mostraré aquí es una técnica que podemos usar cuando queramos el intellisense funciones dentro de las clases parciales de los user-controls (los archivos .ascx). Normalemente no querremos añadir librerías JavaScript <script src=””/> en estos archivos, sino ponerlos todos en la master page o en en la página en la que está el user control. El problema cuando hacemos esto es que VS por defecto no tiene manera de saber que ese script es accesible desde el user control- así que no da intellisense.

Una forma de habilitarlo es añadiendo el elemento <script src=””/> al user control, pero envolviéndolo con un bloque de servidor <% if %> que siempre devuelva falso:

En tiempo de ejecución ASP.NET  nunca renderizará este tag (ya que está en un bloque que siempre es falso). Sin embargo, VS evaluará el tag <script/> y dará el intellisense para nuestro user control. Una técnica muy útil en escenarios con users controls. Jeff tiene más detalles sobre esto en su post de FAQ así como en su post original sobre el intellisense de jQuery. Rick Strahl también tiene un post sobre cómo usar el intellisense con jQuery aquí.

Más información.

Para aprender más sobre jQuery, os recomiendo que veais la chalra de Stephen Walther ASP.NET y jquery del PDC. Aquí podéis descargar las demos y las slides.

Rick Strahl también tiene un artículo de introducción a jquery que habla sobre el uso de jQuery con ASP.NET. Karl Seguin tiene dos post sobre jQuery aquí y aquí que dan un vistazo sobre algunos de los conceptos básicos sobre el uso de jQuery.

También os recomiendo encarecidamente el libro jQuery in Action.

Espero que sirva.

Scott.

Traducido por: Juan María Laó Ramos.

Artículo original.