Anatomia di un pannello

La struttura degli elementi visuali che compongono un pannello è mostrata nell’immagine seguente:

Il widget IdfPanel può essere contenuto direttamente a livello base in una videata, se non sono previsti altri elementi, oppure può essere posizionato all’interno di qualunque altro elemento di tipo container, come ad esempio IonContent nel caso di pagina standard Ionic.

Il primo elemento figlio del pannello è la datamap principale (mainDM) che fornisce al pannello i dati e ne gestisce la modifica. 

Sotto alla datamap troviamo i widget di tipo IdfField che rappresentano le colonne della griglia o i campi del dettaglio. Un elemento IdfField a sua volta può contenere altri elementi visuali, come si vede nell’immagine in cui l’ultimo campo (Discontinued) contiene un elemento di tipo Button. Gli elementi ulteriori possono servire per aggiungere funzionalità al campo oppure per rappresentare i dati in modo diverso, ad esempio attraverso una progress bar.

I campi possono essere raggruppati tramite un widget di tipo IdfGroup, che permette di gestirli in una zona specifica dell’interfaccia utente, oppure suddivisi in più pagine con un widget di tipo idfPanelPage, non mostrato nell’esempio.

Notiamo infine che i widget IdfField possono contenere anche una datamap, cosiddetta di lookup, che permette di decodificare ed effettuare la selezione del valore da altre tabelle o documenti. 

Nell’editor di videate, il pannello appare come una visualizzazione in griglia, come nell’esempio seguente:

Nella parte superiore, possiamo notare le seguenti zone:

1. Toolbar e statusbar.
2. Intestazione delle colonne.
3. Riga per l’inserimento dei filtri.
4. Righe con l’anteprima dei valori presenti nella griglia.

Sul lato sinistro, possiamo notare una colonna laterale che mostra lo stato delle righe e permette di effettuare la multi-selezione.

Creazione e modifica di un pannello

Creazione di un pannello

Prima di iniziare ad utilizzare i pannelli, è necessario importare il pacchetto FluidUI, che contiene la libreria IDFWidgets, con le definizioni degli elementi che compongono i pannelli.

A questo punto è possibile inserire il componente IdfPanel, sia a livello di videata, che a livello di elemento container. Solitamente il pannello viene inserito direttamente all’interno di una videata vuota, se questa videata serve solo per visualizzare e gestire i dati in modalità griglia e dettaglio.

Se, invece, la videata deve contenere più elementi del singolo pannello, come, ad esempio, visualizzazioni lista / dettaglio o ulteriori zone di gestione dei dati, si consiglia di inserire degli elementi Container con layout horizontal e vertical.

Subito dopo aver inserito il componente IdfPanel, nell’albero degli oggetti viene selezionata la datamap principale del pannello. A questo punto è possibile indicare il tipo di documenti che verranno mostrati nel pannello e il sistema genererà automaticamente sia il layout in lista che quello di dettaglio.

Come per ogni altra datamap è possibile utilizzare anche una query di caricamento dati, oppure specificare le proprietà e caricare i dati direttamente in memoria. Tuttavia la soluzione più flessibile è sempre quella di passare attraverso documenti. 

Modifica del layout in griglia 

La modifica del layout in griglia avviene tramite l’editor delle videate. Cliccando su una colonna essa viene selezionata nell’albero degli oggetti; cliccando su più colonne tenendo premuto il tasto ctrl, verrà effettuata una selezione multipla.

Trascinando con il drag&drop le intestazioni delle colonne è possibile cambiarne la sequenza: la colonna trascinata apparirà prima di quella su cui viene rilasciata. Inoltre, posizionando il mouse sul lato destro di una colonna, sarà possibile ridimensionarla. Occorre tenere conto che il ridimensionamento di solito avviene in percentuale, ma è possibile anche gestire la modalità assoluta (pixel). Per maggiori informazioni, vedi il paragrafo Gestione della larghezza e dell’altezza dei campi e delle colonne.

Modifica del layout in dettaglio 

