In mobiele toepassingen verschilt de workflow van de Image component een beetje van de workflow in webtoepassingen. Dit artikel beschrijft in detail hoe je de Image component in mobiele toepassingen. In herhalende elementen, zoals elementen van de List en Grid componenten, is het laden van de Image van het datamodel niet eenduidig en vereist een bepaalde procedure voor het laden met behulp van de BP.
Image gebruik van componenten in herhalende elementen (List/Grid)
Laten we een voorbeeld bekijken waarbij we een tabel met vluchten hebben en elk vluchtobject zijn eigen omslag heeft die wordt vertegenwoordigd door het ImageFile veld [file].
Stel dat de vluchtenlijst wordt voorgesteld met het List component. Elk element van de List component - is een Card component die Image en enkele andere componenten om relevante vluchtinformatie weer te geven. In de UI designer ziet het er als volgt uit:
Allereerst, Data Source moet de parent component (List component in dit geval).
Om de gegevens uit de database te uploaden naar het Image component, moeten we een nieuw bedrijfsproces aanmaken voor de Image component.
Het vereiste BP begint met het aanmaken van een element in de applicatie, namelijk de onCreate trigger. Allereerst is het nodig om object van datamodel te ontvangen dat overeenkomt met de gegeven afbeelding. Hiervoor kunnen de gegevens gebruikt worden die al ontvangen zijn door het parent element (List in dit geval). Om gegevens van een List, wordt het List Get Data blok gebruikt.
De logica van de BP die we bouwen is als volgt: als een van de Data array-elementen (flight modelobject) een identifier (ID) gelijk aan Record ID, dan hebben we het vluchttabelelement gevonden dat we nodig hebben. Dan wordt het beeldbestand ID uit het vluchtmodelobject en geladen in de component Beeld met de vereiste Widget ID.
Om alle elementen van de Data array, wordt het For each loop BP-blok gebruikt, en in het lichaam van de lus wordt elk element van de Data array uitgebreid met behulp van het Expand Flight blok. Als Flight ID = Record ID, dan wordt de ImageFile bestandsidentificatie genomen en wordt het bestandsobject geladen met behulp van de Server request GET /_files/:id/download/ blok. Voorbeeld van de overeenkomstige BP als volgt.
In de volgende stap wordt het beeldbestand met behulp van het Expand file blok om de bytes-array als input door te geven aan de Image Update Properties block's Data eigenschap. Het is ook nodig om de Widget ID van een specifiek beeldelement in het blad, waarbij de waarde uit het onCreate blok aan het begin van de BP wordt doorgegeven. Het resultaat van het laatste deel van de BP wordt getoond in onderstaand voorbeeld:
Uiteindelijk wordt het Break Loop blok wordt gebruikt om de resterende elementen van de array niet tevergeefs te itereren.
Een afbeelding laden uit het bestandssysteem van de smartphone van de gebruiker
Beschouw een voorbeeld van het laden van een avatar van het gebruikersprofiel. De webinterface bestaat uit een afbeelding en een knop die de BP start, en ziet er als volgt uit:
Vervolgens stelt de betreffende BP de gebruiker in staat om de bestanden van zijn apparaat te selecteren met behulp van het Select Files blok. En als de bestanden met succes zijn geselecteerd, wordt het element met index = 0 wordt genomen. De overeenkomstige BP ziet er als volgt uit:
Het resulterende bestandselement van de Files array moet worden geüpload naar de webapplicatieserver voor verder gebruik (Server request POST /_files/). Als het verzoek succesvol is, wordt het bestandsobject aan de uitgang van het Server request POST /_files/ blok doorgegeven aan de ingang van het Expand file blok om een Bytes Arraydie wordt doorgegeven aan de ingang van het Image Update Properties blok in de Data eigenschap.
