UDA - Utilidades de Desarrollo de Aplicaciones

Componentes RUP – Mensaje

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

UDA – Utilidades de desarrollo de aplicaciones by EJIE is licensed under a Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported License.

Componentes RUP – Mensaje ii/9

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.

Cambios producidos desde la última versión

Añadido el callback CANCELFunction.

Control de difusión

Responsable: Ander Martínez

Aprobado por:

Firma: Fecha:

Distribución:

Referencias de archivo

Autor:

Nombre archivo:

Localización:

Componentes RUP – Mensaje 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

5. Invocación 6

5.1. Mensajes de error 6

5.2. Mensajes de confirmación 7

5.3. Mensajes de aviso 7

5.4. Mensajes de alerta 8

6. Sobreescritura del theme 9

7. Integración con UDA 9

Componentes RUP – Mensaje 4/9

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).

Componentes RUP – Mensaje 5/9

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

Componentes RUP – Mensaje 6/9

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

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

• theme.rup.message-x.y.z.css

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.

• 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.

Componentes RUP – Mensaje 7/9

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.

• .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:

Componentes RUP – Mensaje 8/9

$.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.

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.

Componentes RUP – Mensaje 9/9

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.