Cliccando il pulsante Cambio Layout nella toolbar del pannello, il primo dopo i pulsanti di navigazione, si accede alla visualizzazione in dettaglio. Un singolo pannello, infatti, possiede entrambe le visualizzazioni in modo da poter gestire al meglio anche dati molto complessi.

Inizialmente la visualizzazione in dettaglio appare come una lista di campi uno sotto l’altro, come si vede nella figura seguente.

Il layout di dettaglio viene gestito come una serie di righe, ognuna delle quali può contenere uno o più campi. All’inizio ogni riga contiene un unico campo. Tramite il trascinamento dei campi con il drag&drop è possibile:

1. Spostare un campo in una riga diversa. I campi presenti nella riga verranno ridimensionati per tenere conto del nuovo campo.

I campi Supplier ID e Category ID condividono la stessa riga.

2. Spostare un campo in mezzo ad altre due righe per creare una nuova riga intermedia.

Gestione della larghezza e dell’altezza dei campi e delle colonne

Le dimensioni del pannello e dei campi possono essere specificate in valore assoluto (pixel) o in percentuale, relativamente all’oggetto che li contiene. Questo può avvenire trascinando il bordi del campo oppure impostando le relative proprietà di design time.

Nell’immagine seguente vengono riportate le proprietà della colonna Product Name, che nel layout lista ha una larghezza del 20% rispetto al pannello e un’altezza di 40 pixel.

È importante notare la modalità di ridimensionamento (grow) che fa sì che la colonna tenda a occupare tutto lo spazio disponibile, fino a riempire l’intera griglia, ma senza mai scendere sotto la dimensione impostata a design time. In presenza di molte colonne, questo comportamento potrebbe far apparire una scrollbar orizzontale nella griglia.

Utilizzando come valore stretch, la colonna verrà ridimensionata rispetto al suo valore base cercando di utilizzare l’intera dimensione della griglia senza far apparire la scrollbar orizzontale. In questo caso, se ci sono molte colonne, esse potrebbero risultare molto strette. Se si verifica questa situazione, è sempre possibile impostare un valore per la larghezza minima della colonna tramite lo stile del campo.

Se infine si utilizza none come modalità di ridimensionamento, la colonna manterrà sempre il valore impostato a design time, sia in termini relativi che assoluti.

Per quanto riguarda il dettaglio, dopo aver impostato il layout dei campi tramite il form editor, è possibile aggiustare il posizionamento degli stessi trascinando i bordi del campo oppure tramite le proprietà di design time del campo stesso. In particolare le proprietà formLeft, formTop, formRight e formBottom rappresentano i margini del campo rispetto alla riga in cui esso è contenuto, mentre formWidth e formHeight le rispettive dimensioni. Anche in questo caso le proprietà formResizeWidth e formResizeHeight stabiliscono le modalità di ridimensionamento. 

Campi e colonne multiriga

Normalmente i campi possono contenere testo su una sola riga. Per attivare la possibilità di inserire testi multiriga, è possibile impostare i flag di design time ListMultiRows e FormMultiRows. 

Occorre tenere conto anche che normalmente le righe della lista hanno sempre la medesima altezza definita a design time, quindi è possibile che il contenuto di una cella non sia sempre completamente visibile. È possibile attivare il flag del pannello RowHeightResize per fare in modo che l’altezza delle righe sia calcolata in funzione del contenuto.

Nel layout di dettaglio, i campi mantengono la stessa altezza o si estendono in funzione della politica di ridimensionamento. Selezionando grow, il campo si ridimensionerà in altezza in funzione del contenuto; in caso contrario potrebbe apparire la scrollbar.

Raggruppamenti e pagine

I campi dei pannelli possono essere raggruppati tramite la definizione di pagine di campi e di gruppi di campi. Un pannello può quindi contenere elementi di tipo IdfPanelPage e IdfGroup; è possibile aggiungere tali elementi tramite la barra degli elementi visuali.

Nell’immagine seguente possiamo vedere che alcuni campi sono direttamente contenuti nel pannello (OrderID, CustomerID e EmployeeID), mentre gli altri sono suddivisi nelle pagine pagDate e pagShip. Inoltre all’interno della pagina pagShip alcuni campi sono contenuti all’interno di un elemento idfGroup.

