Secciones

Artículos para tus primeros pasos

Si estás empezando a introducirte en el mundo de Groovy y Grails, no te pierdas nuestros artículos básicos: 

Entrevistas con los expertos
 

Los protagonistas te cuentan de qué van los proyectos más importantes del mundo Groovy:


Un proyecto de:
ImaginaWorks
Campus Escuela de Groovy

AJAX con Grails: fácil y eficaz

miércoles 29/08/2007

NOTA: este artículo supone que el lector tiene conocimientos básicos sobre Grails, en particular, sobre controladores, acciones y vistas gsp. Para una introducción sobre estos temas te recomendamos los artículos publicados aquí, aquí y aquí.


El soporte para AJAX (Asynchronous Javascript And XML) en Grails está íntimamente ligado al propio framework, de manera que puede decirse que Grails está pensado para desarrollar aplicaciones AJAX. Una vez más, Grails se inspira en Ruby on Rails a la hora de incorporar soporte para estas técnicas, de forma que las estrategias empleadas serán familiares para los que estéis familiarizados con aquél framework.

El soporte para AJAX en Grails toma la forma de una serie de etiquetas (parte de la librería de etiquetas GSP), que nos permiten lanzar llamadas asíncronas al servidor en distintas circunstancias. Pero antes de empezar, es importante tener en cuenta que estas etiquetas no están ligadas a una librería de Javascript concreta, sino que se nos permite elegir la implementación que deseamos usar. Por eso, lo primero que debemos hacer es incluir una etiqueta dentro del elemento head de nuestras páginas donde indiquemos la librería Javascript que vamos a emplear:

Prototype:
<g:javascript library="prototype" />

Yahoo UI:
<g:javascript library="yahoo" />

Dojo:
<g:javascript library="dojo" />
[Dojo es una librería bastante grande, por lo que si elegimos usarla deberemos ejecutar el script "grails install-dojo" para descargar los archivos e integrarlos en nuestro proyecto.]

Una vez declarada la librería, todas las etiquetas AJAX pueden emplearse de forma independiente a la elección que hayamos hecho: el funcionamiento será transparente a esta elección.

Vamos a ver cómo se hacen con Grails algunas de las cosas más habituales en las aplicaciones con interfax AJAX:

UN ENLACE QUE REALIZA UNA PETICIÓN ASÍNCRONA Y ACTUALIZA UN DIV:

Para eso utilizamos la etiqueta <g:remoteLink> :

<div id="message"></div>
<g:remoteLink controller="book" action="delete" id="1" update="message">Borrar libro</g:remoteLink>

Al ejecutar la aplicación, Grails generará una etiqueta <a href=... con el javascript necesario para que al pulsarlo se invoque el action "delete" del controlador "book", pasando el id 1. La respuesta de esa llamada se mostrará en el interior de la etiqueta con id "message", como indica el atributo "update" de la etiqueta remoteLink. El fragmento del controlador podría tener esta pinta:

def delete = {
      def b = Book.get( params.id )
      b.delete()
      render "El libro con id ${b.id} se borró correctamente."
}


UN FORMULARIO QUE SE PROCESA DE FORMA ASÍNCRONA:

La etiqueta formRemote nos permite definir un formulario que se envía asíncronamente para ser procesado en el servidor sin necesidad de actualizar la página. En el siguiente ejemplo realizamos la misma tarea que en el anterior, pero usando este sistema:

<div id="message"></div>
<div id="error"></div>
<g:formRemote url="[controller:'book',action:'delete']" update="[success:'message',failure:'error']">
       <input type="hidden" name="id" value="1" />
       <input type="submit" value="Borrar libro" />
</g:formRemote >

Un detalle importante: el atributo update ahora no tiene el nombre de una capa, sino un mapa con dos valores asociados a las claves "success" y "failure": de esta manera pedimos a Grails que actualice una u otra capa en función de que la llamada al servidor tenga éxito o no. Esta técnica se puede aplicar también al caso anterior, del enlace.

Además de lo visto, hay una serie de atributos tanto de formRemote como de remoteLink que nos permiten tratar distintos eventos relacionados con la llamada asíncrona al servidor:

  • onSuccess: Función javascript a ejecutar si la llamada se realiza con éxito
  • onFailure: Función javascript a ejecutar si la llamada produce un error
  • on_COD_ERROR (ej: on404, on500, etc) Función javascript a ejecutar para un código de error concreto.
  • onUninitialized: Función javascript a ejecutar si la librería Javascript no se ha podido inicializar
  • onLoading: Función javascript a ejecutar mientras se está cargando la respuesta del servidor
  • onLoaded: Función javascript a ejecutar cuando la respuesta ya se ha terminado de transferir.
  • onComplete: Función javascript a ejecutar cuando la respuesta se ha descargado y el tratamiento ha terminado (incluyendo actualización de capas, etc)


OTRAS ETIQUETAS AJAX:

Además de remoteLink y formRemote, hay otras etiquetas que nos permiten desarrollar aplicaciones cuya interfaz se actualiza de forma asíncrona:

remoteField: genera un campo de texto que envía su valor de forma asíncrona (o no) al servidor cada vez que se modifica.


remoteFunction: genera una función que invoca una acción de forma asíncrona, por ejemplo:

<select onchange="${remoteFunction(action:'bookbyname',update:[success:'great', failure:'ohno'], params:'\'bookName=\' + this.value' )}">
    <option>first</option>
    <option>second</option>
</select>

En este ejemplo, cada vez que se cambie el valor del desplegable, se enviará su valor a la acción "bookbyname" del controlador actual, pasando el valor elegido como parámetro.

submitToRemote: Crea un botón que envía de forma asíncrona el formulario actual, serializando los campos en parámetros de la llamada. Útil cuando no es conveniente usar la etiqueta formRemote.

La mayoría de estas etiquetas soportan los atributos antes descritos para gestión de eventos. Para mas detalles podéis consultar la documentación de cada etiqueta.

CONCLUSIÓN

Grails hace que incorporar técnicas AJAX a nuestras aplicaciones sea muy sencillo y rápido. En la mayoría de los casos no tendremos que escribir ni una linea de Javascript, o simplemente tendremos que invocar a funciones ya escritas. Sin duda se trata de una herramienta muy potente que nos permite enriquecer facilmente nuestras interfaces de usuario.


Contenidos relacionados:



0 comentarios:

Tienes que estar registrado para iniciar sesión y poder publicar tus comentarios