Bootstrap linee guida

Introduzione

ATTENZIONE: Questo articolo non riguarda il tema Bootstrap quando il parametro Fluid è attivato.

Nella versione 15.5 di Instant Developer è stato introdotto un nuovo tema che è possibile utilizzare con le applicazioni Web. Tale tema utilizza le classi ed i componenti del framework Bootstrap per renderizzare gli oggetti.

Per ottenere questo risultato è stato riscritto il framework lato client delle applicazioni web in modo da potersi interfacciare con Boostrap. Per questo motivo non tutte le funzionalità presenti nel framework applicativo RD3 sono presenti in un progetto con il tema Bootstrap abilitato.

Inoltre quando si creano delle applicazioni con tale tema è necessario seguire delle linee guida specifiche in modo da ottenere i comportamenti corretti, in quanto alcuni dei comportamenti del framework applicativo sono differenti se si utilizza il tema Bootstrap. E' necessario quindi conoscerne le caratteristiche per impostare correttamente la propria applicazione.

Videate

Boostrap è un framework creato per gestire in maniera facile ed efficiente le caratteristiche di responsività delle applicazioni, per questo motivo le videate in questo tema si adattano sempre in orizzontale allo spazio disponibile. Perciò la proprietà 'ridimensionamento orizzontale' delle videate non viene considerata e queste si adattano sempre alla dimensione del browser.
Il ridimensionamento verticale si comporta in due modi differenti a seconda della configurazione della corrispondente proprietà della videata:

• Nessuna: In questo caso viene mantenuta l'altezza a design time dei frame, quindi se lo spazio verticale non è sufficiente la videata mostrerà una scrollbar. Nel caso i frame abbiano scrollbar a design time queste saranno mantenute anche a run-time.
• Estendi/Adatta: In questo caso le dimensioni dei Frame vengono calcolate in maniera percentuale a seconda di quelle di design time (ad esempio se la videata a design time ha due frame verticali della stessa altezza a run-time ogni frame occuperà il 50% dello spazio disponibile). In questo caso sarà il frame ad avere la scrollbar se il suo contenuto dovesse essere più grande dello spazio disponibile.

I frame della videata vengono convertiti in una griglia Bootstrap mantenendo il layout di design-time per i dispositivi desktop e superiori (md), a risoluzioni inferiori la griglia si adatterà in base allo spazio disponibile. Raccomandiamo quindi di progettare il layout delle videate in modo da tenere conto fin dall'inizio di tutti i fattori di forma su cui l'applicazione dovrà essere visualizzata.

Note:

• Il flag di frame Larghezza Fissa ed i parametri Larghezza mimina e Larghezza massima non sono supportati.
• Il flag di frame Altezza Fissa ed i parametri Altezza mimina e Altezza massima sono supportati solo se la videata ha il ridimensionamento verticale impostato a Nessuno.

Resize verticale colonne

Dalla versione 16.5.6850 sono state abilitate le funzionalità di resize e ridimensionamento delle colonne in lista.
Per mantenere la compatibilità con la gestione responsive delle colonne della lista il resize è abilitato solo per i campi che hanno la modalità di ridimensionamento orizzontale in lista impostata a nessuna azione.

Resize verticale videate

Dalla versione 19.0.7400 le videate Bootstrap hanno due tipi di resize verticale:

• NESSUNO : I frame contenuti nelle videate vengono disegnati in base alla loro altezza a design time, se lo spazio verticale non è sufficiente la videata mostrerà le scrollbar.
• ADATTA/ESTENDI : I frame hanno un'altezza fisse percentuale decisa in base alle dimensioni di design-time. Se il contenuto non dovesse avere spazio sarà il frame a mostrare la scrollbar.

Il primo tipo di resize è adatto ai dispositivi di piccole dimensioni, ma se la videata viene mostrata su un dispositivo desktop spetta al programmatore dimensionare gli oggetti a run-time per non sprecare spazio.
Al contrario il secondo tipo di resize è comodo sul desktop, ma il risultato diventa scomodo se visualizzato su dispositivi di piccole dimensioni senza che il programmatore abbia gestito esplicitamente il ridimensionamento via codice.

