Importar clase de constantes Java en xhtml con Primefaces

Para utilizar las propiedades de una clase de constantes en un formulario .xhtml con Primefaces se procede de la siguiente manera:

Criteria Case

Para hacer un CASE deSQL en Criteria, utilizamos lo siguiente:

builderSub.selectCase().when(builderSub.equal(rootEntitySub.get("estadisticasPortabilidadId").get("tipoMensaje").get("codigo"), "SP"), rootEntitySub.get("cantidad")).otherwise(0)

Que equivale a:

CASE tipo_mensaje WHEN 'SP' THEN cantidad ELSE 0 END

Criteria Trunc Date

Para hacer un trunc de una fecha (agrupar fechas por día ('DD'), semana ('WW'), mes ('MM'), o año ('YY')) en SQL sería:

Trunc(fecha, 'MM') AS fecha

Y en Criteria sería:

builder.function("TRUNC", Date.class, rootEntity.get("fecha"), builder.literal("MM"))

Etiqueta @Formula en Entidades Hibernate y uso en Criteria

La etiqueta @Formula permite asignar una fórmula a un atributo de una entidad para que se aplique en caso de seleccionarla en alguna consulta.
Por ejemplo, tengo una entidad con un atributo "fecha" mapeado con el campo "FECHA" de la tabla de base de datos. Tengo que poder realizar una consulta a base de datos agrupando las fechas de los registros por días, semanas, meses o años dependiendo de un filtro que marcará el usuario.
En principio es tan simple como utilizar la función "TRUNC" de SQL en la consulta para que me agrupe las fechas, pero también podemos declarar el "TRUNC" en la entidad a través de la etiqueta @Formula, utilizando atributos adicionales no mapeados con ningún campo de la base de datos.

Angular: 18. Manejo de Errores

Vamos a crear un mensaje de error para mostrar cuando, eso, se produzca un error.

El funcionamiento es muy similar al del componente "cargando" de la entrada anterior. Básicamente se trata de un componente que mostraremos u ocultaremos según se haya producido o no un error.

Aunque lo más correcto sería crearnos un componente específico, tal y como hicimos con el componente "cargando", para utilizarlo en cualquier otro componente, en esta ocasión vamos a crear el mensaje directamente en el componente home, ya que es el único sitio donde vamos a mostrarlo.

Modificamos el TypeScript del componente "home" como sigue:

Como se puede ver, primero creamos dos variables. Una booleana que nos indicará si hay o no un error, y una string que guardará el mensaje de error recibido para mostrarlo por pantalla.
En el constructor, inicializamos la variable "error" booleana a falso, ya que por defecto no hay ningún error.
En la llamada al servicio de Spotify, implementamos la función del error (cuando falla la llamada al servicio) y en su interior ponemos a falso la variable del componente "cargando" (para que desaparezca de la pantalla), ponemos a verdadero la variable booleana "error", y guardamos en la variable "mensajeError" el error que nos devuelve el servicio de Spotify.

A continuación modificamos el html del componente "home" como sigue:

Como se puede ver, hemos añadido un div con un *ngIf para que aparezca sólo cuando la variable "error" sea verdadera, y mostramos la variable "mensajeError" con el contenido del error que nos devuelva el servicio.

Si se produce algún error, el mensaje se vería como sigue:

Y eso sería todo.

Angular: 17. Componente Loading, o Cargando

Vamos a crear un componente para que aparezca una imagen de cargando al entrar en la página y que desaparezca cuando se haya cargado completamente.

Primero creamos un nuevo componente "loading" o el nombre que queramos:

Aunque podemos utilizar una imagen cualquiera como símbolo de "cargando", nosotros vamos a utilizar una ya creada para tal fin.
Entramos en la página "https://fontawesome.com/" y copiamos el enlace a la hoja de estilos que nos proporciona la página:

Pegamos el enlace en nuestro "index.html" tal y como hicimos con Bootstrap:

Volvemos a la página de fontawesome y buscamos iconos por "refresh". Así vemos la imagen que vamos a utilizar:

Editamos el "html" del componente "cargando" para que muestre la imagen:

Se puede ver que hemos utilizado la etiqueta <i> (propia de fontawesome) para mostrar la imagen, pero si utilizamos una propia nuestra utilizaremos la etiqueta normal "html".

Como hemos dicho antes, la idea es que la imagen se muestre en la página desde el principio y que desaparezca cuando esté toda la página cargada. Para ello, utilizaremos una variable booleana que sirva para indicar cuándo debe o no mostrarse la imagen.

Modificamos el TypeScript del componente donde queremos que aparezca la imagen como sigue:

Como se puede ver, declaramos dentro de la clase una variable booleana, que inicializamos a verdadero al principio del constructor, y cambiamos a falso al final de la función que trae los datos a la página.

Por último, en el "html" del componente donde queremos que aparezca la imagen, colocamos la etiqueta del componente "loading". Le incluimos la directiva "*ngIf" para que muestre la imagen mientras la variable booleana del componente esté a verdadero:

Y eso es todo. Al iniciar la página, la variable booleana será verdadera y se mostrará la imagen en pantalla. Una vez que todos los datos de la página estén cargados, la variable booleana cambiará de valor a falso y la imagen de carga desaparecerá.