In questa configurazione, il pannello presenta la toolbar di selezione delle pagine nella parte superiore, subito sotto la toolbar con i comandi del pannello. Ogni pagina contiene i campi comuni, cioè quelli contenuti direttamente nel pannello, e i propri campi. 

L’assegnazione dei campi alle varie pagine o gruppi avviene trascinando i campi dall’albero del progetto. Se si visualizza l’anteprima del pannello nel layout di dettaglio, è possibile trascinare i campi direttamente dentro o fuori da un gruppo per cambiarne l’appartenenza.

Gestione delle intestazioni

Le intestazioni dei vari componenti del pannello possono essere modificate tramite le corrispondenti proprietà. In particolare:

Pannelli

Le proprietà caption e icon del pannello permettono di specificare un titolo e un’icona che compariranno nella toolbar superiore.

Pagine

Le proprietà caption e image delle pagine di pannello permettono di specificare un titolo e un’icona che compariranno nella zona di selezione delle pagine.

Gruppi

Le proprietà caption e image dei gruppi di campi permettono di specificare un titolo e un’icona che compariranno nella zona di selezione delle pagine. 

Per quanto riguarda il layout di dettaglio, la proprietà formHeaderPosition permette di scegliere dove far apparire il titolo del gruppo; mentre la proprietà formHeaderHeight permette di specificare l’altezza del titolo in pixel.

Campi

Le proprietà ListHeader e FormHeader permettono di specificare il titolo dei campi sia in formato lista che in dettaglio. È inoltre possibile scegliere se visualizzare o meno l’intestazione in lista o in dettaglio tramite i flag ShowListHeader e ShowFormHeader. 

Per quanto riguarda il layout di dettaglio, il flag formHeaderAbove permette di scegliere se far apparire il titolo del campo sopra o a sinistra, mentre la proprietà formHeaderSize permette di specificare l’altezza del titolo in pixel.

Righe raggrupate

Le righe di un pannello visualizzato nel formato lista possono essere raggruppate in base al contenuto delle sue colonne.
Per attivare i raggruppamenti è necessario impostare a true il flag canGroup del pannello. Attivando questo flag, nella toolbar del pannello viene reso disponibile il pulsante che permette di attivare il raggruppamento delle righe.

A questo punto l’utente può cliccare sull’intestazione di una o più colonne per selezionare la modalità di raggruppamento che desidera. 

È possibile raggruppare ordinando in modalità crescente o decrescente oppure rimuovere un raggruppamento nel caso sia attivo.

Nell’immagine seguente sono evidenziati il pulsante della toolbar utilizzato per disattivare il raggruppamento delle righe e il menu popup che mostra le opzioni di raggruppamento.

Non è possibile raggruppare per la chiave primaria e nemmeno per i campi chiave che mostrano la decodifica di una tabella correlata mediante una combo. Per attivare il raggruppamento in un campo di questo tipo occorre aggiungere un campo unbound derivato dalla tabella correlata.

Per mostrare le righe raggruppate già all’apertura del pannello, è sufficiente specificare la proprietà groupBy per la datamap associata al pannello ed impostare a true il flag showGroup del pannello. Si ricorda che la funzione di raggruppamento non è compatibile con la funzione Data Paging.

I raggruppamenti permettono anche di visualizzare il valore aggregato di uno o più campi. Le nuove proprietà aggregationFunction e aggregationLabel dei campi di pannello permettono di impostare la funzione di aggregazione e l’etichetta da mostrare prima del valore aggregato.

Le funzioni di aggregazione possibili sono le seguenti:

• summary – calcola la somma dei valori della colonna.
• minimum – recupera il valore minimo della colonna.
• maximum – recupera il valore massimo della colonna.
• average – calcola la media dei valori della colonna.
• median – calcola la mediana tra il valore massimo e minimo della colonna.
• range – calcola la differenza tra il valore massimo e il valore minimo della colonna.
• variance – calcola la dispersione dei dati elevata al quadrato rispetto alla media.
• standardDeviation –  calcola la dispersione dei dati espressa nelle stesse unità dei dati originali.

Proprietà del pannello

