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

1. UDA - Utilidades de Desarrollo de Aplicaciones
Componentes RUP – Mensaje
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
UDA – Utilidades de desarrollo de aplicaciones by EJIE is licensed under a Creative Commons Reconocimiento-
NoComercial-CompartirIgual 3.0 Unported License.

2. Componentes RUP – Mensaje ii/10
Control de documentación
Título de documento: Componentes RUP – Mensaje
Histórico de versiones
Código: Versión: Fecha: Resumen de cambios:
1.0.0 06/06/2011 Primera versión.
1.0.1 18/07/2011 Correcciones en los números de versión de ficheros..
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.
2.0.0 11/07/2012 Cambios de formato y correcciones ortográficas.
2.1.0 18/09/2012
Actualización de las versiones de las librerías
JavaScript subyacentes.
2.1.1 09/01/2013 Añadido el callback CANCELFunction.
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:

3. Componentes RUP – Mensaje iii/10
Nombre archivo:
Localización:
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
5.1. Mensajes de error 6
5.2. Mensajes de confirmación 7
5.3. Mensajes de aviso 8
5.4. Mensajes de alerta 8
6. Sobreescritura del theme 10
7. Integración con UDA 10

4. Componentes RUP – Mensaje 4/10
1. Introducción
La descripción del Componente Mensajes, visto desde el punto de vista de RUP, es la siguiente:
Tiene como objetivo mostrar al usuario de forma homogénea, clara y llamativa, los posibles mensajes
que pueden desencadenar las acciones en la aplicación. Estos mensajes predefinidos pueden ser de
diferente tipología: error, confirmación, aviso o alerta
2. Ejemplo
Se presentan a continuación los diferentes tipos de mensajes:
Mensaje de error Mensaje de confirmación
Mensajes de aviso Mensajes de alerta
3. Casos de uso
Se recomienda el uso del patrón:
• En los casos en los que se tenga la necesidad de informar a los usuarios sobre mensajes que
requieran de su plena atención o interacción, bloqueando otras acciones (ventana modal).
• En los casos en los que no sea tan crítica la noción de los usuarios sobre una notificación
específica, bastara con presentar los mensajes mediante el sistema de notificación de la propia
pantalla (componente Feedback).

5. Componentes RUP – Mensaje 5/10
En concreto, los principales tipos de mensajes que tenemos que considerar son los siguientes:
• Mensajes avisos
• Mensajes de confirmación
• Mensajes de error
• Mensajes de alerta
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.message-x.y.z.js
Ruta theme: rup/basic-theme/
Fichero css del theme: theme.rup.message-x.y.z.css
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
• jquery-ui-1.8.23.custom.css

6. Componentes RUP – Mensaje 6/10
• rup.base-x.y.z.js
• rup.message-x.y.z.js
• theme.rup.message-x.y.z.css
4.3. Versión minimizada
A partir de la versión v2.4.0 se distribuye la versión minimizada de los componentes RUP. Estos ficheros
contienen la versión compactada y minimizada de los ficheros javascript y de estilos necesarios para el
uso de todos los compontente RUP.
Los ficheros minimizados de RUP son los siguientes:
• rup/scripts/min/rup.min-x.y.z.js
• 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
El uso de este componente se realiza a través del objeto base de todos los patrones, RUP. Para poder
mostrar los mensajes se debe usar la siguiente sentencia:
$.rup_messages("tipo_mensaje", properties);
En el ejemplo superior se muestra el código para poder mostrar un mensaje de error, al cual se le pasa
como parámetro un objeto que se detalla a posteriori.
5.1. Mensajes de error
Los mensajes de error pueden aparecer sobre elementos tales como tablas, formularios, etcétera. El
estilo más adecuado para utilizar con este tipo de mensajes es un estilo neutro (usando fondos suaves)
o un estilo gráfico o iconografía cercana al naranja o rojo, pero sin llegar a intimidar.
Para introducir un mensaje de error, no hace falta tener declarado ninguna capa contenedora del
mensaje, ya que el propio componente crea una con los estilos determinados para este tipo de mensaje
y le añade los botones necesarios.
A continuación se muestra el código JavaScript necesario para poder invocar un mensaje de error:
$.rup_messages("msgError", properties);
El parámetro “properties” es un objeto (var properties = {};) en el que se pueden modificar los siguientes
parámetros del componente:
• title: Texto que aparecerá en la barra del titulo del mensaje.

