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

781 views

Published on

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

http://uda-ejie.github.io/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
781
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 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 AplicacionesComponentes RUP – MantenimientoFecha: 09/01/2013 Referencia:EJIE S.A.Mediterráneo, 14Tel. 945 01 73 00*Fax. 945 01 73 0101010 Vitoria-GasteizPosta-kutxatila / Apartado: 80901080 Vitoria-Gasteizwww.ejie.es
  2. 2. Componentes RUP – Mantenimiento ii/33Control de documentaciónTítulo de documento: Componentes RUP – MantenimientoHistórico de versionesCódigo: Versión: Fecha: Resumen de cambios:1.0.0 06/06/2011 Primera versión.1.0.1 25/06/2011Correcciones en las propiedades deconfiguración del componente.1.0.2 18/07/2011Actualización de las capturas de pantalla. Se hancompletado las descripciones de las propiedadesde configuración del componente.1.1.0 14/09/2011Actualización de las versiones de las libreríasJavaScript subyacentes.Añadido el apartado Integración con UDA.Añadida la propiedad de configuraciónshowMultiselectAlerts.1.1.1 30/09/2011Añadidos los métodos públicos getMode,isEditing, isAdding1.2.0 14/12/2011Añadidos ejemplos de uso de otros componentesRUP en el formulario de detalle.1.2.1 21/02/2012Upload de ficheros en el formulario de detalle.Gestión de botones por defecto y añadido denuevos.Nuevos métodos públicos, que devuelven lasfuncionalidades de los botones por defecto.2.0.0 11/07/2012Nuevos métodos públicos.Ajustes necesarios para adaptarse a las nuevasfuncionalidades de la versión v2.0.02.1.0 18/09/2012Actualización de las versiones de las libreríasJavaScript subyacentes.2.1.1 09/01/2013Nuevo método getSerializedFormNueva propiedad lazyLoadDetailForm,
  3. 3. Componentes RUP – Mantenimiento iii/33filterExclude.Nuevo evento onAfterLazyDetailLoad.Cambios producidos desde la última versiónNuevo método getSerializedFormNuevas propiedades lazyLoadDetailForm, filterExclude.Nuevo evento onAfterLazyDetailLoad.Control de difusiónResponsable: Ander MartínezAprobado por:Firma: Fecha:Distribución:Referencias de archivoAutor:Nombre archivo:Localización:
  4. 4. Componentes RUP – Mantenimiento iv/33ContenidoCapítulo/sección Página1. Introducción 62. Ejemplo 63. Casos de uso 64. Infraestructura 74.1. Ficheros 74.2. Dependencias 75. Definición del componente 85.1. Propiedades 85.2. Métodos 115.3. Eventos 126. Funcionalidades 136.1. Creación automática del formulario de detalle 136.2. Añade los botones del formulario de detalle 146.3. Añade el área de paginación al formulario de detalle 156.4. Añade los botones del formulario de búsqueda 156.5. Creación de la botonera y adición de los botones por defecto 166.6. Obtener los datos del servidor para recargar el formulario de detalle 166.7. Posibilidad de crear mantenimientos con multiselección 166.8. Edición en línea 176.9. Validaciones automáticas 186.10. Mantenimientos maestro detalle 197. Sobreescritura del theme 228. Internacionalización (i18n) 23
  5. 5. Componentes RUP – Mantenimiento v/339. Integración con UDA 249.1. Upload de ficheros 2610. Interacción con otros componentes RUP 30
  6. 6. Componentes RUP – Mantenimiento 6/331. IntroducciónLa descripción del componente Mantenimiento, visto desde el punto de vista de RUP, es la siguiente:El componente implementa un nuevo patrón definido para facilitar la lógica necesaria en las accionesbásicas, denominadas CRUD (create, read, update y delete), sobre una tabla.2. EjemploSe muestra a continuación una maquetación típica del componente:3. Casos de usoSe aconseja la utilización de este componente:• Cuando se realicen mantenimientos de tablas haciendo uso de las especificaciones establecidas enla guía de desarrollo de UDA.
  7. 7. Componentes RUP – Mantenimiento 7/334. InfraestructuraA 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) comentadosen los apartados Ficheros y Dependencias.4.1. FicherosRuta Javascript: rup/scripts/Fichero de plugin: rup.maint-x.y.z.jsRuta theme: rup/basic-theme/Fichero de estilos: theme.maint-x.y.z.cssRuta fichero de recursos: rup/resources/rup.i18n_idioma.json4.2. DependenciasEl desarrollo de los componentes como plugins basados en la librería JavaScript jQuery hace necesariala inclusión de esta dependencia. La versión elegida para el desarrollo ha sido la versión 1.8.0. Unposible cambio de versión podría no ser trivial y la versión utilizada no debe seleccionarsearbitrariamente. La razón es que el cambio podría provocar errores de funcionamiento e incompatibilidadtanto con los propios componentes como con algunos plugins basados en jQuery.• jQuery 1.8.0: http://jquery.com/La gestión de ciertas partes visuales de los componentes, se han realizado mediante el plugin jQuery UIque se basa en jQuery y se utiliza para construir aplicaciones web altamente interactivas. Este pluginproporciona 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• rup.base-x.y.z.js• rup.maint-x.y.z.js• rup.dialog-x.y.z.js• rup.feedback-x.y.z.js
  8. 8. Componentes RUP – Mantenimiento 8/33• rup.message-x.y.z.js• rup.utils-x.y.z.js• rup.grid-x.y.z.js• rup.toolbar-x.y.z.js5. Definición del componente5.1. PropiedadesPara poder definir un mantenimiento se deberán rellenar las siguientes propiedades del componenteadecuando el mantenimiento a sus necesidades de implementación:• jQueryGrid: Referencia al grid donde se mostrarán los datos en de forma tabular. Es el nombre delelemento HTML usado para crear el componente tabla.• imgPath: (Por defecto RUP + "/basic-theme/images"). Ruta donde están las imágenes de la tabla.• detailDiv: (Por defecto “null”). Id del campo del formulario de detalle.• searchForm: (Por defecto “null”) Id del campo del formulario de búsquedas.• fluid: (Por defecto “true”). Determina si el mantenimiento va a mostrar un diseño líquido, es decir, siva a redimensionarse dependiendo del tamaño de la capa padre que lo contiene.• fluidOffset: (Por defecto “20”). Determina el desplazamiento de anchura que realiza elmantenimiento respecto del ancho total.• detailForm: (Por defecto “null”) Id del campo del formulario de detalle. Si no se modifica, elmantenimiento generará de forma automática el formulario de detalle.• showFeedback: Indica si se mostrarán los mensajes sobre las acciones realizadas.• filterExclude: Permite indicar mediante un array de strings, los identificadores de los campos delformulario que deben excluirse del resumen mostrado al ocultarlo. Ejemplo de uso:filterExclude: ["nombre_search", "apellido1_search"]• feedback: Id de la capa donde se mostrarán los mensajes generados por el mantenimiento.• lazyLoadDetailForm: Determina si la creación e inicialización del formulario de detalle debedemorase hasta el momento en el que sea requerido su uso. Valor por defecto, false.• loadOnStartUp: Indica si se cargará la tabla a la hora de arrancar la página.• primaryKey: Clave primaria del mantenimiento• showMessages: (Por defecto “false”). Indica si se van a mostrar los mensajes de OK si lasacciones de añadir, modificar o borrar se han realizado con éxito.
  9. 9. Componentes RUP – Mantenimiento 9/33• validationMode: (Por defecto "individual"). Validación de los campos del formulario de formaindividual a la hora de perder el foco. También puede ser por formulario (valor “form”).• modelObject: Esta propiedad indica sobre qué entidad se realizán las operaciones CRUD (create,read, update, delete).• detailButtons: (Por defecto $.rup.maint.detailButtons.SAVE_REPEAT) Propiedad que indica latipología de botones que se crearán en el formulario de detalle. Sus posibles valores son:$.rup.maint.detailButtons.SAVE_REPEAT: Se crearán tres botones, el de guardar (realiza laacción de guardar y cierra el diálogo del detalle), el de guardar y repetir (que realiza laacción de guardar pero no cierra el diálogo de detalle) y el de cancelar (que cierra el diálogode detalle siempre y cuando no se hayan realizado cambios en el formulario).$.rup.maint.detailButtons.SAVE: Se crearán dos botones, el de guardar (realiza la acción deguardar y cierra el diálogo del detalle y el de cancelar (que cierra el diálogo de detallesiempre y cuando no se hayan realizado cambios en el formulario).• rupCheckStyle: (Por defecto “true”) Indica si se mostrarán no conformidades de estilo por defecto.• detailServer: (Por defecto “true”) Indica si el mantenimiento accederá al servidor para obtener losdatos a mostrar en el detalle. Se usará la propiedad primaryKey para acceder a la entidad.• parent: (Por defecto “null”) Esta propiedad indica cuál es el mantenimiento padre. Se indicará el iddel mantenimiento y cuando el padre cambie el mantenimiento hijo se refrescará automáticamente.• showMultiselectAlerts: (Por defecto “true”) En el caso de un mantenimiento multiselección,determina si se muestran al usuario los avisos de la pérdida de la selección de elementos al realizarciertas operaciones. Por ejemplo, en el caso de realizar una ordenación de los registros por elcontenido de una columna del mantenimiento, se mostrará un mensaje de confirmación de la acciónindicando de que se va a perder la selección de elementos actual.• toolbar: Estructura compuesta que alberga toda la configuración asociada al componente toolbar(botonera) del mantenimiento. Los distintos parámetros que se pueden especificar dentro de laestructura, son los siguientes:toolbar:{id: (Por defecto indefinido) Id especifico de una toolbar externa, que contendrá losbotones, tanto los de por defecto como los adicionales, del mantenimiento.autoAjustToolbar: (Por defecto “true”) Indica si se va a ajustar el tamaño de latoolbar al tamaño de la tabla.createDefaultToolButtons: (Por defecto “true”) Indica si se va a crearalgún botón por defecto en la toolbar, bien sea una creada por el desarrollador o bienla generada automáticamente por el componente.defaultAdd: (Por defecto “true”) Según el tipo de mantenimiento sobre el que sepueda aplicar, indica la creación, por defecto, del botón add (añadir) .defaultEdit: (Por defecto “true”) Según el tipo de mantenimiento sobre el quese pueda aplicar, indica la creación, por defecto, del botón edit (editar).
  10. 10. Componentes RUP – Mantenimiento 10/33defaultCancel: (Por defecto “true”) Según el tipo de mantenimiento sobre elque se pueda aplicar, indica la creación, por defecto, del botón cancel (cancelar).defaultDelete: (Por defecto “true”) Según el tipo de mantenimiento sobre elque se pueda aplicar, indica la creación, por defecto, del botón delete (eliminar).defaultFilter: (Por defecto “true”) Según el tipo de mantenimiento sobre elque se pueda aplicar, indica la creación, por defecto, del botón filter (filtrar).newButtons: (Por defecto indefinido) Estructura compuesta que permite definirlos nuevos botones que se incorporan a la toolbar del mantenimiento.newButtons: [{obj: {i18nCaption: Texto que mostrará el botón,css: Estilo a aplicar. Se utilizará para mostrar imágenes ala izquierda del botón.},json_i18n: Indica el identificador del objeto json para laresolución de los literales del componente,click: Función javascript que se ejecutará cuando se pulse elbotón.},{. . .}]Un ejemplo de uso, de la estructura toolbar en la definición de un mantenimiento, podría serel siguiente:toolbar: {//No creamos el botón de filtro por defectodefaultFilter: false,newButtons: [{obj: {i18nCaption: "actualizar",css: "rup-maint_filter"},json_i18n: $.rup.i18n.app.simpelMaint,click: function(){$("#simple").rup_maint("getFilterBootonDefaultFunction").call();}}]}• validation: Propiedad que recibe la configuración de las reglas de validación que van a seraplicadas a los campos del formulario de detalle.• validationFilter: (Por defecto ”true”). Determina si se mantienen las cabeceras decompatibilidad para el componente de validación posterior a la v2.0.0 de UDA.• validationUrl: (Por defecto ‘$.rup.CTX_PATH+"validate"’). Contiene la url que va a utilizar elcomponente de validación en servidor.
  11. 11. Componentes RUP – Mantenimiento 11/335.2. MétodosComo se puede ver en el ejemplo anterior, el API a utilizar para realizar las invocaciones a los métodospúblicos de los que dispone el componente es:$("#maint").rup_maint("newElement");$(selector).rup_maint (método, [parámetros]);Se ha seguido el mismo formato que usa jQuery UI: el primer parámetro es el método que se quiereinvocar 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:• newElement: Muestra el formulario de adición y pone el mantenimiento en modo alta.• editElement: (id, noChangeMode) Edita la fila que recibe como parámetro. Si recibe como segundoparámetro un true no realizará el cambio de modo a edit.• deleteElement: (id) Elimina la fila del id que recibe como parámetro.• toggleSearchForm: (capa, filterCriteriaLoad). Apertura/Cierre del formulario de búsqueda. Elparámetro capa determina el identificador del div que se va a mostrar/ocultar. El parámetrofilterCriteriaLoad (true/false) determina si se deben tener en cuenta los valores precargados en loscampos del formulario de búsqueda.• search: Lanza la búsqueda del mantenimiento obteniendo los datos del formulario de búsqueda.• toggleGrid: Oculta o muestra la tabla de resultados junto con la paginación.• cleanSearchForm: Limpia el formulario de búsqueda y dependiendo la propiedad delmantenimiento loadOnStartUp relanzará la carga de la tabla o la limpieza del mismo.• saveMaint (saveAndRepeat): Realiza el guardado del mantenimiento, bien realizando un alta o bienmodificando el registro actual, todo ello haciendo uso del modo del mismo.• getPrimaryKey: Obtiene la clave primaria del mantenimiento.• getMode: Devuelve el modo en el que está actuando el mantenimiento sobre los registros:o edit: En caso de estar modificando el registro.o new: En caso de estar insertando un nuevo registro.• isEditing: Retorna true o false, dependiendo si el mantenimiento está en modo edición o no.• isAdding: Retorna true o false, dependiendo si el mantenimiento está en modo inserción o no.
  12. 12. Componentes RUP – Mantenimiento 12/33• getToolbarObject: Devuelve el objeto (objeto JQuery) que alberga la toolbar del mantenimiento.• getAddBootonDefaultFunction: Devuelve la función, por defecto, que se ejecuta al presionar elbotón add (añadir).• getCancelBootonDefaultFunction: Devuelve la función, por defecto, que se ejecuta al presionar elbotón cancel (cancelar).• getEditBootonDefaultFunction: Devuelve la función, por defecto, que se ejecuta al presionar elbotón edit (editar).• getDeleteBootonDefaultFunction: Devuelve la función, por defecto, que se ejecuta al presionar elbotón delete (borrar).• getFilterBootonDefaultFunction: Devuelve la función, por defecto, que se ejecuta al presionar elbotón filter (filtrar).• getSerializedForm: Devuelve la serialización del formulario pasado como parámetro.5.3. EventosA continuación se detallan los eventos expuestos a los desarrolladores mediante los que podránextender las funcionalidades del mantenimiento para adecuarlo a las necesidades particulares de cadaaplicación:• onbeforeDetailShow: Evento que se lanza antes de enseñar el formulario de edición.• onafterDetailShow: Evento que se lanza después de mostrar el formulario de edición y de que elcomponente haya realizado todas sus acciones.• ondblClickRow (rowid, iRow, iCol, e): Evento que se lanza después de realizar un doble clicksobre una fila de la tabla de resultados. La función asociada al evento se ejecuta previamente a lafunción propia del componente. En caso de que se desee evitar la ejecución del evento por defectodel componente, la función deberá realizar un return false.o rowid: Identificador de la fila.o iRow: Index de la fila.o iCol: Index de la columna.o e: Objeto evento.• onAfterLazyDetailLoad: Evento que se lanza en el momento en que se requiere de la creación delformulario de detalle para ser utilizado. El evento únicamente se lanza en el caso de que se hagauso de la opción de configuración lazyLoadDetailForm. En la función de callback asociada alcapturador del evento, se puede incluir el código javascript utilizado para inicializar los componentesexistentes en el fomulario de detalle.
  13. 13. Componentes RUP – Mantenimiento 13/336. FuncionalidadesA continuación se detallan las funcionalidades que aporta el componente mantenimiento de forma genéricasin que el desarrollador tenga que desarrollar ningún código, solo parametrizando las propiedades delcomponente.6.1. Creación automática del formulario de detalleComo se ha comentado anteriormente en el apartado de descripción de las propiedades delcomponente mantenimiento, haciendo uso de la propiedad “detailForm” puede crearse el formulario deforma automática sin que el desarrollador tenga que dibujar los controles en la jsp el propiomantenimiento se encargará de dibujar los controles en el formulario haciendo uso de las propiedadesestablecidas en la configuración de la tabla, más concretamente en las propiedades del colModel. Acontinuación se detallan cuales son las propiedades que se usan para crear ese formulario de formadinámica:• editable: Propiedad para indicar al mantenimiento que la columna deberá crearse en el formulariode detalle. Si se especifica un valor false, no se mostrará la columna en el detalle.• edittype: Propiedad que determina el tipo de control a crear en el detalle, si no se establece estapropiedad se creará un input. Los posibles valores son:o text: Construye un campo de textoo textarea: Construye un textareao select: Construye una comboo checkbox: Construye un checko password: Construye un campo para introducir claveso button: Introduce un botón
  14. 14. Componentes RUP – Mantenimiento 14/33o image: Introduce una imageno file: Introduce un campo de tipo ficheroo hidden: Introduce un campo de tipo hidden• rupType: Esta propiedad es un añadido a las propiedades de una columna de la tabla dondeindicamos el tipo de componente que se creará sobre ese elemento. Es decir, si rupType es“datepicker” el mantenimiento creará un rup_date sobre ese campo haciendo uso de las editRulesque más abajo se especifican.• hidden: Esta propiedad indica si se mostrará o no la columna en la tabla.• editOptions: Array de propiedades relacionadas con el tipo (edittype) que se establezca para esacolumna, es decir, contiene información acerca de la colmuna que se va a editar. Este array esimportante que contenga propiedades validas para el tipo (edittype) seleccionado.Por ejemplo, si se establece una columna de tipo text los valores de esta propiedad podrían sertodos los valores posibles de un input: size, maxlength… Si fuera necesario que un campo delformulario de detalle fuera visible pero no modificable se podría incluir la propiedadreadonly:’readonly’.• editRules: Array de propiedades para la validación de campos que se crearán en el detalle porejemplo:o required: Si esta propiedad es true se indica que ese campo es obligatorio.o validate: Si el valor de esta propiedad es true indica que ese campo se validará a la hora desalir del mismo (en el onchange) si la propiedad general del mantenimiento“validationMode” contiene su valor por defecto.• formoptions: Conjunto de propiedades de las que solo se usa el “label” para poder establecer ellabel asociado a cada control creado en el detalle. En caso de que no se establezca esta propiedadse usará el colName del índice actual del colModel.{name: status, index: status, width: 10%, align: left, editable: true, formoptions: {label:Estado}, editRules: {required: true, validate: true}, editoptions: {size: 10, value: {N:Pendiente, S: Enviado}}, edittype: select },6.2. Añade los botones del formulario de detalleOtra de las funcionalidades del componente es que, ya se cree el formulario de detalle de formaautomática o bien lo defina el desarrollador, el componente insertará los botones por defecto definidospara él. Por lo que los desarrolladores no tendrán que pintar los botones básicos, solo indicando en lapropiedad “detailButtons” el tipo de botonera quiere usar el componente lo añadirá.
  15. 15. Componentes RUP – Mantenimiento 15/336.3. Añade el área de paginación al formulario de detalleAdemás de añadir los botones de acción del detalle, el componente también añade los botones depaginación del detalle junto con el número de elementos seleccionados o por los que se va a paginarcon la intención de facilitar la navegación entre registros. Este es otro elemento que los desarrolladoresno tendrán que crear incluso cuando utilicen su propio formulario de detalle. La activación ydesactivación de los botones es automática junto con el incremento de la paginación de elementos.En los mantenimientos de tipo multiselección, la navegación se realizará sobre todos los elementosseleccionados ya sean de la página actual o de otras páginas.En los mantenimientos donde no exista la selección de elementos, la paginación se realizará por todoslos elementos de los que disponga la tabla. Es decir, cuando se llegue al fin de la página actual de latabla paginará de forma automática para poder obtener el primer registro de la página siguiente.6.4. Añade los botones del formulario de búsquedaEl formulario de búsqueda del mantenimiento es diseñado por los desarrolladores añadiendo loscontroles por lo que quieran realizar el filtrado, pero será el propio componente mantenimiento elencargado tanto de crear los botones de acción como de realizar la búsqueda enviando los valores delformulario al servidor para posteriormente realizar la carga de la tabla con los criterios seleccionados.Estos botones de acción que se crean son:• Botón de buscar: Obtiene los valores del formulario de búsqueda y los envía al servidor para poderrealizar la carga de la tabla con los datos filtrados por los criterios introducidos.• Botón de limpiar: Limpia los valores del formulario y de búsqueda borrando en la tabla y en caso deque éste tenga la propiedad loadOnStartUp con valor true relanzará la carga de la tabla sin criterioalguno.También ofrece la posibilidad de colapsar el formulario de búsqueda añadiendo los criterios debúsqueda establecidos junto al texto “Criterios de búsqueda”
  16. 16. Componentes RUP – Mantenimiento 16/336.5. Creación de la botonera y adición de los botones por defectoEl propio desarrollador puede crear una botonera personal y después asociársela al componentemediante la propiedad toolbar, comentada en el punto de descripción de las propiedadesparametrizables del componente. Una vez asociada la botonera, el componente es capaz de añadirle losbotones establecidos por defecto, siempre y cuando la propiedad createDefaultToolButtons esté a true;en caso contrario el mantenimiento no los añadirá. Los botones por defecto son los siguientes:• Nuevo: La acción de nuevo registro muestra el diálogo de detalle preparado para poder dar de altaun nuevo registro en la entidad activando el modo en ALTA y lanzando los eventos de muestra deldetalle. Internamente invoca al método newElement del componente.• Editar: La acción de editar permite la edición del registro de la entidad seleccionada en la tablamostrando el diálogo de detalle y cargando en los controles del mismo los valores correspondientesde dos formas posibles:o Usando los valores existentes en la tabla; en este caso la propiedad detailServer estará afalse.o Accediendo al servidor para obtener los datos necesarios para completar el detalle; en estecaso la propiedad detailServer estará a true.• Borrar: La acción de borrar realiza el borrado de todos los elementos seleccionados mostrandosiempre un mensaje de confirmación antes de realizar el borrado para que el usuario confirme laacción de borrar los registros. El propio componente distingue qué servicio REST invocar si la tablaes multiselección (servicio deleteAll) o no (servicio delete).• Filtrar: La acción de filtrar realiza el toggle del formulario de búsqueda (lo oculta o colapsa)añadiendo al título del fieldset (Criterios de búsqueda) los criterios por los que se quiere filtrar.6.6. Obtener los datos del servidor para recargar el formulario de detalleComo se ha mencionado anteriormente el mantenimiento a la hora de editar los registros seleccionadospuede ir al servidor a obtener la entidad completa y mostrarla en formulario de detalle. Estafuncionalidad se realiza a través de la propiedad detailServer la cual en los mantenimientos que no sonde selección múltiple se puede activar o desactivar para obtener o no la entidad del servidor. Pero en loscasos en los que la tabla es de tipo multiselección, el componente mantenimiento accederá siempre alservidor a obtener los datos completos de la entidad.6.7. Posibilidad de crear mantenimientos con multiselecciónLa creación de mantenimientos de tipo multiselección es otra de las posibilidades que ofrece elcomponente mantenimiento basándose en el componente tabla. Esta funcionalidad implica ciertoscomportamientos específicos:• A la hora de editar un mantenimiento multiselección, el componente es capaz de navegar solo porlos registros seleccionados en el diálogo de detalle.
  17. 17. Componentes RUP – Mantenimiento 17/33• A la hora de realizar un borrado, se eliminan todos los elementos seleccionados, tanto los de lapágina actual como los de otras páginas donde se hayan seleccionado registros.Para poder realizar estas acciones el componente guarda una estructura arbórea con los registrosseleccionados de cada página junto con sus claves primarias para poder realizar las acciones de unaforma más rápida, ya que todas las acciones se realizan siempre a través de ellas.También se ha tenido en cuenta la posibilidad de que el usuario seleccione todos los registros de lapágina actual con un único check situado en la cabecera de la columna de los check. A la hora deseleccionar este selectAll se muestra un aviso informando al usuario que sólo se seleccionarán losregistros de la página actual.Unido a esto último, al seleccionar todos los registros de la página mediante el check, aparecerá unmensaje que permitirá al usuario seleccionar el conjunto completo de registros de la entidad con la quese está trabajando, es decir, todos los registros que cumplan los criterios de búsquedaindependientemente de la página en la que se encuentren.6.8. Edición en líneaOtra de las funcionalidades que ofrece el mantenimiento es la posibilidad de editar los registros en lapropia tabla sin necesidad de usar un formulario ni diálogo de detalle. Los datos que necesita elmantenimiento son los mismos que cuando se usa para la creación del detalle (descritos anteriormente).Además de esas propiedades se debe activar la propiedad editable. Las acciones que realizará elmantenimiento son las mismas que con un formulario de detalle incluyendo la posibilidad de usar loseventos específicos del componente tabla para poder realizar acciones especificas en ellos. Para másinformación, consultar los eventos del documento del componente tabla.
  18. 18. Componentes RUP – Mantenimiento 18/336.9. Validaciones automáticasComo ya se ha comentado en puntos anteriores, el mantenimiento por defecto realiza la validación delformulario a la hora de guardar los datos del detalle, ya sea alta o modificación de un registro. Estasvalidaciones se realizan en el servidor. Es decir, las validaciones están implementadas en el modelo noen el cliente, y se realizan a través de anotaciones en las propiedades de la entidad (para másinformación sobre las anotaciones véase la Guía de Desarrollo de UDA).Además de las validaciones globales del formulario, el mantenimiento puede realizar validacionesindividuales si los desarrolladores lo necesitan. Estas validaciones individuales se realizan exactamentecomo las validaciones globales de formulario, contra la entidad, pero la petición se realiza en el cambiode campo y pérdida de foco (evento onchange) y contra un servlet de x38 encargado de realizar lavalidación.Para aplicar las validaciones a los campos se puede realizar de dos formas dependiendo de cómo separametrice el mantenimiento:• Si el mantenimiento se crea con el formulario automático, hay que añadir en cada columna quequiera que se valide de forma individual una propiedad validate con valor true dentro del conjunto depropiedades editRules.
  19. 19. Componentes RUP – Mantenimiento 19/33editRules: {required: true, validate: true}• En el caso de que el desarrollador genere el formulario de detalle tendrá que añadir el valorvalidableElem en el class cada campo que quiera validar de forma individual.class="formulario_linea_input validableElem"Si alguna validación falla, el mantenimiento se encarga de mostrarla en el área de feedback delformulario del detalle informando del error ocurrido.6.10. Mantenimientos maestro detalleOtra funcionalidad que permite el mantenimiento es modelar la relación maestro detalle entre dosentidades relacionadas. La relación se establece mediante la propiedad parent del mantenimiento (comose ha explicado en el apartado de las propiedades) indicando que el proceso superior es el padre delmantenimiento inferior enlazando las acciones del padre con las del hijo y viceversa (interactuando conel gestor de cambios, recarga de la tabla, etcétera).La forma de realizar este tipo de mantenimientos es la siguiente:Se declaran los dos mantenimientos de forma separada y la propiedad parent del mantenimiento detallese informa con el identificador del mantenimiento maestro.$("#comarca").rup_maint({jQueryGrid: "GRID_comarca",primaryKey: "code",modelObject: "Comarca",detailButtons: $.rup.maint.detailButtons.SAVE,searchForm: "searchForm",showMessages: true
  20. 20. Componentes RUP – Mantenimiento 20/33});$("#localidad").rup_maint({jQueryGrid: "GRID_localidad",primaryKey: "code;comarca.codeComarca",modelObject: "Localidad",detailButtons: $.rup.maint.detailButtons.SAVE,searchForm: "searchFormDetalle",showMessages: true,parent:"comarca"});
  21. 21. Componentes RUP – Mantenimiento 21/33
  22. 22. Componentes RUP – Mantenimiento 22/337. Sobreescritura del themeLos estilos que se pueden sobrescribir en este componente son escasos ya que fundamentalmente es uncomponente que hace uso de otros componentes, pero aun así existen algunos estilos que se puedensobrescribir para modificar su aspecto visual.• Imágenes de los botones:.rup-maint_new {background:#929292 url(images/rup.nuevo.png) no-repeat !important;width:14px;}.rup-maint_edit {background:#929292 url("images/rup.editar.png") no-repeat !important;width:14px;}.rup-maint_delete {background:#929292 url("images/rup.eliminar.png") no-repeat !important;width:14px;}.rup-maint_filter {background:#929292 url("images/rup.filtrar.png") no-repeat !important;width:16px;}• Los links de la paginación de detalle:.rup-maint_linkPaginacionDetalle {background:none ;border:none ;clear:none ;cursor:pointer;float:right;text-decoration:underline;color:#0052C7 ;font-size:0.88em ;padding-right:1.3em ;}
  23. 23. Componentes RUP – Mantenimiento 23/338. Internacionalización (i18n)La gestión de los literales se realiza a través de ficheros json lo que flexibiliza el desarrollo. Para acceder alos literales se hará uso del objeto base RUP, mediante éste se accederá al objeto json correspondientesegún el idioma obteniendo tanto los literales como los propios mensajes.Los literales utilizados para este componente están en la parte global de la internacionalización dentro de losresources de rup. A continuación se muestran los literales necesarios:"rup_maint": {"detailTitle":"Modificar registro","deletedOK":"El elemento se ha borrado correctamente.","insertOK":"El elemento se ha añadido correctamente.","modifyOK":"El elemento se ha modificado correctamente.","insertError":"Error al insertar el elemento.","validateError":"Se han producido los siguientes errores: <br/>","last":"Último","first":"Primero","next":"Siguiente","previous":"Anterior","elements":"Elementos","element(s)":"Elemento(s)","new":"Añadir","edit":"Editar","delete":"Eliminar","filter":"Filtrar","cancel":"Cancelar","searchOptions":"Criterios de búsqueda:","noGrid":"No es posible crear un mantenimiento sin un grid.","numResult":"Número de resultados","de":"de","changes": "Control de cambios","saveAndContinue": "Se perderán los cambios en los datos modificados, ¿deseacontinuar?","checkSelectedElems": "Se van a deseleccionar los elementos seleccionados, ¿deseacontinuar?","checkAddedSelectedElems":"Los elementos añadidos en la pagina actual van a serdeseleccionados, ¿desea continuar?","selectAll": "Ha seleccionado todos los registros de la página actual.","selected": "Registros seleccionados.","deleteAll": "¿Está seguro que desea eliminar todos los registros seleccionados?","titleDelAll": "Eliminar los registros","noReg":"Seleccione un registro.","emptyChanges": "No se han realizado cambios.","invalidRowId": "El identificador de la fila no es válido. No se puede completar laacción","toolbarNewButtonError": "Error al crear un nuevo botón. <br/>Las tres variables detodo nuevo botón deben estar informadas."}El acceso a cualquier tipo de literal se debe realizar de la siguiente forma (teniendo en cuenta que es unobjeto json):$.rup.i18n.rup_maint.#literal#
  24. 24. Componentes RUP – Mantenimiento 24/339. Integración con UDALa obtención de los datos a visualizar en el mantenimiento se hace vía peticiones AJAX al servidor deaplicaciones, donde el controller correspondiente tratará la petición, obtendrá los datos y los devolverá parapresentarlos en el formato que el componente necesita.Un ejemplo sería la implementación del método getAll de un controller:@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 AJAX proviene del componente mantenimiento se añade en la mismauna cabecera con el siguiente aspectoJQGridModel trueLa ejecución del método del controller correspondiente se determina mediante dicha cabecera. Paraidentificarla, se define del siguiente modo en el mapeo del método.@RequestMapping(method = RequestMethod.GET, headers={"JQGridModel=true"})UDA proporciona la clase com.ejie.x38.dto.Pagination en la librería de utilidades comunes parafacilitar la transferencia de la información de la paginación desde el controller hasta las capas de negocio yde acceso a datos. Los valores de los atributos del objeto se obtendrán de los parámetros de paginación delcomponente 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 siguentemodo:public @ResponseBody JQGridJSONModel getAllJQGrid(@ModelAttribute Alumno filterAlumno,@ModelAttribute Pagination pagination) {
  25. 25. Componentes RUP – Mantenimiento 25/33Una vez se ha obtenido la información que se debe visualizar en el mantenimiento, el componente requiereque le sea enviado desde el servidor de aplicaciones una estructura json específica que contenga los datosnecesarios. 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 elmantenimiento. Cada objeto json contiene por cada columna un par clave-valor que indica el nombrede 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 clasecom.ejie.x38.dto.JQGridJSONModel. Esta clase dispone de los atributos correspondientes a laspropiedades de los objetos json que requiere el componente. De este modo, se facilita la serialización delobjeto en la estructura json adecuada. Un ejemplo de su uso sería el siguiente:JQGridJSONModel data = new JQGridJSONModel(pagination, recordNum, alumnos);El mantenimiento realiza las operaciones típicas sobre una entidad: Recuperar, Crear, Actualizar y Eliminar,(en inglés CRUD). Para ello, el componente hace uso de las operaciones http POST, GET, PUT y DELETE.Los métodos generados por UDA en el controller correspondientes a estas operaciones son los siguientes:• Recuperar: Se generan dos métodos. El método getAll utilizado para realizar la búsqueda deregistros en base a los parámetros de filtrado introducidos por el usuario.@RequestMapping(method = RequestMethod.GET)public @ResponseBody List<Alumno> getAll(@ModelAttribute Alumno filterAlumno) {}El método getById, recupera el elemento correspondiente al identificador indicado en la url mediantela que se realiza la petición.@RequestMapping(value = "/{id}", method = RequestMethod.GET)public @ResponseBody Usuario getById(@PathVariable String id) {}
  26. 26. Componentes RUP – Mantenimiento 26/33• Crear: Para esta operación se genera el método add, que se encarga de realizar las llamadasoportunas a la capa de negocio para persistir la información enviada por POST.@RequestMapping(method = RequestMethod.POST)public @ResponseBody Usuario add(@RequestBody Usuario usuario) {}• Actualizar: La operación de modificación se realiza mediante el método edit, que se encarga derealizar las llamadas oportunas a la capa de negocio para persistir la información enviada mediantela operación PUT.@RequestMapping(method = RequestMethod.PUT)public @ResponseBody Usuario edit(@RequestBody Usuario usuario,HttpServletResponse response) {}• Eliminar: En el caso del borrado de elementos, puede realizarse la eliminación de un único registroo el de varios de manera simultánea. El borrado individual se realiza mediante el método remove,que recibe mediante la operación http DELETE, el identificador del elemento que debe deeliminarse.@RequestMapping(value = "/{id}", method = RequestMethod.DELETE)public void remove(@PathVariable String id,HttpServletResponse response) {}En el caso de un borrado múltiple, el método removeMultiple recibirá por POST la lista de losidentificadores de los elementos que se deben eliminar.@RequestMapping(value = "/deleteAll", method = RequestMethod.POST)public void removeMultiple(@RequestBody ArrayList<ArrayList<String>> usuarioIds,HttpServletResponse response) {}9.1. Upload de ficherosEl componente mantenimiento permite incluir campos file en el formulario de detalle para realizar subidade ficheros.El campo file puede ser incluido en el formulario de detalle de dos maneras diferentes: autogenerado, deacuerdo a la configuración realizada en el colModel del componente, o creando el input directamente encaso de proveer al mantenimiento de un formulario de detalle propio.En el caso de que el formulario de detalle sea generado por el propio mantenimiento a partir de laspropiedades de configuración del colModel se debería de indicar del siguiente modo:
  27. 27. Componentes RUP – Mantenimiento 27/33colModel: [{name: "imagenPerfil",label: "imagenPerfil",index: "imagenPerfil",width: "150",editable: true,edittype:"file"}]Esta configuración generará el siguiente campo file:<input id="detailForm_perfilUsuario_imagenPerfil"class="formulario_linea_input" type="file" name="imagenPerfil"/>Este código html puede valer como ejemplo del que se debería de incluir en caso de utilizar unformulario de detalle propio.Una vez creado el control file, el siguiente paso será realizar la configuración necesaria para gestionarcorrectamente la subida de ficheros. En primer lugar se debe comprobar que existe en la configuraciónde Spring (fichero mvc-config.xml) la siguiente definición:<bean id="multipartResolver" class="com.ejie.x38.util.UdaMultipartResolver"></bean>Esto permitirá a Spring gestionar los envíos de ficheros de tipo multipart/form-data. Desde UDAse proporciona una implementación de MultipartResolver para permitir el envío de peticiones multipartmediante el método http PUT.DatabindingAl enviar la información en un formato diferente a json no entra en juego el componente Jackson pararealizar el databinding ni el componente de validación de datos.Para realizar el databinding de los parámetros enviados en la request entre los parámetros del métododel controller deberemos indicar cuál va a ser el bean sobre el que se va a realizar el binding. Esto loindicamos mediante la anotación @ModelAttribute que permite a Spring identificar el bean que va autilizar para asignar a sus atributos los valores de los parámetros con el mismo nombre que han sidoenviados en la request.public @ResponseBody PerfilUsuario add(@ModelAttribute PerfilUsuario perfilUsuario,HttpServletResponse response) {}El binding del fichero enviado se puede realizar de dos modos:
  28. 28. Componentes RUP – Mantenimiento 28/33• Sobre una propiedad del bean:Se mapea directamente el contenido del fichero sobre un atributo del bean del mismo nombre que elnombre del parámetro de la request en el que se envía el fichero. El atributo del bean debe ser de tipobyte[].public class PerfilUsuario implements java.io.Serializable {private byte[] imagenPerfil;// Resto de propiedades y metodos}El parámetro enviado en la request debe tener el mismo nombre que la propiedad del bean:Content-Disposition: form-data; name="imagenPerfil"; filename="Invierno.jpg"Content-Type: image/jpegPara que Spring sea capaz de realizar correctamente la asignación del contenido del fichero en elparámetro del bean, se debe realizar la siguiente configuración en el controller:@InitBinderprotected void initBinder(HttpServletRequest request,ServletRequestDataBinder binder) throws ServletException {// Binding para los tipos de datos byte[]binder.registerCustomEditor(byte[].class,new ByteArrayMultipartFileEditor());// Binding para los tipos de datos Datebinder.registerCustomEditor(Date.class, newCustomDateEditor(DateTimeManager.getDateTimeFormat(LocaleContextHolder.getLocale()), true));}Mediante este método anotado con @InitBinder realizaremos la configuración del binder. Estaconfiguración es necesaria para indicar el uso de la clase ByteArrayMultipartFileEditor alrealizar el databinding de un fichero sobre una propiedad de tipo byte[].Del mismo modo, indicaremos una nueva entrada de configuración para que el binder sea capaz degestionar correctamente la asociación de parámetros de la request sobre propiedades de tipo Date.Mediante esta configuración la asociación de los datos se realizará de acuerdo al formato de fechacorrespondiente para el idioma actual.
  29. 29. Componentes RUP – Mantenimiento 29/33• Sobre un parámetro del método del controller:Se dispone de otra alternativa para realizar el databinding del fichero enviado al servidor. En este casoen vez de mapearse sobre un atributo del bean, se realiza sobre un parámetro del método del controller.La declaración del método del controller sería la siguiente:@RequestMapping(method = RequestMethod.POST)public @ResponseBody PerfilUsuario edit(@ModelAttribute PerfilUsuario perfilUsuario,@RequestParam(value="imagenPerfil",required=false) MultipartFileimagenPerfil) {}La declaración del parámetro anotado mediante @RequestParam indicará a Spring que debe realizar elbinding del parámetro de la request con nombre imagenPerfil.
  30. 30. Componentes RUP – Mantenimiento 30/3310. Interacción con otros componentes RUPEn este apartado se van a mostrar ejemplos para indicar como se debe especificar el uso de los diferentescomponentes RUP en el formulario de detalle.Los ejemplos plantean la creación de un componente para una columna especificada en el colModel. Comonorma general para todos los componentes rup, el tipo de componente se especifica en la propiedadrupType, mientras que las propiedades de configuración correspondientes se especificarán en la propiedadeditoptions.colModel: [{name: "nombre_de_columna",rupType: "tipo_de_componente_RUP",editoptions: {// Opciones de configuración del componente},}]Tanto para el componente hora como para el componente fecha se han creado unos formatter predefinidospara facilitar el formateo de las fechas:• RupDate: "d/m/Y"• RupDateTime: "d/m/Y H:i"• RupDateTimeSec: "d/m/Y H:i:s"• RupTime: "H:i"• RupTimeSec: "H:i:s"En los ejemplos de creación de los componentes fecha y hora se puede apreciar su uso.• Autocomplete:Creación de un autocomplete remoto. El tipo de componente se especifica en la propiedad rupType.Las propiedades de configuración del componente autocomplete se indican en la propiedadeditoptions del colModel.colModel: [{name: "usuario.id",jsonmap:"usuario.id",label: "idUsuario",index: "idUsuario",editable: true,rupType: "autocomplete",formatter: "rup_combo",editoptions: {source : "../usuario",sourceParam : {label:"nombre", value:"id", style:"css"},
  31. 31. Componentes RUP – Mantenimiento 31/33valueName: "usuario.id",labelName: "usuario.apellido1"}}]• Combo:Creación de un combo remoto. El tipo de componente se especifica en la propiedad rupType. Laspropiedades de configuración del componente combo se indican en la propiedad editoptions delcolModel.colModel: [{name: "usuario.id",jsonmap:"usuario.id",label: "idUsuario",index: "idUsuario",editable: true,rupType: "combo"formatter: "rup_combo",editoptions: {source : "../usuario",blanksourceParam : {label:"desc"+$.rup_utils.capitalizedLang(),value:"code", style:"css"},blank: ""}}]• Fecha:Creación de un componente fecha. El tipo de componente se especifica en la propiedad rupType.Las propiedades de configuración del componente fecha se indican en la propiedad editoptions delcolModel.En la propiedad formatOptions se indica el uso de un formatter predefinido de RUP.colModel: [{name: "usuario.fechaAlta",jsonmap:"usuario.fechaAlta",label: "fechaAlta",index: "fechaAlta",editable: true,rupType: "date"formatter: "date",formatoptions:{newformat:"RupDateTime"},editoptions: {datetimepicker:true,showButtonPanel : true,showOtherMonths : true,noWeekend : true,showSecond: false,timeFormat: hh:mm}}]
  32. 32. Componentes RUP – Mantenimiento 32/33Tanto para el componente hora como para el componente fecha.• Time:Creación de un componente hora. El tipo de componente se especifica en la propiedad rupType. Laspropiedades de configuración del componente hora se indican en la propiedad editoptions delcolModel.En la propiedad formatOptions se indica el uso de un formatter predefinido de RUPcolModel: [{name: "usuario.horaAlta",jsonmap:"usuario.horaAlta",label: " horaAlta",index: " horaAlta",editable: true,rupType: "time"formatter: "rup_time",formatoptions:{newformat:"RupTime"},editoptions: {datetimepicker:true,showButtonPanel : true,showOtherMonths : true,noWeekend : true,showSecond: false,timeFormat: hh:mm}}]• Validación:El mantenimiento permite el uso del componente RUP validación para realizar la validación de loscampos del formulario de detalle. La configuración de dicho componente se realiza mediante lapropiedad validation del mantenimiento.$("#mantenimiento").rup_maint({jQueryGrid: "GRID_alumno",......validation:{messages:{"password_confirm":$.rup.i18n.app.alumno.password_confirm,"email_confirm":$.rup.i18n.app.alumno.email_confirm},rules:{"nombre":{required:true},"password_confirm":{equalTo:"#password"},"email_confirm":{equalTo:"#email"}}},......}
  33. 33. Componentes RUP – Mantenimiento 33/33

×