uda-componentes rup. tabla (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

Componente RUP – Tabla

Fecha: 09/01/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 – Tabla ii/25

Control de documentación

Título de documento: Componentes RUP – Tabla

Histórico de versiones

Código: Versión: Fecha: Resumen de cambios:

1.0.0 06/06/2011 Primera versión.

1.0.1 25/06/2011 Correcciones en las propiedades de configuración del componente.

1.0.2 18/07/2011 Actualización de las capturas de pantalla. Se han completado las descripciones de las propiedades de configuración del componente.

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.1 22/02/2012 Inclusión de gestión de eventos.

Diseño líquido (parámetro: fluidBaseLayer).

2.0.0 11/07/2012

Nuevos métodos públicos.

Ajustes necesarios para adaptarse a las nuevas funcionalidades de la versión v2.0.0.

2.1.0 18/09/2012 Actualización de las versiones de las librerías JavaScript subyacentes.

2.1.1 09/01/2013

Nuevas propiedades de configuración del componente: fluidOffset, minWidth, maxWidth, tooltipDelay.

Modificación de estilos para colorear líneas pares o impares (establecer por defecto).

Cambios producidos desde la última versión

Nuevas propiedades de configuración del componente: fluidOffset, minWidth, maxWidth, tooltipDelay. Modificación de estilos para colorear líneas pares o impares (establecer por defecto).

Control de difusión

Componentes RUP – Tabla iii/25

Responsable: Ander Martínez

Aprobado por:

Firma: Fecha:

Distribución:

Referencias de archivo

Autor:

Nombre archivo:

Localización:

Componentes RUP – Tabla iv/25

Contenido

Capítulo/sección Página

1. Introducción 5

2. Ejemplo 5

3. Casos de uso 5

4. Infraestructura 6

4.1. Ficheros 6

4.2. Dependencias 6

5. Invocación 7

6. Definición del componente 9

6.1. Propiedades 9

6.2. Propiedades del colModel 13

6.3. Métodos 15

6.4. Eventos 16

7. Sobreescritura del theme 18

8. Internacionalización (i18n) 19

9. Integración con UDA 24

Componentes RUP – Tabla 5/25

1. Introducción

La descripción del componente Tabla visto desde el punto de vista de RUP es la siguiente:

Se les presenta a los usuarios los datos tabulados para que la información se visualice de manera ágil y rápida, facilitando así su comprensión y manejo.

2. Ejemplo

Se muestra a continuación una maquetación típica del componente:

3. Casos de uso

Se aconseja la utilización de este componente:

• Cuando se tenga que presentar a los usuarios filas de datos y se desee facilitar la búsqueda de datos.


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.grid-x.y.z.js

Ruta theme: rup/basic-theme/

Fichero de estilos: theme.grid-x.y.z.css (modificable por el desarrollador) y ui.jqgrid.css (fichero base de los estilos de la tabla)

Ruta fichero de recursos: rup/resources/rup.i18n_idioma.json

4.2. Dependencias

El desarrollo de los patrones como plugins basados en la librería JavaScript jQuery hace necesaria la inclusión de esta dependencia. La versión elegida para el desarrollo ha sido la versión 1.8.0. Un posible cambio de versión podría no ser trivial y la versión utilizada no debe seleccionarse arbitrariamente. La razón es que el cambio podría provocar errores de funcionamiento e incompatibilidad tanto con los propios patrones como con algunos plugins basados en jQuery.

• jQuery 1.8.0: http://jquery.com/

La gestión de ciertas partes visuales de los patrones, 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

• rup.base-x.y.z.js

• rup.grid-x.y.z.js

• jQGrid 4.4.0: http://www.trirand.com/blog/

• Ejemplos online: http://www.trirand.com/blog/jqgrid/jqgrid.html


5. Invocación

El componente tabla se invocará mediante un selector de jQuery que indicará el elemento sobre el que se va a aplicar. Por ejemplo:

$( "#id_elemento" ).rup_grid(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.

El componente se aplica sobre un elemento table a partir del cual se generarán las estructuras necesarias para el funcionamiento del mismo, de acuerdo a las propiedades de configuración especificadas. Un ejemplo de utilización del componente sería el siguiente:

1. Se define el elemento table sobre el que se va a aplicar el componente.

<table id ="grid_usuarios" cellpadding ="0" cellspacing ="0"> <tbody ><tr ><td > </ td ></ tr ></ tbody > </ table >

2. Se define la capa que va a contener los controles de la paginación.

<div id ="pager"></ div >

3. Se invoca el componente.

$( "#grid_usuarios" ).rup_grid({ url: "../patrones/usuario" , width: 650, pagerName: "pager" ,

colNames:[ $.rup.i18n.app.grid_usuarios.id, $.rup.i18n.app.grid_usuarios.nombre, $.rup.i18n.app.grid_usuarios.apellido1, $.rup.i18n.app.grid_usuarios.apellido2, $.rup.i18n.app.grid_usuarios.ejie, $.rup.i18n.app.grid_usuarios.fechaAlta, $.rup.i18n.app.grid_usuarios.fechaBaja ],

colModel: [ { name: "id" , index: "id" }, { name: "nombre" , index: "nombre" }, { name: "apellido1" , index: "apellido1" }, { name: "apellido2" , index: "apellido2" }, { name: "ejie" , index: "ejie" , editoptions: { defaultValue: "0" , value:{ "1" : "Sí" , "0" : "No" } }, formatter: "select"


}, { name: "fechaAlta" , index: "fechaAlta" }, { name: "fechaBaja" , index: "fechaBaja" } ]

});


6. Definición del componente

6.1. Propiedades

Para poder definir una tabla se deberán rellenar las siguientes propiedades del componente adecuándolo según sus necesidades:

• loadOnStartUp : Indica si se cargará la tabla a la hora de crearlo o se deberá invocar al reloadGrid para cargarlos.

• hasMaint : (Por defecto a false) Propiedad exclusiva cuando se usa la tabla con el mantenimiento, la cual deberá estar a true para que el mantenimiento sea capaz de cargar la tabla haciendo uso del formulario de búsqueda.

• autoencode : Todas las peticiones y envíos de datos se realizan encodeadas.

• autowidth : Establece si la anchura de la tabla es automática (sumando cada una de las propiedades width de las columnas).

• caption : Establece un título a la tabla. Esta propiedad esta deshabilitada por defecto puesto que las tablas no tienen cabecera.

• cellLayout : Establece las propiedades “padding” y “border” de las celdas. Por defecto está a 5.

• cellEdit : Habilita o deshabilita la edición en las celdas.

• cellsubmit : Determina si el guardar los datos de la celda se hace de manera local “clientArray” o de forma remota “remote”.

• cellurl : En caso de que la opción de guardar los datos se haga de manera remota (cellsubmit = remote), este parámetro indica la url donde se lanzarán las peticiones.

• colModel : Establece el modelo de las filas definiendo el ancho y el índice de cada una de las columnas.

• colNames : Establece el nombre de las columnas. Es el texto que aparece en la cabecera de cada columna de la tabla.

• datatype : Define el formato de los datos que se le pasan a la tabla. A continuación se definen los diferentes tipos:

o JSON: Opción por defecto. Los datos se pasan en formato JSON.

o Xmlstring: Origen de datos en una variable local en formato XML.

o JsonString: Origen de datos en una variable local con unJSON formateado en forma de string.

o XML: Origen de datos en XML


o local o clientSide: Origen de datos en una variable local.

o script: Origen de datos en un código javascript.

o function(): Origen de datos devuelto por una función.

o deselectAfterSor: Solo aplicable cuando el tipo de datos sea local. Deselecciona la fila después de hacer una ordenación.

• datastr : En caso que la propiedad datatype sea xmlstring o jsonstring, define el string de datos para formar la tabla.

• direction : Indica la dirección del texto en la tabla:

o Rtl : Indica de derecha a izquierda

o Ltr: Indica de izquierda a derecha (Opción por defecto)

• editurl : Url para guardar los datos en caso de que la tabla sea editable.

• emptyrecords : Mensaje que se visualiza cuando la llamada a una tabla no devuelve ningún dato.

• expandColClick : Indica si se expande o contrae la columna haciendo un clic en la misma.

• expandColumn : Indica la columna que se expande o contrae cuando se redimensiona la tabla.

• fluidOffset : Desfase de anchura que se aplica en el diseño líquido respecto de la capa contenedora.

• forceFit : Indica si se fuerza a la tabla a visualizarse en cierta zona de pantalla haciendo que las columnas se contraigan o expandan a tal efecto.

• gridstate : Determina el estado de la tabla:

o visible: Si está visible

o hidden: Si está oculto

• height : Indica la altura del gris.

• hiddengrid : Si esta propiedad se informa a true, la tabla no se carga ni visualiza hasta hacer un show. Útil cuando la carga de la tabla se hace bajo demanda.

• hidegrid : Habilita o deshabilita la opción de ocultar la tabla mediante un botón.

• hoverrows : Habilita o deshabilita la opción de resaltar el contenido de las filas al pasar por encima con el ratón.

• jsonReader : Un array que indica la estructura de los datos json que se espera.

• lastpage : Devuelve el número de páginas que devuelve la consulta para rellenar la tabla.

• lastsort : Devuelve el índice de la columna por el que se está haciendo la ordenación.


• loadonce : Indica si la tabla se carga una sola vez o no.

• loadtext : Indica el texto que aparece mientras se está cargando la tabla. Por defecto, la arquitectura deshabilita este texto puesto que para ello se introduce el control de espera.

• minWidth : Límite mínimo de anchura que se tendrá en cuenta a la hora de aplicar el diseño líquido.

• maxWidth : Límite máximo de anchura que se tendrá en cuenta a la hora de aplicar el diseño líquido.

• mtype : Define si las llamadas AJAX que se lanzan son de tipo POST o GET.

• multikey : Si la tabla está en modo multiselección, define si se pueden utilizar las teclas CONTROL, ALT o SHIFT para la selección de los registros similar al comportamiento de Windows en la selección de ficheros.

• multiboxonly : Indica si en el modo multiselección se podrá seleccionar la fila únicamente haciendo clic en el check que introduce de forma automática, o en cualquier punto de la fila.

• multiselect : Indica si la tabla está en modo multiselección o no.

• multiselectWidth : Determina la anchura de la columna del check cuando la tabla está en modo multiselección.

• page : Indica el número de registros al hacer la paginación.

• pagerInline : Determina si la barra de paginación se debe de mostrar en una línea o en dos. Por defecto true.

• pagerName : Indica el elemento HTML que contiene la paginación de resultados de la tabla.

• pagerpos : Indica la posición del elemento de paginación.

• prmNames : Indica el nombre de los parámetros que se pasan en cada una de las llamadas que hace la tabla. Estos valores por defecto son los siguientes:

o page: Indica la página actual

o rows: Indica el número de líneas a devolver

o sort: Indica el índice de la columna por el que hacer la ordenación

o order: Indica si la ordenación es ascendente o descendente

• postData : El array de información que se envía al servidor en cada una de las peticiones que se realizan. Es el método recomendado para enviar parámetros extra al servidor. Un ejemplo sería el siguiente:

$(“#grid_usuarios”).rup_grid({ … postData:{filterParam:’1’}, });

• recordpos : Determina la posición del número de registros en la capa de paginación.


• records : Devuelve el número de registros de la tabla.

• recordtext : Determina el texto a visualizar en el número de elementos de la tabla.

• resizeclass : Define un class diferente para las columnas que puedan ser redimensionadas.

• rownumbers : Si se define la propiedad aparece una nueva columna en la tabla indicando el número de línea en cada fila.

• rowNum : Define el número de elementos en cada página de la tabla.

• rownumWidth : Indica la anchura de la columna si rownumbers = true.

• scroll : Indica si poner o no scroll a la tabla.

• scrollOffset : Indica la anchura de la nueva columna de scroll.

• selarrrow : Devuelve un array con los números de filas seleccionados si la tabla es multiselección.

• selrow : Devuelve el número de fila seleccionada.

• shrinkToFit : Define si la tabla debería de contraerse para encajar en la anchura definida en la propiedad width.

• sortable : Indica si la tabla es ordenable o no.

• sortname : Indica el nombre de la columna por el que ordenar la primera vez que se carga la tabla.

• sortorder : Indica el orden (ascendente o descendente) de la columna por la que ordenar la tabla en su primera carga.

• tooltipDelay : Tiempo de espera en milisegundos que se demorará la visualización de los tooltip de ayuda. Valor por defecto 500.

• totaltime : Devuelve el tiempo total que tarda la tabla en cargarse.

• url : Define la url a través de la cual se carga la tabla.

• viewrecords : Indica si se visualizan el número de registros totales de la tabla.

• viewsortcols : Indica si se visualizan o no las imágenes en las cabeceras de las columnas para realizar la ordenación de la tabla.

• width : Define la anchura de la tabla. En caso de especificarse el valor auto, se aplicará un diseño líquido. Valor por defecto auto.

• xmlReader : AL igual que el jsonReader define el array con la estructura de los datos xml que se espera.

• fluidBaseLayer : (Por defecto null) Parámetro que determina el id de la capa padre que determinara las dimensiones de la tabla. En caso de que esta capa cambie, siguiendo el modelo de diseño liquido, la tabla se redimensionará ajustándose a las nuevas medidas de la capa que la contiene. En


caso de no especificarse valor alguno o especificarse un valor null, la tabla no se redimensionará (no se comportara con diseño liquido).

Todas estas propiedades pueden ser consultadas / actualizadas con los métodos getGridParam y setGridParam del componente de la siguiente forma.

$(selector).rup_grid(“setGridParam”,parametro);

var p = $(selector).rup_grid(“getGridParam”,paramet ro);

donde “parámetro” es la propiedad que se quiere obtener o establecer.

El siguiente es un ejemplo utilizando este API del componente:

$(“#grid_usuarios”).rup_grid(“getGridParam”, “width”) nos devuelve el ancho de la tabla.

$(“#grid_usuarios”).rup_grid(“setGridParam”, “width: 150”) actualiza la anchura de la tabla a 150.

6.2. Propiedades del colModel

De la misma forma, también se ha hablado del elemento/propiedad colmodel, que se establece en las columnas: Las posibles propiedades para el colModel son las siguientes:

• align : Establece la alineación para dicha columna.

• classes : Establece el nombre de la clase de la hoja de estilos a aplicar a dicha columna.

• datefmt : Determina el formato de la columna en caso de ser una fecha (dd/MM/yyyy).

• editable : Establece si esa columna es editable o no.

• editoptions . Establece las opciones de edición de la columna.

• editRules : Se establecen las reglas de edición de cada columna.

o valídate : (por defecto false) Indica si esta columna será validable de forma individual o no (se tendrá que tener en cuenta que esta propiedad solo vale para cuando se utiliza el componente tabla dentro del componente mantenimiento, ya que se usa una propiedad del mismo (validationMode) para realizar las validaciones).

o required : Indica si el campo es requerido.

• edittypes : Indica el tipo de elemento que se forma al poner la columna en modo edición. Los posibles valores son:

o text: Construye un campo de texto.


o textarea: Construye un textarea.

o select: Construye una combo.

o checkbox: Construye un check.

o password: Construye un campo para introducir claves.

o button: Introduce un botón.

o image: Introduce una imagen.

o file: Introduce un campo de tipo fichero

o hidden: Introduce un campo de tipo hidden.

• fixed : Columna que no se redimensiona cuando se redimensiona la tabla.

• formatter : Indica el formato a aplicar al visualizar la columna. Por defecto existen los siguientes y pueden ser personalizados a su vez:

o integer: Campo entero.

o number: Campo numérico.

o currency: Campo de tipo moneda.

o date: Campo de tipo fecha.

o email: Campo de tipo dirección de correo electrónico.

o link: Campo de tipo link.

o showlink. Campo que muestra el contenido de un link.

o checkbox. Campo de tipo checkbox.

o select. Campo de tipo combo.

o predefinido: Es posible también crearse nuevos formatters en caso de que el requerimiento funcional no se cumpla con los formatters por defecto. A continuación se explica un ejemplo:

masiveIconFormatter = function(cellval, el, opts) {

var url = “”; // dirección de correo

if (cellval && cellval != ''){

html = '<img src='+url+' width="16" height="16">' ;

}

return html;

}

• hidden : Indica si la columna es oculta o no.


• Index : Indica el índice de la columna.

• jsonmap : Define el mapeo entre la columna json y la columna.

• label . Si no se introduce el colnames, determina el texto que aparece en la cabecera de la columna.

• name : El nombre de la columna

• resizable : Indica si la columna es redimensionable o no.

• sortable . Indica si la columna es ordenable o no.

• width : Define la anchura de la columna.

• xmlmap : Define el mapeo entre la columna del xml y la columna.

• unformat : Define el nuevo formato cuando una columna deja de ser editable.

6.3. Métodos

Como se puede ver en el ejemplo anterior, el API a utilizar para realizar las invocaciones a los métodos públicos de los que dispone el componente es:

$("# GRID_persona ").rup_grid(" setRowData ", selRows[0], properties);

$(selector).rup_grid(metodo, [parametros]);

Se ha seguido el mismo formato que usa jQuery UI: el primer parámetro es el método que se quiere invocar y el resto de parámetros, la parametrización que recibe el método.

Los métodos públicos a disposición del desarrollador para ser invocados son los siguientes:

• addRowData (rowid, data, position, srcrowid): Añade la información contenida en data en la fila rowid.

• clearGridData : Limpia todos los registros de la tabla.

• delRowData (rowid): Borra la información del registro en la posición rowid.

• getDataIDs . Devuelve todos los identificativos de cada fila de la tabla. Es decir, en nuestro caso, devuelve la información de todas las claves primarias en formato array de la tabla.

• getGridParam (name). Método muy importante que devuelve una propiedad de la tabla comentada anteriormente.

• getRowData (rowid). Devuelve una estructura con todos los datos de la fila indicada en rowid.

• setGridParam (object). Establece una propiedad de la tabla en formato (nombre: valor).

• setRowData (rowid, data, cssprop). Actualiza el valor de la fila “rowid” con la información que se define en “data” y los estilos declarados en “cssprop”.


• setSelection (rowid, onselectrow). Selecciona la fila especificada en rowid y posibilita introducir una función para manejar el evento de cada vez que se selecciona la fila.

• resetSelection. En una tabla multiseleccionable deselecciona todos los seleccionados y cuando es simple deselecciona el seleccionado.

• reloadGrid (callbackFnc, param). Actualiza la tabla con los parámetros actuales. El método acepta especificar una función de callback y un parámetro para que sea ejecutada al finalizar la recarga de la tabla.

• getSelectedRows: Método que devuelve un array con los elementos seleccionados, comprobando si es multiselección o no.

• getColModel: Método que devuelve el colModel completo, se podría utilizar el método getGridParam(“colModel”) para ello también.

• GridToForm (rowid, formid): Método que vuelca el contenido de la fila que recibe como parámetro al formulario que recibe como segundo parámetro, haciendo uso del atributo name para hacer la correlación de datos.

• FormToGrid (rowid, formid, mode, position): Añade o modifica la fila seleccionada con los datos del formulario. Rowid. Id de la fila. Formid: id del formulario con los datos. Mode: añadir o modificar. Position: solo tiene sentido si el modo es añadir.

• isMultiselect : Función que devuelve si el mantenimiento es de tipo multi selección o no.

• getCol : Función que devuelve el valor de la celda de la fila que se le pasa como parámetro. El colName puede ser o el índice de la columna o el nombre de la misma.

• isEditable : Función que devuelve si la tabla es editable o no.

• getEditingRowData: Función que devuelve los valores de la fila en edición, no su contenido HTML.

6.4. Eventos

Al igual que muchos otros componentes, el componente tabla dispone de una serie de eventos asociados a su funcionamiento. A nivel de configuración, el componente expone y permite definir todos los eventos disponibles en el plugin subyacente jqGrid. A continuación, ya que el plugin dispone de un conjunto elevado de eventos, se precisa el flujo de ejecución que se produce durante dos de las principales funcionalidades del componente:

Orden de ejecución de eventos en llamadas Ajax

1. beforeRequest .

2. serializeGridData .

3. loadBeforeSend .

4. loadError .


5. beforeProcessing .

6. gridComplete .

7. loadComplete .

Orden de ejecución de eventos al seleccionar una fila

1. beforeSelectRow .

2. onSelectRow .

3. onCellSelect .

Por cuestiones de adaptación y para mejorar la flexibilidad de manejo, los eventos del componente tabla antes enumerados, aceptan dos modos de configuración diferentes. Por un lado, es posible definirlos mediante una función que se ejecutará cuando se lanza el evento. Estas funciones específicas conviven con las funcionalidades de base del componente y pueden interrumpir la ejecución de las mismas retornando un valor false. Por otro lado existe la posibilidad de crear una estructura más compleja pero a la vez más funcional.

En lugar de especificar una única función es posible especificar una estructura json que alberge un método pre y un método post. Dichos métodos se ejecutarán antes y después de la función por defecto asociada al componente.

loadBeforeSend : { pre : function(xhr, settings){ console.log( "pre" ); console.log( "xhr" , xhr); console.log( "settings" , settings); }, post : function(xhr, settings){ console.log( "post" ); console.log( "xhr" , xhr); console.log( "settings" , settings); }

pre => En caso de devolver la función un false, el evento se cancela. por defecto => En caso de que la haya, se ejecuta la función general del componente. post => En el caso de devolver la función un false, siempre que lo acepta el evento

del plugin subyacente, se cancela el flujo de ejecución del componente.

De esta manera se podrá controlar de forma más precisa la ejecución de los eventos y se podrán especificar acciones anteriores y posteriores a la ejecución gestionada por el componente.


7. Sobreescritura del theme

El componente tabla se presenta con una apariencia visual definida en el fichero de estilos theme.rup.grid-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).

A continuación se describen los estilos sobreescribibles por parte del usuario:

• .rup-grid_evenRow: filas pares de los datos de la tabla.

• .rup-grid_oddRow: filas impares de los datos de la tabla.

• .rup-grid_cellPadding_important: espacio de las celdas con respecto a su borde.

Inicialmente la tabla muestra los colores por defecto de jQuery UI para la fila resaltada, al colocar el ratón encima (hover) y para la fila seleccionada (o filas en multiselección). Si se desea modificar su estilo, en el fichero del componente los siguientes estilos comentados:

• .rup-grid_evenRow:hover, rup-grid_oddRow:hover: filas resaltadas.

• .rup-grid_evenRow.ui-state-highlight,.rup-grid_oddRow.ui-state-highlight: filas seleccionadas.

Estos estilos puede indicar bien un color a utilizar de fondo como una imagen. En el caso de que se quiera definir un color se deberá incluir el atributo “background-image” con el valor “none” para poder sobrescribir los valores de jQuery UI, en caso contrario no se mostrará. A la hora de utilizar una imagen no existe problema alguno.

NOTA: Los estilos que acaban en _important deberán definir su propiedades con el modificador !important para que se puedan aplicar los estilos correctamente, aunque la recomendación es no hacer uso de important en la medida de lo posible.


8. Internacionalización (i18n)

La gestión de los literales de la tabla se realiza a través de ficheros json lo que flexibiliza el desarrollo. Para acceder a los literales se hará uso del objeto base RUP, mediante éste se accederá al objeto json correspondiente según el idioma obteniendo tanto los literales como los propios mensajes.

Los literales definidos para el contenido de la tabla son texto simple. Para este componente los literales utilizados están en la parte global de la internacionalización dentro de los resources de rup. A continuación se muestran los literales necesarios para el componente:

"rup_grid": { "selectedElems":"Se han seleccionado los ", "deSelectedElems":"Se han deseleccionado los " , "ofPage":" elementos de la página.", "selectAll": "seleccionar los ", "deSelectAll": "deseleccionar los ", "selectAllRest": "restantes", "clearSelection":"deshacer selección", "pager": { "selected" : "Elementos seleccionados", "primPag" : "Primera Página", "siguiente" : "Siguiente", "anterior" : "Anterior", "ultiPag" : "Última Página" }, "noRecordsFound": "No hay registros.", "defaults": { "recordtext": "Mostrando {0} - {1} de { 2}", "emptyrecords": "Sin registros que most rar", "loadtext": "Cargando...", "pgtext" : "Página {0} de {1}" }, "search": { "caption": "Búsqueda...", "Find": "Buscar", "Reset": "Limpiar", "odata": [ "igual", "no igual a", "menor que", "menor o igual que", "mayor que", "mayor o igual a", "empiece por", "no empiece por", "está en", "no está en", "termina por", "no termina por", "contiene", "no contiene" ],


"groupOps": [ { "op": "AND", "text": "todo" }, { "op": "OR", "text": "cualquier" } ], "matchText": " match", "rulesText": " reglas" }, "edit": { "addCaption": "Agregar registro", "editCaption": "Modificar registro", "bSubmit": "Guardar", "bCancel": "Cancelar", "bClose": "Cerrar", "saveData": "Se han modificado los dato s, ¿guardar cambios?", "bYes": "Si", "bNo": "No", "bExit": "Cancelar", "msg": { "required": "Campo obligatorio", "number": "Introduzca un número", "minValue": "El valor debe ser mayo r o igual a ", "maxValue": "El valor debe ser meno r o igual a ", "email": "No es una dirección de co rreo válida", "integer": "Introduzca un valor ent ero", "date": "Introduza una fecha correc ta ", "url": "No es una URL válida. Prefi jo requerido ('http://' or 'https://')", "nodefined": " no está definido.", "novalue": " valor de retorno es re querido.", "customarray": "La función personal izada debe devolver un array.", "customfcheck": "La función persona lizada debe estar presente en el caso de validación personalizada." } }, "view": { "caption": "Consultar registro", "bClose": "Cerrar" }, "del": { "caption": "Eliminar", "msg": "¿Desea eliminar los registros s eleccionados?", "bSubmit": "Eliminar", "bCancel": "Cancelar" }, "nav": { "edittext": " ", "edittitle": "Modificar fila selecciona da", "addtext": " ", "addtitle": "Agregar nueva fila",


"deltext": " ", "deltitle": "Eliminar fila seleccionada ", "searchtext": " ", "searchtitle": "Buscar información", "refreshtext": "", "refreshtitle": "Recargar datos", "alertcap": "Aviso", "alerttext": "Seleccione una fila", "viewtext": "", "viewtitle": "Ver fila seleccionada" }, "col": { "caption": "Mostrar/ocultar columnas", "bSubmit": "Enviar", "bCancel": "Cancelar" }, "errors": { "errcap": "Error", "nourl": "No se ha especificado una URL ", "norecords": "No hay datos para procesa r", "model": "Las columnas de nombres son d iferentes de las columnas de modelo" }, "formatter": { "integer": { "thousandsSeparator": ".", "defaultValue": "0" }, "number": { "decimalSeparator": ",", "thousandsSeparator": ".", "decimalPlaces": "2", "defaultValue": "0,00" }, "currency": { "decimalSeparator": ",", "thousandsSeparator": ".", "decimalPlaces": "2", "prefix": "", "suffix": "", "defaultValue": "0,00" }, "date": { "dayNames": [ "Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa", "Domingo", "Lunes", "Martes", "Miércoles", "Jueves",


"Viernes", "Sábado" ], "monthNames": [ "Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic", "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre" ], "AmPm" : [ "am", "pm", "AM", "PM" ], "S": "function (j) {return j < 11 | | j > 13 ? ['st', 'nd', 'rd', 'th'][Math.min((j - 1) % 10, 3)] : 'th'}", "srcformat": "Y-m-d", "newformat": "d-m-Y", "masks": { "ISO8601Long": "Y-m-d H:i:s", "ISO8601Short": "Y-m-d", "ShortDate": "n/j/Y", "LongDate": "l, F d, Y", "FullDateTime": "l, F d, Y g:i: s A", "MonthDay": "F d", "ShortTime": "g:i A", "LongTime": "g:i:s A", "SortableDateTime": "Y-m-d\\TH: i:s", "UniversalSortableDateTime": "Y -m-d H:i:sO", "YearMonth": "F, Y" }, "reformatAfterEdit": false }, "baseLinkUrl": "", "showAction": "",


"target": "", "checkbox": { "disabled": "true" }, "idName": "id" } } El acceso a cualquier tipo de literal se debe realizar de la siguiente forma (teniendo en cuenta que es un objeto json):

$.rup.i18n.rup_grid.#literal#


9. Integración con UDA

Para la obtención de los datos que el componente tabla debe visualizar, se realiza una petición AJAX al servidor de aplicaciones. Esta petición es atendida por el Controller encargado de tratar la petición, obtener los datos y presentarlos en el formato que el componente necesita.

Un ejemplo sería la implementación del método getAll en el Controller correspondiente:

@RequestMapping(method = RequestMethod. GET, headers={"JQGridModel=true"}) public @ResponseBody JQGridJSONModel getAllJQGrid(

@ModelAttribute Alumno filterAlumno, @ModelAttribute Pagination pagination) {

List<Alumno> alumnos = this. alumnoService .findAll(filterAlumno, pagination); Long recordNum = this. alumnoService .findAllCount(filterAlumno); AlumnoController. logger.info( "[GET - jqGrid] : Obtener Alumnos" ); return new JQGridJSONModel(pagination, recordNum, alumnos);

}

Para poder identificar que la petición proviene del componente tabla se añade en la misma una cabecera con el siguiente aspecto

JQGridModel true El siguiente código que permite distinguir si la petición ha sido realizada por el componente tabla: @RequestMapping(method = RequestMethod. GET, headers={"JQGridModel=true"})

UDA proporciona la clase com.ejie.x38.dto.Pagination en la librería de utilidades comunes para facilitar la transferencia de la información de la paginación desde el controller hasta las capas de negocio y de acceso a datos. Los valores de los atributos del objeto se obtendrán de los parámetros de paginación del componente que envía en la request.

Pagination pagination = new Pagination(); pagination.setPage(Long. valueOf(request.getParameter( "page" )));pagination.setRows(Long. valueOf(request.getParameter( "rows" )));pagination.setSort(request.getParameter( "sidx" ));pagination.setAscDsc(request.getParameter( "sord" ));

Para facilitar la inicialización del objeto, se puede utilizar la anotación @ModelAttrbute de spring del siguente modo: public @ResponseBody JQGridJSONModel getAllJQGrid(

@ModelAttribute Alumno filterAlumno, @ModelAttribute Pagination pagination) {


Una vez se ha obtenido la información que se debe visualizar en el mantenimiento, el componente requiere que le sea enviado desde el servidor de aplicaciones una estructura json específica que contenga los datos necesarios. Este objeto json sigue la siguiente estructura:

{"page":"1", "rows":[{"id":"3","nombre":"BLSMASER","apellido1": "Beatriz",…}, {"id":"4","nombre":"BO00093L","apellido1":" Ana Isabel",…], "total":"168", "records":1671}

Donde cada una de las propiedades tiene el siguiente significado:

• page : Número de página en la que debe de posicionarse el componente.

• rows : Array que contiene un objeto json por cada uno de los registros que se muestran en el mantenimiento. Cada objeto json contiene por cada columna un par clave-valor que indica el nombre de la columna y el valor que se va a visualizar.

• total : Número total de páginas que debe de presentar el mantenimiento.

• records : Número total de registros que debe de presentar el mantenimiento.

Para facilitar la generación de esta estructura json, UDA proporciona la clase com.ejie.x38.dto.JQGridJSONModel . Esta clase dispone de los atributos correspondientes a las propiedades de los objetos json que requiere el componente. De este modo, se facilita la serialización del objeto en la estructura json adecuada. Un ejemplo de su uso sería el siguiente:

JQGridJSONModel data = new JQGridJSONModel(pagination, recordNum, alumnos);

uda-componentes rup. tabla (v2.1.1 deprecado)

Technology

componente se aplica

que se va

este componente

los estilos

componente son

ejemplo se muestra

componentes rup tabla

componentes rup tabla