7. Componentes RUP – Mensaje 7/10
• message: El mensaje de error que se quiere mostrar. Dicho mensaje se situará a la
derecha de la imagen de error. El mensaje puede ser texto plano o contener etiquetas
HTML que se reflejarán en el mismo.
• beforeClose: (evento) Se podrá definir una función a ejecutar justo antes de que se
cierre la ventana.
Los estilos de los que dispone el componente son:
• .ui-dialog-content-icon-error: Estilo de la capa con la imagen de error.
• .ui-dialog-content-msg-error: Estilo de la capa con el texto a mostrar cuando el mensaje
es de tipo error.
En el punto de sobre escritura del theme se explica como se puede extender este tipo de mensajes.
5.2. Mensajes de confirmación
Los mensajes de confirmación pueden aparecer sobre elementos tales como tablas, formularios,
etcétera. El estilo más adecuado para utilizar con este tipo de mensajes es un estilo neutro (usando
fondos suaves).
Para introducir un mensaje de confirmación, no hace falta tener declarado ninguna capa contenedora
del mensaje, ya que el propio componente crea una con los estilos determinados para este tipo de
mensaje y le añade los botones necesarios.
A continuación se muestra el código JavaScript necesario para poder invocar un mensaje de
confirmación:
$.rup_messages("msgConfirm", properties);
El parámetro “properties” es un objeto (var properties = {};) en el que se pueden modificar los siguientes
parámetros del componente:
• title: Es el texto que aparecerá en la barra del titulo del mensaje.
• message: El mensaje de confirmación que se quiere mostrar. Dicho mensaje se situará
a la derecha de la imagen de confirmación. El mensaje puede ser texto plano o
contener etiquetas HTML que se reflejarán en el mismo.
• beforeClose: (evento) Se podrá definir una función a ejecutar justo antes de que se
cierre la ventana.
• OKFunction: (evento) Función a ejecutar cuando el usuario pulsa el botón de Aceptar.
Esta función recibe los siguientes parámetros (event, ui).
• CANCELFunction: (evento) Función a ejecutar cuando el usuario pulsa el enlace de
Cancelar. Esta función recibe los siguientes parámetros (event, ui).
Los estilos de los que dispone el componente son:
• .ui-dialog-content-icon-confirm: Estilo de la capa con la imagen de confirmación.

8. Componentes RUP – Mensaje 8/10
• .ui-dialog-content-msg-confirm: Estilo de la capa con el texto a mostrar cuando el
mensaje es de tipo confirmación.
En el punto de sobre escritura del theme se explica como se puede extender este tipo de mensajes.
5.3. Mensajes de aviso
Los mensajes de aviso pueden aparecer sobre elementos tales como tablas, formularios, etcétera. El
estilo más adecuado para utilizar con este tipo de mensajes es un estilo neutro (usando fondos suaves).
Para introducir un mensaje de aviso no hace falta tener declarado ninguna capa contenedora del
mensaje, ya que el propio componente crea una con los estilos determinados para este tipo de mensaje
y le añade los botones necesarios.
A continuación se muestra el código JavaScript necesario para poder invocar un mensaje de aviso:
$.rup_messages("msgOK", properties);
El parámetro “properties” es un objeto (var properties = {};) en el que se pueden modificar los siguientes
parámetros del componente:
• properties.title: Es el texto que aparecerá en la barra del titulo del mensaje.
• properties.message: El mensaje de aviso que se quiere mostrar. Dicho mensaje se
situará a la derecha de la imagen de aviso. El mensaje puede ser texto plano o contener
etiquetas HTML que se reflejarán en el mismo.
• properties.beforeClose: (Evento) Se podrá definir una función a ejecutar justo antes de
que se cierre la ventana.
Los estilos de los que dispone el componente son:
• .ui-dialog-content-icon-ok: Estilo de la capa con la imagen de aviso.
• .ui-dialog-content-msg-ok: Estilo de la capa con el texto a mostrar cuando el mensaje es
de tipo aviso.
En el punto de sobre escritura del theme se explica como se puede extender este tipo de mensajes.
5.4. Mensajes de alerta
Son mensajes que sustituyen a la función alert de javascript. Una de las mejores cualidades de este
componente es que sobre escribe dicha función y muestra un mensaje con los estilos y formato
preestablecidos para este tipo de mensajes.
La invocación se puede realizar de las siguientes formas:
$.rup_messages("msgAlert", properties);
Como cualquiera de los mensajes anteriores.
alert(mensaje);
Como si se tratase de una invocación al alert típico de javascript.

9. Componentes RUP – Mensaje 9/10
Los estilos de los que dispone el componente son:
• .ui-dialog-content-icon-alert: Estilo de la capa con la imagen de alerta.
• .ui-dialog-content-msg-alert: Estilo de la capa con el texto a mostrar cuando el mensaje
es de tipo alerta.
En el punto de sobre escritura del theme se explica como se puede extender este tipo de mensajes.

10. Componentes RUP – Mensaje 10/10
6. Sobreescritura del theme
El componente message se presenta con una apariencia visual definida en el fichero de estilos
theme.rup.message-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).
El componente dispone de dos estilos específicos que se modifican para cada tipo.
• .ui-dialog-content-icon-#tipo#: El estilo de la capa que contiene la imagen como background.
• .ui-dialog-content-msg-#tipo#: El estilo de la capa donde se mostrará el mensaje.
Por ejemplo:
.ui-dialog-content-icon-error {
background-image:url("../images/rup.error.png");
background-position:center center;
background-repeat:no-repeat;
float:left;
height:24px;
padding-right:1.3em;
padding-top:1.4em;
position:relative;
vertical-align:middle;
width:24px;
}
/*Estilo de la capa con el texto a mostrar cuando el mensaje es de error*/
.ui-dialog-content-msg-error {
padding-top:1em;
text-align:left;
vertical-align:middle;
}
7. Integración con UDA
No aplica.