Archive for the ‘jquery’ Category

Articles

Jquery y el lado del servidor.

In c#,Java,jquery on febrero 11, 2011 por racar

Asychronous JavaScript And XML is AJAX

Image via Wikipedia

En aplicaciones Web el modelo MVC no se puede cumplir estrictamente, generalmente el modelo se convierte en algo como M-VC, es decir, la lógica de la aplicación va ha estar muy ligada a la GUI construida en HTML. Cuando utilizamos javascript, jquery o cualquier otra librería en aplicaciones empresariales, la interacción con el lado del servidor es un reto importante. Parte de la lógica se nos va a quedar en el cliente. La primera sugerencia que tengo es que si bien javascript soporta el paradigma OO, es un lenguaje bien particular que toca aprender muy bien para no caer en la “trampa” de tratarlo como si fuese un lenguaje de origen “empresarial”: java o c#. Los buenos hábitos dependen del lenguaje. (Lenguajes como javascript,  ruby, perl, phyton, php fueron creados por programadores con otro objetivo en mente: productividad).

Lo otro es cuando comunicamos el servidor con el cliente Web, que sea en un formato “amable” con javascript, ya el pobre cliente tiene que lidiar con el DOM del navegador como para que lo pongamos a interpretar más XML.

Por ultimo, la sesión del cliente es diferente a la sesión del servidor. Y aunque esto aparentemente es obvio, hay que tener cuidado porque tecnologías como asp.net o jsf en jee tienen una manera diferente de interpretar los componentes, el id de un elemento html no necesariamente es el id que se interpreta del lado del servidor. Asp.net utiliza una combinación de los atributos id y name, por ejemplo, y jsf genera un id completamente nuevo. Son sesiones diferentes y cuando interactuamos con un componente del lado del servidor con javascript, los cambios se van a reflejar en el request o la petición http, y tienen que ser capturados “manualmente”.

Anuncios

Articles

Google Map API v3 – Blog Destacado

In Google Maps,jquery,RIA,Sistemas de Información Geográfica on mayo 22, 2010 por racar Etiquetado:

Tras la liberación de la versión 3 de Google maps API, refiero un blog con un muy buen ejemplo de las capacidades alcanzadas en esta  a nueva versión.

Este es el enlace de la aplicación llamada Community Mapper , y el blog de su creador Jason Sanford. La versión 3 del google maps ofrece mejoras de rendimiento, GUI y tiene como objetivo mejorar la interacción con dispositivos móviles. Lo usual es que la comunidad GIS, utilice herramientas más especializadas como ESRI, MapServer o GeoServer  por lo que este es un magnífico trabajo enfocado en la experiencia de usuario.

Articles

Useful jQuery Techniques and Plugins

In jquery,Posts recomendados on abril 28, 2010 por racar

Refiero un post muy bueno de 40 plugins para jQuery.

Articles

IDE para jQuery

In jquery on enero 20, 2010 por racar

Hasta ahora he venido desarrollando funcionalidad en jquery con Netbeans, Netbeans es muy buen IDE y recuerdo cuando salio el soporte a jquery donde prometían incluso autocompletar elementos hijos de los objetos DOM (la verdad nunca vi funcionar esto).

He sido feliz con netbeans pero tenia la inquietud del soporte en otros dos ides,  el primero, Visual Studio, y debido al anuncio hecho hace ya como un año de Jhon Resig (padre de jquery) que Microsoft  “acojería” jquery como toolbox oficial para desarrollo de javascript y claro, le daría soporte en Visual Studio; el segundo es Aptana, el ide basado en eclipse para desarrollo de aplicaciones web, me enteré de su aparición en InfoQ donde dan algunas características de el, actualmente ya va por el release 2.

Decidí probar los dos ides a ver como van, el primero fue VisualStudio.  Empecé por aquí porque actualmente desarrollo en .net y pues conviene tener todo en un solo ide, instale los parches, service pack, y demás cosas necesarias para integrarlo al VS2008. La configuración es bastante tediosa y el soporte al fin se logra después de entender que el soporte oficial va en la versión 1.2.6 de jquery (ouch) y bueno si funciona para la versión 1.3.2 pero con un parche mas.

Una ves instalado, y viendo las prestaciones  del intellisense de Microsoft, la verdad no encontré mayores ventajas. El autocompletar es similar a Netbeans, nos muestra los objetos de jquery pero tampoco permite navegar por los elementos de la página. El editor es aceptable pero nada del otro mundo. También empecé a tener errores extraños en la consola de salida, y warnings que no entendía bien, esto si me dejo una mala impresión de su desempeño y posiblemente el problema se presento en la instalación, o el parche no oficial de la versión 3.2 que instalé, en ultimas no tenía la intención de repetir el proceso.

Después empecé a jugar con Aptana. Descargue la versión Stand Alone ya que no tenia Eclipse para poderlo instalar como plugin. Después de instar aptana, es necesario agregar el soporte para la librería javascript que nos interesa. La instalación es en línea y antes de hacerlo, es necesario agregar unas líneas al archivo AptanaStudio.ini para permitir la conexión al proxy http de descarga, igual a como lo haríamos en eclipse 3.5.

 

