In questo articolo costruiremo una galleria immagini da utilizzare in FileMaker e questa galleria dovrà leggere i dati da FileMaker ed essere responsive, ovvero dovrà riarrangiare automaticamente i contenuti quando interveniamo sulla dimensione della finestra.
Per completare il quadro delle funzionalità, saranno presenti due pulsanti che richiameranno degli script FileMaker per la visualizzazione a dettaglio e per la modifica.
Per tenere la parte JavaScript il più semplice possibile useremo Vue.js e ci faremo aiutare da Vue.js e da una libreria molto semplice da integrare: Vue Light Gallery.
Per prima cosa, predisponiamo predisponendo i collegamenti verso le librerie JavaScript e i CSS che utilizzeremo per definire l’aspetto grafico della nostra applicazione.
Ora siamo pronti per iniziare a costruire la nostra mini-applicazione
Iniziamo con l’inserimento del consueto ciclo di loop gestito dalla direttiva v-for di Vue, che ci creerà una voce per ogni record che FileMaker passerà, quando invierà i dati sotto forma di JSON.
In pratica, per ogni record (image) contenuto nel gruppo di record inviato da FileMaker (images) crea una riga.
E qui affrontiamo la parte più interessante di questo lavoro di sviluppo, quindi soffermiamoci sull’argomento per spiegarlo più approfonditamente.
Se dobbiamo mostrare una lista valori, come abbiamo visto in altri articoli di questo blog, la parte di UI sarà molto contenuta, perché ci basterà attribuire uno stile ed eventualmente un metodo a ogni elemento, per consentire ai nostri utenti di fare clic sulla riga e vedere i dettagli, dopodiché il nostro lavoro sarà finito.
In casi del genere possiamo inglobare tutto quanto nel ciclo di loop senza complicare troppo la leggibilità del nostro codice.
Ma in questa esercitazione ogni elemento della nostra galleria non sarà costituito semplicemente dall’immagine - se questo è il vostro caso d’uso, va benissimo l’approccio utilizzato per le liste valori: qui vogliamo creare una galleria che mostri un’immagine, una descrizione, un indicatore della dimensione e un paio di pulsanti che invocheranno degli script FileMaker, ognuno di essi magari visualizzato con uno stile differente.
Quindi avremo una struttura, composta da tag HTML e codice JavaScript, oltre a qualche inevitabile riferimento alle classi CSS che daranno l’aspetto voluto al tutto, molto più elaborata di una semplice riga.
Come possiamo evitare di riversare tutto questo codice dentro al nostro ciclo di loop? Non è possibile creare una sorta di modello della nostra applicazione e poi farlo riempire con i dati dal nostro loop?
Fortunatamente sì: Vue ci consente di usare un component, quindi un oggetto riutilizzabile, che sarà definito da un template, ovvero un modello che conterrà tutte le informazioni per costruirlo.
In questo modo potremo definire, in separata sede e una volta per tutte, la struttura del componente, che in pratica rappresenterà un singolo elemento della galleria.
Per usare un’analogia con FileMaker, è come se predisponessimo un formato scheda per poi richiamarlo popolandolo di dati quando serve.
Il nostro componente verrà quindi utilizzato dal ciclo di for e, per ogni elemento presente nell’array di dati che passa FileMaker, verrà costruito un oggetto composto dalla struttura descritta nel modello e popolato con i dati del record elaborato in quel momento.
Ora che abbiamo ciò che ci serve per creare la struttura della nostra galleria, vediamo come gestire il passaggio dati da FileMaker alla nostra applicazione.
Per richiedere i dati useremo sempre la funzione loadData() usata in altri articoli di questa serie: in pratica FileMaker recupera i dati mediante le Data API e li passa a questa funzione mantenendo il formato JSON con cui le API restituiscono il risultato; a questo punto la funzione loadData() riceverà questi dati e li renderà disponibili a Vue per il ciclo di for che creerà la galleria.
Sempre in questa sezione troveremo i metodi, ovvero l’equivalente JavaScript degli script FileMaker, che il nostro modello assocerà ai pulsanti APRI e MOD., e che richiameranno due diversi script FileMaker.
Passiamo ora alla parte FileMaker: come accennato in precedenza, FileMaker cerca i dati servendosi dell’istruzione Esegui FileMaker Data API, carica il codice HTML e infine passa i dati alla funzione JavaScript loadData() tramite Esegui JavaScript in Visualizzatore Web.
Per gestire in maniera più semplice il passaggio dei dati, abbiamo scelto di convertire la nostra immagine in Base64, quindi in pratica di trasformarla in un testo per poi includerla nel JSON, utilizzando la funzione FileMaker: Base64EncodeRFC().
Sarà poi il nostro modello a riconvertire il testo in immagine.
Vediamo ora il risultato all’opera: come possiamo notare, se cambiamo un dato in FileMaker e ricarico i dati (posso anche automatizzare l’intero processo, chiaramente) il tutto si aggiorna e, al contempo, i pulsanti di ogni immagine della galleria richiamano gli script di FileMaker per la visualizzazione e la modifica.