Per migliorare questo comportamento nella versione 19.0 abbiamo studiato una terza modalità di resize. Questa modalità può venire attivata se la videata ha resize verticale ADATTA/ESTENDI ma viene mostrata su un dispositivo di dimensioni orizzontali inferiori a 998px (Tablet 10''); in questo caso i frame si comportano come se il resize fosse stato impostato a NESSUNO, perciò sarà la videata a mostrare le scrollbar e i frame si dimensioneranno in altezza in base al loro contenuto.

Questa funzionalità è spenta, per attivarla è necessario scrivere nel custom.css :
@media screen and (max-width: 998px) { .form-body:not(.form-body-fluid) > .frame-row { height: auto !important; } .form-body:not(.form-body-fluid) .panel-list-body-box { max-height: 300px; } }
Questa funzionalità è da considerare sperimentale.
E' stata progettata per videate con layout semplice, ad esempio due frame verticali e non è stata testata in presenza di sottovideate o sottopannelli.
I Feedback sono graditi, raccomandiamo di non usarla in un ambiente di produzione.
Non prevediamo di fornire supporto immediato a problemi che si dovessero presentare dopo aver attivato questa modalità, un workaround sempre applicabile è spegnere la funzionalità e tornare al comportamento predefinito.

Pannelli in lista

Il layout lista dei pannelli ha un comportamento differente rispetto a quello dei temi desktop standard (Seattle, Casual, Zen e Simplicity), in particolare:

• Il layout lista non prevede l'editabilità dei campi di pannello (supportato a partire dalla versione 16.5, l'inserimento in lista continua a non essere supportato).
• Nel layout lista non possono essere presenti campi fuori lista. (supportati a partire dalla versione 16.0)
• Indipendentemente dalla visualizzazione della lista nel designer questa riempie sempre tutto lo spazio disponibile (il ridimensionamento orizzontale è sempre 'adatta').
• I record vengono caricati in modo paginato, a gruppi di 30 come per i temi mobile. Quando la lista viene scrollata completamente viene mandata al server la richiesta dei prossimi record da mostrare.
• La lista non è virtualizzata, tutte le righe che il server manda al client vengono create nel DOM.
• Se il pannello ha entrambi i layout è necessario abilitare il flag 'Gestione Layout Automatica'

I campi di pannello in lista possono avere due soli tipi di ridimensionamento:

• Nessuno : In questo caso la dimensione del campo in lista viene fissata alla sua dimensione a design time.
• Adatta : In questo caso la dimensione del campo è fluida e si adatta allo spazio disponibile.

Dato che la lista occupa sempre tutto lo spazio disponibile nel caso non ci sia nessun campo con ridimensionamento Adatta il browser allargherà comunque i campi distribuendo lo spazio disponibile in parti uguali. In questo caso è necessario non mostrare i Row Selector, altrimenti lo spazio verrà assegnato anche alla loro colonna. Al diminuire dello spazio dato dal ridimensionamento del browser il testo dei campi o le loro intestazioni potrebbero sovrapporsi, per evitare questo è consigliato usare un layout della lista responsive, mostrando inizialmente solo i campi con i dati necessari e mostrando dati accessori all'aumentare dello spazio. Per ottenere questo risultato raccomandiamo di:

• Impostare sul campo o i campi dal contenuto descrittivo più importante il ridimensionamento Adatta e nessun ridimensionamento sugli altri.
• Utilizzare le classi responsive di Bootstrap o delle media queries per nascondere i campi non necessari ai vari breakpoint di dimensione. Instant Developer mette a disposizione le seguenti classi:
  • md-visible : campo visibile solo su tablet orizzontali o dektop.
  • lg-visible : campo visibile solo su desktop di grandi dimensioni (>1300px).
• Raccomandiamo di avere sempre a video un campo con ridimensionamento Adatta.

Per ottenere un buon risultato consigliamo dopo aver creato il pannello di seguire questi passaggi:

