En esta lección aprenderemos cómo personalizar la apariencia de una etiqueta <s:checkboxlist> en Struts 2, redefiniendo su comportamiento mediante la creación de un tema específico. Esto nos permite adaptar la presentación del componente a nuestras necesidades de diseño.

Pasos para redefinir la apariencia

1. Crear un paquete de plantilla

Primero, debemos crear un nuevo paquete de plantillas. En este caso, llamaremos al paquete template/vertical_checkbox.

2. Crear el archivo checkboxlist.ftl

Dentro del paquete template/vertical_checkbox, creamos un archivo llamado checkboxlist.ftl. Este archivo define la nueva estructura y estilo de la etiqueta checkboxlist.

checkboxlist.ftl

<#assign list = [] />
<#if parameters.list?exists>
    <#assign list = parameters.list />
<#elseif parameters.listKey?exists>
    <#assign listKey = stack.findValue(parameters.listKey) />
    <#assign list = stack.findValue(parameters.listValue) />
</#if>

<#list list as item>
    <#assign itemKey = item?string("top") />
    <#assign itemValue = stack.findString(item) />
    <input type="checkbox" name="${parameters.name}" value="${itemKey}" id="${parameters.name}_${itemKey}" 
           <#if parameters.cssClass?exists>class="${parameters.cssClass}"</#if>
           <#if (parameters.value?indexOf(itemKey) != -1)>checked="checked"</#if>
           <#if parameters.disabled>disabled="disabled"</#if> />
    <label for="${parameters.name}_${itemKey}">${itemValue}</label>
</#list>

Este código genera una lista de checkboxes verticales personalizada con etiquetas y valores provenientes de la lista configurada en la clase Action.

3. Uso del nuevo tema:

Para usar el tema personalizado, debemos incluir el atributo theme="vertical_checkbox" al llamar la etiqueta checkboxlist.

<s:checkboxlist 
    label="Equipos" 
    name="codigosEquipo" 
    listKey="equipoCod" 
    listValue="nombre" 
    theme="vertical_checkbox" />

Explicación del ejemplo

1. listKey y listValue:
   • listKey: Define el identificador único de cada elemento del checkbox.
   • listValue: Define el texto visible para cada checkbox.
2. theme:
   • Especifica el nombre del tema que queremos usar para personalizar la apariencia. En este caso, utilizamos el tema vertical_checkbox que hemos creado.
3. Personalización adicional:
   • El código en checkboxlist.ftl puede incluir clases CSS adicionales para estilizar los elementos (por ejemplo, alineación, colores, etc.).