Vediamo ora quali ulteriori proprietà sono disponibili nell’elemento pannello. Alcune di queste possono essere impostate solo a design time oppure nel momento in cui l’elemento pannello viene creato. Questo solitamente avviene nell’evento onLoad della videata che lo contiene.

Status

Stato del pannello. Permette di scegliere se il pannello deve effettuare immediatamente la query di ricerca dati appena viene aperto oppure no. Il valore di default è data, che significa che il pannello esegue la query; è possibile scegliere qbe per aprire il pannello nella modalità di ricerca dati. 

Si noti che modificando questa proprietà, anche la corrispondente proprietà autoload della datamap principale viene allineata: se lo stato è data, autoload sarà true, altrimenti false.

SearchMode

Seleziona una delle tre interfacce di ricerca dati del pannello. Il valore predefinito row consiste nell’aggiungere una riga in più in cima alla griglia, dove l’utente può inserire i propri criteri di ricerca. I criteri potranno essere aggiunti direttamente nella cella oppure tramite un popup che guida l’utente nella creazione di criteri complessi.

Il valore header è simile a row, ma non viene inserita la riga aggiuntiva. Quindi l’utente può attivare solo il popup per aggiungere i criteri di ricerca, e questo avviene cliccando sull’intestazione delle colonne della lista. È una modalità simile alle corrispondenti interfacce dei fogli di calcolo, ma meno immediata se il numero di ricerche da fare è elevato.

Infine il valore toolbar utilizza una versione alternativa in cui i criteri di ricerca possono essere inseriti sia in lista che in dettaglio (solitamente in dettaglio) scrivendoli direttamente nei campi in cui poi appariranno i dati. È una modalità meno immediata, ma permette di utilizzare tutti i campi del pannello come filtro di ricerca, anche quelli presenti in dettaglio. Selezionando questo valore a design time, la proprietà status viene impostata a qbe. 

Header Height

Rappresenta l’altezza della riga di intestazione della griglia, espressa in pixel.

Active page

Rappresenta la pagina dati attiva del pannello, numerata a partire da zero. Vale solo se il pannello contiene un elemento di tipo IdfPanelPage.

Fixed Columns

Rappresenta il numero di colonne fissate della griglia. Se è presente la scrollbar orizzontale e questo numero è maggiore di zero, allora le corrispondenti colonne verranno mantenute fissate a sinistra quando viene effettuato lo scrolling orizzontale della griglia.

Has List

Se questo flag è attivo, allora il pannello presenta il layout griglia, altrimenti no.

Has Form

Se questo flag è attivo, allora il pannello presenta il layout dettaglio, altrimenti no.

Layout

Rappresenta il layout attuale del pannello (lista o dettaglio).

AutomaticLayout

Quando questo flag è impostato a true, il pannello gestisce automaticamente la transizione tra lista e dettaglio ed in particolare:

1. Se viene trovata una sola riga, il pannello va automaticamente in dettaglio, altrimenti rimane in lista.
2. Se viene cliccato il pulsante di inserimento, il pannello passa automaticamente in dettaglio e viene sbloccato.
3. Se searchMode = toolbar, la ricerca avviene sempre in dettaglio.
4. Facendo doppio clic su una riga in lista, il pannello passa automaticamente in dettaglio. Il pulsante “lista/dettaglio” della toolbar non appare in nessun layout. Quando il pannello è in modalità dettaglio, appare un pulsante “indietro” nella toolbar.

CanSearch, CanUpdate, CanInsert, CanDelete, CanSort

Attivano o disattivano le corrispondenti funzioni del pannello.

Enable new insert mode

Attivando questo flag, quando si inserisce un nuovo record, la riga entra subito in stato modificato e i valori di default vengono immediatamente esplicitati.

Activate on right click

Se impostato, sarà possibile cliccare sugli attivatori dei campi anche con il tasto destro del mouse. 

ShowRowSelector

Mostra o nasconde la colonna laterale per la selezione delle righe.

CanReorderColumn

Attiva la funzionalità di riordino colonne a runtime.

CanResizeColumn

Attiva la funzionalità di ridimensionamento colonne a runtime.

Lockable

