Dans les applications mobiles, le flux de travail du composant Image est un peu différent de celui des applications Web. Cet article décrit en détail comment utiliser le composant Image dans une application mobile. Dans les éléments répétitifs, tels que les éléments du type List et Grid le chargement de l'élément Image du modèle de données n'est pas sans ambiguïté et nécessite une certaine procédure de chargement à l'aide de la BP.
Image utilisation des composants dans les éléments répétitifs (List/Grid)
Voyons un exemple où nous avons une table de vols et chaque objet de vol a sa propre couverture représentée par l'élément ImageFile champ [file].
Imaginons que la liste des vols soit représentée par le composant List composant. Chaque élément du List composant - est un Card composant contenant Image et quelques autres composants pour afficher les informations pertinentes sur les vols. Dans le concepteur d'interface utilisateur, cela se présente de la manière suivante :
Tout d'abord, Data Source doit être spécifié pour le composant parent (List dans ce cas).
Pour télécharger les données de la base de données vers le Image composant, nous devons créer un nouveau processus d'affaires pour le Image composant.
Le BP requis commence par la création d'un élément dans l'application, à savoir le onCreate trigger. Tout d'abord, il est nécessaire de recevoir l'objet du modèle de données correspondant à l'image donnée. Pour ce faire, vous pouvez utiliser les données qui sont déjà reçues par l'élément parent (List dans ce cas). Pour obtenir les données d'un Listle bloc List Get Data est utilisé pour obtenir des données d'une de ces données.
La logique de la BP que nous construisons est la suivante : si l'un des éléments du tableau Data éléments du tableau (flight objet modèle) a un identifiant (ID) égal à Record IDalors nous avons trouvé l'élément du tableau de vol dont nous avons besoin. Ensuite, le fichier image ID est extrait de l'objet modèle de vol et chargé dans le composant Image avec l'identifiant ( ) requis. Widget ID.
Pour itérer sur tous les éléments du tableau Data le bloc For each loop BP est utilisé et, dans le corps de la boucle, chaque élément du tableau est développé à l'aide du bloc Data est développé à l'aide du bloc Expand Flight dans le corps de la boucle. Si Flight ID = Record IDalors l'identificateur de fichier ImageFile l'identifiant du fichier est pris et l'objet fichier est chargé en utilisant le bloc Server request GET /_files/:id/download/ bloc. Voici un exemple de la BP correspondante.
Dans l'étape suivante, le fichier image est développé à l'aide du bloc Expand file pour transmettre le tableau d'octets comme entrée au bloc Image Update Properties du bloc Data du bloc. Il est également nécessaire de spécifier la propriété Widget ID d'un élément d'image spécifique dans la feuille, en lui passant la valeur du bloc onCreate au début de la BP. Le résultat de la dernière partie de la BP est illustré dans l'exemple ci-dessous :
A la fin, le bloc Break Loop est utilisé afin de ne pas itérer en vain sur les éléments restants du tableau.
Chargement d'une image à partir du système de fichiers du smartphone de l'utilisateur
Prenons l'exemple du chargement d'un avatar de profil utilisateur. L'interface web se compose d'une image et d'un bouton qui lance la BP, et ressemble à ceci :
Ensuite, la BP correspondante permet à l'utilisateur de sélectionner les fichiers de son périphérique à l'aide du bloc Select Files . Et si les fichiers ont été sélectionnés avec succès, l'élément avec index = 0 est pris. La BP correspondante se présente comme suit :
L'élément de fichier résultant du Files doit être téléchargé sur le serveur de l'application web pour une utilisation ultérieure (Server request POST /_files/). Si la demande aboutit, l'objet fichier à la sortie du bloc Server request POST /_files/ est transmis à l'entrée du bloc Expand file pour obtenir un Bytes Arrayqui est transmis à l'entrée du bloc Image Update Properties dans la propriété Data propriété.
