In questo articolo riprendiamo il discorso sulle schede in Sme.UP. Proveremo in particolare a scrivere uno script di scheda, soffermandoci su tre tipologie fondamentali di componenti: G.SEZ (sezioni), G.SUB (sottosezioni) e G.SET (setup).

Vi ricordate il bell’articolo su Cosa sono le schede in Sme.UP? Ripartiremo dalla sua conclusione, ovvero il paragrafo sugli script di scheda, immaginandoci di voler scrivere il codice per produrre la scheda della figura sottostante.

Uno script di scheda può essere scritto tramite l’Editor di Scheda di Looc.UP.

Il risultato può essere visualizzato dal client desktop Looc.UP o dal client web Web.UP inserendo nella barra dei comandi il comando SCH NOMESCHEDA.

Per la composizione dello script di scheda è presente in Looc.UP un utile Wizard. Scrivendo ad esempio nell’Editor ::G e cliccando il bottone Wizard (o CTRL + w) appare la lista di tutti i componenti grafici inseribili in uno script di scheda.

Scegliendo un componente e premendo invio il Wizard apre la schermata di definizione del componente, in cui è possibile configurare varie opzioni in maniera facilitata. Tale schermata di dettaglio è apribile anche quando si desidera modificare un componente: basta posizionarsi sulla riga dello script in cui si è scritto il componente e cliccare il bottone Wizard (o CTRL + w).

Fatta questa premessa, iniziamo a dividere lo schermo in sezioni, seguendo le linee guida descritte nell’articolo Cosa sono le schede in Sme.UP.

La prima divisione da effettuare sarà verticale, individuando una sez A (che imposteremo larga il 30% dello schermo) e una sez B (che prenderà il resto dello schermo, ovvero il 70%). Non è necessario indicare quest’ultima percentuale in quanto verrà calcolata automaticamente dal sistema in maniera residuale rispetto al 100%. All’interno della sez B sarà poi da effettuare una divisione orizzontale creando una sezione B1 (la imposteremo alta il 40%) e una B2 che prenderà il resto dello schermo (60%). E infine all’interno della sezione B2 inseriremo due sezioni verticali (B2A e B2B) ognuna occupante il 50% dello schermo.

Il componente da utilizzare per la sezione è il G.SEZ, quindi comporremo inizialmente il seguente script.

::G.SEZ Pos(A) Dim(30%)
::G.SEZ Pos(B)
 ::G.SEZ Pos(B1) Dim(40%)
 ::G.SEZ Pos(B2)
  ::G.SEZ Pos(B2A) Dim(50%)
  ::G.SEZ Pos(B2B)

Si noti che questo script, sia in Looc.UP che in Web.UP, renderizzerà una pagina completamente bianca. Questo perchè le sezioni sono dei contenitori; se non contengono oggetti non vengono visualizzate.

Per verificare se si è compiuta correttamente la divisione basta inserire temporaneamente all’interno delle sezioni un componente grafico qualsiasi, ad esempio una label.

::G.SEZ Pos(A) Dim(30%)
 ::G.SUB.LAB Tit="SezA"
::G.SEZ Pos(B)
 ::G.SEZ Pos(B1) Dim(40%)
  ::G.SUB.LAB Tit="SezB1"
 ::G.SEZ Pos(B2)
  ::G.SEZ Pos(B2A) Dim(50%)
   ::G.SUB.LAB Tit="SezB2A"
  ::G.SEZ Pos(B2B)
   ::G.SUB.LAB Tit="SezB2B"

Questo è il rendering dello script precedente in Looc.UP.

Questo è il rendering dello stesso script in Web.UP.

Si noti che in Web.UP la dimensione orizzontale di 40% della sezione B1 non è stata renderizzata. L’occupazione percentuale dello schermo nel web è valida solo in verticale. In orizzontale i contenitori assumeranno la dimensione dei loro contenuti, a meno di definire la dimensione orizzontale della sezione in pixel. Sostituendo nello script precedente ::G.SEZ Pos(B1) Dim(40%) con ::G.SEZ Pos(B1) Dim(400) si otterrà in Web.UP il risultato mostrato nella figura seguente. Se il contenuto di B1 avrà una dimensione maggiore di 400 pixel nella sezione apparirà uno scroller verticale.

Aggiungiamo ora a ciascuna sezione il componente grafico desiderato, sostituendo la label immessa temporaneamente. Albero, matrice e grafico sono componenti grafici di sottosezione, ovvero componenti di tipo G.SUB.

L’albero è definito tramite l’istruzione G.SUB.TRE, la matrice tramite G.SUB.MAT e il grafico tramite G.SUB.CHA. A ciascuno di essi associamo un titolo attraverso il tag “Tit”. Se non si vuole visualizzare un titolo si può utilizzare Tit=”*NONE” .

