4.19 Image
El componente de imagen permite renderizar imágenes en una aplicación, siendo útil para mostrar firmas, fotografías, u otros elementos visuales relevantes para la interfaz de usuario.
Las imágenes pueden cargarse desde diversas fuentes, tales como:
- Archivos estáticos almacenados localmente en el dispositivo del usuario.
- Medios almacenados en una base de datos, representados como archivos blob (datos binarios sin procesar).
- Archivos de texto que contienen datos de imagen codificados, por ejemplo, en formato B64.
Este componente ofrece flexibilidad para la presentación de imágenes, permitiendo a los desarrolladores crear experiencias visuales personalizadas adaptadas a las necesidades específicas de la aplicación.
Expresión literal (Ej: batman.jpg)Cuando la expresión es un literal, la imagen se localiza utilizando el repositorio de imágenes por defecto del proyecto, que apunta al directorio "pictures" anidado a la carpeta actual del proyecto. En este caso, el componente será de solo lectura, y el conversor es por defecto "urlImage".
Expresión de solo lectura (Ej: ${entity.category}/${entity.id}.jpeg)Si la expresión no es un atributo de entidad, es decir, no es una columna de la tabla a la que hace referencia el atributo repo, por defecto se interpreta como una expresión para definir el ID de la entidad en el repositorio.
Ejemplo: ${entity.category}/${entity.id}.jpeg. La imagen se tratará como una entidad relacionada que se recupera utilizando el repositorio de imágenes por defecto del proyecto, o el repositorio establecido en el atributo "repo", y el ID de la entidad en este repositorio se calculará utilizando la expresión dada: ${entity.category}/${entity.id}.jpeg. La expresión es de solo lectura, pero la imagen sí se puede almacenar.
Expresión Double-Binding (Ej: ${entity.image})Si la expresión define un enlace de atributo de entidad, la propiedad de entidad a la que hace referencia la expresión puede contener el ID de la entidad relacionada en un repositorio externo o el propio contenido de la entidad. El atributo EMBEDDED se utiliza para determinarlo.
- Embedded=true: significa que el contenido de la imagen se almacena en la propiedad de la entidad.
- Embedded=false: significa que la imagen está en un repositorio y la propiedad entity almacena el ID de la entidad relacionada.
En estos casos, la imagen puede recuperarse de diferentes maneras:
- Utilizando un repositorio específico y la propiedad de entidad que almacena el ID de la imagen en ese repositorio.
- Utilizando el repositorio de imágenes por defecto del proyecto y el ID de la imagen se forma a partir del ID de la entidad con el sufijo ".jpg".
- Personalizando el nombre y la ubicación de la imagen.
<image repo="superHImages" value="${entity.image}" />
<image value="${entity.id}.jpg" width="300" height="200" />
<image value="superhéroes/${entity.name.toLowerCase().replace(' ','_')+'.jpg'}" />
| Atributo | Valor por defecto | Tipo | Descripción | |
|---|---|---|---|---|
| Comunes | id | null | String | Identificador único del componente. Si no tiene id, se le asigna con nomenclatura ${tag}${num}. |
| render | true | Boolean o JEXLExpression | Expresión EL para evaluar si el componente debe mostrarse. | |
| onBeforeRender | null | String | Método JS a ejecutar antes de que el componente actual sea renderizado. | |
| onAfterRender | null | String | Método JS que se ejecutará una vez renderizado el componente actual. | |
| action | null | String | Identificador de la acción a realizar cuando el usuario interactúa con este componente. | |
| allowsPartialRestore | false | Boolean | Si el estado del componente actual debe restaurarse cuando el usuario vuelva a la vista. | |
| Comunes input | label | null | String | Etiqueta del componente. |
| validator | null | String | Tipo de validación del componente: required, short, long, decimal, double, float, email, iban. | |
| hint | null | String | Texto a modo de ayuda o información. Se mostará un botón de información que al ser pulsado mostrará un panel con el texto aportado. | |
| readonly | false | Boolean o JEXLExpression | Evaluar si el componente debe ser de sólo lectura o no. | |
| placeHolder | null | String o JEXLExpression | Valor del componente cuando el componente no tiene valor. | |
| inputType | null | Integer | Valor inputType de Android que soportará el componente. Ver documentación de Android InputType.
Por ejemplo, para PHONE_CLASS, establezca input_type = 3. En el caso de la imagen, mostrará la botonera asociada a la imagen:
|
|
| hasDeleteButton | true | Boolean | Indica si se mostrará el botón de borrado del componente. | |
| converter | null | String | Instancia del conversor a aplicar a la propiedad de la entidad. | |
| value | null | String o JEXLExpression | Expresión EL para calcular el valor del componente. | |
| repo | null | String | Identificador del repositorio utilizado para recoger los datos. | |
| embedded | false | Boolean | Si es true indica que la imagen se almacena como una propiedad de la entidad. Si se establece en true, no se puede utilizar el atributo repo. | |
| width | Integer | Anchura aplicada a la vista de imagen. | ||
| height | Integer | Altura aplicada a la vista de imagen. | ||
| repoProperty | content | String | Si se utiliza repositorio para recuperar la imagen, esta propiedad indica la propiedad de la entidad relacionada que almacena el contenido de la imagen. Por defecto se espera una propiedad llamada "contenido". | |
<image label="Imagen 1: " value="${'batman.jpg'}" />
<image label="Imagen 2: " converter="b64Image" height="200" repo="pruebaRepo" repoProperty="image"
value="${entity.imagen2}" width="300" inputType="1"/>
<image converter="b64Image" embedded="true" label="Imagen 2: " value="${entity.image}" inputType="1"/>
<image converter="b64Image" embedded="true" label="Imagen 3: " value="${entity.image}" inputType="2"/>
<image converter="b64Image" embedded="true" label="Imagen 5: " value="${entity.image}" inputType="4"/>
<image converter="b64Image" embedded="true" label="Imagen 4: " value="${entity.image}" inputType="3"/>
<image converter="b64Image" embedded="true" label="Imagen 6: " value="${entity.image}" inputType="5"/>
<image converter="b64Image" embedded="true" label="Imagen 7: " value="${entity.image}" inputType="6"/>
<image converter="b64Image" embedded="true" label="Imagen 8: " value="${entity.image}" inputType="7"/>
