In mobilen Anwendungen unterscheidet sich der Workflow der Komponente Image ein wenig von dem in Webanwendungen. Dieser Artikel beschreibt im Detail, wie man die Image Komponente in einer mobilen Anwendung. In sich wiederholenden Elementen, wie z.B. Elementen der List und Grid Komponenten, ist das Laden der Image aus dem Datenmodell nicht eindeutig und erfordert ein bestimmtes Verfahren zum Laden mit Hilfe des BP.
Image Verwendung von Komponenten in sich wiederholenden Elementen (List/Grid)
Sehen wir uns ein Beispiel an, bei dem wir eine Flugtabelle haben und jedes Flugobjekt seine eigene Abdeckung hat, die durch das ImageFile Feld [file].
Stellen Sie sich vor, dass die Flugliste durch die List Komponente dargestellt. Jedes Element der List Komponente - ist eine Card Komponente, die Image und einige andere Komponenten, um relevante Fluginformationen anzuzeigen. Im UI-Designer sieht es folgendermaßen aus:
Erstens, Data Source muss für die übergeordnete Komponente (hierList Komponente in diesem Fall).
Um die Daten aus der Datenbank in die Image Komponente hochzuladen, müssen wir einen neuen Geschäftsprozess für die Image Komponente.
Der erforderliche GP beginnt mit der Erstellung eines Bildelements in der Anwendung, nämlich des onCreate Auslöser. Zunächst ist es notwendig, das Objekt des Datenmodells zu erhalten, das dem gegebenen Bild entspricht. Dazu können Sie die Daten verwenden, die bereits vom übergeordneten Element empfangen werden (List in diesem Fall). Um die Daten von einem Listzu erhalten, wird der List Get Data Block verwendet.
Die Logik des BP, den wir bauen, ist wie folgt: Wenn eines der Data Array-Elemente (flight Modellobjekt) einen Bezeichner (ID) gleich Record IDhat, dann haben wir das benötigte Flugtabellenelement gefunden. Dann wird die Bilddatei ID aus dem Flugmodellobjekt entnommen und in die Bildkomponente mit dem erforderlichen Widget ID.
Um über alle Elemente des Data Arrays zu iterieren, wird der For each loop BP-Block verwendet, und im Hauptteil der Schleife wird jedes Element des Data Arrays mit Hilfe des Expand Flight Block erweitert. Wenn Flight ID = Record IDist, dann wird die ImageFile Dateibezeichner genommen und das Dateiobjekt wird mit Hilfe des Server request GET /_files/:id/download/ Block geladen. Beispiel für den entsprechenden BP wie folgt.
Im nächsten Schritt wird die Bilddatei mit Hilfe des Expand file Block expandiert, um das Bytes-Array als Eingabe für den Image Update Properties Blocks Data Eigenschaft zu übergeben. Es ist auch notwendig, die Widget ID eines bestimmten Bildelements im Blatt anzugeben, indem man ihm den Wert aus dem onCreate-Block am Anfang des BP übergibt. Das Ergebnis des letzten Teils des BPs ist im folgenden Beispiel dargestellt:
Am Ende wird der Break Loop Block verwendet, um nicht vergeblich über die restlichen Elemente des Arrays zu iterieren.
Laden eines Bildes aus dem Dateisystem des Smartphones des Benutzers
Betrachten wir ein Beispiel für das Laden eines Benutzerprofil-Avatars. Die Webschnittstelle besteht aus einem Bild und einer Schaltfläche, die den BP startet, und sieht wie folgt aus:
Dann erlaubt der entsprechende BP dem Benutzer die Auswahl der Dateien von seinem Gerät mit Hilfe des Select Files Blocks. Und wenn die Dateien erfolgreich ausgewählt wurden, wird das Element mit index = 0 genommen. Der entsprechende BP sieht so aus:
Das resultierende Dateielement des Files Arrays muss zur weiteren Verwendung auf den Webanwendungsserver hochgeladen werden (Server request POST /_files/). Wenn die Anfrage erfolgreich ist, wird das Dateiobjekt am Ausgang des Server request POST /_files/ Blocks an den Eingang des Expand file Blocks übergeben, um ein Bytes Arrayzu erhalten, das an den Eingang des Image Update Properties Blocks in der Data Eigenschaft übergeben wird.
