WebUIControl Badges: Usando Extensiones de Clase

A continuación encontrarás traducido al castellano el artículo escrito originalmente por Ricardo Cruz (@piradoiv) en el blog de Xojo. Puedes encontrar el artículo original aquí.

Últimamente he estado pasando un rato entretenido con las insignias o Badges en Web, procurando recrear un diseño. Como resultado he terminado escribiendo unas cuantas extensiones de métodos para utilizarlas prácticamente en cualquier WebUIControl de Xojo.

Pero antes de seguir, ¿qué es una Extensión de clase o método de extensión después de todo?

Hay situaciones en las que quieres añadir funcionalidad a una clase del Framework de Xojo. Pongamos por caso que queremos añadir un método a cada control visual web de Xojo. Sabemos que cada control visual hereda de WebUIControl. Esta clase no puede modificarse dado que forma parte del framework. Una opción sería la de crear subclases de cada uno de los controles y añadir nuevos métodos… pero eso sería bastante aburrido.

Las extensiones de clase forman parte de las capacidades soportadas por los Módulos, permitiéndonos así ampliar las clases con nuevos métodos incluso sin tener acceso al código fuente original de dichas clases.

Añadir los métodos SetBadge y RemoveBadge a cada control visual

Lo primero que necesitamos es un Módulo. Pulsa el botón Add en la barra de herramientas y selecciona Module. Utiliza el nombre que desees para dicho módulo; en nuestro ejemplo utilizaremos WebExtensions.

Añade a continuación un nuevo método en dicho módulo y nómbralo “SetBadge”. Luego, en el Inspector, asegúrate de que su ámbito esté definido a Global en vez de Public o Protected.

La magia comienza en el primer parámetro de dicho método. “Extends” es la palabra clave reservada del lenguaje para esta característica. Por ejemplo:

Extends myInstance As ExampleClass

Significa que el método anterior estará “extendiendo” o ampliando la clase imaginaria “ExampleClass”, y que su instancia —representada por el parámetro “myInstance”— estará accesible para dicho método.

En nuestro caso, para SetBadge, queremos utilizar la siguiente signatura de método:

Extends control As WebUIControl, caption As String, indicator As String = "danger", top As Integer = -10, right As Integer = -10

Pega las siguientes líneas en el Editor de Código asociado con el método:

Var classes() As String = Array("xojo-badge", "d-flex", "p-2", _
"border", "border-light", "bg-" + indicator)
classes.Add(If(caption.Length < 2, "rounded-circle", "rounded-pill"))

Var styles() As String = Array("height: 21px", "font-size: 10px", _ 
"align-items: center", "color: white", "position: absolute", _ 
"top: " + top.ToString + "px", "right: " + Right.ToString + "px", _ 
"z-index: 10")

If caption = "" Or caption = " " Then caption = " "
Var html As String = "" + caption + ""

Var js() As String
js.Add("$('#" + control.ControlID + " .xojo-badge').remove();")
js.Add("$('#" + control.ControlID + "').append(`" + html + "`);")
control.ExecuteJavaScript(String.FromArray(js))

Lo que hace el anterior fragmento de código es añadir una nueva capa de HTML a nuestro control utilizando para ello algunas clases CSS de Bootstrap. ¿Has observado que estamos usando “control” en vez de “Self”? Se corresponde con la variable “control” de la definición del método.

Añade ahora el método de extensión de clase que utilizaremos para quitar el badge, llamado por tanto “RemoveBadge”.

La definición del método será la siguiente:

Extends control As WebUIControl

El código del método es más sencillo en este caso:

Var js As String = "$('#" + control.ControlID + " .xojo-badge').remove();"
control.ExecuteJavaScript(js)

Eso es todo.

Ahora, si tienes un WebButton llamado… “AwesomeButton”, puedes añadir un badge utilizando el siguiente código:

AwesomeButton.SetBadge("Hello!")

Y en el caso de que quieras quitarlo:

AwesomeButton.RemoveBadge()

Puedes utilizar los badges en diferentes escenarios; desde mostrar la cantidad de notificaciones pendientes en un WebButton, hasta la validación de errores en un WebTextField.

¡Modifica y juega con el código para que se ajuste a tus necesidades! 🙂

Puedes descargar el proyecto de ejemplo desde el repositorio de GitHub.