Posts Tagged ‘onclick’

h1

El uso del displaytag

2 diciembre 2008

En el último de mis trabajos realizados decidí integrar el displaytag en OpenCms para quitarme de problemas a la hora de hacer los listados y me encontré con algunos problemas de cosillas que quería hacer. En este pequeño tutorial no pretendo hacer un estudio extenso del uso del displaytag, entre otras cosas, con esto soy un poco novato y sólo pretendo ayudar a aquellos que se encuentren en mi situación y quieran hacer algo parecido a lo que yo he tenido que hacer.

Para ver el uso de las librerías y la documentación de las mismas os recomiendo la página oficial: http://displaytag.sourceforge.net/11/. En esta página también te puedes descargar algunos ejemplos con los casos más típicos.

El primero de los problemas con los que me encontré fue que quería que dependiendo del valor que me llegara de una de las variables, me pintase una imagen u otra; después de investigar un poco, me di cuenta de que era una tontería, lo único que tenía que hacer era una simple sentencia if, ya que los elementos se encuentran en sesión podía acceder a las propiedades de la siguiente manera: nombreObjecto.propiedad. Mi código es el siguiente:

<display:column>
   <c:choose>
    <c:when test=»${mail.starred==0}»><center><img class=»ieTransparent» src=»<cms:link>../resources/images/starred.png</cms:link>» /></center></c:when>
    <c:otherwise><center><img class=»ieTransparent» src=»<cms:link>../resources/images/unstarred.png</cms:link>» /></center></c:otherwise>
   </c:choose>
  </display:column>

Cuando empecé a ponerle los estilos, me di cuenta que la celda de cabecera, la celda en la que el displaytag te pone el nombre de la columna, se descuadraba un poco y hacia algunas cosas raras. esto se debía a que la celda estaba vacía si ningún título por lo que si esto te ocurre deberías poner:

<display:column title=»&nbsp;»>
   <c:choose>
    <c:when test=»${mail.starred==0}»><center><img class=»ieTransparent» src=»<cms:link>../resources/images/starred.png</cms:link>» /></center></c:when>
    <c:otherwise><center><img class=»ieTransparent» src=»<cms:link>../resources/images/unstarred.png</cms:link>» /></center></c:otherwise>
   </c:choose>
  </display:column>

También quería añadir acciones que se pudiesen realizar sobre cada uno de los elementos de la tabla, las tipicas funciones CRUD, para ello lo único que hay que hacer es lo siguiente:

<display:column class=»actions»>
    <a href=»mail-detail.jsp?id=${mail.id}»>View</a>
    <a href=»prueba.html?view=${view}&id=${mail.id}&accion=delete»>Delete</a>
    <c:choose>
     <c:when test=»${mail.starred==1}»> <a href=»prueba.html?view=${view}&id=${mail.id}&accion=star»>Mark as starred</a></c:when>
     <c:otherwise><a href=»prueba.html?view=${view}&id=${mail.id}&accion=unstar»>Mark as unstarred</a></c:otherwise>
    </c:choose>
    <c:choose>
     <c:when test=»${mail.read==1}»> <a href=»prueba.html?view=${view}&id=${mail.id}&accion=read»>Mark as read</a></c:when>
     <c:otherwise><a href=»prueba.html?view=${view}&id=${mail.id}&accion=unread»>Mark as unread</a> </c:otherwise>
    </c:choose>
   </display:column>

Como se puede ver lo único que hago es ponerle unos links con parámetros y los id´s del elemento actual y dependiendo de los valores de las propiedades puedo hacer una cosa u otra.

Finalmente el último de mis problemas era que quería un evento onclick en cada uno de los elementos, esto lo podría haber solucionado con un simple enlace en cada una de las celdas que me redirigiese dónde yo quería, pero no era suficiente para mis necesidades. Así que lo que hice fue crear un javascript que cuando cargase la página me crease un onclick handler para cada una de las filas.  En la etiqueta body, debemos de poner la llamada a la función mediante el evento onload. El código de mi función es el siguiente:

 function addRowHandlers(tableId, columnIndex)
 {
     var table = document.getElementById(tableId);
     var rows = table.getresourcesByTagName(«tr»);
     for (i = 1; i < rows.length; i++)
     {
       row = rows[i];
          row.onclick = function ()
          {
             document.all.user.deleteRow(this.rowIndex);
       };
    }
 }
 

Esta función lo que hace es eliminar una fila cuando se pincha sobre ella, pero evidentemente cada uno puede hacer lo que más le convenga y no sólo con el evento onclick, sino con cualquier evento que admintan las filas.

Espero que os haya servido de algo.