UDA-Componentes RUP. Combo

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:"c cc"} ]}, {"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 Socied ad"]}, {"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_val ue"} ]}, {"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 (rup\resources\rup.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 | Bloomsbur g, 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", s tyle:"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:"cc c"} ]}, {"Baloncesto" : [ {label: "Caja Laboral", value:"laboral", style:" ddd"}, {label: "BBB", value:"bilbao", style:"eee"}, {label: "Lagun aro", value:"lagun aro", style:"f ff"} ]}, {"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 = new HashMap<String, List<?>>(); group.put(localidad, localidadService .findAll( null , null )); retorno.add(group); //Patrones group = new HashMap<String, List<?>>(); 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":"2","label":"A-Zona2"}, {"style":"","value":"1","label":"A-Zona1"}, {"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":"A utocomplete_eu"}, {"style":"print","value":"Combo","label":"Combo_eu" }, {"style":"delete","value":"Dialog","label":"Dialog_ eu"}, {"style":"filter","value":"Feedback","label":"Feedb ack_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":"Toolba r_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:

<bean id ="jacksonJsonCustomSerializerFactory" class ="com.ejie.x38.serialization.CustomSerializerFactoryRegistry"> < property name="serializers"> <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.

<bean id ="jacksonJsonCustomSerializerFactory" class ="com.ejie.x38.serialization.CustomSerializerFactoryRegistry"> < property name="serializers"> <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

Technology

Transcript of UDA-Componentes RUP. Combo