• Scegliere i campi descrittivi più importanti ed assegnare ad almeno uno di essi il ridimensionamento Adatta.
• Assegnare a tutti gli altri campi la classe css lg-visible o una classe equivalente che nasconda il campo fino al breakpoint massimo.
• Visualizzare la lista sul browser alla dimensione minima (consigliamo di usare gli strumenti di sviluppo che permettono di testare il dispositivo in modalità smartphone).
• Passare al breakpoint successivo (>769px) e decidere i campi visibili a tale dimensione, sostituendo la classe con md-visible.

Instant Developer integra solo due classi di visibilità specifiche per due breakpoint (768px e 1300px). Se necessario si posso aggiungere altri breakpoint aggiungendo le media query specifiche nel file custom.css; per semplicità riportiamo la definizione delle classi già integrate.

@media screen and (max-width: 768px) { .panel-field-value-list.md-visible, .panel-field-header-list.md-visible { display: none !important; } .panel-field-value-list.lg-visible, .panel-field-header-list.lg-visible { display: none !important; } } @media (min-width: 769px) and (max-width: 1300px) { .panel-field-value-list.lg-visible, .panel-field-header-list.lg-visible { display: none !important; } }

Note:

• Se lo spazio non è sufficiente per mostrare tutte le colonne della lista verrà mostrata una scollbar orizzontale. Per abilitare correttamente questo comportamento è necessario nascondere i row selector e disabilitare la multiselezione (non necessario a partire dalla versione 18.5). Raccomandiamo comunque di creare delle liste responsive che si adattino allo spazio disponibile.
• Il valore delle righe dinamiche è impostato a 30 in maniera predefinita. Quasi sempre questo valore è sufficiente per far comparire la scrollbar verticale e attivare la paginazione. Nel caso questa non compaia è possibile aumentare il valore.
• La performance dipende dalle righe presenti nel DOM, raccomandiamo quindi di limitare i record restituiti dai pannelli.

Pannelli in dettaglio

Anche per quanto riguarda il layout di dettaglio bisogna tenere conto di alcuni comportamenti specifici del framework quando si crea il pannello. La struttura dei campi viene convertita da un algoritmo in una serie di griglie bootstrap innestate, seguendo questi passaggi:

• Innanzitutto i campi vengono suddivisi in righe verticali, se due o più campi sono affiancati verranno disegnati nella stessa riga.
• Ogni riga ottenuta viene divisa in colonne, campi che si sovrappongono verticalmente sulla stesa riga vengono inseriti nella stessa colonna. La dimensione delle colonne viene decisa in percentuale in base alle dimensioni dei campi coinvolti (due campi con la stessa larghezza avranno due colonne al 50%, campi con larghezza diversa avranno colonne dimensionate differentemente).
• L'algorimo procede in maniera ricorsiva fino ad ottenere delle righe che contengano colonne con solo un campo.

Alla fine dell'esecuzione dell'algoritmo il layout di dettaglio viene mantenuto ma il risultato potrebbe non rispecchiare fedelmente le impostazioni dell'IDE, inoltre il risultato sarà full-responsive, quindi campi che vengono mostrati affiancati su un desktop potrebbero venire mostrati uno sotto l'altro su un tablet. Per ottenere un allineamento corretto consigliamo di:

• Disegnare i campi in dettaglio con la stessa larghezza, soprattutto se affiancati orizzontalmente, altrimenti il risultato sarà esteticamente poco gradevole se mostrati uno sotto l'altro per mancanza di spazio.
• Disegnare i campi di input con altezza di 32px.
• applicare un gap di 16px tra campi verticali.
• Non sovrapporre mai i campi, lasciare sempre un gap tra loro (sia in orizzontale che in verticale).

Queste regole vengono applicate automaticamente da Instant Developer quando viene creato il layout di dettaglio o quando si seleziona Allinea Verticalmente. Il ridimensionamento orizzontale dei campi di pannello segue queste regole:

