Weblog de Victor Ramirez

Miércoles, febrero 25, 2009

Haciendo debug de Javascript en Netbeans 6.5

Filed under: javascript, netbeans, tips, web — Etiquetas: , , , , , — vramirez @ 7:14 AM

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.
  5. Vista de Navigator

    Vista de Navigator

  6. 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
  7. Abrimos el archivo llamado script.js y pegamos el sgte código
  8. 
    function alerta(msj){
        var uno=1;
        uno+=89;
        alert(msj+uno);
    }
    
  9. 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 “)
  10. 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.
  11. 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)
  12. 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.
  13. Confirmacion JavaScript1

    Confirmacion JavaScript1

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

    Instalación de plugin para firefox

  16. 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

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.

Anuncios

Sábado, agosto 30, 2008

5 razones para probar Netbeans 6.5 Beta

Filed under: javascript, netbeans — Etiquetas: , , — vramirez @ 2:37 AM

Hace un par de semanas Netbeans lanzó la versión beta de Netbeans 6.5, la cual en terminos generales se comporta muy bien. Como toda version beta de un software, aun arroja algunos errores inesperados y puede tener en algunos momentos comportamientos inestables. Sin embargo, sus opciones y caracteristicas nos dejan con ansias de descargar la version estable del release 6.5, la cual estará disponible a finales de octubre, según el “road map”. Sus características mas llamativas son:

  • Editor php: es algo que la comunidad de desarrolladores web pedia a gritos, un IDE que ayudará con la generación y en completar código php. Ya es algo que netbeans esta en capacidad de hacer.
  • Editor javascript: el editor de javascript, elc cual esta en capacidad de generar codigo de este lenguaje, ha sido optimizado en cuanto a opciones y tiempos de respuesta, brindando incluso la posibilidad de hacer debugger.
  • Aplicaciones web: se han añadido funciones como deploy al guardar, con la cual al ejecutar “guardar todo” automáticamente se compila y despliega la aplicacion, reduciendo los tiempos de despliegue, la cual tambien aplica para las aplicaciones desktop, pues compila al guardar. Ademas se ha mejorado la compatibilidad con frameworks como Hibernate o Spring, y se ha hecho compatibnle con glassfish v3.
  • Ruby on rails: se ha mejorado el debugger, permitiendo breakponits y catchpoints.
  • C++: Se ha mejorado la generacion de código, deteccion de errores y verificación de sintaxis para este lenguaje. (quien decia que netbenas era solo para desarrolladores de java???)

Por estas 5 razones y muchas más, vale la pena descragar Netbeans 6.5 beta !!

Nota: es necesario aclarar que el módulo de UML ha sido separado de la versión beta de NetBeans 6.5, pues aún se encuentra algo inestable, respecto al resto de componentes. Sin embargo, se puede instalar a través del Centro de Descargas (Update Center). Para mayor información acerca de este evento y muchas cosas más, consultar la página de information o release notes de Netbeans 6.5 beta. Te invito a descargar Netbeans 6.5 Beta desde aqui. Muchísima suerte a todos!

Miércoles, abril 30, 2008

Editor JavaScript en Netbeans 6.1

Filed under: javascript, netbeans, web — Etiquetas: , , , , — vramirez @ 7:38 AM

Netbeans en su vesion final 6.1 implementa una característica que será de gran ayuda para muchos desarrolladores, sobre todo aquellos envueltos en tareas referentes a ajax; editor de javascript. El editor a partit de 6.1 entiende javascript tan claro como entiende java. Basta abrir una página .jsp o .js y escribir una variable o una función, darle “Ctrl+ espacio”, para ver diferentes opciones (métodos, clases, variables) dependiendo de donde esté el cursor. Igualmente posee “refactoring” que permite reemplazar nombres de variables o funciones posicionándonos sobre éstas y presionando “Ctrl+R”, donde una nueva ventana nos preguntará el nombre e incluso podemos obtener un preview. De igual forma ocurre algo muy importante y es que al dar “CTrl+space” en una funcion, podemos obtener su documentación como con cualquier clase de Java, y aún más, nos indica su compatibilidad con 4 de los más conocidos navegadores (Internet Explorer, Firefox, Safari y Opera). Acá les dejo el link para que puedan ver el demo completo (en inglés), una animación flash, realizada por Roman Strobl, quien pertenece al equipo de evangelización de Netbeans.

Blog de WordPress.com.