Ce tutoriel décrit l'utilisation du composant Image utilisation du composant dans les applications Web.
Look & Feel
- Upload - il est possible de prédéfinir une image en appuyant sur le bouton et en sélectionnant une image dans le système de fichiers ;
- Image alt [string] - également appelé balises alt et descriptions alt, le texte alt est la copie écrite qui apparaît à la place d'une image sur une page Web si l'image ne parvient pas à se charger sur l'écran de l'utilisateur. Ce texte aide les outils de lecture d'écran à décrire les images aux lecteurs malvoyants et permet aux moteurs de recherche de mieux explorer et classer votre site Web ;
- Width [string] - largeur de l'image par défaut ;
- Height [string] - hauteur de l'image par défaut ;
- Visible [boolean] - définit si l'image est visible ou non ;
- Name [string] - le nom du composant ;
Processus d'affaires connexes
L'image en HTML est une référence à l'objet image lui-même. Par conséquent, Image fonctionne toujours avec des liens et, pour utiliser les données de l'image, vous devez obtenir un lien vers celle-ci.
Les éléments suivants BPs sont pré-générés pour l'utilisation des applications web :
- Image Get Properties - récupère les propriétés de l'image :
- Component ID [string] - identifiant du composant ;
- Width [string] - largeur de l'image ;
- Height [string] - hauteur de l'image ;
- Image URL [string] - adresse URL de l'image ;
- Tooltip [string] - chaîne d'info-bulle à afficher au survol ;
- Visible [boolean] - définit si l'image est visible ou non ;
- Loading [boolean] - met l'image en état de "chargement" si true;
- Image Set Properties - réinitialise toutes les propriétés de l'image sélectionnée et définit celles qui sont données à la place :
- Component ID [string] - identifiant du composant ;
- Width [string] - largeur de l'image ;
- Height [string] - hauteur de l'image ;
- Image URL [string] - adresse URL de l'image; ;
- Tooltip [string] - chaîne d'info-bulle à afficher au survol ;
- Visible [boolean] - définit si l'image est visible ou non ;
- Loading [boolean] - met l'image en état de "chargement" si true;
- Image Update Properties - met à jour les propriétés de l'image :
- Component ID [string] - identifiant du composant ;
- Width [string] - largeur de l'image ;
- Height [string] - hauteur de l'image ;
- Image URL [string] - adresse URL de l'image ;
- Tooltip [string] - chaîne d'info-bulle à afficher au survol ;
- Visible [boolean] - définit si l'image est visible ou non ;
- Loading [boolean] - met l'image en état de "chargement" si true;
Exemple d'utilisation
Prenons un exemple de chargement d'un avatar de profil d'utilisateur. L'interface web se compose d'une image et d'un bouton qui déclenche la BP, et ressemble à ceci :
BP démarre à partir de onClick déclencheur. Pour prélever les fichiers dans le système de fichiers de l'appareil de l'utilisateur, le bloc Select Files est utilisé (Max files = 1, File types = Image). Si le fichier est sélectionné avec succès, l'élément de tableau avec index=0 est sélectionné.
L'élément de fichier résultant du Files array doit être téléchargé sur le serveur de l'application web pour une utilisation ultérieure (Server request POST /_files/ ). Si la requête est réussie, l'objet fichier à la sortie du bloc Server request POST /_files/ est transmis à l'entrée du bloc Expand file pour obtenir son ID.
Pour obtenir l'URL, vous devez prendre le fichier ID et convertir sa valeur en une chaîne de caractères (To String). Le chemin d'accès relatif au fichier serait /api/_files/<ID>/download/. Ainsi, pour télécharger une image, le chemin du fichier doit être passé dans la propriété Image URL du bloc Image Update Properties bloc.
L'application publiée est sur l'exemple ci-dessous