• Nessuno : il campo di pannello viene disegnato della stessa dimensione di design-time. Questa impostazione riguarda il campo stesso ma non la colonna che lo contiene, che essendo una colonna bootstrap ha sempre dimensioni percentuali. Per questo motivo due campi affiancati senza ridimensionamento potrebbero venire mostrati separati su monitor di grandi dimensioni.
• Adatta : il campo occupa tutto lo spazio disponibile nella sua colonna.
• Muovi : il campo occupa tutto lo spazio disponibile nella sua colonna ma la sua larghezza massima è quella impostata a design time, utile per gestire al meglio il layout responsive.

Il ridimensionamento verticale dei campi non viene applicato e non è possibile ottenere campi sovrapposti.

Note:

• Nel caso di pannelli paginati è necessario che i campi presenti in dettaglio appartengano tutti ad una pagina. Non sono supportati campi in dettaglio fuori pagina.

Per comodità è possibile scegliere una dimensione base dello spazio occupato dal pannello e ricavarne le dimensioni da assegnare ai campi in modo da ottenere una specifica larghezza di colonna.

Spazio	col-1	col-2	col-3	col-4	col-5	col-6	col-7	col-8	col-9	col-10	col-11	col-12
1032	86	172	258	344	430	516	602	688	774	860	946	1032
960	80	160	240	320	400	480	560	640	720	800	880	960
840	70	140	210	280	350	420	490	560	630	700	770	840
720	60	120	180	240	300	360	420	480	540	600	660	720
480	40	80	120	160	200	240	280	320	360	400	440	480

Icone di tipo font

Le applicazioni sviluppate con il tema Bootstrap non utilizzano immagini ma usano icone di tipo font, in particolare viene utilizzato Font Awesome. E' possibile utilizzare le icone di Font awesome in tutte le stringhe mostrate a video utilizzando il formato {{icon-nomeIcona}}.

Ad esempio per usare l'cona 'fa-star' è sufficiente scrivere {{icon-fa-star}} nel testo.

Gli oggetti che supportano tale caratteristica sono:

• Caption dei campi di pannello in lista e dettaglio.
• Valore dei campi di pannello (disabilitati).
• Contenuto dei campi statici e pulsanti.
• Lista valori delle Combo.
• Caption dei commandset.
• Caption dei comandi.
• Caption dei frame.
• Span non abilitati.
• Caption dei gruppi di pannello in dettaglio.
• Caption delle pagine di pannello.
• Caption delle Tab.
• Testo contenuto nei nodi degli alberi.

Personalizzazione tema

Per personalizzare il tema è possibile duplicare la cartella Boostrap o Ionic nella cartella C:\\Program Files\\INDE\\CURRENT\\Theme e specificare il nome del proprio tema nella proprietà THEME dell'applicazione. Instant Developer utilizzerà tale cartella per la generazione dell'applicazione web ma non utilizzerà la cartella RD3 contenuta nella copia bensì la cartella RD3 contenuta nel tema Boostrap/Ionic "standard".

Nelle versioni precedenti se si personalizzava il tema Bootstrap anche la cartella RES (che contiene i file JS/CSS di bootstrap e i font) veniva presa dal tema standard. A partire dalla versione 19.5 viene utilizzata la cartella RES se presente nel tema personalizzato.

Note

• Miglioramento relativo a questo thread del forum e alla richiesta di assistenza 001385-2019.
• Nota bene: Il nome del tema personalizzato deve iniziare con:
  • "boostrap" se è un tema derivato dal tema bootstrap;
  • "ionic" se è un tema derivato dal tema ionic.

Personalizzazione icone applicate

E' stata migliorata la creazione delle icone nelle applicazioni che usano i temi Bootstrap e BootstrapZen.
In particolare è stata centralizzata la definizione delle icone da utilizzare, permettendo di poterle personalizzare più facilmente.

Le icone sono definite nel file ClientParams.js e possono essere personalizzate implementando la funzione RD3_CustomInit nel file custom3.js.

