Intellisense en JavaScript con VS 2008

Una de las características que más le gusta a los desarrolladores web de VS 2009 es el soporte intellisense para JavaScript. También está disponible en Visual Web Developer 2008 express, y hace que el uso de JavaScript y la construcción de aplicaciones AJAX sea realmente fácil.

Aquí tenéis una pequeña lista de las nuevas características del intellisense de JavaScript.

Inferencia de tipos JavaScript

Una de las cosas de las que os daréis cuenta nada más que empecéis a escribir código en un bloque script es el soporte que VS2008 tiene ahora para las palabras clave de JavaScript:

JavaScript es un lenguaje dinámico, y no soporta declaraciones de tipos explícitas, esto ha hecho que intentar implementar un buen intellisense sea algo tan difícil en el pasado.

Visual Studio 2008 añade soporte para la inferencia de tipos, es decir, que evalua y computa cómo es usado un bloque script e infiere dinámicamente el uso de la variable y el tipo de información del código para dar soporte intellisense.

Por ejemplo, Visual Studio inferirá que un elemento html está siendo obtenido por el método document.getElementById(), y porporcionará intellisense para un elemento apropiado html para la variable resultado:

Si más tarde asignamos un valor numérico para la variable “myElement” (que JavaScript transformará en un número), fijáos cómo VS lo detecta y ahora provee intellisense para tipos enteros de aquí en adelante:

Intellisense para librerías JavaScript externas.

VS2008 no sólo da intellisense para el código in-line, sino para archivos JavaScript referenciados externamente. Por ejemplo, supongamos que tenemos la función “getMessage” definida en el archivo “Util.js”:

Podemos añadir una referencia estándar JavaScript en nuestra página, y tendremos automáticamente intellisense a medida que escribimos:

Fijáos cómo VS da intellisense para los parámetros de la funcion sin tener que hacer nada especial para que funcione:

Añadiendo Intellisense a JavaScript

Como vemos arriba, VS nos da intellisense automáticamente con información de ayuda para el nombre del método y los parámetros para JavaScript estándar.

Podemos hacer este intellisense más rico añadiendo comentarios a vuestro código JavaScript que el motor de intellisense puede usar cuando consumimos un método o librería. Por ejemplo, podemos añadir los siguientes comentarios a la función getMessage en nuestro archivo util.js:

Y cuando escribamos código en “Default.aspx” Visual Studio mostrará automáticamente esa información para el método:

 

También para los detalles de los parámetros:

Hemos hecho una herramienta que os permitirá comentar el código para poder usarlo más tarde (y comprimir el espacio y el tamaño) vuestro código JavaScript una vez que hayáis terminado vuestra aplicación. Para más detalles sobre el formato de comentarios que soportan tanto VS y como ASP.NET AJAX, leed el post de Bertrand Le Roy aquí.

Intellisense con archivos JavaScript externos.

Obviamente tendremos soporte completo para archivos JavaScript externos, igual que hacéis con los bloques de código en nuestros archivos .htm y .aspx.

Una de las características más interesantes sobre los archivos JavaScript externos es que pueden llamar y usar funciones JavaScript y variables declaradas en los archivos JavaScript que la página cargue.

Por ejemplo, si declaramos dos archivos JavaScript externos que una página referencie de esta forma:

 

El código JavaScript del archivo “MyLibrary.js” será capaz de llamar a los métodos declarados en el archivo Util.js.

Podemos decirle a Visual Studio que nos de intellisense para la librería “Util.js” en el archivo “MyLibrary.js” aádiendo un comentario ///<reference> al principio de la librería externa. Una vez que hagamos esto, tendremos intellisense para estos métodos y variables:

 

Esto hace que reálmente útil dividir las rutinas JavaScript en varios archivos JavaScript.

Para referenciar las librerías de ASP.NET AJAX, podemos añadir un <refrence> que apunte a nuestra copia del archivo .js (si estamos incluyéndolo manualmente en nuestro proyecto), o añadirlo con un nombre si la librería está siendo incluída dinámicamente con el control <asp:scriptmanager> en la página host:

 

Una vez hecho esto, tendremos intellisense para todas las librerías JavaScript y tipos de ASP.NET AJAX.

Llamando a servicios web con ASP.NET AJAXASP.NET AJAX hace fácil exponer métodos en el servidor que pueden ser llamados y accedidos desde cliente con JavaScript. Por ejemplo, supongamos que tenemos un webmethod simple en un .asmx:

Podemos hacer que ASP.NET AJAX cree automáticamente un proxy que usará el protocolo JSON para llamarlo y usarlo desde el cliente añadiendo una referencia a él con un control <asp:scriptmanager> de la siguiente forma:

Lo chulo de VS2008 es que cuando declaramos una referencia a un servicio web usando el control <asp:scriptmanager> como arriba, añadirá soporte intellisense para JavaScript automáticamente:

Obviamente esto hace mucho más facil identificar métodos en el servidor y llamarlos asíncronamente. Podemos usar estas dos formas de intercambiar datos. También podemos usar la técnica de modelos de AJAX UI de la que hablé aquí para obtener HTML UI del servidor usando estos callbacks y actualizar dinámicamente la página con ellos.

Creando comportamientos, controles y librerías ASP.NET AJAX reusables.ASP.NET AJAX nos da soporte para un sistema de tipos para JavaScript para definir clases, interfaces, y otros conceptos de la programación orientada a objetos. Esto hace mucho más facil definir librerías reusables JavaScript que encapsulen funcionalidad y que la reusen de forma segura entre páginas y aplicaciones (sin tener que preocuparnos sobre conflicots JavaScript con otras librerias).VS2008 tiene un nuevo item template en “Add-Item” que hace realmente fácel crear comportamientos, controles y librerías ASP.NET AJAX:

 

ASP.NET AJAX hace uso del patrón “prototipo” en JavaScript para permitirnos definir clases e interfaces. Por ejemplo, podemos crear una clase JavaScript encapsulada con este patrón usando uno de los nuevos proyect templates de arriba (fijaos que el namespace que crea Visual Studio es el mismo que el nombre del proyecto):

 

Obviamente tendremos intellisense completo cuando consumamos esta librería en cualquier otra página o archivo JavaScript:

Resumen

Afortunadamente la guia anterior nos muestra un primer vistazo de alguna de las nuevas características de intellisense de JavaScript que estan por llegar (hay muchas más – pero esto es sólo un comienzo). En próximos post cubriremos algunas de las caracteristicas para debugging que aporta VS2008, el soporte para ASP.NET AJAX Y ASP.NET AJAX Control Tookit en el diseñador WYSIWYG.

Para aprender más sobre ASP.NET AJAX ( y cómo podemos usar todas las características del runtime que hemos visto hoy en ASP.NET 2.0), os recomiendo que miréis estos dos nuevos libros que han sido publicados recientemente y que cubren la versión ASP.NET AJAX 1.0:

Fijáos que gracias al soporte multi-targeting de VS 2008, podemos tener este intellisense de JavaScript en ambas versiones de ASP.NET tanto en su versión 2.0 como 3.5 (incluso aquellas que tengan ASP.NET AJAX 1.0 como descarga a parte). Esta es una razón más para empezar a usar VS2008 – incluso si estáis pensando en hacer sólo aplicaciones para .NET 2.0.

Espero que sirva.

Scott.

Traducido por: Juan María Laó Ramos. Microsoft Student Partner.

toH tlhIngan Hol DajatlhlaH ‘e’ DaneH’a’?