Il componente boxlist (o box) permette la visualizzazione dei dati in una forma diversa da quella classica in tabella. Vediamo come utilizzarlo.

Prendendo come esempio la gestione dei task, questo e’ un esempio di come i dati sarebbero visualizzati utilizzando il componente matrice…

Questo e’ invece il risultato quando si utilizza il componente BOX.

Utilizzo e configurazioni

Come per qualsiasi componente, per poter inserire un BOX in una scheda bisogna definire la sua G.SUB nello script di scheda: in questo caso, si trattera’ di una ::G.SUB.BOX.
Per il setup vale la stessa cosa, ovvero bisognera’ utilizzare la dicitura ::G.SET.BOX.

Esempio di script:

::I.SCH Nam(LAY_B)
::G.SEZ Pos(1)
  ::G.SUB.BOX Tit="Box d'esempio"
  ::G.SET.BOX Layout="WETEST_0B" Cols="3"
  ::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_BOX) 2(;;BOX_001)
::I.SCH.END

Vediamo adesso nel dettagli alcuni degli attributi di setup da utilizzare per configurare il componente:

Layout

Questo attributo permette di definire il layout che dovra’ utilizzare il box. Il layout e’ uno script, da inserire nella SCP_LAY, che viene utilizzato per dire al box come disporre i campi all’interno dell’oggetto. Se questo attributo non viene specificato, verra’ utlizzato un layout di default.

LayoutInline

Questo attributo permette di scrivere un layout direttamente nello script di scheda, invece di passare per lo script definito nel punto precedente.

Cols

Permette di specificare su quante colonne si disporranno i box (Default = 1)

PageSize

Permette di disporre i record del box su piu’ pagine.

Layout

Vediamo adesso nel dettaglio come costruire un layout. Come scritto in precedenza, questo script viene utilizzato dal componente box per la disposizione dei campi.
Per esempio, vediamo come e’ fatto lo script del layout che permette di otterene il box dei task visto in precedenza:

::Sez Pos="1" Dim="80%"
  ::Sez Pos="1A" Dim="10%"
     ::Fld Nam="X1TIPR" Cmp="Img"
  ::Sez Pos="1B" Dim="60%"
     ::Fld Nam="X1DESC"
  ::Sez Pos="1C" Dim="20%"
     ::Fld Nam="X1USAS" Cmp="Img"
  ::Sez Pos="1D"
    ::Sez Pos="1D1"
      ::Fld Nam="X1FDLT" Txt="Evadi" Dtt="Tooltip"
    ::Sez Pos="1D2"
      ::Fld Nam="X1FPIC" Tit="Prendi in carico"
    ::Sez Pos="1D3" Sty="c"
      ::Fld Nam="X1PRIO"
 ::Sez Pos="2"
  ::Sez Pos="2A" Dim="65%"
    ::Fld Nam="X1DTSC"
  ::Sez Pos="2B"
    ::Fld Nam="X1PERC" Cmp="Pgb"

Questo layout, unito all’xml che contiene i dati (esempio):

<Griglia>
  <Colonna Cod="X1FDLT" Txt="" Lun="99" IO="O" Ogg="J4BTN"/>
  <Colonna Cod="X1NREC" Txt="Numero record" Lun="10" IO="O"/>
  <Colonna Cod="X1TIPR" Txt="Progetto" Lun="3" IO="O" Ogg="V4X1TASK.SCR"/>
  <Colonna Cod="X1CDCO" Txt="Commessa" Lun="15" IO="O" Ogg="CM"/>
  <Colonna Cod="X1USAS" Txt="Utente" Lun="10" IO="O" Ogg="CNCOL"/>
  <Colonna Cod="X1STAT" Txt="Stato" Lun="1" IO="O" Ogg="V4X1TASK.STA"/>
  <Colonna Cod="X1PRIO" Txt="Priorità" Lun="2" IO="O" Ogg="V4X1TASK.PRI"/>
  <Colonna Cod="X1DTAS" Txt="Data assegnazione" Lun="10" IO="O" Ogg="D8*YYMD"/>
  <Colonna Cod="X1DESC" Txt="Descrizione" Lun="512" IO="O"/>
  <Colonna Cod="X1USIN" Txt="Utente inserimento" Lun="10" IO="O" Ogg="TAB£U"/>
  <Colonna Cod="X1DTIN" Txt="Data inserimento" Lun="10" IO="O" Ogg="D8*YYMD"/>
  <Colonna Cod="X1IMAG" Txt="Immagine" Lun="10" IO="O" Ogg="J4IMG"/>
  <Colonna Cod="X1URL" Txt="Link" Lun="1024" IO="O" Ogg="J1URL"/>
  <Colonna Cod="X1FPIC" Txt="Prendi in carico" Lun="99" IO="O" Ogg="J4BTN"/>
  <Colonna Cod="SCACOL" Txt="Colore data scadenza" Lun="99" IO="G"/>
  <Colonna Cod="X1DTSC" Txt="Data scadenza" Lun="10" IO="O" Ogg="D8*YYMD"/>
  <Colonna Cod="BOXCOL" Txt="Colore box" Lun="99" IO="O"/>
  <Colonna Cod="X1PERC" Txt="% Completamento" Lun="3;0" IO="O" Ogg="NR"/>