Después de hacer esto podemos descargar el soporte a jquery por Install New Features. Las opciones nos presentan todas las Librerías Ajax que existen incluyendo las de ASP.NET, también están las que utilizan los phperos y la gente de ruby (mootols, prototype y todo ese rollo). Después de instalada la librería tenemos que ir por Windows – Preferentes – Aptana – Editors – Javascript – Code Assist y seleccionar jQuery para que active el autocompletar del editos.

Y ya esta, el editor es excelente, (además tengo muy buenos recuerdos con eclipse), lo otro que rápidamente salto a la vista es que integra firebug con el debug de eclipse, eso si es nuevo y útil. Cuando ejecutas en modo debug una página, automáticamente se sincronizan aptana y firebug y cualquier brakepoint que ubiques en aptana se refleja en el navegador y  viceversa. Si la ejecución cae en un brakeponit, la traza se dispara en aptana y controlas tu debugin desde el IDE y no desde el navegador.

En cuanto al autocompletar los elementos hijos del DOM  aptana tampoco lo hace, y comienzo a pensar que es ciencia ficción (aunque estoy seguro que alguna vez leí que netbeans lo hacía), tendré que buscar más al respecto. Me da la impresión que Aptana lleva la delantera, me dejó una muy buena impresión y voy a seguir trabajando jquery con el.

Articles

jQuery Datatables

In jquery on diciembre 29, 2009 por racar

El trabajo con tablas es muy común en las aplicaciones Web, específicamente para manejar información de registros. A menudo el manejo de tablas se dificulta cuando queremos hacer cosas mas complicadas que simplemente mostrar datos, por ejemplo, seleccionar registros, asociar información adicional a un fila o registro, cargar grandes cantidades de datos para desplegar, etc.

 

Para hacer este tipo de cosas y que nuestras aplicaciones no parezcan de los años 90’s debemos usar javascript. Como desarrollador de aplicaciones empresariales típicamente utilizaba frameworks java como JSF, y sus derivados como iceFaces, rich faces, o ADF y el framework de .net el popular ASP-ajax que permiten “incluir” componentes ajax sin codificar javascript.

 

Desafortunadamente este modelo no es flexible, y crear un componente a medida dentro de los frameworks es algo complicado. Por este motivo empecé a explorar otras alternativas al ajax de “estado gaseoso”. En esta búsqueda y en medio de todos estos toolkits javascript que existen me decidí por jQuery, ¿Por que? Bueno, me gusto  programar con el.

 

JQuery tiene una gran cantidad de plugins para manipular tablas html entre ellos esta datatables.net. Este plugin es muy bueno y me ha permitido hacer cosas que antes no podía a nivel de presentación y es fácilmente integrable con cualquier backend (java, .net, php o ruby) mediante diversos formatos, pero el más interesante sin duda es el llamado asíncrono de datos en formato JSON.    

 

Acá va un pedazo de código para que se den cuenta lo fácil que es crear una tabla. (Este código es ilustrativo, no pretende ser un tutorial ya que la documentación es bastante buena):

oTable = $('#canred').dataTable( {
          "bProcessing": true,    
          "bServerSide": true,
          "bJQueryUI": true,
          "bLengthChange": false, 
          "iDisplayLength": 3,
          "sPaginationType": "two_button",
          "sAjaxSource": "json_source/OpCandidatasRdcto.aspx",
         }

“canred” es el id de una tabla vacía y la página OpCandidatasRdcto.aspx nos entrega los datos en formto JSON convencional, algo como esto:

{"sEcho":1,"iTotalRecords":135,"iTotalDisplayRecords":135, "aaData":[
  [
    "22***",
    "PETROLEOS DEL MILENIO C.I S.A",
    "81***",
    "****",
    "2008/6/27",
    "MEDELLIN",
    "LS",
    "AVANCE DE OBRA NUMERO 002",
    "CONSTRUCCION",
    "MAQUINARIA Y EQUIPO",    
    "<img src=\"images/details_open.png\"/>"
  ],
  [
    "22***",
    "GIRALDO O*** ",
    "71**",
    "****",
    "2008/5/6",
    "MEDELLIN ",
    "LS",
    "TRACTO MULA",
    "TRANSPORTE CARGA",
    "AUTOMOTOR",    
    "<img src=\"images/details_open.png\"/>"
  ],
  [
    "22***",
    "NEWTRANS LTDA",
    "***",
    "***",
    "2008/7/29",
    "MEDELLIN ",
    "LS",
    "CARROCERIA",
    "CARROCERIA",
    "AUTOMOTOR",    
    "<img src=\"images/details_open.png\"/>"
  ]
]}
 

Entonces el servidor se encarga de entregar los datos y el cliente se dedica a mostrarlos, de la forma como queramos, acá un ejemplo para desplegar información adicional de un registro cuando damos clic en un botón de detalles.

$('td img', oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') ){
this.src = "images/details_open.png";
var nRemove = $(nTr).next()[0];
nRemove.parentNode.removeChild( nRemove );
}else if(this.src.match('details_open') ){
this.src = "images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails2(nTr), 'details' );
}
} );
} );

 

Finalmente una muestra de lo que podemos obtener como resultado final:

 

La flexibilidad de jquery datatables ofrece la posibilidad de mejorar las experiencias de los usuarios frente a nuestras aplicaciones con listas de registros y sin mucho esfuerzo podemos creaa aplicaciones enriquecidas. Es una buena manera de agregar herramientas a nuestro toolbox y es muy entretenido de programar.