Curso de Struts 2
Redefinir la apariencia de una etiqueta (checkboxlist)
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
listKey
ylistValue
:listKey
: Define el identificador único de cada elemento del checkbox.listValue
: Define el texto visible para cada checkbox.
theme
:- Especifica el nombre del tema que queremos usar para personalizar la apariencia. En este caso, utilizamos el tema
vertical_checkbox
que hemos creado.
- Especifica el nombre del tema que queremos usar para personalizar la apariencia. En este caso, utilizamos el tema
- Personalización adicional:
- El código en
checkboxlist.ftl
puede incluir clases CSS adicionales para estilizar los elementos (por ejemplo, alineación, colores, etc.).
- El código en