FLUID: linee guida

Descrizione

Il motore grafico FLUID utilizza i costrutti HTML del framework Ionic (la versione di Instant Developer Cloud di Ionic) per costruire gli oggetti a video nel browser.

La sua struttura è basata su Ionic è unica per tutti i temi grafici. Quindi, a differenza di quanto avviene nel motore grafico RD3, dove per ogni tema c'è del codice javascript specifico per gestirlo (fino ad arrivare a casi come il tema Bootstrap che ha un motore grafico tutto suo diverso da quello ad esempio di Seattle), in FLUID tutti i temi condividono la stessa struttura e la differenziazione tra di loro avviene attraverso il css, con un file css specifico per ogni tema.

Per fare un esempio, se usiamo il tema Bootstrap nel dom non ci saranno gli oggetti specifici di Bootstrap (ad esempio bs-input, bs-dropdown, ecc.), ma ci saranno sempre oggetti Ionic il cui stile e comportamento sarà reso equivalente a quello dei rispettivi oggetti Bootstrap attraverso il css.

La struttura unica per tutti i temi e l'utilizzo spinto al massimo del css presentano dei grossi vantaggi in termini di efficienza, velocità dell'applicazione e semplicità di personalizzazione e consentono di essere pronti ad accogliere possibilità future ora inimmaginabili.

Come funziona

Il motore grafico Fluid per posizionare gli oggetti a video utilizza un sistema di grigliatura con righe e colonne che utilizzando Flexbox CSS che permette di avere un layout che si disegna a video in maniera rapida e responsive.

Il sistema di grigliatura del motore grafico Fluid lavora per righe e per colonne e quindi non permette di avere campi sovrapposti come si poteva fare nel motore grafico RD3.
Di questo occorre tenerne conto quando si creano nuove videate utilizzando il drag & drop a partire da un documento che aggiunge tutte le sue proprietà al pannello disponendole in maniera casuale.
In base alla lunghezza della proprietà essa può essere aggiunta a video con una dimensione diversa sia in altezza che il larghezza e questo può portare a delle sovrapposizioni di campi. L'algoritmo che posiziona i campi nelle righe e colonne del layout cerca di risolvere le sovrapposizioni ma se i campi sono molti potrebbe incorrere in una eccezione con il risultato che la videata in esecuzione non viene visualizzata correttamente.

Il modo corretto di procedere è quello di, dopo aver generato la videata dal drag & drop, selezionare tutti i campi (mediante CTRL + A) e impostarne l'altezza (in lista e dettaglio) a 32px. Questo dovrebbe già eliminare le sovrapposizioni. Prima di questa operazione se ci sono dei campi con l'intestazione in alto conviene posizionarla a sinistra in quanto l'altezza, se la label è sopra, considera anche la label.

È possibile anche disporre i campi uno sotto l'altro, dopo averli selezionati, utilizzando i comandi del menu contestuale del tasto destro del mouse su uno dei campi o della toolbar di menu del form editor.

Se i campi del documento sono molti nel formato lista alcuni di essi verranno posizionati, dalla generazione automatica della videata, fuori dalla lista in basso e questo può causare l'errato calcolo delle dimensioni della lista e la sua non visualizzazione.
Conviene posizionare i campi in modo che sia disposti correttamente nel pannello e non occupino troppo spazio in basso spostandoli a destra della lista oppure nascondendoli nel formato lista.

Migliore è la disposizione nei campi della videata nell'ide, quindi senza sovrapposizioni, meno lavoro deve fare il si sistema di grigliatura e quindi più veloce risulta il disegno del pannello a runtime.

Attivazione

Per attivarre il motore grafico FLUID è sufficiente aprire un progetto esistente ed attivare il parametro di compilazione.

Il parametro è attivo per default nei nuovi progetti e nelle nuove applicazioni create in progetti esistenti. NON viene automaticamente attivato nei progetti esistenti, nemmeno dopo aver aggiornato le librerie alla versione 22.5. Nei progetti esistenti, infatti, è necessario attivarlo manualmente modificando il valore del parametro di compilazione.

Note

• Il nuovo motore grafico FLUID utilizza il valore del parametro di compilazione Righe ad altezza variabile (o della proprietà dei pannelli RowHeightResize) per decidere se mostrare righe ad altezza fissa o variabile.
• Per avviare l'applicazione il server invierà al browser i file DesktopFluid.htm e DesktopFluid_sm.htm invece dei corrispondenti file Desktop.htm e Desktop_sm.htm utilizzati dal motore RD3. Pertanto, se i file originali erano stati personalizzati, occorrerà introdurre le personalizzazioni anche nei nuovi file.
• Il motore fluid non utilizza i file custom.css e custom3.js ma i file customf.css e customf.js. Pertanto se erano state fatte personalizzazioni occorrerà portarle nei nuovi file dopo averle adattate al nuovo motore grafico.
• Il nuovo motore grafico non utilizza le righe dinamiche. Pertanto, se queste vengono attivate via codice tramite il metodo SetDynamicRows o tramite il parametro di compilazione Righe dinamiche, non vengono considerate dal sistema.
• Le icone utilizzate da FLUID sono quelle di Ionic nella versione 4.5.10 che trovate sul sito Ionicons.
  Sono presenti anche le icone di Font Awesome nella versione 4.6.3 che trovate sul sito Font Awesome Icon.
  Per utilizzare quelle Ionic la stringa da inserire nella caption è {{icon-nomeIcona}} dove nomeIcona identifica l'icona che volete utilizzare.
  Per utilizzare quelle Font Awesome la stringa da utilizzare nella caption dell'elemento è {{icon-fa-nomeIcona}} dove nomeIcona identifica l'icona che volete utilizzare.
• Se l'applicazione utilizza elementi javascript di terze parti è necessario adattare il codice Javascript del componente perché si integri con il nuovo motore grafico.
• Il framework FLUID non supporta la modalità di ridimensionamento dei campi MUOVI. Per ottenere lo stesso effetto si può inserire nella riga un'etichetta vuota e trasparente con ridimensionamento ADATTA oppure muovere i campi da codice nell'evento di Resize della videata.
  Utilizzando Fluid flexbox i campi a destra di campi adattabili verranno automaticamente spostati senza che sia necessaria alcuna impostazione particolare.

Funzionalità non ancora supportate

Questo elenco riporta le funzionalità non ancora integrate nel motore grafico FLUID (alla versione 24.5) che sono presenti in RD3 e verranno realizzate nei prossimi rilasci.

• Book in applicazioni mobile
• Collassamento bordi sovrapposti book

N.B.: Per avere il maggior numero di funzionalità attive occorre utilizzare la versione più recente di Instant Developer.

Funzionalità non supportate

Questo elenco riporta le funzionalità non integrate nel motore grafico FLUID e di cui non è prevista l'implementazione.

• ScreenZones.