Con questo articolo ci divertiremo ad aggiungere un semplice dinamismo ad una scheda completamente statica per capire i concetti fondamentali su cui si basa questa funzionalità.

Un dinamismo è un evento scatenato da un’azione dell’utente. A fronte di questa azione, vengono create e spostate delle variabili da una sezione di origine (quella che ha raccolto l’evento) a una di destinazione.

 

Partiamo quindi da uno script di scheda che renderizza inizialmente una struttura senza alcuna animazione: un albero di collaboratori sulla sinistra e i dati di dettaglio di un collaboratore sulla destra. Il collaboratore scelto sulla destra è “cablato” nello script, ed è il primo collaboratore della lista dell’albero (quello con codice SANCOS).   

::G.SEZ Pos(A) Dim(30%)
 ::G.SUB.TRE Tit="Collaboratori"
 ::G.SET.TRE NodeText="Both"
  ::D.OGG T(CN) P(COL) K(SANCOS) D(Bresciani Daniele)
  ::D.OGG T(CN) P(COL) K(ZAMCHI) D(Anna De Giorgi)
  ::D.OGG T(CN) P(COL) K(PARFRA) D(Franco Peri)
::G.SEZ Pos(B)
 ::G.SUB.MAT Tit="Dati collaboratore SANCOS"
  ::D.FUN.STD F(EXB;X1PERS_01;PER.DAT) 1(CN;COL;SANCOS) P(Hlp() Com())

Questo è il rendering in Web.UP dello script precedentemente scritto.

Vogliamo ora dinamicizzare questa scheda, facendo in modo che al click su un collaboratore a sinistra, appaia sulla destra il dettaglio dei suoi dati.

Notiamo che nello script l’albero è riempito tramite l’aggiunta di oggetti D.OGG, dove T è il tipo oggetto, P il parametro oggetto, K il codice oggetto.

L’albero potrebbe anche essere creato in maniera completamente dinamica richiamando una FUN e il discorso che stiamo per fare non cambierebbe. E’ sufficiente infatti la presenza del campo codice all’interno dei dati.

Modifichiamo ora lo script per aggiungere la dinamicità. In grassetto sono riportate le aggiunte/modifiche rispetto allo script iniziale, che commenteremo dettagliatamente una ad una nei paragrafi successivi.

::G.SEZ Pos(A) Dim(30%)
 ::G.SUB.TRE Tit="Collaboratori"
 ::G.DIN When="Change" Where="DatiColl"
 ::G.SET.TRE SelFirst="Yes" NodeText="Both"
  ::D.OGG T(CN) P(COL) K(SANCOS) D(Bresciani Daniele)
  ::D.OGG T(CN) P(COL) K(ZAMCHI) D(Anna De Giorgi)
  ::D.OGG T(CN) P(COL) K(PARFRA) D(Franco Peri)
::G.SEZ Pos(B)
 ::G.SUB.MAT Tit="Dati collaboratore [K1]" Id="DatiColl" Load="D"
  ::D.FUN.STD F(EXB;X1PERS_01;PER.DAT) 1(CN;COL;[K1]) P(Hlp() Com())

Per prima cosa, un dinamismo si può attivare tramite il tag G.DIN attribuito all’oggetto di cui è figlio.

L’attributo When definisce l’azione che scatena il dinamismo. Ecco alcune azioni possibili:

  • Change: allo scorrimento
  • Click: al click del mouse
  • DblClick: al doppio click del mouse
  • Expand: all’espansione di un nodo dell’albero
  • Focus: all’acquisizione del fuoco

Tutte le azioni che possono essere scelte sono visualizzabili tramite il Wizard di Looc.UP cliccando il bottone Wizard (o CTRL + w) su una riga ::G.DIN. Si tenga presente che nel Wizard sono elencati tutti i possibili eventi gestibili da tutti i componenti; un dato componente può anche gestirne solo alcuni e non tutti. 

L’attributo Where del tag G.DIN definisce la sottosezione della scheda (ovvero il componente) da aggiornare all’esecuzione dell’azione.

In questo caso quindi la prima modifica da fare allo script iniziale sarà l’aggiunta della riga ::G.DIN When=”Change” Where=”DatiColl”, che fa sì che quando viene eseguita l’azione Change sull’albero (che scatta se si seleziona un nodo albero diverso da quello attualmente selezionato) si scateni il refresh del componente con id=”DatiColl” ovvero la matrice sulla destra.

Perchè si è scelta l’azione “Change” e non l’azione “Click”? L’azione Change in questo caso ha un effetto più completo. Permette anche di gestire una sorta di click simulato iniziale lanciato dall’applicazione, di cui parleremo in seguito.  

