PDF de programación - framework Dinámica - PickList de selección múltiple

Dinámica

El framework RADical
…J2EE sin complicaciones

Producido por:

Martín Córdova y Asociados C.A.
www.martincordova.com
[email protected]

Framework Dinámica – plantilla reutilizable
PickList de selección múltiple
Última actualización: 2009-03-31
Requiere framework v2.1.4 release 20090327 o superior




Contenido

Sumario ............................................................................................................................ 2
Demo online permanente.................................................................................................. 2
Screenshots....................................................................................................................... 3
Arquitectura de la solución................................................................................................... 4
Diagrama de Actions y organización en carpetas.................................................................. 4
Estructura de clases ......................................................................................................... 5
Inventario de Actions ....................................................................................................... 5
Relación de Clases por Action ............................................................................................ 6
Cómo funciona el mecanismo ............................................................................................ 6
Aspectos relevantes ............................................................................................................ 7
DIVs flotantes ................................................................................................................. 7
Estructura HTML del control picklist (ListBox) ...................................................................... 7
Funciones de soporte para el ListBox y el PickList ................................................................ 8
Enviar el campo ListBox al servidor .................................................................................... 8
Cómo procesar el valor del PickList del lado servidor ............................................................ 9
Cómo instalar la demo ...................................................................................................... 10
Cómo reutilizar y adaptar la plantilla................................................................................... 12




Picklist de selección múltiple

Página 1 de 14



Dinámica

El framework RADical
…J2EE sin complicaciones

Producido por:

Martín Córdova y Asociados C.A.
www.martincordova.com
[email protected]

ítems

pueden

Sumario

Esta plantilla implementa una
lista de selección múltiple o
picklist, que permite seleccionar
varios ítems, los cuales se van
almacenando en un ListBox.
Los
ser
removidos del ListBox uno por
uno, y se pueden añadir más
ítems en momentos distintos.
Al momento de procesar el
formulario, una
función de
JavaScript (en dinamica.js) se
encarga de leer los IDs de
todos los ítems del ListBox y los
almacena en un textbox no
visible, separados por “;” o el
carácter
el
programador. De esta forma se
envían al servidor todos los valores pero como un solo campo. Una vez en el servidor, este String
puede ser parseado –con el método dinamica.StringUtil.split()- para extraer los valores como un
array, y convertido a un Recordset con una sola línea de código. El picklist utilizado incorpora
mecanismo de búsqueda por un campo, y su apariencia está bien trabajada, es muy fácil de
adaptar a otros casos. La lista es paginada.

Este tipo de picklist suele utilizarse en filtros de búsqueda, por ejemplo para filtrar a varios
clientes de una sola vez, en lugar de permitir escoger uno en particular.

Para reutilizar esta plantilla requiere manejar las siguientes plantillas: picklist simple, formularios,
vistas paginadas y filtros de búsqueda.


que

defina

Demo online permanente

Si desea probar como funciona esta plantilla, puede visitarla en este URL:
http://www.martincordova.com/action/demo/multiselect/form



Picklist de selección múltiple

Página 2 de 14



Dinámica

El framework RADical
…J2EE sin complicaciones

Screenshots





Aquí hay un campo
escondido que almacenará
los IDs de los ítems al hacer
el “submit” del formulario.























Producido por:

Martín Córdova y Asociados C.A.
www.martincordova.com
[email protected]

El picklist permite buscar
rápidamente por las
primeras letras, o por
“contiene”, el
programador decide.

Con un clic el item es
transferido al ListBox.

El usuario puede
remover ítems o añadir
otros ítems cuando lo
desee, antes de procesar
el formulario.

Picklist de selección múltiple

Página 3 de 14



Dinámica

El framework RADical
…J2EE sin complicaciones

Producido por:

Martín Córdova y Asociados C.A.
www.martincordova.com
[email protected]

Arquitectura de la solución




Diagrama de Actions y organización en carpetas







Picklist de selección múltiple

Página 4 de 14



Dinámica

El framework RADical
…J2EE sin complicaciones

Estructura de clases


Producido por:

Martín Córdova y Asociados C.A.
www.martincordova.com
[email protected]


