UDA-Utilidades de desarrollo de aplicaciones • UDA-Componentes RUP. Reporting http://uda-ejie.github.io/

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/