Come utilizzare le immagini nelle applicazioni web

Questa esercitazione descrive l'uso del Image componente nelle applicazioni web.

Look & Feel

• Upload - è possibile predefinire un'immagine premendo il pulsante e selezionando un'immagine dal file system;

• Image alt [string] - chiamato anche tag alt e descrizione alt, il testo alt è la copia scritta che appare al posto di un'immagine su una pagina web se l'immagine non si carica sullo schermo dell'utente. Questo testo aiuta gli strumenti di lettura dello schermo a descrivere le immagini ai lettori ipovedenti e consente ai motori di ricerca di effettuare una migliore scansione e classificazione del sito web;
• Width [string] - larghezza dell'immagine per impostazione predefinita;
• Height [string] - altezza dell'immagine per impostazione predefinita;
• Visible [boolean] - definisce se l'immagine è visibile o meno;
• Name [string] - nome del componente;

Processi aziendali correlati

L'immagine in HTML è un riferimento all'oggetto immagine stesso. Pertanto, Image funziona sempre con i collegamenti e, per utilizzare i dati dell'immagine, è necessario ottenere un collegamento ad essa.

I seguenti elementi BPs sono generati in anticipo per l'utilizzo nelle applicazioni web:

• Image Get Properties - ottiene le proprietà dell'immagine:
  • Component ID [string] - identificatore del componente;
  • Width [string] - larghezza dell'immagine;
  • Height [string] - altezza immagine;
  • Image URL [string] - indirizzo URL dell'immagine;
  • Tooltip [string] - stringa di tooltip da mostrare al passaggio del mouse;
  • Visible [boolean] - definisce se l'immagine è visibile o meno;
  • Loading [boolean] - imposta l'immagine nello stato di "caricamento" se true;

• Image Set Properties - azzera tutte le proprietà dell'immagine selezionata e imposta invece quelle indicate:
  • Component ID [string] - identificatore del componente;
  • Width [string] - larghezza dell'immagine;
  • Height [string] - altezza immagine;
  • Image URL [string] - indirizzo URL dell'immagine;;
  • Tooltip [string] - stringa di tooltip da mostrare al passaggio del mouse;
  • Visible [boolean] - definisce se l'immagine è visibile o meno;
  • Loading [boolean] - imposta l'immagine nello stato di "caricamento" se true;

• Image Update Properties - aggiorna le proprietà dell'immagine:
  • Component ID [string] - identificatore del componente;
  • Width [string] - larghezza dell'immagine;
  • Height [string] - altezza immagine;
  • Image URL [string] - indirizzo URL dell'immagine;
  • Tooltip [string] - stringa di tooltip da mostrare al passaggio del mouse;
  • Visible [boolean] - definisce se l'immagine è visibile o meno;
  • Loading [boolean] - imposta l'immagine nello stato di "caricamento" se true;

Esempio di utilizzo

Consideriamo un esempio di caricamento dell'avatar di un profilo utente. L'interfaccia web consiste in un'immagine e in un pulsante che attiva il BP e si presenta così:

BP parte da onClick trigger. Per prelevare i file dal filesystem del dispositivo dell'utente Select Files viene utilizzato il blocco (Max files = 1, File types = Image). Se il file viene selezionato con successo, l'elemento dell'array con index=0 da selezionare.

Il file risultante dell'elemento 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 il suo ID.

Per ottenere l'URL, è necessario prendere il file ID e convertire il suo valore in una stringa (To String). Il percorso relativo del file sarebbe /api/_files/<ID>/download/. Quindi, per caricare un'immagine, il percorso del file deve essere passato nella proprietà Image URL della proprietà Image Update Properties del blocco.

L'applicazione pubblicata è l'esempio seguente