Attiva il pulsante per modificare la proprietà locked del pannello.

Locked

Rappresenta la modalità di editing attuale del pannello. Se vale true, allora è possibile modificare i dati.

RowHeightResize

Se attivo, l’altezza delle righe della griglia dipende dal loro contenuto e non dalle proprietà delle colonne. 

ShowMultipleSelection

Se attivo, la colonna iniziale del pannello permette la selezione multipla delle righe. 

EnableMultipleSelection

Se attivo, i comandi per mostrare e gestire la selezione multipla saranno attivi per l’utente.

TooltipOnEachRow

Se attivo, i tooltip appariranno anche sulle righe della lista e non solo nell’intestazione.

Caption

Rappresenta il titolo del pannello mostrato nella toolbar superiore.

Icon

Rappresenta l’icona del pannello mostrata a sinistra del titolo.

Collapsed

Rappresenta lo stato di collassamento del pannello. Se vale true, apparirà solo la toolbar.

Collapsible

Mostra un pulsante nella toolbar per consentire all’utente di modificare la proprietà Collapsed del pannello.

ShowToolbar

Mostra la barra dei pulsanti che l’utente può usare per comandare il pannello.

ShowStatusbar

Mostra un testo sulla destra del titolo che rappresenta lo stato attuale del pannello.

SmallIcons

Utilizza un set di icone più piccole, riducendo la dimensione della toolbar del pannello.

OnlyContent

Nasconde l’intera barra dei comandi superiore. Viene mostrato solo il contenuto del pannello.

Proprietà dei campi di pannello

Enabled

Indica se il campo è abilitato o meno, cioè se l’utente può modificarne il contenuto.

ControlType

Permette di specificare se il campo deve utilizzare un particolare tipo di controllo visuale per la visualizzazione e la modifica dei dati. I possibili valori sono:

• (vuoto): il tipo di controllo viene scelto automaticamente dal pannello. È la scelta consigliata.
• edit: verrà sempre utilizzata una edit box. 
• combo: verrà utilizzata una combo box di tipo autocomplete. 
• check: verrà utilizzato un check box, utile per campi di tipo boolean.
• radio: verrà utilizzata una serie di option button, utile per campi che hanno una lista di valori.
• button: verrà utilizzato un pulsante.
• htmlEditor: verrà utilizzato un elemento di tipo htmlEditor.
• blob: il contenuto del campo verrà mostrato come documento. Se il campo è abilitato, sarà possibile caricare un nuovo documento.

Oltre a questi tipi di controlli è possibile aggiungere e collegare al valore del campo qualunque elemento visuale disponibile. Per maggiori informazioni vedi il paragrafo: Utilizzo di elementi personalizzati nei pannelli.

Placeholder

È un testo descrittivo mostrato quando un campo è vuoto.

Mask

Permette di impostare la maschera di formattazione ed editing del campo. Per le regole di compilazione di questa proprietà fare riferimento alla documentazione della proprietà mask dei campi di tipo input.

Badge

Permette di visualizzare un’informazione in formato badge, sul lato destro del campo.

Tooltip

Permette di specificare il tooltip del campo, visualizzato quando il cursore si ferma sull’intestazione.

EnabledInQbe

Se attivo, il campo sarà disponibile come filtro per ricercare i dati.

ValueList

Lista valori associata al campo. Oltre ad una lista valori fissata a design time è possibile definire una query di lookup per recuperare dinamicamente la lista valori per la singola cella.

ActivableDisabled

Permette di specificare se il campo può essere attivato anche quando è disabilitato (read only), oppure solo quando è in modalità di editing.

ActivatorWidth

Permette di specificare la larghezza dell’icona di attivazione del campo. Da usare solo se l’impostazione di default non dà risultati grafici soddisfacenti.

ActivatorImage

Immagine o icona da usare come pulsante di attivazione del campo. 

Visible

Visualizza o nasconde la colonna e il campo, sia in lista che nel dettaglio.

ShowInList

Se attivato, include il campo nel layout lista, inserendo la relativa colonna nella griglia.

ListHeader

Titolo della colonna nella lista.

ListWidth

