UDA-Componentes RUP. Reporting
0 recomendaciones297 vistas
Este documento describe el componente RUP Report, el cual mejora la experiencia del usuario al generar informes mediante diálogos de espera. Explica cómo invocar el componente pasándole propiedades de configuración, así como las dependencias de ficheros necesarias y cómo personalizar los diálogos predeterminados.
UDA-Componentes RUP. Reporting
- 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 – Report 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 – Report ii/9 Control de documentación Título de documento: Componentes RUP – Report Histórico de versiones Código: Versión: Fecha: Resumen de cambios: 1.0.0 05/03/2013 Primera versión. 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. Control de difusión Responsable: Ander Martínez Aprobado por: Firma: Fecha: Distribución: Referencias de archivo Autor: Nombre archivo: Localización:
- 3. Componentes RUP – Report iii/9 Contenido Capítulo/sección Página 1. Introducción 4 2. Ejemplo 4 3. Casos de uso 4 4. Infraestructura 5 4.1. Ficheros 5 4.2. Dependencias 5 4.3. Versión minimizada 6 5. Invocación 6 6. Propiedades 6 7. Sobreescritura del theme 8 8. jQuery File Download 8
- 4. Componentes RUP – Report 4/9 1. Introducción La descripción del Componente Report, visto desde el punto de vista de RUP, es la siguiente: El objetivo principal del componente es mejorar la experiencia del usuario a la hora de generar informes mediante la presentación de diálogos de espera. 2. Ejemplo Se presentan a continuación un ejemplo de este componente: 3. Casos de uso Se recomienda el uso del componente: • Cuando se desea generar un informe y descargarlo. • Cuando se desea añadir un botón a una capa, botonera o mbutton para descargar informe.
- 5. Componentes RUP – Report 5/9 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.report -x.y.z.js Ruta theme: rup/basic-theme/ Fichero CSS del theme: theme.rup.report - 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 los diálogos se realiza mediante el jQuery File Download Plugin v1.3.3, • jquery.fileDownload.js Adicionalmente se utiliza el componente rup.toolbar para la gestión de botones. 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 • jqGrid-4.4.1.js • rup.base-x.y.z.js • rup.toolbar-x.y.z.js • rup.report-x.y.z.js • theme.rup.toolbar-z.y.z.css • theme.rup.report-z.y.z.css
- 6. Componentes RUP – Report 6/9 4.3. Versión minimizada A partir de la versión v2.4.0 se distribuye la versión minimizada de los componentes RUP. Estos ficheros contienen la versión compactada y minimizada de los ficheros javascript y de estilos necesarios para el uso de todos los compontente RUP. Los ficheros minimizados de RUP son los siguientes: • rup/scripts/min/rup.min-x.y.z.js • rup/basic-theme/rup.min-x.y.z.css Estos ficheros son los que deben utilizarse por las aplicaciones. Las versiones individuales de cada uno de los componentes solo deberán de emplearse en tareas de desarrollo o depuración. 5. Invocación Este componente se invocará sin asociarlo directamente a un elemento, ya que el elemento al que asociar los botones será un objeto HTML ya existente. Por ejemplo: $.rup_report(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. Propiedades A continuación se muestran los posibles parámetros de configuración que recibe el componente. • appendTo: Identificador del elemento al que se añadirá el botón o botones. Puede ser una capa, una botonera o un mbutton. En el caso de ser un mbutton sólo podrán añadirse botones, no mbuttons. • buttons: Array de botones a añadir. Su declaración es similar a los del componente rup.toolbar pero tienen algunos parámetros extra: o i18nCaption: texto que se mostrará en el botón. Obtenido del fichero de literales de la aplicación. o json_i18n: objeto JSON del que se obtienen los literales a mostrar. o css: define el estilo a aplicar. Se utilizará para mostrar imágenes a la izquierda del botón. o click: función javascript que se ejecutará cuando se pulse el botón al que se ha asociado. La función podrá recibir un parámetro “event” que contendrá el identificador y el texto del botón y se accederá a ellos mediante la sentencia “event.data.id” y “event.data.caption” respectivamente.
- 7. Componentes RUP – Report 7/9 o buttons: array para definir sub-botones con lo que la definición se convierte en un mbutton. o url: ruta al Controller encargado de generar el informe. o columns: objeto que define si se van a enviar los datos de las columnas (nombres y posiciones): grid: identificador del grid del que obtener las columnas. customNames: array que indica el nombre de las columnas a incluir (atributo name del grid). hidden: indica si se desean incluir las columnas ocultas. Por defecto valor false. NOTA: la prioridad para determinar qué columnas mostrar es: customNames, todas las columnas, las visibles. o customDialog: identificador del dialogo propio definido en el componente (ver atributo customDialog más adelante). o isInline: indica que el informe se genera en una pestaña nueva del navegador. Sólo soportado en PDF. Su valor por defecto es false. • dialog: objeto para sobrescribir los literales por defecto del diálogo del componente y asociar funciones de callback. o wait: objeto para definir el diálogo de espera mientras se genera el informe: title: título del diálogo. msg: mensaje del diálogo. o error: objeto para definir el diálogo que se muestra si se produce un error: title: título del diálogo. msg: mensaje del diálogo. o successCallback: función que se ejecuta cuando se genera correctamente el informe. o failCallback: función que se ejecuta cuando no se genera correctamente el informe. • customDialog: objeto para definir los diálogos propios definidos por el usuario. Puede modificar simplemente los literales para un botón determinado o puede definir sus propias capas para sus diálogos completamente personalizados. o nombre: identificador del diálogo que se define en el botón o successCallback: función que se ejecuta cuando se genera correctamente el informe.
- 8. Componentes RUP – Report 8/9 o failCallback: función que se ejecuta cuando no se genera correctamente el informe. Autogestionado (capas propias) o waitDiv: identificador de la tabla para el diálogo de espera. o errorDiv: identificador de la capara para el diálogo de error. Sobreescritura de literales existentes o wait: objeto para definir el diálogo de espera mientras se genera el informe: title: título del diálogo. msg: mensaje del diálogo. o error: objeto para definir el diálogo que se muestra si se produce un error: title: título del diálogo. msg: mensaje del diálogo. NOTA: Todas las propiedades se almacenan en el .data(“report”) del contenedor donde se añaden los botones. 7. Sobreescritura del theme El componente report se presenta con una apariencia visual definida en el fichero de estilos theme.rup.report-x.y.z.css. En este fichero simplemente se definen los estilos para la barra de progreso en el diálogo de espera por defecto: .rup_report .ui-progressbar { height: 22px; margin-top: 2em; margin-bottom: 3em; width: 100%; } .rup_report .ui-progressbar-value { background: url(images/pbar-ani.gif); } 8. jQuery File Download El componente rup-report utiliza como plugin subyacente jQuery File Download que es el encargado de gestionar los diálogos correspondientes. Su funcionamiento se basa en detectar una cookie generada por el servidor que determina el final de la generación del informe. Los valores de la cookie por defecto son: cookieName: "fileDownload", cookieValue: "true",
- 9. Componentes RUP – Report 9/9 cookiePath: "/", Para más información acerca del funcionamiento del plugin: http://johnculviner.com/post/2012/03/22/Ajax-like-feature-rich-file-downloads-with-jQuery-File-Download.aspx Demos del funcionamiento del plugin: http://jqueryfiledownload.apphb.com/