UDA-Componentes RUP. Fecha

22
UDA - Utilidades de Desarrollo de Aplicaciones Componentes RUP – Fecha 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.

description

UDA-Utilidades de desarrollo de aplicaciones • UDA-Componentes RUP. Fecha http://code.google.com/p/uda/

Transcript of UDA-Componentes RUP. Fecha

Page 1: UDA-Componentes RUP. Fecha

UDA - Utilidades de Desarrollo de Aplicaciones

Componentes RUP – Fecha

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.

Page 2: UDA-Componentes RUP. Fecha

Componentes RUP – Fecha ii/22

Control de documentación

Título de documento: Componentes RUP – Fecha

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.

1.2.0 14/12/2011

Nuevos métodos getRupValue y setRupValue para la interacción con los demás componentes RUP.

Añadida la posibilidad de introducir conjuntamente fecha y hora.

Actualizado 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:

Page 3: UDA-Componentes RUP. Fecha

Componentes RUP – Fecha iii/22

Referencias de archivo

Autor:

Nombre archivo:

Localización:

Page 4: UDA-Componentes RUP. Fecha

Componentes RUP – Fecha iv/22

Contenido

Capítulo/sección Página

1. Introducción 5

2. Ejemplo 5

3. Casos de uso 5

4. Infraestructura 6

4.1. Ficheros 6

4.2. Dependencias 6

4.3. Versión minimizada 7

5. Invocación 7

6. Parámetros 7

7. Funciones 11

8. Eventos 13

9. Intervalos de fechas 14

10. Fechas múltiples 15

11. Fecha y hora 17

12. Interacción con teclado 18

13. Sobreescritura del theme 19

14. Integración con UDA 21

Page 5: UDA-Componentes RUP. Fecha

Componentes RUP – Fecha 5/22

1. Introducción

La descripción del Componente Fecha, visto desde el punto de vista de RUP es la siguiente:

Permite al usuario introducir y seleccionar una fecha, tanto de forma manual como visual, moviéndose fácilmente por días, meses y años. Además, para minimizar las posibilidades de introducir una fecha incorrecta, ofrece al usuario ayudas y sugerencias de formato. Además, este sistema permite la introducción de fechas independiente de dispositivo y flexible, ya que tanto los usuarios avanzados como los novatos podrán utilizarlo sin problemas.

2. Ejemplo

Se muestra a continuación una captura de un ejemplo típico del componente:

3. Casos de uso

Se recomienda el uso del componente:

• Cuando el usuario tenga que introducir una fecha y se quiera ofrecer flexibilidad para escribirla manualmente o seleccionándola de un calendario.

• Cuando el usuario tenga que introducir un intervalo y se quiera ofrecer flexibilidad para escribirla manualmente o seleccionándola de un calendario.

Page 6: UDA-Componentes RUP. Fecha

Componentes RUP – Fecha 6/22

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.date-x.y.z.js

Ruta theme: rup/basic-theme/

Fichero css del theme: theme.rup.date-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 la ciertas partes visuales de los componentes, 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

• jquery-ui.timepicker.js

• jquery-ui.multidatespicker.js (fechas múltiples)

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

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

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

Page 7: UDA-Componentes RUP. Fecha

Componentes RUP – Fecha 7/22

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á mediante un selector que indicará todos los elementos sobre los que se va a aplicar el componente calendario. Por ejemplo:

$("#id_input").rup_date (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.

• datetimepicker : indica si el componente permite introducir la hora además de la fecha. Su valor por defecto es false.

• disabled : indica si el componente debe aparecer deshabilitado o no. Su valor por defecto es false.

• altField: identificador de un campo adicional para que muestre la fecha en otro formato. Por defecto no se incluye.

• altFormat: formato que debe seguir la fecha en el campo adicional. Por defecto no se define.

• appendText: texto que se puede añadir detrás de cada campo de fecha. Por defecto no se define. Se recomienda el uso del atributo “labelMaskId” que se detalla a continuación en lugar de este atributo.

• labelMaskId: identificador del label que contendrá la máscara que indica el formato de la fecha.

Page 8: UDA-Componentes RUP. Fecha

Componentes RUP – Fecha 8/22

• mask: texto empleado para la máscara de la fecha. Su valor por defecto se obtiene del fichero de idioma.

• autoSize: booleano que indica si el campo para la fecha se tiene que redimensionar automáticamente para adaptares al texto introducido. Su valor por defecto es false .

• buttonImage: ruta a la imagen que se muestra junto al campo de la fecha y que sirve para desplegar el calendario pulsando sobre ella. Por defecto se muestra una imagen incluida en los ficheros de RUP.

• buttonText: texto alternativo de la imagen que se muestra junto al campo de la fecha. Su valor por defecto se obtiene del fichero de idioma.

• changeMonth: indica si se muestra un combo que en la cabecera que facilita el cambio de mes. Su valor por defecto es true.

• changeYear : indica si se muestra un combo que en la cabecera que facilita el cambio de año. Su valor por defecto es true.

• closeText: texto a mostrar en el botón que se muestra en el panel inferior (requiere el activarlo mediante el atributo showButtonPanel) para cerrar el calendario. Su valor por defecto se obtiene del fichero de idioma.

• currentText: texto a mostrar en el botón que se muestra en el panel inferior (requiere el activarlo mediante el atributo showButtonPanel) para seleccionar la fecha actual en el calendario. Su valor por defecto se obtiene del fichero de idioma.

• dateFormat: formato de la fecha a introducir (ej: dd/mm/yy para 20/01/2011). Su valor por defecto se obtiene del fichero de idioma.

• dayNames: literales para los días [array]. Su valor por defecto se obtiene del fichero de idioma.

• dayNamesMin: literales para los días (mínimos) [array]. Su valor por defecto se obtiene del fichero de idioma.

• dayNamesShort: literales para los días (corto) [array]. Su valor por defecto se obtiene del fichero de idioma.

• defaultDate: fecha que se muestra por defecto destacada cuando se abre el calendario y no hay ninguna fecha escrita. El tipo de parámetro puede ser Date, String o Number (ver la explicación al final de este apartado). Por defecto se destaca la fecha del día.

• duration: velocidad a la que aparece el calendario en pantalla (animación). Sus posibles valores son: ‘slow’, ‘normal’ y ‘fast’ o un valor numérico (milisegundos). El valor por defecto es normal.

• firstDay: número que indica en qué día de la semana debe empezar el calendario. El valor 0 equivale al domingo, el 1 al lunes y así sucesivamente. Su valor por defecto se obtiene del fichero de idioma.

• hideIfNoPrevNext: oculta los enlaces de siguiente/anterior mes cuando no se puede navegar. En caso contrario, los enlaces se deshabilitan. Su valor por defecto es false.

Page 9: UDA-Componentes RUP. Fecha

Componentes RUP – Fecha 9/22

• maxDate: fecha máxima que se puede seleccionar (límite superior). El tipo de parámetro puede ser Date, String o Number (ver la explicación al final de este apartado). Por defecto no hay límite.

• minDate: fecha mínima que se puede seleccionar (límite inferior). El tipo de parámetro puede ser Date, String o Number (ver la explicación al final de este apartado). Por defecto no hay límite.

• monthNames: literales para los meses [array]. Su valor por defecto se obtiene del fichero de idioma.

• monthNamesShort: literales para los meses (corto) [array]. Su valor por defecto se obtiene del fichero de idioma.

• nextText: literal a mostrar en el enlace de siguiente. Su valor por defecto se obtiene del fichero de idioma.

• numberOfMonths : número de meses a mostrar. Puede definirse como un numérico (ej. 2) o como un array indicando filas y columnas (ej. [2, 3]). Su valor por defecto es 1.

• prevText: literal a mostrar en el enlace de anterior. Su valor por defecto se obtiene del fichero de idioma.

• selectOtherMonths: permite seleccionar los días del meses anterior/posterior del que se muesta. Requiere que estén activos dichos días mediante el parámetro showOtherMonths. Su valor por defecto es false.

• showAnim: indica el tipo de animación que se emplea para mostrar el calendario en pantalla. Para más información ver los efectos de jQuery UI. Su valor por defecto es show.

• showButtonPanel: indica si se muestran los botones de la parte inferior (hoy y cerrar). Su valor por defecto es false.

• showCurrentAtPos: cuando se muestra más de un mes, indica la posición que ocupa el mes actual. Su valor por defecto es 0.

• showMonthAfterYear: intercambia la posición del mes y del año en la cabecera del calendario. Su valor por defecto se obtiene del fichero de idioma.

• showOptions: objeto que determina las propiedades de la animación del calendario. Para más información ver la siguiente página.

• showOtherMonths: indica si se muestran los días del mes anterior y posterior al que se muestra. Su valor por defecto es false.

• showWeek: indica si se debe mostrar el número de semana. Su valor por defecto es false .

• stepMonths: indica el número de meses que se avanzan al pulsar los enlaces anterior/siguiente. Su valor por defecto es 1.

• weekHeader: literal que aparece sobre los números de semana. Su valor por defecto se obtiene del fichero de idioma.

Page 10: UDA-Componentes RUP. Fecha

Componentes RUP – Fecha 10/22

• yearRange: determina el rango de años a mostrar en el combo de la cabecera del calendario. No implica que sea el límite de años a seleccionar. Se debe definir como un literal que indique el inicio y el fin separado por dos puntos ej. 2001:2011. Puede usarse el la letra c como valor actual restándole y sumándole un numérico ej. c-10:c+10. Su valor por defecto es c-10:c+10.

• yearSuffix: texto adicional a mostrar en la cabecera del calendario junto al año. Su valor por defecto es vacío.

• noWeekend: indica si se muestran o no los días del fin de semana (sábado y domingo). indica si se muestran los días del mes anterior y posterior al que se muestra. Su valor por defecto es false.

• to y from: son lo atributos encargados de determinar el campo inicial y final en los intervalos. Ver el apartado 11 donde se detalla los intervalos de fechas y su configuración.

• multiselect: atributo que indica si se permite la multiselección de fechas y el modo en el que se aplica. Ver el apartado 10 donde se detallan las fechas múltiples.

En caso de configurar el componente para que permit a la gestión de la hora junto con la fecha (datetimepicker:true), los parámetros de configuración correspondientes a la gestión de la hora, son los indicados en la guía de uso del co mponente hora.

Existen atributos que pueden recibir un Date, String o Number para especificar la fecha exacta. La configuración se realiza a través de un objeto Date o con una cadena en formato de fecha actual (determinado por el idioma), o un número de días a partir de hoy (por ejemplo, +7) o una cadena de valores y puntos ('y' para años, 'm' para meses, 'w' para semanas, 'd' para días, por ejemplo, "+1m +7d '), o null para hoy.

Para facilitar la manipulación de fechas, el fichero “rup.utils” incluye la función createDate (day, month, year) que devuelve un objeto date. Un claro ejemplo de esta utilidad puede ser especificar la fecha máxima o mínima seleccionable:

minDate : $ . rup_utils . createDate ( 01, 01, 2011 ),

maxDate : $ . rup_utils . createDate ( 31, 12, 2011 )

Page 11: UDA-Componentes RUP. Fecha

Componentes RUP – Fecha 11/22

7. Funciones

A continuación se detallan las diferentes funciones que integran el componente fecha:

• destroy: elimina el componente de la pantalla. En caso de tener máscara también se restaura el label con un texto vacío. A continuación se muestra un ejemplo de cómo invocar la función:

$(selector).rup_date("destroy");

• disable: deshabilita el componente en pantalla no pudiendo introducirse ninguna fecha ni se despliega el calendario. A continuación se muestra un ejemplo de cómo invocar la función:

$(selector).rup_date("disable");

• enable: habilita el componente permitiendo introducir la fecha tanto mediante teclado como mediante el desplegable del calendario. A continuación se muestra un ejemplo de cómo invocar la función:

$( selector).rup_date("enable");

• isDisabled: indica si el componente se encuentra deshabilitado o no. A continuación se muestra un ejemplo de cómo invocar la función:

$(selector).rup_date("isDisabled");

• hide: oculta el calendario para seleccionar una fecha. A continuación se muestra un ejemplo de cómo invocar la función:

$(selector).rup_date("hide");

• show: muestra el calendario para seleccionar una fecha. A continuación se muestra un ejemplo de cómo invocar la función:

$(selector).rup_date("show");

• getDate: devuelve la fecha seleccionada, si no se ha seleccionado nada devuelve vacío. A continuación se muestra un ejemplo de cómo invocar la función:

$(selector).rup_date("getDate");

• setDate: establece la fecha del componente. El parámetro debe ser un objeto date. A continuación se muestra un ejemplo de cómo invocar la función:

$(selector).rup_date("setDate", date);

Page 12: UDA-Componentes RUP. Fecha

Componentes RUP – Fecha 12/22

• refresh: refresca el calendario desplegado por si ha habido algún cambio. A continuación se muestra un ejemplo de cómo invocar la función:

$(selector).rup_date("refresh");

• options: permite modificar alguno de los atributos del componente pasando el nombre de la propiedad y su valor. A continuación se muestra un ejemplo de cómo invocar la función:

$(selector).rup_date("options", optionName, value);

• getRupValue: método utilizado para obtener el valor del componente. Este método es el utilizado por el resto de componentes RUP para estandarizar la obtención del valor.

$( selector ) .rup_date ( "getRupValue" );

• setRupValue: método utilizado para asignar el valor al componente. Este método es el utilizado por el resto de componentes RUP para estandarizar la asignación del valor.

$( selector ) .rup_date ( "setRupValue",value );

Page 13: UDA-Componentes RUP. Fecha

Componentes RUP – Fecha 13/22

8. Eventos

A continuación se detallan los eventos asociados al componente:

• create: función que se lanza cuando se crea el calendario. La invocación es automática por parte del componente.

$( selector ) .rup_date ({ create: function(){...} });

• beforeShow: permite asociar una función que se ejecutará antes de que se muestre el calendario. Los parámetros recibidos son el campo del calendario y la instancia del componente. La configuración se realiza de la siguiente manera:

$( selector ) .rup_date ({ beforeShow: function(input, inst){...} });

• onChangeMonthYear: permite asociar una función que se ejecutará cuando se cambie de mes o de año en el calendario. Los parámetros recibidos son el año y mes seleccionados así como la instancia del componente. La configuración se realiza de la siguiente manera:

$( selector ) .rup_date ({onChangeMonthYear: function(y,m,inst){...} });

• onSelect: permite asociar una función que se ejecutará cuando se seleccione un valor del calendario. Los parámetros recibidos son la fecha seleccionada (texto) y la instancia del componente. La configuración se realiza de la siguiente manera:

$( selector ) .rup_date ({ onSelect: function(dateText, inst){...} });

• onClose: permite asociar una función que se ejecutará cuando se oculte el calendario. Los parámetros recibidos son la fecha seleccionada (texto) y la instancia del componente. La configuración se realiza de la siguiente manera:

$(selector).rup_date ({ onClose: function(dateText, inst){...} });

Page 14: UDA-Componentes RUP. Fecha

Componentes RUP – Fecha 14/22

9. Intervalos de fechas

El componente fecha permite la combinación de varios campos para poder permitir la selección de intervalos. Una vez seleccionada por ejemplo la fecha de inicio (from) la fecha de fin (to) no podría ser anterior a esta y viceversa. Esta gestión la realiza el componente internamente. A continuación se detalla un ejemplo de cómo realizar la configuración para mostrar un intervalo de fechas:

1. Se deben declarar dos campos (input) que serán la fecha desde y la fecha hasta:

<input type ="text" id ="desde" /> <input type ="text" id ="hasta"/>

2. El componente se lanza sin ningún selector ya que requiere de los dos campos para establecer el intervalo. Estos campos se indicarán mediante los atributos from y to:

$. rup_date ({ from : "desde" , to : "hasta" , //Resto igual que en date ... }); El resultado sería el que se muestra en la siguiente captura:

Page 15: UDA-Componentes RUP. Fecha

Componentes RUP – Fecha 15/22

10. Fechas múltiples

El componente fecha permite la multiselección de fechas en el caso de que el usuario deba seleccionar más de una fecha sobre el mismo componente. Una vez seleccionadas, las fechas del componente aparecerán separadas por comas en el campo asociado. Existen dos maneras de implementar la multiselección:

• número: mediante un valor numérico se indica la cantidad de fechas (máximas) que se pueden elegir. Una vez seleccionadas todas las fechas permitidas, el calendario presentará los días deshabilitados y no podrán seleccionarse más fechas hasta que se deseleccione alguna.

o Configuración:

$( "#fecha_multi" ). rup_date ({ multiSelect : 3, ... });

o Ejemplo:

• array: mediante un array se indica un intervalo de días contiguos que se van a seleccionar. La primera posición del array (número) indica el día en el que va a comenzar la selección, siendo cero el día actual y permitiendo valores negativos. La segunda posición del array (número) indica la posición del último día seleccionado. En este caso no se deshabilitan los días ya que permite cambiar el intervalo de días seleccionados.

o Configuración:

$( "#fecha_multi" ). rup_date ({ multiSelect : [ 0, 5], ... });

o Ejemplo:

Page 16: UDA-Componentes RUP. Fecha

Componentes RUP – Fecha 16/22

No está soportada la combinación de los intervalos de fechas y la multiselección de fechas ya que son funcionalidades completamente diferentes.

Dado que el componente encargado de la multiselección es un envoltorio (wrapper) del componente de fechas estándar, puede que alguna de las propiedades descritas en las fechas no funcionen correctamente.

Page 17: UDA-Componentes RUP. Fecha

Componentes RUP – Fecha 17/22

11. Fecha y hora

El componente permite la gestión de un campo fecha en el que sea necesario incluir la hora. Para ello, se combina el calendario, para la selección de fecha, con el selector de hora utilizado por el componente hora. El aspecto del componente con esta configuración es el siguiente:

Este sería un ejemplo de la configuración que se debe indicar en la creación del componente:

var properties = { datetimepicker: true, showSecond: false, timeFormat: 'hh:mm' };

$( "#id_input" ).rup_date (properties);

Como ya se ha comentado anteriormente, los parámetros de configuración correspondientes a la gestión de la hora, son los indicados en la guía de uso del componente hora.

Page 18: UDA-Componentes RUP. Fecha

Componentes RUP – Fecha 18/22

12. Interacción con teclado

La interacción natural con el componente es mediante el ratón, pero se han añadido la posibilidad de manipular los valores mediante el teclado para agilizar su uso lo que ahorra mucho tiempo a los usuarios avanzados.

Cuando el campo asociado al componente recibe el foco se muestra el desplegable. En este momento si se introduce una fecha (siguiendo el formato especificado) utilizando los números del teclado, el componente actualiza el calendario con el valor introducido manualmente. Mediante flechas de dirección (←, ↑, →, ↓) se puede desplazar el cursor a través del campo de fecha para modificarla, además de borrar ciertos valores mediante las teclas suprimir y tecla de retroceso (backspace). Con la tecla escape se cerrará el desplegable.

Existen unos atajos de teclado para poder interactuar con el calendario directamente:

o CTRL + Flecha de dirección : Desplazar el selector de día (enter realiza la selección)

o Re Pág : Mes anterior

o Av Pág : Mes siguiente

o CTRL + SHIFT + Re Pág : Año anterior

o CTRL + SHIFT + Av Pág : Año siguiente

Page 19: UDA-Componentes RUP. Fecha

Componentes RUP – Fecha 19/22

13. Sobreescritura del theme

El componente date se presenta con una apariencia visual definida en el fichero de estilos theme.rup.date-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).

Los estilos básicos configurables en la fecha son los siguientes:

.ui-datepicker-week-end a � Fin de semana (Sábado y Domingo) .ui-datepicker-today a � Día actual .ui-datepicker-calendar .ui-state-highlight a, .ui-datepicker-current-day a � Día seleccionado

Ejemplo base de la estructura generada por el componente (estructura interna que forma el calendario, no se incluye el input sobre el que se aplica el componente):

<div id ="ui-datepicker-div" class ="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible">

<div class ="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">

<a class ="ui-datepicker-prev ui-corner-all" title ="Prev"><span class ="ui-icon ui-icon-circle-triangle-w">Anterior </ span ></ a> <a class ="ui-datepicker-next ui-corner-all" title ="Next"><span class ="ui-icon ui-icon-circle-triangle-e">Siguiente </ span ></ a>

<div class ="ui-datepicker-title"> <span class ="ui-datepicker-month">Mayo</ span >

<span class ="ui-datepicker-year">2011 </ span > </ div > </ div > <table class ="ui-datepicker-calendar">

<thead > <tr >

<th class ="ui-datepicker-week-end"> <span title ="Lunes">Vi </ span >

</ th > ... </ tr > </ thead >

Page 20: UDA-Componentes RUP. Fecha

Componentes RUP – Fecha 20/22

<tbody > < tr > <td class ="ui-datepicker-week-end ui-datepicker-other-month "> 1 </ td > ... </ tr > </ tbody > </ table > <div class ="ui-datepicker-buttonpane ui-widget-content">

<button type ="button" class ="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all">Hoy</ button > <button type ="button" class ="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all">Cerrar </ button >

</ div >

</ div > NOTA: Esta estructura podría variar algo en función de los atributos indicados en la configuración.

Page 21: UDA-Componentes RUP. Fecha

Componentes RUP – Fecha 21/22

14. Integración con UDA

Para facilitar la serialización/deserialización de los datos entre los objetos java y los componentes fecha, desde UDA se proporcionan unas clases que definen tanto serializadores como deserializadores para el componente Jackson utilizado en UDA.

Estas clases son utilizadas por las anotaciones @JsonSerialize y @JsonDeserialize de Jackson. Al incluir estas anotaciones en los métodos setter y setter de los model se determina el modo en que Jackson va a realizar la serialización y deserialización de estos tipos de datos.

• com.ejie.x38.control.JsonDateSerializer: Realiza la serialización de un tipo de dato Date en su representación json correspondiente.

El valor json resultante solo contiene la información de la fecha, no así el de la hora. (dd/MM/yyyy).

En el proceso de serialización se tiene en cuenta el idioma utilizado por el usuario en la aplicación para utilizar el formato correcto de la fecha. Un ejemplo de uso sería el siguiente:

@JsonSerialize (using = JsonDateSerializer. class) public Date getFechaBaja() { return this. fechaBaja ;

}

• com.ejie.x38.control.JsonDateDeserializer: Realiza la deserialización de un objeto json que contiene la representación de una fecha válida en un tipo de dato Date.

El objeto json debe contener una fecha válida de acuerdo al formato definido por la locale correspondiente al idioma utilizado en la aplicación por el usuario. Este formado solo comprenderá la parte de la fecha ignorando la hora. (dd/MM/yyyy).

Un ejemplo de uso sería el siguiente:

@JsonDeserialize (using = JsonDateDeserializer. class) public void setFechaBaja(Date fechaBaja) { this. fechaBaja = fechaBaja;

}

• com.ejie.x38.control.JsonDateTimeSerializer: Realiza la serialización de un tipo de dato Date en su representación json correspondiente.

El valor json resultante contiene tanto la información de la fecha como la de la hora. (dd/MM/yyyy HH:mm:ss).

En el proceso de serialización se tiene en cuenta el idioma utilizado por el usuario en la aplicación para utilizar el formato correcto de la fecha. Un ejemplo de uso sería el siguiente:

Page 22: UDA-Componentes RUP. Fecha

Componentes RUP – Fecha 22/22

@JsonSerialize (using = JsonDateTimeSerializer. class) public Date getFechaBaja() { return this. fechaBaja ;

}

• com.ejie.x38.control.JsonDateDeserializer: Realiza la deserialización de un objeto json que contiene la representación de una fecha válida en un tipo de dato Date.

El objeto json debe contener una fecha válida de acuerdo al formato definido por la locale correspondiente al idioma utilizado en la aplicación por el usuario. Este formado deberá comprender tanto la fecha como la hora. (dd/MM/yyyy HH:mm:ss).

Un ejemplo de uso sería el siguiente:

@JsonDeserialize (using = JsonDateDeserializer. class) public void setFechaBaja(Date fechaBaja) { this. fechaBaja = fechaBaja;

}