Questi sono i principi fondamentali

  1. Ogni scheda è un insieme di componenti.
  2. Ogni componente è composto da dati
  3. I dati arrivano a fronte di una richiesta (la fun)
  4. I dati vengono arrivano in una risposta (xml)

I dati utilizzati dai componenti sono configurati sotto ciascuna sottosezione. Nell’esempio sottostante sono tutti presi da FUN dinamiche che caricano dati di prototipazione. Lo si nota dalla chiamata al programma B£SER_46. Ad esempio nel caso dell’albero i dati sono ottenuti dallo script di prototipo WETEST_TRE. Per maggiori dettagli sulla prototipazione si rimanda all’articolo Prototipazione con Sme.UP.

--script di test che renderizza un albero, una matrice e due grafici

::G.SEZ Pos(A) Dim(30%)
 ::G.SUB.TRE Tit="Albero"
  ::D.FUN.STD F(TRE;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_TRE) 2(;;TRE001) INPUT()

::G.SEZ Pos(B)
 ::G.SEZ Pos(B1) Dim(400)
  ::G.SUB.MAT Tit="Matrice"
   ::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_EXB) 2(;;MAT_013) INPUT()
 
 ::G.SEZ Pos(B2)
  ::G.SEZ Pos(B2A) Dim(50%)
   ::G.SUB.CHA Tit="Grafico1"
    ::D.FUN.STD F(EXA;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_EXA) 2(;;EXA_001)

  ::G.SEZ Pos(B2B)
   ::G.SUB.CHA Tit="Grafico2"
    ::D.FUN.STD F(EXA;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_EXA) 2(;;EXA_001)

Il risultato in Looc.UP è il seguente.

Il risultato in Web.UP è il seguente.

Si noti che gli script di scheda sono indentabili (tramite spazi) e commentabili (per aggiungere un commento basta evitare i due punti ad inizio riga). E’ anche possibile aggiungere delle righe vuote per spaziare le istruzioni. Tutto ciò può essere molto utile man mano che lo script si complica, per aumentarne la chiarezza di lettura. Nello script precedente ad esempio abbiamo messo un titolo, spaziato le sezioni e tenuto un’indentazione, in maniera tale che i figli di un’istruzione siano spostati a destra di uno spazio rispetto ai loro padri.

Alcuni componenti grafici possono avere dei setting aggiuntivi. Lo si nota nel setup esteso del Wizard alla sezione G.SETUP. Esiste ad esempio il setup della matrice ::G.SET.MAT. Inserendo nello script ::G.SET.MAT e aprendo il Wizard si possono vedere tutte le opzioni di setting della matrice. Si può ad esempio scegliere di mostrare i filtri (ShowFilter=”Yes”) e non mostrare la command bar (ShowCmdBar=”No”). Settando la matrice in questo modo verrà renderizzata a video direttamente con tali opzioni.

Si può anche aggiungere più di una configurazione, come abbiamo fatto nell’esempio seguente per il grafico, aggiungendo una G.SET.CHA con nome Config1 che mostra il grafico con la legenda e in 2D e una con nome Config2 che mostra il grafico senza legenda e in 3D. Nel rendering della scheda, sia in Web.UP che in Looc.UP, saranno entrambe selezionabili nella sezione Setup del componente.

--script di test che renderizza un albero, una matrice e due grafici

::G.SEZ Pos(A) Dim(30%)
 ::G.SUB.TRE Tit="Albero"
  ::D.FUN.STD F(TRE;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_TRE) 2(;;TRE001) INPUT()

::G.SEZ Pos(B)
 ::G.SEZ Pos(B1) Dim(400)
  ::G.SUB.MAT Tit="Matrice"
  ::G.SET.MAT ShowFilter="Yes" ShowCmdBar="No"
   ::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_EXB) 2(;;MAT_013) INPUT()
   
 ::G.SEZ Pos(B2)
  ::G.SEZ Pos(B2A) Dim(50%)
   ::G.SUB.CHA Tit="Grafico1"
   ::G.SET.CHA Leg="Yes" Asp="2D" Name="Config1"
   ::G.SET.CHA Leg="No" Asp="3D" Name="Config2"
    ::D.FUN.STD F(EXA;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_EXA) 2(;;EXA_001)
 
  ::G.SEZ Pos(B2B)
   ::G.SUB.CHA Tit="Grafico2"
    ::D.FUN.STD F(EXA;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_EXA) 2(;;EXA_001)

Mostriamo qui il rendering in Web.UP della matrice con ShowFilter=”Yes” ShowCmdBar=”No”.

E qui vediamo il rendering in Looc.UP del grafico con le due configurazioni Config1 e Config2.