UDA-Componentes RUP. Combo
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

UDA-Componentes RUP. Combo

  • 276 views
Uploaded on

UDA-Utilidades de desarrollo de aplicaciones ...

UDA-Utilidades de desarrollo de aplicaciones
• UDA-Componentes RUP. Combo

http://code.google.com/p/uda/

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
276
On Slideshare
276
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 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
  • 2. 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.
  • 3. 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:
  • 4. 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
  • 5. Componentes RUP – Combo v/30
  • 6. 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.
  • 7. Componentes RUP – Combo 7/30 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
  • 8. Componentes RUP – Combo 8/30 • 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):
  • 9. Componentes RUP – Combo 9/30 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):
  • 10. Componentes RUP – Combo 10/30 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"]},
  • 11. Componentes RUP – Combo 11/30 {"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
  • 12. Componentes RUP – Combo 12/30 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:
  • 13. Componentes RUP – Combo 13/30 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:
  • 14. Componentes RUP – Combo 14/30 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); }
  • 15. Componentes RUP – Combo 15/30 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.
  • 16. Componentes RUP – Combo 16/30 • 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:
  • 17. Componentes RUP – Combo 17/30 $(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);
  • 18. Componentes RUP – Combo 18/30 • 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");
  • 19. Componentes RUP – Combo 19/30 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(){...} });
  • 20. Componentes RUP – Combo 20/30 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"}, ... ]
  • 21. Componentes RUP – Combo 21/30 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)
  • 22. Componentes RUP – Combo 22/30 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; }
  • 23. Componentes RUP – Combo 23/30 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":"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"} ]} ]
  • 24. Componentes RUP – Combo 24/30 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.
  • 25. Componentes RUP – Combo 25/30 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) {
  • 26. Componentes RUP – Combo 26/30 //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);
  • 27. Componentes RUP – Combo 27/30 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
  • 28. Componentes RUP – Combo 28/30 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> <!-- at end of body--> <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>
  • 29. Componentes RUP – Combo 29/30 </button> <!-- at end of body--> <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
  • 30. Componentes RUP – Combo 30/30 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.