h1

Introducción a jMesa

10 diciembre 2008

Hace unas semanas jugué un poco con la integración de displaytag con OpenCms, me resultó que era algo muy útil y que simplificaba mucho mi trabajo en algunos casos, la capacidad que te dá por defecto de realizar ordenaciones de los campos y demás me encantó, pero en algunos casos se me quedaba un poco corto, ¿Qué pasa si quiero un evento onClick en las celdas o usar cualquier cosa de Javascript o AJAX? ¿Qué pasa si quiero modificar los listados directamente los campos? Algunas de estas necesidades podían sin duda resolverse, como ya indiqué en otro de mis posts. No obstante, me parecia algo tedioso, incluso un poco “guarro”. Así que me puse a investigar si había alguna otra opción y encontre las extreme tables y su sucesor jMesa. Éste último me pareció la mejor de todas las soluciones, ya que, me permite filtrar, añadirle eventos onClick, onMouseOver y demás, incluso modificar los elementos de las tablas y mediante el uso de AJAX modificar dichos valores en la base de datos. Los pasos para usar jmesa son muy sencillos y los describiré a continuación:

  1. Desrgarse jMesa de aquí.
  2. Añadir el fichero tld que se encuentra en el directorio /jmesa-2.3.3/dist, del zip que nos acabamos de descargar, al directorio /WEB-INF/tld.
  3. También debemos añadir los ficheros css, javascript, las imágenes y los jar, que se encuentran en /jmesa-2.3.3/dist, en los directorios correspondientes.
  4. Añadir JQuery. 
  5. Las imágenes deben de estar en una ruta determinada, la que queramos, pues lo configuraremos en un properties bajo la clave html.imagesPath.
  6. Crear un fichero properties llamado jmesa.properties  (que podemos copiar de los ejemplos) y referenciarlo en el web.xml de la aplicación de la siguiente forma:
  7. <context-param>  
    <param-name>jmesaPreferencesLocation</param-name>  
    <param-value>WEB-INF/jmesa.properties</param-value>  
    </context-param>  

Aquí tenéis un ejemplo de uso:

<%@ taglib uri=”/WEB-INF/tld/jmesa.tld” prefix=”jmesa” %>

<link rel=”stylesheet” type=”text/css” href=”<cms:link>/system/modules/org.opencmshispano.module.jmesa/resources/css/jmesa.css</cms:link>”></link>
<link rel=”stylesheet” type=”text/css” href=”<cms:link>/system/modules/org.opencmshispano.module.jmesa/resources/css/web.css</cms:link>”></link>
<script type=”text/javascript” src=”<cms:link>/system/modules/org.opencmshispano.module.jmesa/resources/js/jmesa.js</cms:link>”</script>
<script type=”text/javascript” src=”<cms:link>/system/modules/org.opencmshispano.module.jmesa/resources/js/jquery.bgiframe.pack.js</cms:link>”></script>
<script type=”text/javascript” src=”<cms:link>/system/modules/org.opencmshispano.module.jmesa/resources/js/jquery-1.2.2.pack.js</cms:link>”></script>
<form id=”projects” name=”pojects” action=””>
<jmesa:tableFacade id=”tag” items=”${cvs}” maxRows=”10″ maxRowsIncrements=”10,20,30″ var=”bean” >
<jmesa:htmlTable >
<jmesa:htmlRow>
<jmesa:htmlColumn property=”title” title=”Title” sortOrder=”asc,desc”>
<a href=”<cms:link>${bean.path}</cms:link>”>${bean.title}</a>
</jmesa:htmlColumn>
<jmesa:htmlColumn property=”name” title=”Name” sortOrder=”asc,desc”>
<a href=”<cms:link>${bean.path}</cms:link>”>${bean.name}</a>
</jmesa:htmlColumn>
<jmesa:htmlColumn property=”department” title=”Department” sortOrder=”asc,desc”>
<a href=”<cms:link>${bean.path}</cms:link>”>${bean.department}</a>
</jmesa:htmlColumn>
<jmesa:htmlColumn property=”company” title=”Company” sortOrder=”asc,desc”>
<a href=”<cms:link>${bean.path}</cms:link>”>${bean.company}</a>
</jmesa:htmlColumn>
<jmesa:htmlColumn property=”availability” title=”Availability” sortOrder=”asc,desc”>
<a href=”<cms:link>${bean.path}</cms:link>”>${bean.availability}</a>
</jmesa:htmlColumn>
<jmesa:htmlColumn filterable=”false”>
<a href=”#”><img src=”<cms:link>../resources/images/openJob.png</cms:link>” class=”ieTransparent” /></a>
<a href=”#”><img src=”<cms:link>../resources/images/addJob.png</cms:link>” class=”ieTransparent” /></a>
<a href=”#”><img src=”<cms:link>../resources/images/deleteOption.png</cms:link>” class=”ieTransparent” /></a>
</jmesa:htmlColumn>
</jmesa:htmlRow>
</jmesa:htmlTable>
</jmesa:tableFacade>

