W aplikacjach mobilnych workflow komponentu Image jest nieco inny niż workflow w aplikacjach webowych. Ten artykuł opisuje szczegółowo, jak używać Image w aplikacji mobilnej. W powtarzających się elementach, takich jak elementy typu List oraz Grid ładowanie komponentów Image z modelu danych nie jest jednoznaczne i wymaga pewnej procedury ładowania za pomocą BP.
Image wykorzystanie komponentów w elementach powtarzających się (List/Grid)
Zobaczmy przykład, w którym mamy tabelę flights i każdy obiekt lotu ma swoją osłonę reprezentowaną przez ImageFile pole [file].
Wyobraźmy sobie, że lista lotów jest reprezentowana za pomocą List element. Każdy element List komponentu - jest Card komponentem zawierającym Image oraz kilka innych komponentów do wyświetlania odpowiednich informacji o lotach. W projektancie UI wygląda to w następujący sposób:
Przede wszystkim, Data Source musi być określony dla komponentu nadrzędnego (List w tym przypadku).
Aby przesłać dane z bazy danych do Image komponentu, musimy stworzyć nowy proces biznesowy dla tego Image komponentu.
Wymagany BP rozpoczyna się od utworzenia elementu obrazu w aplikacji, tj. onCreate trigger. W pierwszej kolejności należy otrzymać obiekt modelu danych odpowiadający danemu obrazkowi. W tym celu można wykorzystać dane, które są już odbierane przez element nadrzędny (List w tym przypadku). Aby otrzymać dane z a List, blok List Get Data jest używany blok.
Logika budowanego przez nas BP jest następująca: jeżeli jeden z Data elementów tablicy (flight obiekt modelu) ma identyfikator (ID) równy Record ID, to znaleźliśmy potrzebny nam element tablicy lotów. Następnie plik obrazu ID jest pobierany z obiektu modelu lotu i ładowany do komponentu Image z wymaganym Widget ID.
Aby iterować po wszystkich elementach tablicy Data tablicy, używany jest blok For each loop BP, a w ciele pętli każdy element tablicy jest rozszerzany za pomocą funkcji Data jest rozwijany za pomocą bloku Expand Flight . Jeśli Flight ID = Record ID, to pobierany jest ImageFile to zostaje pobrany identyfikator pliku i obiekt pliku zostaje wczytany przy pomocy bloku Server request GET /_files/:id/download/ blok. Przykład odpowiedniego BP jak poniżej.
W kolejnym kroku plik graficzny jest rozszerzany za pomocą Expand file aby przekazać tablicę bajtów jako wejście do Image Update Properties bloku Data właściwość. Należy również określić m.in. Widget ID konkretnego elementu obrazu w arkuszu, przekazując mu wartość z bloku onCreate na początku BP. Wynik działania ostatniej części BP przedstawia poniższy przykład:
Na końcu Break Loop użyty został blok, aby nie iterować nad pozostałymi elementami tablicy na próżno.
Ładowanie obrazu z systemu plików smartfona użytkownika
Rozważmy przykład ładowania awatara z profilu użytkownika. Interfejs internetowy składa się z obrazka i przycisku uruchamiającego BP i wygląda tak:
Następnie właściwy BP pozwala użytkownikowi wybrać pliki ze swojego urządzenia za pomocą. Select Files blok. I jeżeli pliki zostały wybrane pomyślnie, to element z index = 0 jest pobierany. Odpowiedni BP wygląda tak:
Wynikowy element pliku z Files musi zostać przesłany do serwera aplikacji internetowej w celu dalszego wykorzystania (Server request POST /_files/). Jeżeli żądanie się powiedzie, obiekt pliku na wyjściu bloku Server request POST /_files/ jest przekazywany do wejścia bloku Expand file w celu uzyskania obiektu a Bytes Arrayktóry jest przekazywany na wejście bloku Image Update Properties w bloku Data właściwość.