Es: function RD3_CustomInit() { RD3_ClientParams.FA_ICON_TOP = "fa-angle-double-left"; // Icona usata dalla toolbar dei book in anteprima - prima pagina }

Personalizzazione classi di grigliatura

A partire dalla versione 16.0 è possibile inserire nella proprietà CSSClass dei campi di pannello e dei gruppi dei token particolari per sovrascrivere le classi CSS della cella della griglia calcolate dal framework.
I token devono avere questa forma: "{{class css}}".

ES: Orders.CustomerID.CSSClass = "{{col-sm-2 col-md-4}}"

Queste classi hanno effetto solo in dettaglio o per i campi fuori lista, in quanto la lista è realizzata con una Table HTML e non con la griglia bootstrap.

A partire dalla versione 18.0r4 la stessa funzionalità è disponibile per le classi CSS relative ai frame. Le classi definite all'interno del token vengono utilizzate solo nel caso di frame in una divisione orizzontale e permettono di personalizzare le classi applicate dal sistema alle colonne della griglia della videata.

Dalla versione 21.0.8100 è possibile modificare le classi di grigliatura dei campi di pannello anche a run-time adattandole a seconda delle necessità, mentre prima potevano essere modificate solo all'apertura della videata.

Tema Bootstrap Zen

Dalla versione 18.0.7000 è stato creato un nuovo tema grafico chiamato Bootstrap Zen. Clicca qui per vedere il nuovo tema grafico.

Note

• È possibile attivare il nuovo tema anche su applicazioni già esistenti che utilizzano il tema Bootstrap.
• Le funzionalità supportate sono le stesse del tema Boostrap.
• Il tema BootstrapZen non supporta la configurazione del colore di sfondo del campo in lista, della riga alternata e della riga attiva da Visual Style. E' possibile configurare questi colori intervenendo sul CSS.
• Il tema BootstrapZen non supporta la configurazione del colore di sfondo del campo in dettaglio da Visual Style. E' possibile configurare questo colore intervenendo sul CSS.
• Il tema non supporta la configurazione del colore di sfondo dei campi di pannello usando la proprietà BackgroundColor. E' possibile configurare il colore intervenendo sul CSS tramite la proprietà CSSClass.
• Dalla versione 19.0.7400 è stata abilitata la possibilità di impostare il colore del testo delle intestazioni di lista da VisualStyle nel tema BootstrapZen.

Dimensione videate modali

Dalla versione 19.0.7400 Bootstrap mette a disposizione tre possibili dimensioni per le videate modali (piccola, media e larga).
Nelle versioni precedenti le applicazioni usavano sempre la dimensione massima.
Ora è possibile indicare quale dimensione usare impostando nella proprietà ClassName della videata:

• modal-sm: dimensione piccola.
• modal-md: dimensione media.

Se non si indica niente il sistema utilizzerà la dimensione predefinita (larga).

Tooltip

I tooltip vengono posizionati:

• A destra per la prima colonna della lista.
• A sinistra per l'ultima colonna della lista.
• Sopra per l'ultima riga della lista (a meno che non sia la prima/ultima colonna).
• Sotto in tutti gli altri casi.

Fino a prima della versione 19.0.7400 i tooltip in lista venivano sempre posizionati a destra della cella, anche se si trattava dell'ultimo campo della lista.

Container

Bootstrap supporta due tipi di container globali differenti:

• container: contenitore responsive a larghezza fissa.
• container-fluid: contenitore che riempie tutto lo spazio orizzontale a disposizione.

Fino a prima della versione 16.0.6700 il framework creava automaticamente un contenitore globale dell'applicazione con classe "container-fluid", valore attualmente predefinito, mentre ora è possibile scegliere quale classe usare, sia per il body dell'applicazione che per l'header.

Note

• I parametri sono gestiti lato client, per modificarli è sufficiente creare il file custom3.js nella cartella custom ed inserire il seguente codice javascript:
  function RD3_CustomInit() { RD3_ClientParams.BodyContainerType = "container"; // or "container-fluid" RD3_ClientParams.HeaderContainerType = "container"; // or "container-fluid" }

Gutter opzionale

Tra le linee guida è presente una tabella che permette di legare le larghezze da assegnare ai vari campi al numero di colonne che il sistema assegnerà a run-time.
Prima della versione 16.0.6700 queste larghezze non tenevano conto del gutter tra le varie colonne di bootstrap (il valore predefinito è 30px).

E' ora possibile impostare tra i parametri client la larghezza del gutter da usare durante i calcoli, in questo modo i campi possono essere disegnati usando la stessa larghezza che avrebbero a video e con gli stessi gap di bootstrap.
Il valore predefinito dei parametri è 0, in questo modo il sistema non cambia di comportamento rispetto alla versione precedente.

Questa modifica permette di allineare il designer in maniera migliore al risultato finale.
function RD3_CustomInit() { RD3_ClientParams.GridGutterLeft = 15; RD3_ClientParams.GridGutterRight = 15; }

Grigliatura nel form editor

Se si utilizza il tema Bootstrap occorre conoscere il sistema di grigliatura utilizzato per rendere la videata responsiva. Per facilitare l'operazione è ora possibile attivare la visualizzazione della grigliatura di bootstrap anche nel form-editor:

Funzionamento della grigliatura

Come mostrato nell'immagine, quando viene attivato il comando viene mostrata una griglia che indica quante e quali celle verranno utilizzate dal motore grafico bootstrap per realizzare la videata a run-time. Nell'esempio la prima " contiene i campi Employee ID, Last Name e FirstName. Tali campi occupano, rispettivamente, 2, 4 e 6 celle. Pertanto il primo campo sarà automaticamente allargato ed avrà una larghezza pari a 2/12 dell'intera larghezza della videata, il secondo parti a 4/12 ed il terzo a 6/12. Tali rapporti sono ottenuti nel modo seguente:

• I campi sono larghi rispettivamente 160px, 260px e 276px
• Il sistema calcola la larghezza totale "effettiva" dei campi: 160px + 260px + 276px = 696px e calcola la larghezza di una cella-boostrap (1/12 della larghezza totale): 696px/12 = 58px per ogni cella
• A questo punto si calcola quante celle occorre assegnare ai vari campi: 160/58 = 2.76 arrotondato a 2 celle, 272/58 = 4.48 arrotondato a 4 celle. Il resto (12 - 2 - 4 = 6) viene automaticamente assegnato all'ultimo campo della "riga".

CommandSet

Dalla versione 19.0.7400 è possibile usare CommandSet di secondo livello nelle applicazioni che usano i temi Bootstrap e BootstrapZen.

Dalla versione 20.0.7800 è possibile usare testo l'HTML nell'intestazione dei comandi/commandset.

Note

• I menù di secondo livello non sono supportati nei menù popup.

HTML e intestazione di applicazione

Dalla versione 20.0.7800 è possibile usare testo HTML nell'intestazione dell'applicazione.

Posizione label e check

Dalla versione 20.0.7800 è possibile invertire la posizione di label e check in dettaglio impostando l'allineamento del campo a destra.

Note

• L'allineamento a destra ha impatto anche sulla lista.

Assegnare classi di bootstrap a pulsanti

E' ora possibile utlizzare le classi specifiche di bootstrap (btn-danger, btn-primary, ..) nei campi di pannello di tipo CommandButton.

Gestiti eventi MouseClick e MouseDoubleClick di pannello

E' ora possibile usare gli eventi OnMouseClick e OnMouseDoubleClick di pannello nelle applicazioni realizzate con il tema Bootstrap.

Campi fuori pagina nei pannelli paginati

Dalla versione 18.5 questi campi verranno disegnati in una loro griglia prima dei campi della pagina e saranno visibili su tutte le pagine.
Nelle versioni precedenti i campi fuori pagina (in dettaglio o fuori lista) venivano disegnati nella prima pagina e non riportati sulle altre pagine.

Note

• Questo cambio di comportamento è specifico dei temi Bootstrap e BootstrapZen, e li allinea al comportamento dei temi Web RD3.