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.

Pannelli affiancati grazie ad un container a layout orizzontale

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.

Ridimensionamento di una colonna in pixel

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.

Layout iniziale in dettaglio

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.

Spostamento del campo Category ID

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.

Spostamento del campo Units On Order in mezzo ad altre righe

Il campo Units On Order è stato riposizionato

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.

Esempio di pannello con righe ad altezza variabile 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.

Esempio di pannello suddiviso in pagine e gruppi

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.

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.

Pannello con searchMode = row

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.

Pannello con searchMode = header

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. 

Pannello con searchMode = toolbar

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.

Segmento di CSS di base dei pannelli che definisce i 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;
};