</Griglia>
<Righe>
  <Riga Fld="VO;COD_VER;000004;Evadi;F(FBK;X1TASK01;TSK.DLT) 1(;;[X1NREC]) NOTIFY(LSTMYTSK)|0000001507|EXT|SMEDC|CASFRA|P|C|20170125|Blog: i box|SANCOS|20170125|CN;COL;CASFRA||OG;OG;OG;Prendi in carico;|50600|20170210||50" />
[...]
</Righe>

E questo e’ il risultato, nel quale sono messe in risalto le varie sezioni:

Sezioni

Il tag Sez serve per specificare la posizione, la dimensione e lo stile delle varie sezioni. In particolare:

  • Pos: specifica come disporre la sezione, Un valore numerico rappresenta una riga, mentre un valore alfabatico rappresenta una nuova colonna.
  • Dim: dimensione della sezione
  • Sty: stile della sezione
Campi

Il tag Fld viene invece utilizzato per specificare quali campi verranno visualizzati in ciascuna sezione.

  • Nam: nome del field da visualizzare.
  • Cmp: componente grafico da utilizzare per la visualizzazione del campo.
  • Ori: se uguale a “D”, identifica un campo derivato
  • Fun: utilizzabile solo per i field derivati, puo’ essere valorizzato con i seguenti valori:
    • FIX: testo fisso
    • HEAD: testo della colonna
  • Par: utilizzabile solo con campi derivati con FUN=”FIX”, permette di specificare il testo fisso da utilizzare
  • Ogg: permette di settare tipo e parametro del testo fisso descritto nel punto precedente
Esempio di box con testi fissi

Script del layout:

::Sez Pos="A" Dim="20%"
::Sez Pos="B"
::Sez Pos="B1" Dim="20%"
::Sez Pos="B1A" Dim="80%" Sty="A11"
  ::Fld Ori="D" Fun="FIX" Par="Cst(Utente: Franco Parodi)"
::Sez Pos="B1B" Sty="A11"
::Sez Pos="B2" Sty="A11"

E questo e’ il risultato che si ottiene.

Come si puo’ notare, in ciascuno dei box viene scritto il valore impostato come testo fisso nel layout:

Esempio di box con intestazione colonna

Script del layout:

::Sez Pos="A" Dim="20%"
::Sez Pos="B"
::Sez Pos="B1" Dim="20%"
::Sez Pos="B1A" Dim="80%" Sty="A11"
  ::Fld Nam="B" Ori="D" Fun="HEAD"
::Sez Pos="B1B" Sty="A11"
::Sez Pos="B2" Sty="A11"

Risultato ottenuto:

Esempio di layout inline con stili personalizzati per le sezioni

Come scritto in precedenza, invece di utilizzare uno script di layout si puo’ scrivere un layout direttamente nell’attributo LayoutInline del setup del componente.
Esempio di script:

::I.SCH Nam(LAYEXT)
::G.STY Name="LAY01" FontColor="R051G102B255" BackColor="R255G255B000"
::G.STY Name="LAY02" FontColor="R051G102B255" FontItalic="Yes" FontULine="Yes" FontBold="Yes"
::G.SEZ Pos(1)
  ::G.SUB.LAB Tit="*NONE"
  ::G.SET.LAB
  ::D.OGG D(Layout definito esplicitamente)
::G.SEZ Pos(2)
  ::G.SUB.BOX Tit="*NONE"
  ::G.SET.BOX LayoutInline="A(DIM(20%) STY(LAY02)) B1(DIM(20%) STY(LAY01)) B1A(DIM(80%) STY(A11) CMP(Img)) B1B(STY(A11)) B2(FLD(A)) C(FLD(B))" Columns="C|B|D"
  ::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_BOX) 2(;;BOX_001)
::I.SCH.END

Come si puo’ notare, nello script di scheda sono stati definiti due stili (LAY01 e LAY02), che poi vengono utilizzato dal layout inline per personalizzare le varie sezioni del box. Il risultato che si ottiene e’ il seguente:

 

 

Grazie di aver letto questo articolo.

Facci sapere di averlo letto, ed esprimi un giudizio QUI