Haciendo debug de Javascript en Netbeans 6.5

Entre las múltiples características que brinda el IDE Netbeans 6.5, una de las más llamativas y quizás poco explotadas es el debugger para Javascript. A continuación mostraré como se puede hacer este debug en un ejemplo sencillo.

1. Crear una aplicación Web, colocándole el nombre deseado (WebApplication1?) y escogemos el framework a utilizar en este casodeberá ser Visual Web JavaServerFaces(Luego explicaré por qué).
2. Agregamos al proyecto un archivo de javascript. Vamos a File->New File. En la sección Other, seleccionamos JavaScript File. Le colocamos como nombre script.
3. En vista de diseño de la pagina principal, vamos a la ventana Palette, buscamos una sección que dice Advanced, ahí seleccionamos script y lo arrastramos a la página.
4. Sin cambiarnos de la vista de diseño vamos a la ventana Navigator, en la cual buscamos el objeto script que acabamos de agregar.


Vista de Navigator

5. Luego de haberlo encontrado y seleccionado, vamos a la ventana de Properties, donde editamos la propiedad url. Al hacer click en el boton [...] nos lleva a una especie de selector de archivos. Debe aparecer en los candidatos el archivo JavaScript que acabamos de crear; script.js. Lo seleccionamos y damos click en OK. Hasta acá se han ejecutado los  pasos necesarion para poder utilizar en la página, las funciones de JavaScript que se creen en el archivo script.js
6. Abrimos el archivo llamado script.js y pegamos el sgte código

function alerta(msj){
    var uno=1;
    uno+=89;
    alert(msj+uno);
}

7. Arrastramos un botón a la página principal. Editamos sus propiedades, seleccionando el botón y luego haciendo click en la ventana Properties. En la opción onClick, escribimos alerta(“Hola mundo de debugger “)
8. Si ejecutamos de una vez la aplicación, seguro saldrá un botón, al que si le damos click dirá Hola mundo de debugger 90. Sin embargo, aún no tenemos debugger sobre el JavaScript.
9. Hacemos click derecho sobre el nodo del proyecto y luego en Properties. En la categoría debug, seleccionamos el que dice JavaScript. Luego seleccionamos el browser (recomiendo de lejos Firefox, he tenido malos ratos con el debugger en IE)
10. A continuación vamos al archivo JavaScript, llamado script.js y seleccionamos cualquiera de las filas donde deseamos que el debugger se detenga. Aparecerá el cuadro rojo en la linea como en el código java normal, es decir un breakpoint. Ahora si le damos ejecutar a la aplicación pero con debugger. Aparece un mensaje, confirmando lo que habiamos seleccionado antes. Podemos incluso indicarle en la parte inferior que no queremos ver ese mensaje de nuevo. Esta configuración se puede cambiar en cualquier momento en las propiedades del proyecto editadas en el paso anterior.


Confirmacion JavaScript1

11. La primera vez, se instalará un plugin para que Firefox soporte el debug de la aplicación. Será necesario reiniciar el navegador.


Instalación de plugin para firefox

12. Luego de un par de minutos, se instala el plugin y podemos hacer debug del código escrito en JavaScript.

Debugger en NetBeans IDE 6.5

Por alguna razón, cuando el programa llega a un breakponit y estas en el navegador, no salta a NetBeans. Hay que ir manualmente y hacer click en el IDE, para ver el programa. Los controles para avanzar son idénticos al debugger normal. Por último quiero decir que la razón por la que escogí Woodstock, sobre IceFaces es simplemente porque IceFaces no tiene un equivalente para el componente script, añadido en el paso 3.

Como vemos este debugger es una nueva ayuda para entender el funcionamiento de código JavaScript en nuestras aplicaciones web.

Una última observación es que no es recomendable que naveguemos mientras está arriba el debugger en modo javascript. La razón es que páginas con javascript (casi todas) tendrán comportamientos extraños.

5 Plugins sencillos pero muy útiles para Netbeans 6.5

Desde hace casi un año, hago parte de una comunidad que (en sus ratos libres) prueba y revisa los plugins que constantemente son creados para NetBeans por la misma comunidad, con el fin de que, si son aprobados, dichos plugins estén disponibles directamente a través del Update Center de NetBeans. Durante todo este tiempo hemos revisado una gran cantidad de plugins. Algunos muy buenos, otros no tanto. A continuación listo 5 plugins que personalmente me han llamado la atención por lo sencillos que son de utilizar y por la gran utilidad que representan. El orden es aleatorio, todos son realmente buenos:

Special copy paste

Permite seleccionar codigo fuente de nuestras clases, y copiarlo con el formato HTML, es decir que podemos copiar fragmentos desde el editor de NetBeans directamente a sitios como foros, blogs, etc, y se reflejará exactamente el formato (tamaño, color, tipo de letra).

Special copy paste

Luego pegamos directamente en cualquier blog, foro, etc.

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args)throws IOException {
        // TODO code application logic here
        File backup=new File("backsup.bak");
    }

PDF Viewer

Si eres de los que les gusta tener todo en un mismo sitio, este plugin te encantará. Utiliza clases propias de Java (nada de utilizar Acrobat por debajo, o algo por el estilo…) para poder leer algún pdf, que te saque de apuros mientras programas.

Copy & Paste History