<script type=”text/javascript”>
function onInvokeAction(id)
{
setExportToLimit(id, ”);
createHiddenInputFieldsForLimitAndSubmit(id);
}
</script>

Evidentemente tendréis que cambiar las rutas a las vuestras.

Espero que haya sido útil.

Anuncios

28 comentarios

  1. Hola Alejandro,

    sin duda, la integración de jMesa con OpenCms es un tema muy interesante. En nuestra empresa se está trabajando en ello; aunque no puedo decir que tal va la cosa con exactitud. Al menos se listan los xmlcontents con los taglib de jmesa, aunque aún falta por solucionar detalles como el de la edición directa, dianas, paginación, etc.

    Creo que hay intención de donarlo a la comunidad en cuanto se tenga listo os doy el toque por el foro.

    Un saludo.


    • La verdad es que sí, le da un toque de calidad, sobre todo en temas de administración. La verdad es que la idea de ponerle el direct edit es muy buena, pero conlleva un problema. Rompe con el estilo de la web, nosotros estamos desarrollando un módulo que te genera dinámicamente los formularios para la creación del contenido y así el estilo no se rompe.
      Un saludo


  2. komo es eso de las librerias de java amigo es k hice todo los pasos péro me sale error al kompilarlo es k me dice sobre las klases de java entonces añadi org.jmesa….. ese pakete kon el k venia el zip y peor aun me sale errores en kada clase java k por cierto es un monton de clase …BUENO ESPERO TU AYUDA KUANTO ANTES SIPPP PORFA


  3. kisiera saber como lo acceso kon mi base de datos no entiendo …tambien k significa id=”tag” el dolar cvs…y …var=”bean” se pone siempre esto asi o se cambia x favor explikame sippp


  4. tengo una BD mvcaa con una tabla Usuario con campos: (idUasuario, nombres)…komo la pongo on jmesa ya puse los archivos el jar, los tld, properties ,javasript, y el jsp donde se va a ver …pero nada k MAS HAGOOOOOOOO -…!!!!!!!!!!!


  5. AYUDAMEEEEEEEEEEEEEEEEEEEEEEEEEEE


  6. Mira te explico lo que debes hacer, tienes que crear una lista de objetos. Estos objestos con los campos que quieras mostar. Por ejemplo, si tu base de datos tiene los campos nombre, edad y dirección y tus objetos tiene que tener esos campos.

    Despues esa lista la metes en sesion y despues se lo pasas al jmesa.

    List lista = tuclase.tumetodo(); // es el metodo que ataca a la base de datos y te devuelve una lista de objetos
    pageContext.setAttribute(“tulista”, lista); //lo metes en sesion
    A jmesa se lo pasas de la siguiente forma:

    <jmesa:tableFacade id=”tag” items=”${cvs}” maxRows=”10″ maxRowsIncrements=”10,20,30″ var=”bean” >

    El atributo id es el id de la tabla, items es la lista de elementos sobre la que vas a iterar, var es el nombre que recibe el objeto actual sobre el cual estás iterando, maxRows el número de eltos por pagina.

    Despues tienes que pintar los campos de los objetos

    <jmesa:htmlColumn property=”title” title=”Title” sortOrder=”asc,desc”/>

    Donde property es el atributo que quieres pintar, ojo tienes que tener los gets y los sets definidos en tu bean y title el tiulo de la columna.

    Espero que te haya servido de ayuda.


  7. hola una vez mas xevere tu explicacion aunk falta ciertosa detalles please nose si me puedes dar tu email para seguir preguntandote …porfa

    pa terminar me dices k el id : id de la tabla ..uhmmm??? yo entiendo x id k es x kada Cliente o sea idCliente un campo …xk pones tag

    en items aki si es el nombre de mi lista ka acabo de crear verdad donde esta mi tabla (en tu ejemplo lista)
    y var xk bean ….es un nombre kualkiera kkk ai estara un registro estoy en lo cierto ..???
    espero k me respondas kuanto antes amigoooo
    y muchas gracias…..
    eset es mi korreo elianacarolina_ing@hotmail.com
    agregame para seguir alando acerka de este JMESA k me interesa un monton please…


  8. Muy buenas Alejandro

    Yo también llevo algún tiempo intentando poner en marcha el taglib de JMESA junto a OpenCms. He conseguido que me cargue la tabla con datos sin problemas, pero siempre tengo un error javascript en la página que dice “JQuery no está definido”. Los imports son los siguientes:

    * jmesa.css
    * jmesa.js
    * jquery.bgiframe.pack.js
    * jquery-1.2.2.pack.js

    También aprovecho para comentarte: ¿Con ésto es suficiente? En la web del proyecto JMESA hablan de Controladores, Servicios, Vistas etc., pero creo que es porque el ejemplo va junto a Spring utilizando el patrón MVC.

    ¿Me puedes echar una mano?

    Muchisimas gracias!


  9. Aparentemente he conseguido solucionar el error de JQuery, añadiendo al directorio js los ficheros javascript de JQuery-1.2.2-release. Actualmente, mis imports son los siguientes:

    * jmesa.css

    * jmesa.js
    * jquery.js
    * jquery.lite.js
    * jquery.min.js
    * jquery.pack.js
    * jquery.bgiframe.pack.js
    * jquery-1.2.2.pack.js

    EL problema es que cuando pulso sobre algún botón, llamándose a la función onInvokeAction que defino como tú, obtengo un error de JavaScript diciendo “en la linea tal se esperaba un objeto”.

    ¿Al final voy a necesitar definir un Controlador, etc.?

    Muchas gracias!


  10. Buenas,
    Sin necesidad de hacer lo que comentas en la entrada del blog relacionada con JQuery, a partir de los imports que comenté anteriormente, he conseguido que funcione la navegación, la búsqueda, etc.

    El único problema es la exportación a PDF, Excel o Nota. He redefinido la función javascript oninvokeExportAction para que use la ruta del contenido, pero me da errores dependiendo del tipo de fichero al que lo quiero exportar:
    * Nota: Genera la nota, pero no como un nuevo txt, sino mostrándola directamente en la página.
    * Pdf: Mas o menos igual que Nota.
    *Excel: Excepción: org.apache.poi.hssf.usermodel.HSSFCell.setCellValue(Lorg/apache/poi/hssf/usermodel/HSSFRichTextString;)V
    ¿Cómo has hecho tu la exportación sin definir esta función JavaScript?

    Muchas gracias por todo!


    • Te comento que es posible que si lo del jQuery no lo haces como explico en mi entrada puede dar problemas.
      Sobre el tema de la exportación, si te digo la verdad nunca lo he hecho porque no lo necesité, pero si me das unas horas, lo miro y te comento.
      Un saludo


  11. Muchas gracias! Te doy el tiempo que haga falta hombre 😀

    Voy a intentar hacerlo como comentaste, a ver si es la razón de los problemas, aunque no acabo de tenerlas todas conmigo.


  12. Buenas Alejandro,

    Llevo unos días intentando poner el jQuery como comentas, pero no lo consigo. Estoy utilizando OpenCms 7.0.4. En system/workplace/resources he creado un directorio llamado jquery. Dentro, he creado 2 directorios, pack y unpack. En cada uno de ellos he subido los ficheros de la versión 1.2.2 de Jquery (jquery.js, jquery.lite.js, jquery.min.js y jquery.pack.js). Cuando intento utilizarlo, mediante la línea me da un error indicando que no hay tag definido, por lo que seguro que me falta algo (como por ejemplo, saber donde definir el tag, ¿no? ).

    Por otro lado he estado intentando sacar la exportación, modificando la llamada al método onInvokeExportAction, pero no consigo absolutamente nada. ¿Has conseguido algo en el ámbito de la exportación a pdf, cvs, etc.?

    Muchisimas gracias.


    • Buenas Javier,
      Dos dos cosas, lo de jQuery yo lo probé en la 7.0.5, igual en la 7.0.4 cambia, no sé. Tendría que mirarlo.
      Sobre lo de jMesa, he estado muy liado. Ahora lo probaré y te diré algo.
      Un saludo


  13. Gracias!


    • Buenas Javier,
      Me ha costao un poco, pero porque estaba poco fino, en verdad es una tonteria.
      Lo primero que tienes que hacer es definir la función javascript: onInvokeExportAction de la siguiente forma:

      function onInvokeExportAction(id) {
      var parameterString = createParameterStringForLimit(id);
      location.href = ‘/nnepharmaplan/export.html’ + parameterString;
      }

      Donde redireccionas a la jsp que te genera los archivos, en esa jsp tienes que tener el siguiente código:

      TableFacade tablefacade = TableFacadeFactory.createTableFacade(id, request);
      tablefacade.setItems(collection);
      tablefacade.setExportTypes(response, new ExportType[] {
      ExportType.CSV, ExportType.JEXCEL, ExportType.PDF
      });
      tablefacade.setStateAttr(“restore”);
      Limit limit = tablefacade.getLimit();
      if(limit.isExported())
      {
      tablefacade.setColumnProperties(new String[] {“location”});
      Table table = tablefacade.getTable();
      table.setCaption(“Presidents”);
      Row row = table.getRow();
      Column column = row.getColumn(“location”);
      column.setTitle(“First Name”);
      tablefacade.render();
      }

      Donde collection, es tu lista de objetos y id es el id de tu tabla, el resto de los parametros creo que son evidentes, después tienes que tener las dependencias de jmesa en la carpeta lib, estas dependencias las encuentras en: http://code.google.com/p/jmesa/downloads/list. Descargate el paquete export-dependencies-2.2.5.zip.
      Un saludo.


  14. Buenas Javier,

    Muchas gracias por la información. Eso lo había visto en el Google code, pero no sabía donde situarlo.

    Actualmente consigo que me genere los ficheros PDF y CVS, excepto el Excel, que me sigue dando el siguiente error: org.apache.poi.hssf.usermodel.HSSFCell.setCellValue(Lorg/apache/poi/hssf/usermodel/HSSFRichTextString;)V
    Hay que tener en cuenta que los jars de export-dependences-2.2.5.zip están incluidos en WEB-INF\lib, directamente en el directorio (porque dentro del zip están divididos en excel, jexcel y pdf)¿Te suena de haberte pasado?

    Por otro lado, quería preguntarte una cosa: El texto de los ficheros generados es el que se supone debería ser (o sea, las columnas con la información) junto al código HTML de mi página, y creo que eso no debe ser así. La TableFacade la utilizo dentro de la misma JSP que genera la taglib, por lo que puede ser la causa del error. Si quieres utilizarlo en una página diferente, ¿Cómo le envías la colección? Por otro lado, siguiendo con los problemas del PDF, creo haber visto que en el jmesa.properties se le tiene que decir donde está el css de PDF, pero no estoy seguro.

    Saludos y muchas gracias!!


  15. Se me ha ido y te he saludado con mi nombre, 😀

    Saludos Alejandro!


  16. Buenas Javier,

    Mira te comento he probado y a mi también me da esa excepción tendré que mirar que es lo que está pasando. Tiene toda la pinta de ser un problema de los jars.

    Sobre el texto de los ficheros, tendrás que adecuarlo a lo tuyo, el nombre de las columnas y demás. Sobre pasarle la lista, tienes varias opciones, lo lo vuelves a generar o se lo pasas por sesión.

    Un saludo.


  17. Buenas Alejandro,

    En primer lugar te quería agradecer toda la ayuda que me has dado.

    He conseguido que me exporte a CVS perfectamente, enviándole la coleccion.

    LLevo unos días intentando hacer que funcione la exportación a PDF y a EXCEL, pero no hay manera. ¿A ti te funcionaba PDF? A mi me genera un fichero vacío. Por otro lado, el EXCEL sigue dándo la misma excepción…

    Lo curioso es que los ejemplos de Jmesa me funcionan a la perfección (fuera de OpenCms).

    Si por lo menos te va el PDF, dime como lo has conseguido! 😀

    Thnxs!


    • Buenas Javi,
      Siento haber tardado tanto en responderte, ando medio liado, te comento a mi me exporta todo menos el excel, no sé por qué, no lo he investigado, parece ser algo de una de las librerias. Seguramente falte alguna o algo por el estilo.
      Pero como te dije, para que te exporte, metes las librerías que te comenté en la capreta libs y haces una redirección a una jsp que tenga el código que te puse, evidentemente, adaptado a tus atributos y demás.
      Un saludo


  18. Hola Alejandro,

    Ya he conseguido que exporte a todos los formatos. Utiliza JEXCEL, que es una versión que funciona mejor.

    Saludos y muchas gracias por todo!!


    • Buenas,
      Siento no haberte respondido sobre lo del excel antes, he estado muy liado. Entonces con poner la librería que hay que usar es JEXCEl, se pone y punto no?
      Un saludo


  19. Creo que la librería de JEXCEL ya viene incluida en los exports de Jmesa, por lo que lo único que tienes que hacer es utilizar “JEXCEL” en vez de “EXCEL” en las opciones de exportación.

    No te preocupes, lo importante es que ya funciona!

    Saludos



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

A %d blogueros les gusta esto: