Plugin de jQuery UI para Struts2: Struts2-jquery

El framework Struts2 permite la utilización de plugins para adaptar en la vista diferentes tecnologías de representación que facilitan la integración y mejoran la productividad ampliando el rango de uso.

De este modo es posible incorporar la tecnología de jQuery UI dentro de las páginas JSP que generamos como vista para nuestras aplicaciones en Struts2. Como resultado obtenemos la posibilidad de, mediante el uso de una serie de Tags, producir código jQuery UI adaptado a nuestra aplicación de una manera muy veloz y productiva.

Para ilustrar la utilidad, vamos a modificar un post anterior, en el que se empleaba jQuery UI para crear una aplicación que permitía seleccionar una palabra de una diccionario utilizando el componenten “Autocomplete”. Se puede encontrar más información en este enlace: https://mysticalpotato.wordpress.com/2010/12/03/ejemplo-de-jquery-ui-autocompletar-con-origen-de-datos-en-json-struts2/.

Siguiendo el patrón MVC que utiliza Struts2, solamente vamos a cambiar la vista, cambiando la página HTML+jQuery por una página JSP que emplea el plugin de Struts2, reduciendo el código y añadiendo una capa más de abstracción con los tags de Struts2.

En primer lugar debemos descargar el plugin. Se puede encontrar en la página http://code.google.com/p/struts2-jquery/downloads/list. En nuestro caso elegiremos el fichero “struts2-jquery-plugin-2.5.0.jar” que es la última versión y es compatible con las versiones de jQuery y jQuery UI que hemos usado en el ejemplo del post anterior. Los plugins en Struts2 son archivos .jar, de modo que para utilizarlos simplemente hay que incluirlos en el classpath, ya que contienen la arquitectura requerida por el framework para ser utilizados (más info en http://struts.apache.org/2.x/docs/plugin-developers-guide.html. En Netbeans simplemente los añadiremos como una librería al proyecto.

Una vez tenemos el plugin Struts2-jquery en el classpath hay que utilizarlo. El objetivo en nuestro caso es sustituit la página hecha en HTML + jQuery UI por una página JSP en la que se incluyen Tags de Struts2-jQuery, de modo que no hay que escribir apenas código de Javascript.

Como cualquier librería de tags de Struts2 se debe declarar su uso en la cabecera. Aquí se incluye la librería estándar y la de jquery:

<%@taglib uri="/struts-tags" prefix="s" %>
<%@taglib uri="/struts-jquery-tags" prefix="sj" %>

El siguiente paso es incluir un tag en la cabecera de la página que permite hacer el include de las CSS y los archivos de Javascript de jQuery y jQuery UI en la página. Se trata del tag “head” incluyendo el prefijo js. Más información de este tag se puede encontrar en http://code.google.com/p/struts2-jquery/wiki/HeadTag:

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Autocompletar</title>
	<sj:head/> <!-- Inserta las CSS y las referencias a los JS -->
</head>

Ahora queda insertar el objeto autocomplete que mostrará las palabras que vamos introduciendo en un desplegable preguntando a la acción de Struts2 que tenemos preparada. Una buena base para saber cómo funciona es utilizar los ejemplos de la página oficial del plugin. Para autocompletar me he basado en este ejemplo: http://www.weinfreund.de/struts2-jquery-showcase/index.action.

Como se puede ver en el ejemplo hay que indicar una “url” que es dónde se sitúa la acción que devuelve los resultados en formato JSON y que será solicitada por el objeto de jQuery UI generado:

<s:url id="accionDiccionario" action="autocompletarDiccionario"/>

De este modo la variable “accionDiccionario” contiene la ruta a la acción.

El siguiente paso es utilizar el tag autocompleter de la librería struts2-jquery, configurando los parámetros necesarios, y haciendo uso de la varaible introducida anteriormente con el tag url:

  <sj:autocompleter
	    	id="diccionario"
	    	name="echo"
	    	label="Escribe una palabra"
	    	href="%{accionDiccionario}"
	    	loadMinimumCount="2"
	    />

Y ya está. Con este código simplemente se genera una página HTML+jQuery con un funcionamiento equivalente a la página a href=”https://mysticalpotato.wordpress.com/2010/12/03/ejemplo-de-jquery-ui-autocompletar-con-origen-de-datos-en-json-struts2/”>https://mysticalpotato.wordpress.com/2010/12/03/ejemplo-de-jquery-ui-autocompletar-con-origen-de-datos-en-json-struts2/.

Aquí es donde reside la potencia y utilidad del plugin struts2-jquery. Con unos pocos tags hemos creado una página que realiza las mismas funciones que otras más complejas en HTML+CSS.

El código de la página jsp completa es:

<%--
    Document   : struts2jQueryAutocompletar
    Created on : Dec 13, 2010, 11:39:38 AM
    Author     : Alberto Moratilla <www.4lberto.com>
--%>

<%@taglib uri="/struts-tags" prefix="s" %>
<%@taglib uri="/struts-jquery-tags" prefix="sj" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Autocompletar</title>
         <sj:head/> <!-- Inserta las CSS y las referencias a los JS -->
    </head>
    <body>
        <h1>Ejemplo de uso de Autocompletar con JSON</h1>
        
        

        <s:url id="accionDiccionario" action="autocompletarDiccionario"/>

        <sj:autocompleter
	    	id="diccionario"
	    	name="echo"
	    	label="Escribe una palabra"
	    	href="%{accionDiccionario}"
	    	loadMinimumCount="2"
	    />
        
    </body>
</html>

Se pueden consultar muchos más ejemplos en la magnífica página de los creadores del plugin:

2 comments

    1. Básicamente son unos tags de Struts2 que se incluyen en el JSP para que a la hora de convertirse en código HTML generan estructuras HTML de jQuery UI. Es para facilitar las cosas, aunque al final acaba usando soluciones bastante estándar. Prefiero usar jQuery UI directamente en vez de usar estos tags prefabricados

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s