UDA-Componentes RUP. Combo (v2.1.1 deprecado)

UDA – Utilidades de desarrollo de aplicaciones by EJIE is licensed under a Creative Commons Reconocimiento-
NoComercial-CompartirIgual 3.0 Unported License.
UDA - Utilidades de Desarrollo de Aplicaciones
Componentes RUP – Combo
Fecha: 22/11/2013 Referencia:
EJIE S.A.
Mediterráneo, 14
Tel. 945 01 73 00*
Fax. 945 01 73 01
01010 Vitoria-Gasteiz
Posta-kutxatila / Apartado: 809
01080 Vitoria-Gasteiz
www.ejie.es

Componentes RUP – Combo ii/30
Control de documentación
Título de documento: Componentes RUP – Combo
Histórico de versiones
Código: Versión: Fecha: Resumen de cambios:
1.0.0 06/06/2011 Primera versión.
1.0.1 18/07/2011
Correcciones en los números de versión de ficheros,
nuevo atributo i18nId.
1.1.0 14/09/2011
Actualización de las versiones de las librerías
JavaScript subyacentes.
Añadido el apartado Integración con UDA.
1.2.0 14/12/2011
Nuevos métodos getRupValue y setRupValue para la
interacción con los demás componentes RUP.
1.2.1 22/02/2012
Nuevo método selectLabel.
Modificado el comportamiento del método select.
2.0.0 11/07/2012
Cambios de formato y correcciones ortográficas.
Añadido de algunas funciones de gestión nuevas.
2.1.0 18/09/2012
Actualización de las versiones de las librerías
JavaScript subyacentes.
Añadido el apartado de precarga de datos
Inclusión del evento onLoadSucces.
2.1.1 09/01/2013
Permitir la selección múltiple.
Modificación de estilos para colorear líneas pares o
impares configurable.
2.4.0 22/11/2013
Se distribuye la versión minimizada de los ficheros
javascript y de estilos de RUP.
Cambios producidos desde la última versión
Se distribuye la versión minimizada de los ficheros javascript y de estilos de RUP.

Componentes RUP – Combo iii/30
Control de difusión
Responsable: Ander Martínez
Aprobado por:
Firma: Fecha:
Distribución:
Referencias de archivo
Autor:
Nombre archivo:
Localización:

Componentes RUP – Combo iv/30
Contenido
Capítulo/sección Página
1. Introducción 6
2. Ejemplo 6
3. Casos de uso 6
4. Infraestructura 7
4.1. Ficheros 7
4.2. Dependencias 7
4.3. Versión minimizada 7
5. Invocación 8
6. Parámetros 8
7. Funciones 16
8. Eventos 19
9. Comunicación remota 20
9.1. Option Groups Remotos 21
10. Combos enlazados 24
10.1. Local 24
10.2. Remoto 24
11. Precarga de datos 26
11.1. Carga a partir del elemento HTML select 26
11.2. Carga a partir de un objeto JSON 27
12. Sobreescritura del theme 28
13. Integración con UDA 30

Componentes RUP – Combo v/30

Componentes RUP – Combo 6/30
1. Introducción
La descripción del Componente Combo, visto desde el punto de vista de RUP, es la siguiente:
Permite al usuario recuperar un elemento de una gran lista de elementos o de varias listas dependientes
de forma sencilla y ocupando poco espacio en la interfaz.
2. Ejemplo
Se presentan a continuación un ejemplo de este componente:
Selección simple
Selección múltiple
3. Casos de uso
Se aconseja la utilización de este componente:
• Cuando la entrada de datos dependa de una selección de información previa. El ejemplo más
común es la selección de provincia y municipio.

4. Infraestructura
A continuación se comenta la infraestructura necesaria para el correcto funcionamiento del componente.
• Únicamente se requiere la inclusión de los ficheros que implementan el componente (js y css)
comentados en los apartados Ficheros y Dependencias.
4.1. Ficheros
Ruta Javascript: rup/scripts/
Fichero de plugin: rup.combo-x.y.z.js
Ruta theme: rup/basic-theme/
Fichero CSS del theme: theme.rup.combo-x.y.z.css
4.2. Dependencias
Por la naturaleza de desarrollo de los componentes (patrones) como plugins basados en la librería
JavaScript jQuery, es necesaria la inclusión del esta. La versión elegida para el desarrollo ha sido la
versión 1.8.0.
• jQuery 1.8.0: http://jquery.com/
La gestión de la ciertas partes visuales de los componentes, se han realizado mediante el plugin jQuery
UI que se basa en jQuery y se utiliza para construir aplicaciones web altamente interactivas. Este plugin,
proporciona abstracciones de bajo nivel de interacción y animación, efectos avanzados de alto nivel,
componentes personalizables (estilos) ente otros. La versión utilizada en el desarrollo ha sido la 1.8.23.
• jQuery UI 1.8.23: http://jqueryui.com/
Los ficheros necesarios para el correcto funcionamiento del componente son:
• jquery-1.8.0.js
• jquery-ui-1.8.23.custom.js
• jquery-ui-1.8.23.custom.css
• jquery.ui.selectmenu.js
• rup.base-x.y.z.js
• rup.combo-x.y.z.js
• theme.rup.combo-x.y.z.css
4.3. Versión minimizada
A partir de la versión v2.4.0 se distribuye la versión minimizada de los componentes RUP. Estos ficheros
contienen la versión compactada y minimizada de los ficheros javascript y de estilos necesarios para el
uso de todos los compontente RUP.
Los ficheros minimizados de RUP son los siguientes:
• rup/scripts/min/rup.min-x.y.z.js

