lunes

Todos estan invitados a la fiesta ... JQuery en NB6.1

Poco se ha hablado que la versión de Netbeans 6.1 tiene soporte para la sorprendente librería de javascript jquery. JQuery es una librería muy pequeña para desarrollar de forma simple y rápida javascript, además de que cuenta con una amplia gama de plugins para hacer casi cualquier cosa. En este tutorial hablaré del soporte con que cuenta NB61 para jquery y no tanto de la librería.

La nueva versión de netbeans cuenta con soporte para javascript, prototype y jquery.
Vamos a crear un proyecto web y a la par iremos viendo las características que aporta el IDE...


1. Crea un nuevo proyecto web


  • Menú File/New Project
  • Categories: Web
  • Projects: Web application
  • Next
  • Project Name: JQuerySupport
  • Click en Next








2. En la siguiente ventana deje los valores por default y de click en Next



3. Deje en blanco la lista de frameworks



4. Click en Finish

5. Descarga la libreria de jquery desde la página oficial

6. Agrega la librería a tu proyecto, para ello:
  • Crea un folder sobre la carpeta WebPages de tu proyecto (Click derecho sobre la carpeta Web Pages/New/Other/Categories: Other/File types: Folder
  • Folder name: js
  • Pegue la librería que descargó de jquery al nuevo folder js


Note que en la paleta de componentes se pueden ver todos los miembros de la librería:




7. Agregue la definición de la librería en el archivo index.jsp


8. Aquí viene lo interesante.
JQuery utiliza la sintaxis '$()' para crear a su vez un objeto de jquery (chainability), como se muestra en la siguiente imágen, el ide nos da sugerencias de qué objeto podría ir allí dentro, un resumen, sintaxis, parámetros y documentación. ¡ Realmente bueno !




9. Sugerencia de métodos: en el punto anterior comenté que la sentencia '$()' sirve para crear un objeto jquery. Como se puede ver en la siguiente imágen, el IDE nos da sugerencia de métodos.



10. El método ready de jquery sirve para ejecutar alguna instruccion cuando el documento esté listo, es similar al evento onload del body pero a diferencia de éste, se ejecuta cuando termina de construir el arbol dom (y no hasta que pinte todos los elementos de la página)
Agregue el siguiente script:

$(document).ready(function() {
alert("CARGADO");
});

11. Prueba jquery



Top 10 de las características más espectaculares de Netbeans 6.1 en el soporte para jquery.


1. Para cada elemento, nos sugiere la compatibilidad con navegadores ....


2. Coloreado de sintaxis:



3. La sugerencia en tiempo real de los elementos de la página:



4. No deje de admirar, agregue un div dentro del body, 'Sugerencia de los elementos hijo' ...


5. ¿ Sugerencia de atributos ? Si porfavor



6. Errores javascript en tiempo de desarrollo



7. Muestra posibles errores en el código fuente (warnings)



8. Acompletado de métodos javascript.



9. Ctrl + click ->Ir a la declaración del método


10. Go to type (ctrl + o)



¡ El único IDE que tu necesitas !

Envolviendo un pequeño obsequio


En este blog crearé un plugin para Netbeans 6.1 el cual ayudará a buscar el jar a partir del nombre de una clase. A mi parecer siempre ha hecho falta un plugin que haga esto, ¿cuántas veces no te has encontrado con un ClassDefNotFoundException o un NoClassDefFoundError por que no se encuentra presente un jar dentro del proyecto ?

El objetivo de este blog es crear un campo de texto en el toolbar del ide donde podrás anotar el nombre de tu clase y al presionar enter abrirá un browser con los posibles jar que la contienen.




Pasos

1. File/New Project/
  • [Categories]: Netbeans Modules,
  • [Projects]: Module
  • Click en next


2. Aparecerá una nueva ventana para indicar la ruta y nombre del proyecto.
  • Project name: JarFinderToolbar
  • Crea el proyecto como un standalone module ya que no será parte de una suite de módulos,
  • Click en Next.



3. Aparecerá la siguiente ventana en la cual deberás indicar el paquete de tu proyecto, así como el nombre que mostrará y la localización de los archivos de recursos...
  • Code Name Base: org.jarfindertoolbar
  • Module display name: JarFinder Toolbar
  • Localizing Bundle: org/jarfindertoolbar/Bundle.properties



4. Click en Finish
5. Ahora, crearemos el JPanel que contendrá el text field para la busqueda.
  • Da clic derecho sobre el proyecto
  • New
  • Other...


6. Elije la categoría Swing GUI Forms y en File Types: JPanel Form... click en Next


7. En el campo class name escribe JarFinderPanel y en package elige el que aparece en la lista, click en Finish.


8. Diseña tu JPanel similar al siguiente ...


9. Crea el evento key typed para el text field del diseño
  • Click derecho al textField/Events/Key/Key Typed.


10. Define el método keytyped del textfield como el siguiente:

private void jTextField1KeyTyped(java.awt.event.KeyEvent evt) {
int i = evt.getKeyChar();
if (i==10){//The ENTER KEY
// we display the jarfinder url.
try{
URLDisplayer.getDefault().showURL
(new URL("http://www.jarfinder.com/?class="+jTextField1.getText()+"&submit=search"));
} catch (Exception e){
return;
}
}
}

11. Has un reformat code (Alt+Shift+F)
12. Como netbeans trabaja por medio de módulos, deberás agregar una dependencia para la clase URLDisplayer.

13. Da click derecho a tu proyecto/Properties/Del lado izquierdo elige la categoría Libraries



14. Agrega la dependencia para la clase URLDisplayer


15. Has un fix all imports (ctrl + shift + i) y da clic en ok


16. Las librerías de tu proyecto deberán quedar con las de esta ventana.



17. Lo único que resta es agregar un acción para nuestro JPanel, para ello da click derecho a tu proyecto/New/Action...
  • Indica que siempre este disponible (Always enabled)/Click en Next
  • Aparecerá una pantalla donde deberás indicar en category: Edit
  • Desactivar el check Global Menu item
  • En la sección de Global Toolbar Button elegir Edit en toolbar y Redo-Here en position
  • Click en Next


18. En la siguiente ventana deberás indicar los datos para acción.
  • Class Name: JarFinderAction
  • Display Name: JarFinder Action
  • Icon: Debes elegir uno aunque no se vaya a mostrar
  • Click en Finish


19. Declara la siguiente variable dentro del archivo JarFinderAction.java
JarFinderPanel jarFinderPanel = new JarFinderPanel();

20. Sobreescribe el método getToolbarPresenter() y retorna la variable jarFinderPanel


21. Solo basta probar tu nuevo obsequio...
Clic derecho al proyecto
Install/Reload in Development IDE: Lo ejecuta sobre el ide en el que estes trabajando actualmente.



22. Escribimos una clase sobre nuestro plugin, por ejemplo: 'com.sun.tools.javac.code.Flags' ... damos enter

23. Precioso resultado, ahora sabemos en que jar podemos encontrar la clase


24. Lo único que hace falta es distribuir el módulo como plugin para que todos puedan usarlo.
  • Click derecho al proyecto
  • Create NBM
  • Ve a la pestaña Files
  • Carpeta build
  • Veras el archivo org-jarfindertoolbar.nbm
25. El plugin lo puedes descargar de la siguiente url




'Ahora tienes el obsequio, de ti depende si lo abres'

domingo

Mi carta para los reyes magos

En estos días he estado haciendo mi carta para los reyes magos, se que falta mucho tiempo pero ya no puedo esperar más para ver mis regalos...

Queridos reyes magos, yo se que me he portado mal (muy mal :P) este año pero se que ustedes siempre comprenden que un niño como yo se emociona mucho con los regalos que le traen, prometo que si me traen mis regalos me portaré mucho mejor para el prox. año (siempre decía lo mismo :) )