Larghezza della colonna nella lista. Può essere espressa in pixel, ad esempio 100, oppure in percentuale, ad esempio 20%.

ListResizeWidth

Modalità di gestione della larghezza in lista. I possibili valori sono:

• grow: se c’è spazio, la colonna verrà allargata per utilizzarlo.
• stretch: la colonna può essere allargata oppure ristretta per tentare di eliminare la scrollbar orizzontale.
• none: la colonna mantiene sempre la dimensione data.

ListHeight

Altezza delle celle della colonna nella lista espressa in pixel. Le righe della lista saranno alte come la massima ListHeight delle colonne. Se però è attivo il flag RowResizeHeight del pannello, allora è il contenuto delle celle che viene usato per determinare l’altezza e ogni riga può avere altezza diversa.

ShowListHeader

Indica se l’intestazione della colonna deve essere mostrata o nascosta.

ListMultiRows

Indica se il contenuto delle celle di questa colonna può andare su più righe o meno. Vale per i campi di tipo testuale.

CanHideInList

Indica se l’utente può nascondere questa colonna come parte del sistema di riconfigurazione a runtime dei pannelli.

HiddenInList

Indica se questa colonna è stata nascosta dall’utente tramite il sistema di riconfigurazione a runtime dei pannelli.

CanSort

Indica se questa colonna è ordinabile dall’utente cliccando sull’intestazione. Attenzione: le colonne ID decodificate tramite query di lookup per default non sono ordinabili perché l’ordinamento avverrebbe per ID e non per decodifica.

ShowInForm

Se attivato, include il campo nel layout di dettaglio.

FormHeader

Titolo del campo nel layout di dettaglio.

FormLeft, FormTop, FormRight, FormBottom

Margini del campo, espressi in pixel o in percentuale, riferiti alla riga del dettaglio in cui esso è contenuto e agli altri campi presenti nella stessa riga.

FormWidth, FormHeight

Dimensioni del campo, espressi in pixel o in percentuale. Comprendono sia il campo in sé che la dimensione dell’intestazione.

FormResizeWidth, FormResizeHeight

Modalità di gestione delle dimensioni in dettaglio. I possibili valori sono i medesimi della proprietà ListResizeWidth precedente.

FormHeaderSize

Dimensione dell’intestazione espressa in pixel.

ShowFormHeader

Indica se l’intestazione del campo deve essere mostrata o nascosta nel layout di dettaglio.

FormHeaderAbove

Indica se l’intestazione del campo deve essere mostrata sopra o di lato.

FormMultiRows

Indica se il contenuto delle celle di questo campo può andare su più righe o meno. Vale per i campi di tipo testuale.

Alignment

Indica il tipo di allineamento del valore nel campo. Si consiglia di lasciare il valore automatico. Nota: se si desidera impostare allineamenti diversi per lista e dettaglio è possibile impostare il valore unset, poi usare l’editor degli stili di lista e di dettaglio.

SuperActive

Se questo flag viene attivato, ogni volta che l’utente clicca un pulsante nel campo o comunque effettua una modifica del contenuto, il valore viene comunicato al server. Solitamente il cambio di valore viene comunicato al momento dell’uscita dal campo.

Multiupload

Se questo flag viene attivato, il campo ammette il caricamento di file.

MaxUploadSize

Dimensione massima dei file che è possibile caricare. Il valore di default è 10 MB.

MaxUploadFiles

Numero massimo di file che è possibile caricare; default 1.

UploadExtensions

Lista delle estensioni dei file che è possibile caricare, separate da virgola.

MaxAutoShowSize

Dimensione massima del contenuto del campo che viene automaticamente mostrata nel dettaglio e nella lista. Default 50 KB. Se il contenuto del campo è più grande, verrà mostrato un link che aprirà il contenuto in una nuova pagina.

Proprietà dei gruppi

Caption

Titolo del gruppo di campi.

Collapsed

Rappresenta lo stato di collassamento del gruppo di campi in dettaglio. Se vale true, apparirà solo la barra del titolo. Non ha effetto sul layout lista.

Collapsible

Se attivo, il gruppo potrà essere collassato o espanso cliccando sulla barra del titolo del gruppo stesso.