• rup/basic-theme/rup.min-x.y.z.css
Estos ficheros son los que deben utilizarse por las aplicaciones. Las versiones individuales de cada uno
de los componentes solo deberán de emplearse en tareas de desarrollo o depuración.
5. Invocación
Este componente se invocará mediante un selector que indicará todos los elementos sobre los que se va a
aplicar el componente Combo. Por ejemplo:
$("#id_input").rup_combo (properties);
Donde el parámetro “properties” es un objeto ( var properties = {}; ) o bien directamente la declaración de lo
valores directamente. Sus posibles valores se detallan en el siguiente apartado.
6. Parámetros
A continuación se muestran los posibles parámetros de configuración que recibe el componente.
• source: este parámetro determina el tipo de combo: local o remoto y define los datos que va
a tener el combo.
o remoto se define la URL a la que se solicitan los datos a cargar:
source : "combo/remote"
Los datos devueltos por el servidor deberán seguir esta estructura JSON (el
parámetro style es opcional en caso de querer mostrar una imagen):
[
{label: "Autocomplete_es", value:"Autocomplete", style:"aaa"},
{label: "Combo_es", value:"Combo ", style:"bbb"},
{label: "Dialog_es", value:"Dialog", style:"ccc"},
...
]
o local carga los datos del fichero js desplegado como contenido estático y puede ser
de dos tipos si los literales a mostrar dependen del idioma o no:
sin dependencia: se define un array en JSON con los datos:
source : ["asp", "c", "c++", "coldfusion",
"groovy", "haskell", "java", "javascript", "perl",
"php", "python", "ruby", "scala"]
con dependencia: se define un array en JSON de objetos con su valor (value),
su literal a mostrar (i18nCaption) y su imagen en caso de tenerla (style):

source : [
{i18nCaption: "asp", value:"asp_value", style:"s_asp" },
{i18nCaption: "c", value:"c_value", style:"s_c" },
{i18nCaption: "c++", value:"c++_value", style:"s_c++" },
{i18nCaption: "coldfusion", value:"coldfusion_value",
style:"s_coldfusion " },
...
]
NOTA: Las imágenes en los combos locales sin dependencia idiomática se definen mediante el parámetro
imgs (explicado más adelante).
NOTA2: Los combos dependientes o enlazados y su configuración se explican en el apartado 10.
La internacionalización se realiza mediante el fichero de recursos definido para la aplicación que se
encontrará en la parte estática bajo codAplic/resources/codAplic.i18n.json (con sus variantes según
idioma ej: codAplic/resources/codAplic.i18n_es.json). En dicho fichero se deberá declarar un objeto
JSON cuyo nombre sea el mismo que el id del elemento HTML sobre el que se aplica el
componente. Ejemplo:
"combo" : {
"asp":"asp_es",
"c":"c_es",
"c++":"c++_es",
"coldfusion":"coldfusion_es",
"groovy":"groovy_es",
"haskell":"haskell_es",
"java":"java_es",
"javascript":"javascript_es",
"perl":"perl_es",
"php":"php_es",
"python":"python_es",
"ruby":"ruby_es",
"scala":"scala_es"
}
• sourceGroup: este parámetro se utiliza en lugar del parámetro source en aquellos combos
que se quieran agrupar elementos bajo una misma denominación. Cada elemento deberá
tener un identificador único para poder distinguir el elemento seleccionado. La fuente de los
datos puede ser local o remota (en el caso de petición retoma se deberá definir el parámetro
sourceParam):