Per far funzionare le cose come desideriamo, l’aggiunta di dinamicità attraverso il ::G.DIN deve essere accompagnata da un’aggiunta di dinamicità alla sotto sezione “Dati Coll”. In particolare i dati non possono più dipendere dal codice cablato “SANCOS” ma devono dipendere da un parametro, ovvero dal codice del collaboratore selezionato al click dell’albero. Tale valore si ottiene con la scrittura [K1], che significa sostanzialmente “il valore attuale della variabile K1″, la quale contiene per default il valore del codice (corrispondente al parametro K).

Quindi:

  • ::D.FUN.STD F(EXB;X1PERS_01;PER.DAT) 1(CN;COL;SANCOS) P(Hlp() Com()) dovrà diventare ::D.FUN.STD F(EXB;X1PERS_01;PER.DAT) 1(CN;COL;[K1]) P(Hlp() Com())
  • G.SUB.MAT Tit=”Dati collaboratore SANCOS” dovrà diventare G.SUB.MAT Tit=”Dati collaboratore [K1]

Tramite le due modifiche descritte abbiamo già quasi ottenuto quello che volevamo. Al click su un collaboratore si visualizza correttamente la sua scheda di dettaglio.

Vorremmo però fare qualcosa di più. Al caricamento iniziale della scheda i dati di dettaglio del collaboratore risultano tutti vuoti. Questo perchè [K1] è vuoto, non essendo ancora stato cliccato alcun collaboratore dall’utente dell’applicazione.

Ci piacerebbe far visualizzare automaticamente sulla destra, al caricamento iniziale della pagina, i dati del primo collaboratore. Per far ciò si può far fare all’applicazione una selezione iniziale automatica sul primo oggetto dell’albero. Questa scatenerà l’evento Change (si faccia attenzione: Change e non Click) e quindi il reload della matrice sulla destra con i dati di SANCOS. La selezione iniziale sull’albero del primo elemento si ottiene con l’istruzione SelFirst=”Yes”.

L’ultima modifica da effettuare è l’aggiunta del tag Load=”D”  (loading differito) sulla matrice. Questo evita il caricamento della matrice al rendering della pagina, quando ancora il valore [K1] è vuoto. Quindi la matrice verrà caricata solo al reloading scatenato dall’evento Change. 

Ed è così che l’obiettivo che ci siamo prefissati all’inizio di questo articolo è già stato raggiunto. In fase di caricamento iniziale della pagina vedremo sulla destra i dati di SANCOS. Cliccando successivamente su un altro collaboratore vedremo caricarsi sulla destra i suoi dati di dettaglio.

Concludiamo con due note.

Per rendere più chiaro uno script di scheda possiamo assegnare alle variabili valori più “parlanti”. Ciò si può ottenere tramite le variabili di scheda (Sch.Var). Lo script sottostante è il risultato della modifica dello script precedente, aggiungendo una variabile di scheda chiamata COD_UTENTE che assume il valore K1 dell’albero. COD_UTENTE potrà essere così utilizzata al posto del precedente [K1], rendendo più chiaro il codice.

::G.SEZ Pos(A) Dim(30%)
 ::G.SUB.TRE Tit="Collaboratori"
 ::G.DIN When="Change" Where="DatiColl" Sch.Var="COD_UTENTE([K1])"
 ::G.SET.TRE SelFirst="Yes" NodeText="Both"
  ::D.OGG T(CN) P(COL) K(SANCOS) D(Bresciani Daniele)
  ::D.OGG T(CN) P(COL) K(ZAMCHI) D(Anna De Giorgi)
  ::D.OGG T(CN) P(COL) K(PARFRA) D(Franco Peri)
::G.SEZ Pos(B)
 ::G.SUB.MAT Tit="Dati collaboratore [COD_UTENTE]" Id="DatiColl" Load="D"
  ::D.FUN.STD F(EXB;X1PERS_01;PER.DAT) 1(CN;COL;[COD_UTENTE]) P(Hlp() Com())

Le variabili di scheda hanno anche un altro vantaggio. Dato che più sezioni della stessa scheda possono valorizzare le stesse variabili (ad esempio K1 viene valorizzata sia da una matrice che da un albero, oppure possono essere presenti più matrici o più alberi nella stessa scheda), rinominare le variabili utilizzate dinamicamente creando variabili di scheda evita interferenze tra sezioni.

Una variabile di scheda ha uno scope limitato alla scheda. Ciò significa che è valida solo all’interno della scheda per cui è definita. Oltre alle variabili di scheda esistono anche variabili di sezione, di sottoscheda, di componente, variabili globali, ma tale argomento merita un approfondimento a parte.

Un’altra utile nota per quanto riguarda i dinamismi è che è possibile un loro debug in Web.UP. Per far ciò bisogna:
  • autenticarsi alla sezione debug tramite il tasto funzionale CTRL+ SHIFT+ F8 inserendo l’apposita password
  • cliccare il bottone di switch che appare come primo a sinistra nel menu in alto a destra

In questo modo effettuando le operazioni che scatenano dinamismi apparirà sulla destra dello schermo il debugging degli stessi.