Visible

Se questo flag viene disattivato, tutti i campi del gruppo sono nascosti. Se invece è attivato, essi saranno visibili in funzione delle regole del singolo campo.

Enabled

Se questo flag viene disattivato, tutti i campi del gruppo sono disabilitati. Se invece è attivato, essi saranno abilitati in funzione delle regole del singolo campo.

Tooltip

Messaggio descrittivo che appare quando il mouse viene posizionato sulla barra del titolo del gruppo.

ListHeaderPosition

Posizione del titolo del gruppo nel layout lista. I possibili valori sono:

• inner per indicare che il titolo del gruppo deve apparire nell’intestazione dei campi che lo compongono, 
• none se il titolo non deve apparire.

FormLeft, FormTop, FormRight, FormBottom

Margini del gruppo, espressi in pixel o in percentuale, riferiti alla riga del dettaglio in cui esso è contenuto e agli altri campi presenti nella stessa riga.

FormHeaderPosition

Posizione del titolo del gruppo nel layout di dettaglio. I possibili valori sono:

• inner per indicare che il titolo del gruppo deve apparire all’interno del riquadro del gruppo subito sotto il lato superiore, 
• onBorder, per indicare che il titolo del gruppo deve apparire sovrapposto al lato superiore del riquadro del gruppo,
• outer: per indicare che il titolo del gruppo deve apparire sopra al lato superiore del riquadro del gruppo,
• none se il titolo non deve apparire.

FormHeaderHeight

Altezza del titolo del gruppo nel layout di dettaglio espressa in pixel.

Proprietà delle pagine del pannello

Caption

Titolo della pagina.

Image

Icona che appare vicino al titolo della pagina.

Badge

Testo visualizzato come badge sul lato destro del titolo della pagina.

Tooltip

Messaggio descrittivo che appare quando il mouse viene posizionato sul titolo della pagina.

Visible

Stato di visibilità della pagina e dei suoi campi.

Enabled

Se questo flag viene disattivato, tutti i campi della pagina saranno disabilitati. Se invece è attivato, essi saranno abilitati in funzione delle regole del singolo campo.

Personalizzazione grafica del pannello

Sono previsti due livelli per la configurazione grafica dei pannelli. Il primo riguarda un singolo pannello e i suoi oggetti interni, il secondo riguarda tutti i pannelli dell’applicazione.

Personalizzazione del singolo pannello

Per modificare la visualizzazione grafica di un singolo pannello, è possibile utilizzare gli stessi strumenti di ogni altro elemento visuale, cioè la definizione di stili in linea e l’applicazione di classi CSS utilizzando la barra degli stili.

Ogni elemento del pannello definisce più stili, in funzione dei suoi componenti interni a cui è possibile applicarli. In particolare:

• l’elemento idfPanel definisce headerStyle per lo stile della barra del titolo e ContentStyle per il contenuto del pannello vero e proprio.
• l’elemento idfField definisce listHeaderStyle e formHeaderStyle per gli stili dell’intestazione nei due layout, listStyle per lo stile della colonna nella liste e formStyle per lo stile del campo in dettaglio.
• l’elemento idfGroup definisce listHeaderStyle e formHeaderStyle per gli stili dell’intestazione del gruppo nei due layout e formStyle per lo stile dello sfondo del gruppo in dettaglio.
• l’elemento idfPage definisce solo lo stile di default, che sarà applicato alla barra del titolo della pagina.

Nell’immagine seguente vediamo che è stata cambiata la dimensione del font per l’intestazione del pannello usando la barra degli stili e selezionando HeaderStyle.

Si ricorda che oltre all’applicazione di stili in linea è possibile associare agli elementi classi CSS definite nei propri fogli di stile.

Personalizzazione di tutti i pannelli dell’applicazione

La modifica dello stile grafico di tutti i pannelli dell’applicazione avviene modificando il foglio di stile base dei pannelli contenuto nella risorsa panel CSS, che si trova nella libreria IDFWidgets, classe IdfPanel. Se nella sezione librerie del proprio albero del progetto non appare la libreria IDFWidgets, occorre cliccare il pulsante Mostra/Nascondi librerie importate posizionato sulla sinistra del pulsante Aggiungi nella barra del titolo dell’albero degli oggetti.

