Cell Renderers Personalizados, Parte I

A continuación encontrarás traducido al Castellano el artículo publicado originalmente en el Blog de Xojo y escrito por Ricardo Cruz.

Si estás creando una aplicación web, entonces ya habrás advertido que en la mayoría de los casos utilizas controles WebListBox. Xojo Web 2.0 incorpora una gema oculta denominada Custom Cell Renderers. Estos te permiten crear fragmentos de código reutilizables para mejorar las celdas de las tablas.

Este artículo es el primero de una serie de dos. En esta primer artículo verás cómo utilizar los Custom Cell Renderers que ya se han creado. En la segunda parte, aprenderás a crear uno propio.

Echemos un vistazo a un WebListBox sencillo:

Puedes añadir los datos desde una base de datos o una API web. En este ejemplo utilizaremos simplemente algunas filas desde código para enfocarnos mejor en las celdas:

table.AddRow("19 ago 2021 19:32:40", "Ricardo Cruz", "4b8c79a (master)", "Created", "")
table.AddRow("19 ago 2021 19:12:42", "Ricardo Cruz", "4b8c79a (master)", "Cancelled", "")

Ahora tenemos dos problemas: parece un poco aburrido, y también carece de interacción. Puede estar bien si sólo vas a proporcionar una acción, dado que bastará con escuchar el evento SelectionChanged y hacer lo que necesites en el código escrito en él; pero, ¿y si queremos más? ¡Veamos como!

Esto es lo que queremos lograr. Es la misma tabla pero utilizando algunos generadores personalizados de celda:

Observa cómo en esta tabla el usuario no tiene por qué seleccionar una fila y hacer clic a continuación sobre un botón Refrescar, Ver o Borrar. Pueden hacer clic directamente en los botones que se encuentran en las filas.

El hecho de tener ya descargados algunos componentes de Celdas Personalizadas (más sobre esto un poco más tarde), hace que resulte realmente sencillo “actualizar” estas celdas. A continuación se encuentra el código de ejemplo actualizado, donde sólo tendremos que utilizar CellValueAt:

table.AddRow("19 ago 2021 19:32:40", "Ricardo Cruz", "4b8c79a (master)", "Created", "")
table.CellValueAt(0, 1) = New GravatarCellRenderer("email@example.com", "Ricardo Cruz")
table.CellValueAt(0, 3) = New StatusCellRenderer(StatusCellRenderer.States.Unknown, "Created", True)
table.CellValueAt(0, 4) = New GroupButtonsCellRenderer(True, False, True) ' View enabled, Edit disabled, Delete enabled
table.AddRow("19 ago 2021 19:12:42", "Ricardo Cruz", "4b8c79a (master)", "Cancelled", "")
table.CellValueAt(1, 1) = New GravatarCellRenderer("email@example.com", "Ricardo Cruz")
table.CellValueAt(1, 3) = New StatusCellRenderer(StatusCellRenderer.States.Unhealthy, "Cancelled", False)
table.CellValueAt(1, 4) = New GroupButtonsCellRenderer(True, False, False) ' View enabled, Edit and Delete disabled

Hemos realizado los siguientes cambios:

• La columna Commiter muestra ahora un avatar del autor, utilizando el hash de su email con Gravatar, de modo que puedas encontrar con mayor facilidad las filas relacionadas con un autor en concreto.
• La columna Status puede mostrar ahora diferentes colores para cada estado, pero también puede incluir un botón opcional para refrescar.
• También hay una columna Actions que puede ser distinta para cada fila, en función de tus necesidades.

El WebListBox incluye un nuevo evento llamado CustomCellAction que se disparará con la fila y columna presionadas, junto con el identificador único enviado por el Cell Renderer, así como su valor. Esto significa que puedes reaccionar de forma adecuada a diferentes acciones. Por ejemplo, si haces clic en el botón rojo de borrar en la tabla que hemos creado, podrás escribir este código para gestionar la acción del usuario:

If identifier = "GroupButtonPressed" And value = "delete" Then
  MessageBox("Deleting row " + row.ToString)
End If

Así, para que puedas comenzar a probarlo por ti mismo, he preparado una suite de generadores de celda personalizados que puedes descargar desde GitHub y utilizarlos en tus proyectos. Abre el ejemplo que se incluye en el repositorio, arrastra la carpeta “Cell Renderers” desde este proyecto y suéltalo en tu proyecto Web de Xojo. ¡Eso es todo! Ahora puedes comenzar a usarlos.

Conclusión

Como puedes ver, una vez que tienes algunos renderizadores de celda personalizadas listas para usar, puedes comenzar a mejorar tus tablas con sólo unas pocas líneas de código. No necesitas saber nada de JavaScript para utilizarlas, sólo para crear nuevas celdas.

Esta característica abre la puerta al uso de estos pequeños componentes por parte de terceros o bien por parte de otros colegas en tu equipo de desarrollo.

Dicho esto, también puedes incluir HTML, de modo que ¡el único límite es tu imaginación! Si sabes JavaScript permanece atento sobre el próximo tutorial, dado que verás como crear nuevos renderizadores de celda desde cero utilizando el SDK Web de Xojo.

¡Nos vemos en la segunda parte!