Retomando aquello de copiar y pegar, este plugin guarda un histórico de varias copiadas que hallamos realizado con anterioridad, incluso despues de cerrar el IDE y apagar el equipo! Luego de instalarlo se puede configurar el numero de históricos que guarde (no he probado cual es exactamente el máximo :P) y además el tamaño de la fuente.

Copy paste history 1

Cuando deseamos ver el histórico en el editor, simplemente presionamos Altv + V, y despliega una lista con las opciones guardadas.

Copy and paste history 2

AutoSave Module

Permite configurar el IDE, para que guarde automáticamente los archivos con que estamos trabajando, a un determinado intervalo de tiempo.

Autosave module

System Tray

Podemos minimizar NetBeans y convertirlo en un icono más, que se ubica en la barra de tareas.

System tray

Netbeans, ha dejado de ser un IDE más en la lista, para convertirse en una gran comunidad, en la que todos aportamos y recibimos, contribuyendo al crecimiento de este gran proyecto.

Get trained, get certified!!!

Hace 2 dias, llegué a casa y me encontré con un paquete de Sun Microsystems para mí “hmmm… que raro, será un CD de NetBeans? no,  no recuerdo haberlo ordenado… OpenSolaris??? no, tampoco…”, y cuando lo abrí, oh sorpresa!! casi ni me acordaba :P

Diploma Certificación NetBeans

Credencial Certificacion NetBeans

Tal como data ahi, el 29 de Octubre realicé el examen de Certificación como especialista en NetBeans IDE y lo aprobé. Los invito a todos a hacer esta y otras certificaciones que ofrece Sun, sin duda son tanto un gran motor de satisfacción personal, como una buena carta de presentación laboral. Para más info acerca de esto puedes hacer click acá

Proyecto Woodstock llega a su fin

El proyecto Woodstock de Sun MicroSystems, el cual era considerado por muchos el corazón de JavaServer Faces, ha sido oficialmente abandonado. Es decir, no habrá más versiones, ni mucho menos soporte. La razón exacta no la sé, pero estoy seguro que la salida de Winston Prakash de Sun, tendrá algo que ver. En vista de esto, el equipo de Netbeans, nos trae un nuevo juguete para esta navidad: soporte para ICEfaces tanto en diseño como en ejecución. ICEFaces es otra, muy buena, implementación de JSF y es una de las más estables y compatibles con Netbeans y GlassFish. Todo esto, no quiere decir en ningún momento, que los proyectos actuales, hechos en Woodstock, dejarán de funcionar. Podrás seguir trabajando con tus proyectos actuales  e incluso empezar nuevos proyectos web, simplemente no se dará más soporte a esta librería, ni mucho menos, se entregarán nuevas versiones.

A través del Update Center de Netbeans, se puede conseguir los plugins de soporte para ICEfaces. Es cuestión de actualizar el catálogo de plugins disponibles y buscar los 2 plugins que contienen la palabra “ICEfaces”; uno es para la integración con los proyectos web, mientras el otro es para el soporte en tiempo de diseño y ejecución en NetBeans. Juntos pesan 9MB. Instalalos, e inmediatamente podras agregar componentes ICEfaces a tu proyecto web actual. Asimismo, podrás agregar una página una pagina de ICEfaces. y por supuesto, también podrás crear nuevos proyectos web, usando ICEfaces.

ICEFaces en Netbeans

En esta página (en inglés), podrán encontrar más detalles sobre ICEfaces y una guía sobre como migrar de Woodstock a ICEfaces.

Lastimosamente,  no todos los componentes de woodstock tienen equivalentes en ICEfaces, a cambio, ofece nuevos componentes que no  estaban disponibles en WoodStock como un mapa de Google, o un editor de texto bastante completo (estilo MS-Word). Mi consejo es que si estas terminando un proyecto web en Woodstock, termínalo, y en tus ratos libres explora los componentes de ICEfaces, pues aun hay algunas incompatibilidades para la coexistencia de estas librerias en un mismo proyecto web.

Disponible “Patch 1″ para Netbeans 6.5

Ya se encuentra disponible un parche para Netbeans en el que se resuelven 62 bugs. A continuación les indicaré como descargar estas actualizaciones:

Nos dirigimos al Update Center: Tools–>Plugins. En la ficha que selecciona por defecto, “Available plugins”, le damos al boton “Reload catalog”. Esto permite que en la primera ficha, “Updates”, aparezca una nueva actualización, la cual se encarga de actualizar el Update Center, y entre otras cosas mejorará la búsqueda de nuevas actualizaciones y nos permitirá, luego ver y descargar el resto de actualizaciones. La seleccionamos y la instalamos, luego tendrás que reiniciar el IDE. Una vez vuelvas a entrar, te diriges de nuevo al Update Center, si la ficha de Updates te aparece vacia le das “Reload”, luego deben aparecer 17 nuevas actualizaciones, seleccionalas todas y sigue las instrucciones. Luego tendrás que reiniciar una vez más, para disfrutar de este parche.

Casi todos los módulos son intervenidos en esta actualización (Php, SaaS, Platform, Java, GlassFish V3, Ruby on Rails, Database, etc.) Es por esto, que realizar esta actualización es altamente recomendable. Si deseas saber la lista exacta de los bugs resueltos, visita este link.