Me gustaría que Netbeans 6.1 rc3 tenga las siguientes características.

1. Que el editor de java cuando escriba '<' , automáticamente ponga el cierre <> ... lo mismo que hace con los paréntesis.

2. Agregar ligas cuando se estan subiendo los archivos del svn/cvs/mercurial, que aparezcan subrayados los nombres de los archivos para poder ir a ellos.

3. Cuando le hago refactor a una propiedad, no le hace refactor a sus gets y sets.

4. Posibilidad de agregar o eliminar carpetas de un repositorio desde Netbeans.

5. Quisiera ver si le pudieran un poco de colorcito a los comentarios, seria interesante poner en cursiva los TODO, o cambiarlos a otro color para asi reconocerlos de los simples comentarios.

6. Soporte para jquery (me dijo santa clause que ya tienen soporte para prototype y eso es genial por que la sintaxis ${} es igual ... pero digo, jquery tiene mucha popularidad y todos los niños lo estan pidiendo ... que les cuesta darle soporte?)

7. Crear un plugin para jarfinder http://www.jarfinder.com/ para saber a que jar pertenece cierta clase (este lo hago yo en los proximos días para que digan que me porto bien)

8. Poner marcas del lado derecho a los comentarios con TODO, así como lo hacen como los bookmarks pero ahora con los TODO

