UDA-Componentes RUP. Feedback (v2.1.0 deprecado)

319 views

Published on

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

http://uda-ejie.github.io/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
319
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

UDA-Componentes RUP. Feedback (v2.1.0 deprecado)

  1. 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 – Feedback 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. 2. Componentes RUP – Feedback iii/9 Control de documentación Título de documento: Componentes RUP – Feedback 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, texto en la creación del componente. 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.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:
  3. 3. Componentes RUP – Feedback iv/9 Localización: Contenido Capítulo/sección Página 1. Introducción 5 2. Ejemplo 5 3. Casos de uso 5 4. Infraestructura 5 4.1. Ficheros 5 4.2. Dependencias 6 4.3. Versión minimizada 6 5. Invocación 7 6. Parámetros 7 7. Funciones 8 8. Sobreescritura del theme 9 9. Integración con UDA 10
  4. 4. Componentes RUP – Feedback 5/9 1. Introducción La descripción del Componente Feedback visto desde el punto de vista de RUP es la siguiente: Se informa al usuario de cómo interactuar con los elementos de la aplicación y del resultado de cualquier acción que realice o cualquier problema que tenga y de cómo solucionarlo. 2. Ejemplo Se presentan a continuación un ejemplo del componente: 3. Casos de uso Se recomienda el uso del componente: • Cuando el usuario tenga una necesidad de información ya sea por cambios en el sistema, ejecución de procesos, realización de tareas o confirmación de acciones. En concreto, los principales tipos de feedback que tenemos que considerar son los siguientes: • Mensajes de sistema o informativos • Mensajes de confirmación • Mensajes de error y aviso • Feedback de formularios y edición • Estado de un proceso • Mensajes previos / previsualización 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.feedback-x.y.z.js Ruta theme: rup/basic-theme/ Fichero css del theme: theme.rup.feedback-x.y.z.css
  5. 5. Componentes RUP – Feedback 6/9 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 la ciertas partes visuales de los componentes, se han realizado medieante 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 • rup.base-x.y.z.js • rup.feedback-x.y.z.js • theme.rup.feedback-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.
  6. 6. Componentes RUP – Feedback 7/9 5. Invocación Este componente se aplica sobre una capa definida que tendrá como objeto el mostrar los mensajes al usuario. Será labor del desarrollador definir dicha capa en su página y definir un identificador que se utilizará en la invocación del componente. $("#id_capa").rup_feedback(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. Parámetros A continuación se muestran los posibles parámetros de configuración que recibe el componente. • type: tipo del feedback, lo que indicará que imagen de las definidas por defecto se mostrará (a la izquierda del texto). Los valores posibles son: ok, alert y error. En caso de no definir tipo alguno no se mostrará imagen alguna. Valor por defecto null. • message: mensaje que se mostrará en el feedback. Si no se define simplemente se creará el objeto donde se mostrarán los mensajes. • imgClass: estilo personalizado para la imagen a mostrar en el feedback. En caso de definirse, no se tendrá en cuenta el tipo indicado en el parámetro type ya que deben prevalecer los estilos definidos por el desarrollador frente a los estilos por defecto del componente. Valor por defecto null. Un ejemplo de este estilo podría ser el siguiente: .feedbackImgPruebas { background-image: url("../images/feedbackImgPruebas.png"); background-repeat: no-repeat; background-position: 8px 12px; padding-bottom:1em; padding-left:4.5em; padding-right:0.5em; padding-top:1em; } • delay: tiempo (en milisegundos) de espera hasta que se inicia la animación para hacer desaparecer la capa. En caso de no definirse la capa no desaparecerá y su gestión dependerá del desarrollador. Valor por defecto null. • fadeSpeed: velocidad (en milisegundos) a la que se realiza la degradación de la capa hasta su desaparición. Valores superiores indican animaciones más lentas, no más rápidas. Depende directamente de la declaración del parámetro delay ya que si no existe animación no tiene sentido este parámetro y en caso de definirse el delay pero no el fadeSpeed se tomará el valor por defecto 400. Internamente se invoca a la función fadeOut de jQuery. Valor por defecto null. • gotoTop: booleano que determina si cuando se muestre el feedback se debe desplazar la página hasta la parte superior de la misma, ya que normalmente los mensajes se suelen mostrar ahí. Valor por defecto true.
  7. 7. Componentes RUP – Feedback 8/9 • block: booleano que indica si la capa que contendrá el mensaje de feedback debe tener o no un espacio fijo en la pantalla. Este parámetro establece el atributo de estilo (css) display con los valores block (true) o none (false). Valor por defecto true. • closeLink: booleano que indica si la capa de feedback tendrá un enlace para que el usuario de la aplicación pueda cerrar la capa manualmente. Valor por defecto true. Un ejemplo de una definición de un componente feedback podría ser la siguiente: var properties = { type: "ok", delay: 500, fadeSpeed: 600, gotoTop: false, block: false, closeLink: true } $("#id_capa").rup_feedback (properties); 7. Funciones A continuación se detallan las diferentes funciones que integran el componente feedback: • destroy: elimina las modificaciones realizadas sobre la capa para convertirla en feedback volviendo a ser una simple capa. La invocación se realizará de la siguiente manera: $("#id_capa").rup_feedback("destroy"); • set (msg, type, imgClass): establece el texto (msg) a mostrar en el feedback, que podrá ser tanto texto plano como html. En caso de sólo definirse el parámetro msg, se mostrará como imagen aquella definida anteriormente ya sea de un tipo por defecto o de una imagen con estilo personalizado (si es que se había definido). En caso de que se envíe el parámetro type informado de modificará la capa para mostrar la imagen por defecto asociada al tipo, borrando algún posible estilos personalizado establecido anteriormente. Por último para realizar el cambio a un estilo personalizado se pasará como parámetro type null y como imgClass la clase con el estilo a establecer. Se muestran unos ejemplos para facilitar la comprensión: o Feedback simple (usando configuración anterior): $("#id_capa").rup_feedback("set","Texto a mostrar"); o Feedback cambiando a imagen de un tipo por defecto (Ej. error): $("#id_capa").rup_feedback("set", "...", "error"); o Feedback estableciendo un estilo personalizado: $("#id_capa").rup_feedback("set", "...", null, "imgPropio"); • hide (delay, fadeSpeed): oculta la capa del feedback con una animación. Si no se definen los parámetros se tomaran los definidos con anterioridad (creación del feedback por ejemplo) o si no los valores por defecto (null, null) que implica una animación sin espera con una “velocidad” de 400 ms. La invocación de la función se realizará de la siguiente manera:
  8. 8. Componentes RUP – Feedback 9/9 o Tomando valores anteriores o por defecto (si no se han definido): $("#id_capa").rup_feedback("hide"); o Definiendo valores nuevos: $("#id_capa").rup_feedback("hide", 500, 600); • close: oculta la capa del feedback sin animación alguna. Esta función será invocada por el enlace de cierre (parámetro closeLink) en caso de que se muestre. La invocación de la función se realizará de la siguiente manera: $("#id_capa").rup_feedback("close"); • show: muesta la capa del feedback. Esta función será invocada automáticamente cada vez que se invoque la función set(…) La invocación de la función se realizará de la siguiente manera: $("#id_capa").rup_feedback("show"); • option: permite cambiar las propiedades definidas en el feedback. Puede invocarase antes que la funcion set(…) para modificar cualquiera de los parámetros del mensaje a mostar: icono, imagen personalizada, tiempo de espera hasta desaparecer… La invocación de la función se realizará de la siguiente manera: o Feedback cambio propiedad simple: $("#id_capa").rup_feedback("option","closeLink", false); o Feedback cambio varias propiedades: $("#id_capa").rup_feedback("option", properties); 8. Sobreescritura del theme El componente feedback se presenta con una apariencia visual definida en el fichero de estilos theme.rup.feedback-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). A continuación se muestran unas capturas del componente con los estilos asociados dependiendo del uso de imágenes. Los estilos que contengan la palabra “ui-“ son los propios de jQuery UI que en caso de ser necesario serán sobrescritos y no se comentarán en este documento por no ser su ámbito. Feedback con imagen por defecto (type: ok) con cierre:
  9. 9. Componentes RUP – Feedback 10/9 • .rup-feedback: estilo asociado a la capa del feedback • .rup-feedback_image: estilo asociado a la imagen por defecto (valores generales ej. posición). • .rup-feedback_image_ok: imagen según type. Varia entre: _ok, _alert, _error (url a imágenes). • .rup-feedback_closeLink: div que contiene el cierre de la capa (enlace e imagen) Feedback con imagen de estilo personalizado (type: ok) sin cierre: • .rup-feedback: estilo asociado a la capa del feedback • .feedbackImgPruebas: estilo personal para mostrar la imagen personalizada. Se define en la hoja de estilos propia de la aplicación en este caso en x21a.css. 9. Integración con UDA No aplica.

×