Diario de Programación

 Por la necesidad de organizar un poco el código de javascript, que va creciendo y creciendo de forma desordenada y desmesurada en nuestro proyecto, me he puesto a mirar un poco el tema de objetos y herencias, también como organizar esas clases en lo que en java se llaman paquetes, no sé si en javascript se llaman namespaces, o ni siquiera existe nombre para eso.

Me ha llamado la atención que las clases realmente son las funciones. Cualquier función que declaremos en javascript es una clase y se puede hacer un new de ella. La función en sí misma se convierte en el constructor de la clase y las "cosas" que definamos en esa función como this.cosa=…. se convierte en atributo o método de esa clase, según sea una variable u otra función.

La herencia es un poco rara, sobre todo cuando buscamos en internet en que hay 49 formas de hacerla y alguna más. Al final, lo más sencillo y mínimo imprescindible es hacer algo como ClaseHija.prototype = new ClasePadre; Ya está la herencia hecha.

Si el constructor Padre tiene parámetros (la función Padre tiene parámetros), podemos llamarla desde el constructor del Hijo (la función Hijo) usando call() tal que así Padre.call(this,parametros), esa sería la forma de que el constructor hijo llame al padre pasándole cosas.

Finalmente, para agrupar las clases en "paquetes" o como quiera que se llame en javascript, basta con hacer el típico 

paquete = {
   Padre : function(…) {….},
   Hijo : function(…) {…}
}

a = new paquete.Hijo;

En fin, lenguaje demoníaco por un lado, pero me está gustando por otro. Mas detalles de lo aprendido en la chuwiki.

 Curioso, si en google buscas una ecuación como y=sin(x), aparece el gráfico de la misma. Se puede desplazar, hacer zoom con la rueda del ratón o con los botones, etc, etc.

vía Oh my tec !

Hace un tiempo estuve leyendo el tutorial de la antes SUN sobre JSF y estos días estoy leyendo sobre jQuery. Por aquello de jugar un poco con ambas cosas me dije: voy a hacer un proyectito. Una lista de tareas web con base de datos y JSF, pero que se puedan ordenar arrastrándolas con el ratón usando sortable de jQuery. Por supuesto, cada vez que se arrastra una fila de la lista y se coloca en otra posición, debería almacenarse su nueva posición en base de datos.

Pues nada, me pongo a ello. Con JSF me hago toda la parte de base de datos, lista de tarear y botones para editar, borrar y crear.

Ahora me pongo con la parte de jQuery. Lo de hacer la tabla "sortable" y arrastrar las filas de un lado para otro sin ningún problema. Toca hacer la persistencia…. y ahí es donde han empezado mis problemas.

Con jQuery puedo enterarme cuándo se arrastra una fila y hacer una pequeña llamada jQuery.ajax() para indicarle al servidor el nuevo orden y que lo guarde en base de datos. La primera "pega"es que no hay forma fácil de llamar desde jQuery a un managed bean de JSF.La solución pasa por hacerse un JSP normalito o Servlet para recoger esas llamadas jQuery.ajax(). Ese JSP sí puede intentar conseguir el ManagedBean de JSF y hacer la llamada correspondiente.

La segunda pega de momento es más insalvable de una forma sencilla. Con jQuery y sortable() puedo obtener el orden de los elementos por su id del tag html. Es decir, si uso un <table> y quiero ordenar los <tr>, cada <tr> debe tener un id <tr id="algo">….</tr>. En la llamada a jQuery.ajax() se pasaría como parámetro esa lista de id de los <tr> en el orden en que están en pantalla. Y este id debería ser el id de la Tarea en esa fila, de esta forma cuando esa lista de id llegue al servidor, este sabrá el orden de las tareas.

Pero JSF, con su tag DataTable usa columnas y no pone ningún id a los <tr>. Y no hay forma de ponérselo de ninguna forma fácil. Tampoco con javascript/jQuery se puede poner a posteriori, porque jQuery no puede acceder al ManagedBean que ha generado la fila y por tanto a su id. Posiblemente se puede poner una columna oculta con los id de tarea y así jQuery podría poner el id al <tr> según el valor de la columna oculta… pero se me hace un poco "artificioso".

Y ahí me he atascado. JSF no pone id a los <tr> ni forma fácil de hacerlo. JQuery no puede acceder a los ManagedBean para poner ese id a posteriori.

Resumiendo, me hace la impresión de que cada tecnología sirve para lo que sirve y no siempre es fácil usar varias de ellas a la vez.

Ahora que me ha empezado a tocar a hacer aplicaciones web, hemos empezado a usar jQuery. En los proyectos había hecho algo, pero siempre por encima y sin saber muy bien qué estaba haciendo. Lo típico de buscar en la documentación o en google, encontrar el trozo de código que hace lo que tú quieres, copy-paste y arreglarlo hasta que funcione.

Pero ahora me he puesto a jugar con jQuery un poco más en serio y la verdad es que me ha gustado lo que he visto.

Aunque parece raro al principio, sobre todo porque no tengo ni idea de javascript, te acostumbras rápido a usarlo. Es muy sencillo y funciona bien, además de ser bastante potente.

Tenemos por un lado su funcionalidad "básica", que permite fácilmente buscar elementos dentro de la página web, cambiar cosas, etc, etc. Y me ha gustado especialmente la sencillez con que se pueden hacer llamadas tipo AJAX y lo fácil que se puede leer la respuesta si viene en formato JSON. De hecho, jQuery te transforma automáticamente esa respuesta JSON en un objeto javascript con los atributos y valores correspondientes al JSON. No sé yo el XML, cada vez me da más "yuyu", incluso desde java, nunca es fácil de leer y siempre tienes que liar el código con clases Document, y Node, y buscando Childs …. 

Para la parte de Drag and Drop, por supuesto tenemos lo básico para hacer lo que queramos, pero lo más "molón" es sortable(), que te da directamente una lista que se puede ordenar arrastrando los items con el ratón sin más necesidad que una línea de código javascript. Se puede incluso hacer varias listas y permitir que los elementos se puedan pasar de una a otra … y sólo requiere una línea de javascript por cada lista.

Tenemos también en jQuery una serie de "Widgets" opcionales, como diálogos, pestañas, acordeones, fechas, etc, etc que también son sencillos de usar. La "pega" es que para que salga algo decente requieren unos CSS más o menos complejos. Por lo que casi no queda más remedio que bajarse alguno de algún sitio ….. pero me ha llamado mucho la atención themeroller. Estos de jQuery lo tienen todo pensado y entrando en la página de themeroller podemos definir con el navegador nuestro propio CSS, viendo cómo queda sobre la marcha según vamos tocando, y luego bajarnos el tema completo junto con las librerías de jQuery (la básica y la de los Widgets).

En fin, me ha gustado mucho todo lo que he visto hasta ahora. Sé que solo he ido haciendo unas pruebas básicas para ir aprendiendo y que en una aplicación real puede haber más "enrevesamiento" del previsto.