Nelle applicazioni mobili il flusso di lavoro del componente Image è leggermente diverso da quello delle applicazioni web. Questo articolo descrive in dettaglio come utilizzare Image nelle applicazioni mobili. Negli elementi che si ripetono, come ad esempio gli elementi delle categorie List e Grid il caricamento del componente Image dal modello di dati non è univoco e richiede una certa procedura per il caricamento utilizzando il BP.
Image utilizzo dei componenti negli elementi ripetuti (List/Grid)
Vediamo un esempio in cui abbiamo una tabella di voli e ogni oggetto volo ha il suo coperchio, rappresentato dal campo ImageFile campo [file].
Immaginiamo che l'elenco dei voli sia rappresentato con il componente List componente. Ogni elemento del List è un Card contenente Image e alcuni altri componenti per visualizzare le informazioni di volo rilevanti. Nel designer dell'interfaccia utente l'aspetto è il seguente:
Prima di tutto, Data Source deve essere specificato per il componente padre (List in questo caso).
Per caricare i dati dal database al componente Image componente, è necessario creare un nuovo processo di business per il componente. Image componente.
Il BP richiesto inizia con la creazione di un elemento dell'immagine nell'applicazione, ovvero il onCreate trigger. Prima di tutto, è necessario ricevere l'oggetto del modello di dati corrispondente all'immagine data. Per farlo, si possono utilizzare i dati già ricevuti dall'elemento genitore (List in questo caso). Per ottenere i dati da un elemento Listsi utilizza il blocco List Get Data viene utilizzato.
La logica della BP che stiamo costruendo è la seguente: se uno degli elementi dell'array Data elementi dell'array (flight oggetto modello) ha un identificatore (ID) uguale a Record IDallora abbiamo trovato l'elemento della tabella di volo di cui abbiamo bisogno. Quindi, il file immagine ID viene prelevato dall'oggetto modello di volo e caricato nel componente Immagine con le caratteristiche richieste. Widget ID.
Per iterare su tutti gli elementi dell'array Data si utilizza il blocco For each loop BP e, nel corpo del ciclo, ogni elemento dell'array viene espanso utilizzando il metodo Data viene espanso utilizzando il blocco Expand Flight . Se Flight ID = Record ID, allora viene preso l'identificatore del ImageFile e l'oggetto file viene caricato utilizzando il blocco. Server request GET /_files/:id/download/ blocco. L'esempio di BP corrispondente è il seguente.
Nel passaggio successivo, il file immagine viene espanso utilizzando il blocco Expand file per passare l'array di byte come input al blocco Image Update Properties del blocco Data del blocco. È inoltre necessario specificare il valore Widget ID di uno specifico elemento dell'immagine nel foglio, passandogli il valore del blocco onCreate all'inizio della BP. Il risultato dell'ultima parte della BP è mostrato nell'esempio seguente:
Alla fine il blocco Break Loop viene utilizzato per non iterare invano sui restanti elementi dell'array.
Caricamento di un'immagine dal file system dello smartphone dell'utente
Consideriamo un esempio di caricamento dell'avatar di un profilo utente. L'interfaccia web consiste in un'immagine e in un pulsante che lancia il BP e ha questo aspetto:
Quindi, la relativa BP consente all'utente di selezionare i file dal proprio dispositivo con l'uso del blocco Select Files blocco. Se i file sono stati selezionati con successo, viene preso l'elemento con index = 0 viene preso. Il BP corrispondente si presenta come segue:
L'elemento file risultante dell'array Files deve essere caricato sul server dell'applicazione web per un ulteriore utilizzo (Server request POST /_files/). Se la richiesta ha successo, l'oggetto file all'uscita del blocco Server request POST /_files/ viene passato all'ingresso del blocco Expand file per ottenere un elemento Bytes Arrayche viene passato all'ingresso del blocco Image Update Properties nella proprietà Data proprietà.
