Componente select múltiple en Apache Tapestry

Publicado por pico.dev el .
blog-stack java javascript planeta-codigo programacion software tapestry
Comentarios

Apache Tapestry
Java

El framework basado en componentes Apache Tapestry incorpora una amplia colección de componentes que nos bastarán en la mayoría de casos que necesitemos. Para los casos en que deseemos un componente con un comportamiento específico podemos construir uno completamente nuevo basado en otros existentes incluyendo los propios nuestros, de una librería o incluidos en Tapestry.

En Tapestry hay múltiples componentes con los que construir formularios para que el usuario pueda introducir datos, ser enviados por el navegador y procesados en el servidor. Hay componentes de formulario desde checkboxes, radios, select, inputs, … con soporte para HTML 5.

Observando en detalle la lista de componentes ofrecidos nos daremos cuenta de que está un componente Select pero que solo se puede utilizar para que el usuario seleccione una única opción, sin embargo, en el estándar de HTML los campos de selección pueden utilizarse para seleccionar múltiples opciones. Como se no ofrece un componente select para seleccionar múltiples opciones a la vez si lo necesitamos deberemos implementar uno que nos ofrezca esta funcionalidad. Con el codigo fuente de Tapestry la tarea es mucho más sencilla y prácticamente es copiar y pegar, el código completo del componente MultiSelect será lo que muestre a continuación.

Todo componente de formulario en este framework hereda de AbstracField en el que básicamente deberemos proporcionar una implementación del método processSubmission() donde procesaremos los datos recibidos en este caso con un método equivalente al tradicional en Java EE ServletRequest.getParameterValues. La otra parte que deberemos implementar es la generación de etiquetas HTML del componente en el método de ciclo de vida beginRender() que en gran parte nos servirá lo implementado en el código fuente del componente Select de Tapestry pero incluyendo el atributo multiple que requiere HTML para los selects de múltiples opciones.

Esta sería una implementación de un componente select múltiple. La mayor diferencia entre el componente Select y este MultiSelect está en la propiedad value que en el primero es de tipo Object donde se guardará el dato seleccionado y selected en el segundo que es un List de objetos donde se guardarán los datos seleccionados.

Esta implementación del componente no necesita de una plantilla tml sino que todo el HTML se generará desde el código Java. El componente soporta parámetros informales como indicamos con la anotación @SupportsInformalParameters que son parámetros que se añadirán a la etiqueta select incluidos tal cual se indican en su uso que por ejemplo podemos utilizar para variar el número de opciones visibles, personalizar los textos y otras funcionalidades de bootstrap-select.

El código HTML generado por el componente es el siguiente:

Este sería el aspecto del select múltiple con sus botones para seleccionar todas las opciones y deseleccionar todas, además de personalizados los textos y una pequeña flecha en el desplegable hacia el componente select, todo esto configurado principalmente a través de atributos data y clases CSS.

Componente MultiSelect con bootstrap-select

Si queremos seleccionar múltiples opciones usando checkboxes Tapestry ofrece el componente Checklist y usando selects otra opción es el componente Palette pero seguramente no sea lo que deseamos.

Componentes Checklist y Palette

En un artículo anterior comenté como adaptar el componente Select y este MultiSelect para añadirle funcionalidades de la librería bootstrap-select como cuadro de búsqueda, búsqueda por palabras clave, divisores, etc que consiste en añadir a las etiquetas HTML select, optiongrp y option ciertos atributos con sus correspondientes valores con una combinación de parámetros informales y personalización de la clase SelectModel. En el siguiente artículo comentaré como añadir botones selectores de opciones además de los que incorpora bootstrap-select de Todos y Ninguno.

El código fuente completo del ejemplo puedes descargarlo del repositorio de ejemplos de Blog Bitix alojado en GitHub y probarlo en tu equipo ejecutando el comando ./gradlew run.

Portada libro: PlugIn Tapestry

Libro PlugIn Tapestry

Si te interesa Apache Tapestry descarga gratis el libro de más de 300 páginas que he escrito sobre este framework en el formato que prefieras, PlugIn Tapestry: Desarrollo de aplicaciones y páginas web con Apache Tapestry, y el código de ejemplo asociado. En el libro comento detalladamente muchos aspectos que son necesarios en una aplicación web como persistencia, pruebas unitarias y de integración, inicio rápido, seguridad, formularios, internacionalización (i18n) y localización (l10n), AJAX, ... y como abordarlos usando Apache Tapestry.


Referencia: