UDA-Componentes RUP. Mensajes
Upcoming SlideShare
Loading in...5
×
 

UDA-Componentes RUP. Mensajes

on

  • 106 views

UDA-Utilidades de desarrollo de aplicaciones

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

http://code.google.com/p/uda/

Statistics

Views

Total Views
106
Views on SlideShare
106
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

UDA-Componentes RUP. Mensajes UDA-Componentes RUP. Mensajes Document Transcript

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