9. Librerias con rutas relativas (oh, esto ya me lo trajeron el día de mi cumpleaños, gracias !)

10. Ahora que sus templates soportan freemarker, ¿sería mucho pedir un plugin decente? (me tuve que rebajar a pedirle prestados sus juguetes a mi vecinito juan ... sus papás le compraron el 'jboss tools freemarker ide').

11.No quiero ser grosero con ustedes pero está re gacha la interfaz para JUnit.
  • No se ve el avance de los test (en %)
  • La consola de junit no tiene la misma potencia que la consula por default(output), no se tienen ligas para ir hacia los errores
  • Es tedioso estar cambiando entre la pestaña de junit y la de output console.
  • No se puede buscar texto dentro de la consola de JUnit.
  • No se sabe cuanto tiempo tardan todos los test.

12. Cuando estoy en un editor de xml/html y creo una etiqueta de apertura, deberia crearse automáticamente la etiqueta de cierre como le pasa a mi vecinito juan con su IDE, ya he buscado como cambiar este comportamiento y parece ser que no se puede.

13. Con este regalo sí me muero de felicidad. Extender el editor gráfico de jsf para que sea capaz de soportar controles como richfaces, icefaces, tomahawk, sandbox, etc ... en lugar de solo estar atados a woodstock. Yo se que ustedes pueden, hace unos cuantos años me dieron la sorpresa con el editor matisse, ahi puedo agregar componentes de distintos componentes. No me extrañaría levantarme mañana y ver los controles colgados de la paleta.

14. Soporte para hibernate. Gracias benditos reyes magos

15. Soporte para spring. Prometo portarme bien pero no me lo quiten.

16. En el editor html pone lineas amarillas cuando un elemento es deprecated, estaría de lujo si el IDE dijera qué debo usar como nuevo elemento (' lo que debo usar en lugar del deprecated')... oh ya me enteré que las sugerencias en javascript te dicen sobre qué navegador correrá tu script ... ¡ Te luciste pinche gaspar ! (Ya se me solto la primer groseria, espero no lean esta parte :S).

17. A veces me pongo a jugar con mis proyectitos web y estan llenos de imágenes que ya no uso. ¿Me podrían avisar de alguna forma qué imáges del proyecto web no están siendo ocupadas?
¿Sería mucho pedir para los css/js y demás recursos externos ?

18. Mejorar el editor jsp, darle la misma potencia que el editor de código fuente java.

19. Soporte para jetty

20. Soporte para comentarios multilínea, esto quiere decir que cuando seleccione código fuente y presione [ctrl + c ] entonces comente de la forma /* */ y no de la forma //

21. Editor grafico para jsp y un atari.

22. Soporte para trac.

23. Mi plugin para facelets se quedo sin pilas, corría para netbeans 6.0.1 pero ha muerto en la version 6.1.

24. Hacer el IDE Online (oh, espero y no solo sean rumores y me lo traigan despues del 2009)

25. Soporte para Bugzilla

26. Por favor, cuando tenga un proyecto sobre un repositorio de versiones y elimine un paquete ... también eliminenlo de la estructura de directorios (ya que se queda el iconito del paquete vacío y por mas que lo borro no desaparece), evitenme el trabajo de ir a la pestaña Files y borrar manualmente la carpeta.

27. Al poner la primer comilla del atributo src de un tag html, mostrar un mensaje para elegir por medio de un dialogo nuestro recurso. Algo así como lo hace dreamweaver.

