Este tutorial describe el Image uso del componente en aplicaciones web.
Look & Feel
- Upload - es posible predefinir una imagen pulsando el botón y seleccionando una imagen del sistema de archivos;
- Image alt [string] - también llamado etiquetas alt y descripciones alt, el texto alt es la copia escrita que aparece en lugar de una imagen en una página web si la imagen no se carga en la pantalla de un usuario. Este texto ayuda a las herramientas de lectura de pantalla a describir las imágenes a los lectores con problemas de visión y permite a los motores de búsqueda rastrear y clasificar mejor su sitio web;
- Width [string] - ancho de la imagen por defecto;
- Height [string] - altura de la imagen por defecto;
- Visible [boolean] - define si la imagen es visible o no;
- Name [string] - nombre del componente;
Procesos empresariales relacionados
La imagen en HTML es una referencia al propio objeto imagen. Por lo tanto, Image siempre funciona con enlaces y, para utilizar los datos de la imagen, es necesario obtener un enlace a la misma.
Lo siguiente BPs son pregenerados para el uso de aplicaciones web:
- Image Get Properties - obtiene las propiedades de la imagen:
- Component ID [string] - identificador del componente;
- Width [string] - ancho de la imagen;
- Height [string] - altura de la imagen;
- Image URL [string] - dirección URL de la imagen;
- Tooltip [string] - cadena de información sobre herramientas que se mostrará al pasar el ratón por encima;
- Visible [boolean] - define si la imagen es visible o no;
- Loading [boolean] - pone la imagen en estado de "carga" si true;
- Image Set Properties - restablece todas las propiedades de la imagen seleccionada y establece las dadas en su lugar:
- Component ID [string] - identificador del componente;
- Width [string] - ancho de la imagen;
- Height [string] - altura de la imagen;
- Image URL [string] - dirección URL de la imagen;;
- Tooltip [string] - cadena de información sobre herramientas que se mostrará al pasar el ratón por encima;
- Visible [boolean] - define si la imagen es visible o no;
- Loading [boolean] - pone la imagen en estado de "carga" si true;
- Image Update Properties - actualiza las propiedades de la imagen:
- Component ID [string] - identificador del componente;
- Width [string] - ancho de la imagen;
- Height [string] - altura de la imagen;
- Image URL [string] - dirección URL de la imagen;
- Tooltip [string] - cadena de información sobre herramientas que se mostrará al pasar el ratón por encima;
- Visible [boolean] - define si la imagen es visible o no;
- Loading [boolean] - pone la imagen en estado de "carga" si true;
Ejemplo de uso
Consideremos un ejemplo de carga de un avatar de perfil de usuario. La interfaz web consiste en una imagen y un botón que activa el BP, y tiene el siguiente aspecto:
El BP se inicia desde onClick disparador. Para recoger los archivos del sistema de archivos del dispositivo del usuario Select Files se utiliza el bloque (Max files = 1, File types = Image). Si el archivo se elige con éxito el elemento de la matriz con index=0 para ser seleccionado.
El elemento de archivo resultante de la Files array debe cargarse en el servidor de la aplicación web para su uso posterior (Server request POST /_files/). Si la solicitud tiene éxito, el objeto de archivo en la salida delServer request POST /_files/ se pasa a la entrada del bloque Expand file para obtener su ID.
Para obtener la URL, es necesario tomar el archivo ID y convertir su valor en una cadena (To String). La ruta relativa del archivo sería /api/_files/<ID>/download/. Así, para subir una imagen, hay que pasar la ruta del archivo a la propiedad Image URL del bloque Image Update Properties bloque.
La aplicación publicada está en el ejemplo de abajo