Il CSS di base dei pannelli deve essere personalizzato aggiungendo le variazioni al proprio foglio di stile, senza modificare l’originale.

Il CSS è diviso in due zone. Nella prima sono contenute le variabili che definiscono i colori degli elementi del pannello. Modificando tali colori si otterrà immediatamente l’allineamento grafico al proprio set di colori.

Se si desidera modificare altri aspetti della grafica dei pannelli oltre ai colori è possibile modificare l’intero CSS di base. Si consiglia di utilizzare gli strumenti di ispezione del browser per vedere quali classi sono utilizzate nelle varie parti del pannello.

Personalizzazione delle stringhe utilizzate nel pannello

Tutte le stringhe che compaiono all’interno di un pannello sono definite nella classe Client.IdfResources. Le lingue definite nella libreria IdfWidgets sono italiano e inglese. È possibile modificare il testo di una o più stringhe delle lingue di default oppure gestire nuove lingue.

Per ogni lingua da gestire deve essere definito un oggetto Client.IdfResources.- msg_[langCode], dove [langCode] è il codice di due lettere che identifica la lingua. Tale oggetto contiene tutte le stringhe tradotte nella lingua indicata dal nome dell’oggetto. 

Per vedere come costruire questo oggetto occorre fare riferimento alla risorsa panelStringsTemplate contenuta nella classe IdfPanel della libreria IDFWidgets. Per definire una nuova lingua è sufficiente copiare il testo della risorsa in un proprio metodo da chiamare nell’evento onStart dell’applicazione.

Utilizzo di elementi personalizzati nei pannelli

Una delle caratteristiche più interessanti dei pannelli è la possibilità di utilizzare elementi visuali di ogni tipo all’interno dei campi del pannello stesso. 

Il caso d’uso più comune è relativo alla visualizzazione del dato contenuto in una colonna o in un campo tramite un elemento diverso da quelli standard. Se, ad esempio, una proprietà di un documento contiene l’indirizzo di un’immagine, si potrebbe visualizzare questo dato in un elemento immagine piuttosto che in un controllo di tipo testo.

Nell’immagine seguente vediamo un esempio: nel campo di pannello wiki_stemma è stato aggiunto un elemento image, poi nel pannello delle proprietà questo elemento è stato collegato alla sorgente dati wiki_stemma, in modo che la proprietà src dell’immagine venga impostata al valore della proprietà corrispondente del documento.

Un secondo caso d’uso per gli elementi personalizzati è la visualizzazione di dati aggiuntivi del documento utilizzando nuovi campi visibili solo nel layout di dettaglio e non collegati alle proprietà della datamap. Vediamo di un esempio di questo caso in cui viene usata una mappa per visualizzare la posizione del comune selezionato dalla griglia.

Si noti nell’immagine che il campo mapfld ha il flag ShowInList disabilitato, quindi la mappa compare solamente nel layout di dettaglio.

Siccome il campo mapFld non è collegato alle proprietà della datamap principale del pannello, il suo contenuto non cambia al variare dei dati presenti nel layout di dettaglio. È quindi necessario implementare l’evento del pannello onRowChanged per allineare le proprietà della mappa. Il codice dell’evento potrebbe essere il seguente:

$idfPanel.onRowChanged = function(event)
{
  $gmap.center = {lat : event.newRow.lat, lng : event.newRow.lng};
};

Un terzo caso d’uso per gli elementi personalizzati è l’inserimento di controlli particolari per operare sulla riga attiva della griglia. In questo caso è possibile aggiungere un nuovo idfField al pannello, non collegato alle proprietà della datamap principale. All’interno di questo campo è poi possibile aggiungere pulsanti o altri controlli come mostrato nell’immagine seguente:

Nell’evento onClick dei pulsanti è possibile fare riferimento alla riga del pannello usando la proprietà row della datamap principale. Il pulsante di cancellazione, ad esempio, può essere gestito tramite il seguente codice:

$btnDelete.onClick = function(event)
{
  $mainDM.row.deleted = true;
};