28. Mostrar por medio de alguna marca las ligas rotas hacia recursos inexistentes, por ejemplo si una etiqueta apunta hacia una imágen que no existe, el IDE lo podría notificar?

29. Refresh para los proyectos. En ocasiones no se actualiza el icono del proyecto, por ejemplo cuando tienes un error de compilación y se corrige ... el icono del proyecto (o del archivo) se queda con el error siendo que éste no existe. Para solucionar el problema tengo que cerrar y volver a abrir el proyecto :(

Pd. No olviden las pilas de mis juguetes

La potencia de Netbeans 6.1 para soportar una librería ... commons-logging

La mayoría de los proyectos en producción no utilizan la sentencia System.out.println(""), en lugar de ello utilizan un sistema de trazas basado en Log4J, el log predefinido de java o un wrapper como lo es Commons logging.

En este artículo explicaré cómo configurar el sistema de trazas para Netbeans 6.1 y utilizarlo de una forma muy productiva.

Pasos a seguir
1. Crear los code templates para los mensajes de consola...

1.1 Ve al menú Tools/Options/Editor/[Code templates]/New/Abbreviation=logd



1.2 En Expanded Text introduce lo siguiente:
log.debug("${cursor}");



1.3 Crea un nuevo code template llamado logdv, éste lo usaremos para imprimir en pantalla en modo debug la primer variable que encuentre hacia arriba (similar a soutv pero con un sistema de trazas.)
--------------------------------------------------
Abbreviation: logdv
Expanded text: log.debug("${EXP instanceof="" default="exp"} = " + ${EXP});
--------------------------------------------------

El resultado será algo similar a lo siguiente:



1.4 Repite el mismo proceso para los siguientes code templates
Mensajes de warning: logw, logwv
Mensajes de info: logi, logiv
Mensajes de error: loge, logev
Mensajes de fatal: logf, logfv

El resultado debería ser similar al siguiente:



2. Para utilizar el sistema de trazas en una clase, se necesita una variable que tenga una referencia a la clase, por lo tanto es necesario crear un code template para insertar la variable log como miembro de las clases:

------------------------------
Abbreviation: logv
Expanded text:
private static final Log log = LogFactory.getLog(${clase}.class);
-----------------------------


Resultado:



No todo es miel sobre hojuelas, punto en contra para Netbeans:

El IDE tiene un code hint para envolver un método que lanza excepciones con un try y catch
Para probarlo declare un método que lance cualquier excepción y mandelo a llamar desde cualquier otro método.
Después tipe [alt + enter] y verá un foco en la parte izquierda sugiriendo envolver el método con un try/catch como muestra la imágen.



Al ejecutarlo nos da el siguiente resultado:



Como te puedes dar cuenta, el sistema de trazas que esta ocupando es el que tiene por defecto el JDK y no el de commons logging, intentemos personalizarlo llendo al menú Tools/Options/[Java Code]/[HInts]/Error Fixes/Sorround with try-catch


Desafortunadamente no hay forma de indicarle al IDE que utilice el sistema de trazas de commons logging o mínimo de log4j... ¡ lastima ! ya será para la próxima versión. Aún así podrías crear un code template o una macro ;)

Lo único que resta es instalar log4j y commons logging en un nuevo proyecto.
1. Crea un nuevo proyecto java con el nombre LoggingTest




2. Expande tu proyecto y sobre source packages click derecho/New/ Other.../




3. Ve a la categoría other y elige properties file


4. En File name pon log4j



5. Introduce el siguiente código en tu nuevo archivo log4j.properties:

log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.Target=System.out
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%d{ABSOLUTE} %5p %c{1}:%L - %m%n
log4j.rootLogger=debug, stdout

6. Descarga (log4j y commons-logging)

7. Click derecho al proyecto y Clean and build.

8. Prueba el resultado:




Ahora tienes un Netbeans 6.1 completamente armado para utilizar commons-logging como wrapper para cualquier sistema de trazas, costó un poco de trabajo pero a cambio de ello serás mucho más productivo y veloz a la hora de escribir código fuente.

'A partir de ahora tu camino en Netbeans 6.1 deja huella'