o remoto se define la URL a la que se solicitan los datos a cargar:
sourceGroup : "combo/remoteGroup"
Los datos devueltos por el servidor deberán seguir esta estructura JSON (el
parámetro style es opcional en caso de querer mostrar una imagen):
sourceGroup : [
{"Futbol" : [
{label: "Alaves", value:"alaves", style:"aaa"},
{label: "Athletic", value:"ath", style:"bbb"},
{label: "Real Sociedad", value:"real", style:"ccc"}
]},
{"Baloncesto" : [
{label: "Caja Laboral", value:"laboral", style:"ddd"},
{label: "BBB", value:"bilbao", style:"eee"},
{label: "Lagun aro", value:"lagun aro", style:"fff"}
]},
{"Formula 1" : [
{label: "Fernando Alonso", value:"falonso"},
{label: "Lewis Hamilton", value:"hamilton"},
{label: "Sebastián Vettel", value:"vettel"}
]}
]
NOTA: Los “option groups remotos” se detallan en el apartado 9.1.
o local puede ser de dos tipos si los literales a mostrar dependen del idioma o no:
sin dependencia: se define un array en JSON con los datos:
sourceGroup : [
{"Futbol" : ["Alaves", "Athletic", "Real Sociedad"]},
{"Baloncesto" : ["Caja Laboral", "BBB", "Lagun Aro"]},

{"Formula 1" : [ "Fernando Alonso", "Hamilton",
"Vettel"]}
]
con dependencia: se define un array en JSON de objetos con su valor (value) y
su literal a mostrar (i18nCaption). El literal empleado para la cabecera del grupo
también tomará su valor del fichero de recursos:
sourceGroup : [
{"futbol" : [
{i18nCaption: "alaves", value:"alaves_value"},
{i18nCaption: "ath", value:"ath_value"},
{i18nCaption: "real", value:"real_value"}
]},
{"baloncesto" : [
{i18nCaption: "laboral", value:"laboral_value"},
{i18nCaption: "bilbao", value:"bilbao_value"},
{i18nCaption: "lagun aro", value:"lagun aro_value"}
]},
{"formula1" : [
{i18nCaption: "falonso", value:"falonso_value"},
{i18nCaption: "hamilton", value:"hamilton_value"},
{i18nCaption: "vettel", value:"vettel_value"}
]}
]
• sourceParam: en el caso de un combo remoto, deben configurarse los siguientes datos:
o label: nombre de la columna de BBDD de la que se extrae la descripción (el literal a
mostrar).
o value: nombre de la columna de BBDD de la que se extrae el valor.
o style: nombre de la columna de BBDD de la que se extrae el estilo (css) a aplicar al
dato.
Por ejemplo:
sourceParam: {
label:"desc"+$.rup_utils.capitalizedLang,
value:"code",
style:"css"
}
NOTA: En caso de utilizar una disposición horizontal para el idioma (varias columnas según
idioma) se podrá hacer uso de la función $.rup_utils.capitalizaedLang().lang que devuelve el
idioma actual (es, eu, …) capitalizado para concatenarlo al nombre de la columna y obtener
así el nombre de la columna que se desea, ej.: descEs / descEu.
• selected: indica el elemento que se seleccionará por defecto al cargarse el combo. Puede
declararse tanto un valor numérico que representa la posición del elemento en el combo
(empezando en 0) o un valor alfabético que representa el valor del elemento del combo.
Ejemplo selección posición:
selected: 6

Ejemplo selección valor:
selected: “asp_value”
• blank: se utiliza para declarar un valor independiente de la lógica del negocio. Su valor por
defecto es null. En ocasiones se representa como “Seleccione un elemento”.
Ejemplo de definición de la propiedad:
blank : "0"
Esta propiedad define el valor que va a tener dicho elemento y su descripción se recuperará
de la propiedad _blank perteneciente a la estructura JSON cuyo nombre será el
identificativo del combo. Esta estructura deberá contenerse en el fichero de literales de la
aplicación.
Ejemplo de la estructura JSON:
"combo" : {
"_blank":"[Seleccione un elemento]",
… }
En caso de no definir el literal para el elemento “_blank” se tomará el valor por defecto de
RUP (rupresourcesrup.i18n_xx.json):
"rup_combo": {
"blankNotDefined": "[Falta literal]",
… }
Si se desea sobrescribir el literal vacío para todos los combos de una aplicación
(estableciendo en todos el mismo valor) se recomienda sobrescribir el valor por defecto.
Pero no modificando directamente el fichero de recursos de RUP (ya que en posibles
actualizaciones podría perderse el cambio) si no por ejemplo desde el layoutLoader de la
aplicación:
$.rup.i18n.base.rup_combo.blankNotDefined = "----";
• width: determina el tamaño del combo. Su valor por defecto es 200 para la selección
simple. En el caso de selección múltiple su declaración es obligatoria.
• style: determina el tipo de combo a utilizar (sólo selección simple). Existen dos opciones:
dropdown y popup. El combo dropdown despliega el contenedor de opciones hacia abajo a
partir de su situación en pantalla, el combo popup en cambio despliega el contenedor de
opciones en función de la opción elegida moviendo hacia arriba o hacia abajo dicho
desplegable. Su valor por defecto es dropdown.
Ejemplo de combo dropdown:

Ejemplo de combo popup:
• maxHeight: indica el tamaño máximo en altura (sólo selección simple), que puede tomar el
desplegable del menú. Su valor por defecto es null.
• menuWidth: indica el tamaño en anchura que debe tomar el desplegable del menú (sólo
selección simple). Su valor por defecto es null.
• format: define una función que formatee los datos (sólo selección simple). Por ejemplo
sacando un combo con varias líneas por elemento:

Por defecto se incluye una función que parsea el contenido de tal manera que el combo se
visualice como e muestra en la imagen. Para lanzar esta función se pasará el parámetro
“default”. Los datos necesarios para el ejemplo son los siguientes:
source: [
"John Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer
text)",
"Jane Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer
text)",
"Joseph Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer
text)",
"Mad Doe Kiiid - 78 West Main St Apt 3A | Bloomsburg, PA 12345
(footer text)"
]
Se incluye el código de la función de parseo para mostrar la manera de implementar este
tipo de funciones:
function(text){
var findreps = [
{find:/^([^-]+) - /g, rep: '<span class="ui-selectmenu-item-
header">$1</span>'},
{find:/([^|><]+) | /g, rep: '<span class="ui-selectmenu-
item-content">$1</span>'},
{find:/([^|><()]+) (()/g, rep: '<span class="ui-
selectmenu-item-content">$1</span>$2'},
{find:/([^|><()]+)$/g, rep: '<span class="ui-selectmenu-
item-content">$1</span>'},
{find:/(([^|><]+))$/g, rep: '<span class="ui-selectmenu-
item-footer">$1</span>'}
];
for(var i in findreps){
text = text.replace(findreps[i].find, findreps[i].rep);
}

return text;
};
• imgs: define las imágenes a mostrar delante de la descripción de cada elemento (solo
combos locales sin selección múltiple). Se define una estructura JSON que será un array de
elementos cuya clave será el valor que toma el elemento del combo y cuyo valor será el
estilo a aplicar a dicho elemento. Su uso principal será aquellas combos locales no
dependientes del idioma ya que en las dependientes del idioma se puede configurar
directamente en la imagen mediante el parámetro style . A continuación se muestra un
ejemplo:
imgs : [
{Borrar: "delete"},
{Filtrar: "filter"},
{Imprimir: "print"}
]
• disabled: determina si se deshabilita el combo al ser cargado inicialmente. Su valor por
defecto es false.
• showValue: determina si el combo debe mostrar el valor asociado concatenado al literal
(sólo selección simple). Su valor por defecto es false.
• token: define el separador a utilizar cuando se muestra el valor asociado al combo
concatenado al literal. Su valor por defecto es |.
• multiValueToken: define el separador a utilizar en combos enlazados locales. Su valor por
defecto es ##. Este atributo de detalle en el apartado de combos enlazados locales (10.1).
• ordered: indica si el combo debe ordenarse. Su valor por defecto es true.
• orderedByValue: indica si el la ordenación del combo debe realizarse por el valor de los
elementos en lugar de por el texto. Su valor por defecto es false.
• i18nId: indica el identificador del objeto JSON que se utilizará para recuperar los valores de
los literales a mostrar (combos locales). En caso de no definirse se utilizará por defecto el
identificador del objeto sobre el que se aplica el combo.
• multiselect: indica si el combo permite la selección múltiple. Su valor por defecto es
false.
• multiOptgroupIconText: indica si se desea que en la selección múltiple con grupos, el
nombre del grupo tenga descripción en los iconos para seleccionar/deseleccionar los
elementos del grupo. Su valor por defecto es false.
• submitAsString: indica si el envío de los elementos seleccionados en la selección múltiple
se realiza como un literal separados por coma. Su valor por defecto es false.

• submitAsJSON: indica si el envío de los elementos seleccionados en la selección múltiple
se realiza como un array JSON donde el nombre del mapa será el nombre del combo. En el
caso de que el nombre contenga notación dot se tomará el último literal. Ej: [{id:1}, {id:2}, …].
Su valor por defecto es false y tiene prioridad sobre el submitAsString (se evalúa antes).
• rowStriping: indica si se debe aplicar un estilo diferente a las filas pares e impares para
poder distinguirlas mediante un color diferente. Su valor por defecto es false.
7. Funciones
A continuación se detallan las diferentes funciones que integran el componente Combo:
• select: selecciona el elemento enviado como parámetro. En caso de ser un numérico se selecciona
por la posición (comenzando en 0) y si es un literal se selecciona por el valor. En el caso de
selección múltiple el parámetro será un array. La invocación se realizará de la siguiente manera:
$(selector).rup_combo("select", 2); //Simple
$(selector).rup_combo("select", [0,2]); //Múltiple
• selectLabel: selecciona el elemento del combo que contiene como texto el indicado. En caso de no
existir el texto a buscar el combo no sufrirá cambios En el caso de selección múltiple el parámetro
será un array. La invocación se realizará de la siguiente manera:
$(selector).rup_combo("selectLabel", "No"); //Simple
$(selector).rup_combo("select", [‘No’, ‘Sí’]); //Múltiple
• index: devuelve el índice de la opción seleccionada en el combo (empezando en 0). En el caso de
la selección múltiple se devolverá un array. La invocación se realizará de la siguiente manera:

$(selector).rup_combo("index");
• enable: habilita el combo. La invocación se realizará de la siguiente manera:
$(selector).rup_combo("enable");
• disable: deshabilita el combo. La invocación se realizará de la siguiente manera:
$(selector).rup_combo("disable");
• isDisabled: indica si el combo está habilitado o no. La invocación se realizará de la siguiente
manera:
$(selector).rup_combo("isDisabled");
• disableChild: vacía y deshabilita el combo sobre el que se aplica así como todos los combos que
depende de él. Su uso principalmente es interno para las peticiones remotas pero se puede invocar
de la siguiente manera:
$(selector).rup_combo("disableChild");
• reload: recarga el combo sobre el que se aplica. Su uso principalmente es interno para las
peticiones remotas pero se puede invocar de la siguiente manera:
$(selector).rup_combo("reload");
• order: ordena alfanumericamente y en orden ascendente el combo sobre el que se aplica. Recibe
dos parámetros: el primero indica si la búsqueda es por texto (por defecto) o si la búsqueda es por el
valor; el segundo indica el valor del texto independiente de la lógica de negocio para que se omita
en la ordenación. Se invoca por defecto al cargarse los combos a no se que se cambie el valor del
atributo ordered en la creación. A continuación se muestra un ejemplo de cómo invocar la función:
$(selector).rup_combo("order", false, -1);
• getRupValue: método utilizado para obtener el valor del componente. Este método es el utilizado
por el resto de componentes RUP para estandarizar la obtención del valor del combo.
$(selector).rup_combo("getRupValue");
• setRupValue: método utilizado para asignar el valor al componente. Este método es el utilizado por
el resto de componentes RUP para estandarizar la asignación del valor al Autocomplete.
$(selector).rup_combo("setRupValue",value);

• clear: método que limpia el valor seleccionado en el combo. En el caso de selección múltiple los
valores seleccionados.
$(selector).rup_combo("clear");
• value: método que devuelve el valor seleccionado en el combo. En caso de ser el valor vació, o sin
selección, el valor devuelto es el asociado al “blank”. En el caso de la selección múltiple se
devolverá un array.
$(selector).rup_combo("value");
• label: método que devuelve el label asociado al valor seleccionado en el combo. En el caso de la
selección múltiple se devolverá un array.
$(selector).rup_combo("label");

8. Eventos
A continuación se detallan los eventos asociados al componente:
• open: permite asociar una función que se ejecutará cuando se muestre el desplegable del combo.
Se configura de la siguiente manera:
$(selector).rup_combo({ open: function(){...} });
• change: permite asociar una función que se ejecutará cuando se cambie el elemento seleccionado
en el combo. Se configura de la siguiente manera:
$(selector).rup_combo({ change: function(){...} });
• select: permite asociar una función que se ejecutará cuando se seleccione un valor del combo. Se
configura de la siguiente manera:
$(selector).rup_combo({ select: function(){...} });
• close: permite asociar una función que se ejecutará cuando se oculte el desplegable del combo. Se
configura de la siguiente manera:
$(selector).rup_combo({ close: function(){...} });
• onLoadSucces: permite asociar una función de callBack que se ejecuta al producirse un error en la
petición AJAX de carga remota. Se configura de la siguiente manera:
$(selector).rup_combo({onLoadSucces: function(){...} });

9. Comunicación remota
El componente Combo permite recuperar los datos almacenados en base de datos. En el método del
controller que recibe la petición se invocará al servicio encargado de recuperar los datos. Como no se va a
realizar ningún filtrado por algún campo de la entidad ni se requiere de paginación, los parámetros serán
null, null:
@RequestMapping(value = "combo/remote", method=RequestMethod.GET)
public @ResponseBody List<Patrones> getRemoteCombo(){
return patronesService.findAll(null, null);
}
El método devuelve una lista de entidades en este caso List<Patrones> donde cada entidad tendrá todos y
cada uno de los atributos cargados con los valores de la Base de Datos. Al devolver la lista con la anotación
@ResponseBody, entrará en funcionamiento Jackson (parseador de JSON de Spring) para convertir la lista
JAVA en una lista JSON:
• JAVA:
patronesList :
patronesList [0] code = Autocomplete
descEs = Autocomplete_es
descEu = Autocomplete_eu
css = filter
patronesList [1] code = Combo
descEs = Combo_es
descEu = Combo_eu
css = print
…
• JSON:
[
{code="Autocomplete", descEs="Autocomplete_es",
descdescEu="Autcomplete_eu", css="filter" },
{code="Combo", descEs="Combo_es",
descEu="Combo_eu", css="print" },
…
]
Como se ha explicado en anteriormente en el atributo source en el apartado 8 (propiedades) el componente
requiere de una estructura de terminada para cargar el combo:
[
{label: "Autocomplete_es", value:"Autocomplete", style:"aaa"},
{label: "Combo_es", value:"Combo ", style:"bbb"},
{label: "Dialog_es", value:"Dialog", style:"ccc"},
...
]

La traducción entre la estructura devuelta por el controller y la que espera el componente se realiza
mediante un serializador propio de UDA. Para que este entre en funcionamiento simplemente se deberá
configurar el fichero mvc-config del WAR (/xxxWAR/WebContent/WEB-INF/spring/mvc-config.xml)
indicando que el modelo utilizado utilice el serializador de UDA:
<bean id="jacksonJsonCustomSerializerFactory"
class="com.ejie.x38.serialization.CustomSerializerFactoryRegistry">
<property name="serializers">
<map>
<entry key="com.ejie.x21a.model.Patrones" value-ref="customSerializer" />
...
</map>
</property>
</bean>
NOTA: Al generar el código con el plugin de UDA, se añade este serializador para todos los objetos del
modelo creados.
9.1. Option Groups Remotos
El uso de “option groups remotos” requiere de un pequeño esfuerzo por parte del desarrollador ya que se
deben recuperar los diferentes grupos a incluir en el combo invocando a sus respectivos servicios y
agruparlos en la estructura que espera el componente Combo. Ejemplo:
[
{"Futbol" : [
{label: "Alaves", value:"alaves", style:"aaa"},
{label: "Athletic", value:"ath", style:"bbb"},
{label: "Real Sociedad", value:"real", style:"ccc"}
]},
{"Baloncesto" : [
{label: "Caja Laboral", value:"laboral", style:"ddd"},
{label: "BBB", value:"bilbao", style:"eee"},
{label: "Lagun aro", value:"lagun aro", style:"fff"}
]},
{"Formula 1" : [
{label: "Fernando Alonso", value:"falonso"},
{label: "Lewis Hamilton", value:"hamilton"},
{label: "Sebastián Vettel", value:"vettel"}
]}
]
El método encargado de recuperar los datos devolverá una lista que contiene un mapa por cada uno de los
grupos. Dicho mapa, tendrá como clave el literal a mostrar en la cabecera del grupo y como valor una lista
de entidades. La lista de entidades se traducirá a la estructura que espera el componente mediante el
serializador de UDA explicado en el apartado anterior.
A continuación se muestra un ejemplo de cómo debería ser el controller encargado de devolver un “option
group remoto” en el que se cargarán las entidades de Provincia, Comarca, Localidad y Patrones:
@RequestMapping(value = "combo/remoteGroup", method=RequestMethod.GET)

public @ResponseBody List<HashMap<String, List<?>>>
getRemoteComboGrupos(){
//Idioma
Locale locale = LocaleContextHolder.getLocale();
//Retorno del método
List<HashMap<String, List<?>>> retorno = new
ArrayList<HashMap<String, List<?>>>();
//Nombres de los grupos según idioma
String provincia = null, comarca = null,
localidad = null, patrones = null;
if (com.ejie.x38.util.Constants.EUSKARA.equals(
locale.getLanguage()))
{
provincia = "Provincia_eu";
comarca = "Comarca_eu";
localidad = "Localidad_eu";
patrones = "Patrones_eu";
} else {
provincia = "Provincia";
comarca = "Comarca";
localidad = "Localidad";
patrones = "Patrones";
}
//Provincia
HashMap<String, List<?>> group = new HashMap<String, List<?>>();
group.put(provincia, provinciaService.findAll(null, null));
retorno.add(group);
//Comarca
group = new HashMap<String, List<?>>();
group.put(comarca, comarcaService.findAll(null, null));
retorno.add(group);
//Localidad
group.put(localidad, localidadService.findAll(null, null));
retorno.add(group);
//Patrones
group.put(patrones, patronesService.findAll(null, null));
retorno.add(group);
return retorno;
}

Un ejemplo de la respuesta devuelta por este método del controlador sería la siguiente:
[
{"Provincia_eu":[
{"style":"","value":"1","label":"Araba"},
{"style":"","value":"2","label":"Bizkaia"},
{"style":"","value":"3","label":"Gipuzkoa"}
]},
{"Comarca_eu":[
{"style":"","value":"3","label":"A-Zona3"},
{"style":"","value":"9","label":"Ezkerraldea"},
{"style":"","value":"8","label":"Eskumaldea"},
{"style":"","value":"7","label":"Bilbo Haundia"},
{"style":"","value":"6","label":"G-Zona3"},
{"style":"","value":"5","label":"G-Zona2"},
{"style":"","value":"4","label":"G-Zona1"}
]},
{"Localidad_eu":[
{"style":"","value":"3","label":"Galdakao"},
{"style":"","value":"2","label":"Basauri"},
{"style":"","value":"1","label":"Bilbo"},
{"style":"","value":"6","label":"Getxo"},
{"style":"","value":"5","label":"Areeta"},
{"style":"","value":"4","label":"Leioa"},
{"style":"","value":"9","label":"Barakaldo"},
{"style":"","value":"8","label":"Portugalete"},
{"style":"","value":"7","label":"Sestao"}]},
{"Patrones_eu":[
{"style":"filter","value":"Autocomplete","label":"Autocomplete_eu"},
{"style":"print","value":"Combo","label":"Combo_eu"},
{"style":"delete","value":"Dialog","label":"Dialog_eu"},
{"style":"filter","value":"Feedback","label":"Feedback_eu"},
{"style":"print","value":"Grid","label":"Grid_eu"},
{"style":"delete","value":"Maint","label":"Maint_eu"},
{"style":"filter","value":"Menu","label":"Menu_eu"},
{"style":"print","value":"Message","label":"Message_eu"},
{"style":"delete","value":"Tabs","label":"Tabs_eu"},
{"style":"filter","value":"Toolbar","label":"Toolbar_eu"},
{"style":"print","value":"Tooltip","label":"Tooltip_eu"}
]}
]

10. Combos enlazados
Mediante el uso del componente Combo, se pueden encadenar dos o más combos de tal manera que los
valores que se cargarán en uno dependan directamente del valor seleccionado en el otro. Es decir, crear
combos enlazados (también conocidos como combos dependientes).
Estos combos enlazados, pueden ser tanto locales o remotos. Para indicar que un combo depende
directamente del valor de otro se utilizará el atributo parent, que será un array con los identificador(es) del
padre(s). Veamos un ejemplo:
parent: [ "departamento", "provincia" ],
Las dependencias entre los combos pueden encadenarse de tal manera que se tenga un combo que
depende de otro combo que a su vez depende de otro combo y así sucesivamente (incluso se pueden
combinar combos locales con remotos indistintamente). Además es posible que un combo dependa a su vez
de dos combos o más y no se cargará ni se activará hasta que todos sus padres hayan tomado un valor
determinado.
Al ser combos enlazados, si un combo elimina su selección (elige la opción por defecto “Seleccione un
elemento” o elige una opción de cuyo valor no dependa ningún dato) todos sus combos hijos se vaciarán y
se deshabilitarán. Además si un combo se deshabilita (o se inicializa deshabilitado), todos sus hijos se
cargarán pero se mostrarán deshabilitados.
A continuación veremos como se configuran/utilizan los combos enlazados locales y los remotos:
10.1. Local
Cuando se desea utilizar el componente Combo enlazando datos locales se deben realizar una serie de
configuraciones que se detallan a continuación:
1. La propiedad source del combo hijo, debe tener la siguiente estructura:
source: {"v1":[xxx], "v2":[yyy], "v3":[zzz] }
v1, v2, v3 : posible valor seleccionable en el combo padre
[xxx], [yyy], [zzz] : estructura que posee un combo no dependiente (ver atributo o).
2. El combo hijo debe indicar en su configuración que depende del combo padre mediante la propiedad
parent:
parent: [ "comboPadre" ]
10.2. Remoto
Cuando se desea utilizar el componente Combo enlazando datos remotos, se deben realizar una serie de
configuraciones que se detallan a continuación:
1. El combo padre debe incluir en su código HTML el atributo name que define el nombre del
parámetro que se va a enviar en la petición de carga del combo dependiente.

2. El combo hijo debe indicar en su configuración que depende del combo padre mediante la propiedad
parent.
3. El método del controller que recibe la petición de carga del hijo, contendrá en su signatura el atributo
con el valor seleccionado en el combo padre y se utilizará como filtro en la búsqueda de datos.
4. Configurar el serializador de UDA.
Código HTML:
• El combo padre debe definir el nombre del parámetro en la petición de carga del combo hijo:
<select id="comboPadreRemoto" name="provincia" class="rup-combo"></select>
• El combo hijo:
<select id="comboHijoRemoto" class="rup-combo"></select>
Configuración js:
• El combo padre:
$('#comboPadreRemoto').rup_combo({
source : "comboEnlazado/remoteEnlazadoProvincia",
...
});
• El combo hijo debe indicar cual/cuales son sus padre/s:
$('#comboHijoRemoto').rup_combo({
parent: [ "comboPadreRemoto" ],
source : "comboEnlazado/remoteEnlazadoComarca",
...
})
Controller:
• El método para la petición del combo padre:
@RequestMapping(value = "comboEnlazado/remoteEnlazadoProvincia",
method=RequestMethod.GET)
public @ResponseBody List<Provincia> getEnlazadoProvincia() {
return provinciaService.findAll(null, null);
}
• El método para la petición del combo hijo debe declarar el parámetro donde se recibe el elemento
seleccionado en el padre:
@RequestMapping(value = "comboEnlazado/remoteEnlazadoComarca",
method=RequestMethod.GET)
public @ResponseBody List<Comarca> getEnlazadoComarca(
@RequestParam(value = "provincia", required = false)
BigDecimal provincia_code) {

//Convertir parámetros en entidad para búsqueda
Provincia provincia = new Provincia();
provincia.setCode(provincia_code);
Comarca comarca = new Comarca();
comarca.setProvincia(provincia);
return comarcaService.findAll(comarca, null);
}
Serializador:
Se indica que las entidades utilizadas se serialicen en el retorno del controller a la JSP:
<map>
<entry key="com.ejie.x21a.model.Provincia" value-ref="customSerializer" />
<entry key="com.ejie.x21a.model.Comarca" value-ref="customSerializer" />
...
</map>
</property>
</bean>
11. Precarga de datos
La recuperación los datos proporcionados por el servidor de aplicaciones, se realiza mediante una petición
AJAX. Con el objeto de minimizar el número de peticiones realizadas por el componente combo, se posibilita
el realizar una precarga de los datos que va a presentar el combo sin necesidad de realizar la primera
petición AJAX.
Se proporcionan dos mecanismos para permitir realizar la carga inicial de los datos del combo:
11.1. Carga a partir del elemento HTML select
En este caso el componente combo toma los valores existentes en los <option> del elemento select como
valores a precargar. En el caso de que el componente deba de actualizar los datos en base a una acción del
usuario, se realizará mediante una petición AJAX.
A continuación se muestra un ejemplo de la implementación que se debería de realizar para que una
invocación al componente combo utilice los datos existentes en un combo HTML para inicializarse.
Suponemos que se desea cargar en un componente RUP combo, los datos de provincias. En el controller
que realizará la navegación a la entrada del tiles correspondiente se realiza lo siguiente:
@RequestMapping(value = "maint", method = RequestMethod.GET)
public String getMaint(Model model) {
List<Provincia> listaProvincias = provinciaService.findAll(null, null);

model.addAttribute("provincias",listaProvincias);
return "maint";
}
La ejecución de este método del controller añadirá al atributo provincia del model la lista de provincias
obtenidas a partir de la consulta a base de datos. Esto nos permitirá realizar la carga de datos del combo en
la jsp.
El siguiente paso es implementar en la jsp el combo HTML en el que se van a cargar los datos. Estos datos
serán los utilizados para inicializar el componente RUP combo.
<form:select path="provincia.id" class="formulario_linea_input" id="provincia" >
<form:options items="${provincias}" itemLabel="dsO" itemValue="id"/>
</form:select>
Por último se deberá de realizar la invocación del componente RUP combo en el fichero js correspondiente a
la página.
jQuery("#provincia").rup_combo({
source : "../provincia",
sourceParam : {label:"dsO", value:"id"},
width : 400,
blank : "",
loadFromSelect:true
});
La invocación del componente se realizará de modo normal, indicando mediante el parámetro source una
URL mediante la cual se podrá realizar una recarga de los datos. Entre los parámetros de configuración se
debe de indicar mediante loadFromSelect:true que se utilice el contenido del combo HTML para la
inicialización del componente.
11.2. Carga a partir de un objeto JSON
De manera alternativa se puede proporcionar al componente de los datos con los que debe de inicializarse
mediante un objeto JSON. Este objeto puede ser inicializado directamente o generado dinámicamente tanto
en cliente como en el servidor de aplicaciones. El objeto json debe consistir en un array

12. Sobreescritura del theme
El componente combo se presenta con una apariencia visual definida en el fichero de estilos
theme.rup.combo-x.y.z.css.
Si se quiere modificar la apariencia del componente, se recomienda redefinir el/los estilos necesarios en un
fichero de estilos propio de la aplicación situado dentro del proyecto de estáticos
(codAppStatics/WebContent/codApp/styles).
Los estilos del componente se basan en los estilos básicos de los widgets de jQuery UI, con lo que los
cambios que se realicen sobre su fichero de estilos manualmente o mediante el uso de la herramienta
Theme Roller podrán tener repercusión sobre todos los componentes que compartan esos mismos estilos
(pudiendo ser el nivel de repercusión general o ajustado a un subconjunto de componentes).
Ejemplo base de la estructura generada por el componente para selección simple:
<a aria-owns=" id-menu" aria-haspopup="true" tabindex="0" href="#" role="button"
id=" id-button" class="ui-selectmenu ui-widget ui-state-default ui-selectmenu-
dropdown ui-corner-all" style="width: 300px;"
aria-disabled="false">
<span class="ui-selectmenu-status">item1</span>
<span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span>
</a>

<ul id="speedA_menu_318" role="menu" aria-labelledby="speedA_button_318"
class="ui-selectmenu-menu ui-widget ui-widget-content ui-corner-all ui-
selectmenu-menu-popup ui-selectmenu-open" style="width: 147px; left: 184.017px;
top: 136.95px;">
<li class="whoo ui-corner-top ui-selectmenu-item-selected ui-state-active">
<a aria-selected="true" role="option" tabindex="-1" href="#">item1</a>
</li>
<li>
<a aria-selected="false" role="option" tabindex="-1" href="#">item2</a>
</li>
<li>
<a aria-selected="false" role="option" tabindex="-1" href="#">item3</a>
</li>
</ul>
Ejemplo base de la estructura generada por el componente para selección simple:
<button type="button"
class="ui-multiselect ui-widget ui-state-default ui-corner-all ui-
state-active"
aria-haspopup="true" style="width: 406px;"
aria-disabled="false">
<span class="ui-icon ui-icon-triangle-1-s"></span>
<span>2 seleccionado(s)</span>

</button>

<div id="rup-multiCombo_multicombo"
class="ui-multiselect-menu ui-widget ui-widget-content ui-corner-all"
style="width: 398px; top: 291.9px; left: 63.15px; display: block;">
<div class="ui-widget-header ui-corner-all ui-multiselect-header
ui-helper-clearfix">
<ul class="ui-helper-reset">
<li>
<a href="#" class="ui-multiselect-all"
oldtitle="Seleccionar todos los elementos" aria-
describedby="ui-tooltip-4">
<span class="ui-icon ui-icon-check"></span>
<span>Seleccionar todo</span>
</a>
</li>
<li>
<a href="#" class="ui-multiselect-none"
oldtitle="Deseleccionar todos los elementos" aria-
describedby="ui-tooltip-5">
<span class="ui-icon ui-icon-closethick"></span>
<span>Deseleccionar todo</span>
</a>
</li>
<li class="ui-multiselect-close">
<a class="ui-multiselect-close" href="#">
<span class="ui-icon ui-icon-circle-close"></span>
</a>
</li>
</ul>
</div>
<ul class="ui-multiselect-checkboxes ui-helper-reset"
style="height: 175px;">
<li class=" ">
<label class="ui-corner-all" title=""
for="ui-multiselect-multicombo-option-0">
<input type="checkbox" checked="checked" title="ruby"
value="ruby_value" name="multiselect_multicombo"
id="ui-multiselect-multicombo-option-0">
<span>ruby</span>
</label>
</li>
...
</ul>
</div>
Estilos para colorear elementos pares e impares:
.rup-combo_odd Elementos impares
.rup-combo_even Elementos pares
.rup-combo_groupOdd Cabecera de grupo impar
.rup-combo_groupEven Cabecera de grupo par

13. Integración con UDA
En el caso de que el componente combo utilice datos obtenidos de una fuente remota, la comunicación con
el servidor de aplicaciones se realizaría del siguiente modo:
El componente Combo necesita que los datos remotos que le son servidos sigan la siguiente estructura:
[
{"style":"print","value":"1","label":"Alava"},
{"style":"print","value":"2","label":"Vizcaya"},
{"style":"print","value":"3","label":"Gipuzcoa"}]
...
]
Para este fin, el componente envía en la petición una cabecera de RUP con la información necesaria para
realizar la serialización.
{"label":"descEs","value":"code","style":"css"}
Para realizar la serialización de los datos enviados como respuesta desde el servidor, se deberá de
configurar el serializador de UDA para que genere la estructura JSON correcta para que el componente
presente los datos.
<map>
<entry key="com.ejie.x21a.model.Provincia" value-ref="customSerializer" />
</map>
</property>
</bean>
En el serializador deberá de declararse el model correspondiente a los datos que se envían desde el
servidor.

UDA-Componentes RUP. Combo (v2.1.1 deprecado)

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a UDA-Componentes RUP. Combo (v2.1.1 deprecado)

Similar a UDA-Componentes RUP. Combo (v2.1.1 deprecado) (20)

Más de Ander Martinez

Más de Ander Martinez (17)

Último

Último (20)

UDA-Componentes RUP. Combo (v2.1.1 deprecado)