Esta plantilla usa casi exclusivamente clases genéricas del framework, solo se incluye una clase
particular para demostrar como procesar el valor del picklist del lado servidor. Esto se explica en
detalle en la sección “Aspectos relevantes” más adelante.




Inventario de Actions


Action

Descripción

/multiselect/form

Formulario que invoca al picklist

/multiselect/picklist/form

Filtro de búsqueda

/multiselect/picklist/notfound

Mensaje que aparece cuando no encuentra data

/multiselect/picklist/search

Ejecutar consulta y enrutar dependiendo del resultado

/multiselect/picklist/view

Ver resultado de la consulta en grid paginado

/multiselect/update

Muestra valores ingresados en el picklist

Picklist de selección múltiple

Página 5 de 14



Dinámica

El framework RADical
…J2EE sin complicaciones

Producido por:

Martín Córdova y Asociados C.A.
www.martincordova.com
[email protected]

Relación de Clases por Action


Action

Clase Transaction

Clase Output

/multiselect/form

dinamica.GenericTransaction

dinamica.GenericOutput

/multiselect/picklist/form

/multiselect/picklist/notfound

dinamica.GenericTransaction


/multiselect/picklist/search

dinamica.GenericTransaction

dinamica.GenericOutput

dinamica.GenericOutput


/multiselect/picklist/view

dinamica.GenericTransaction

dinamica.GenericOutput

/multiselect/update


domain.multiselect.Update

dinamica.GenericOutput

Cómo funciona el mecanismo

1) El mecanismo arranca con la acción “/multiselect/form”, esta sirve la página que inicializa todo
el mecanismo, contiene el formulario con el campo picklist, que no es más que un ListBox donde
irán apareciendo los resultados, así como todo el javascript requerido por esta plantilla, en
particular las funciones para manejar el ListBox y la invocación al PickList.

2) Cuando el picklist es invocado, este se muestra dentro de un IFRAME usando las funciones
genéricas para PopUps DHTML de la capa javascript de Dinámica (/action/script). El picklist es un
modulo completo, una mezcla de un template Filter con PagedView, pero adaptado para verse
atractivo en un tamaño reducido. Cada vez que hace clic en un item, este es transferido a la
pagina principal, invocando un método que lo añade dentro del ListBox. El usuario se puede
quedar buscando registros y añadiéndolos el tiempo que considere necesario, luego cierra el
picklist para retornar a la página principal. Puede abrir el picklist nuevamente si gusta y continuar
añadiendo registros.

3) Cuando finalmente se procesa el formulario (post ajax), antes de enviar los campos, se
computa un String que contendrá los IDs de los ítems del listbox, separados por “;” o un carácter
especificado por el programador, en la función postForm(). Este String se almacena dentro de un
textbox escondido que es posteado con la forma como un campo más, lo que facilita de paso su
validación usando los servicios genéricos del framework.

Picklist de selección múltiple

Página 6 de 14

Dinámica

El framework RADical
…J2EE sin complicaciones





Aspectos relevantes


Producido por:

Martín Córdova y Asociados C.A.
www.martincordova.com
[email protected]

DIVs flotantes

Para lograr la apariencia del encabezado de la ventana del picklist no se usaron tablas, sino una
técnica avanzada de diagramación con estilos, de esta manera sale una barra gris que representa
el tope de la ventana, un titulo a la izquierda y un boton para cerrar (un icono) a la derecha:






Este es el HTML utilizado para ese efecto:

<!--banner-->
<div class="banner" style="height:15px">


class="button" onclick="parent.pickClose()" title="Cerrar"></div>
</div>


<div style="float:left">Seleccionar uno o más registros</div>
<div style="float:right"><img src="${def:context}/images/close.gif"

Estructura HTML del control picklist (ListBox)

<!--control picklist de seleccion múltiple-->
<tr>









<td class="formlabel required" valign="top">

</td>
<td>





Clientes:

<select id="customers" name="customers" size="5" style="width:95%;">
</select><br>
<div style="float:right;margin-right:12px; padding-top:7px">
[<a href="javascript:pickCustomers()"
title="Añadir items a la lista">Añadir</a>]
[<a href="javascript:removeCustomer()"
title="Remover un item de la lista"