Indice articolo
Vediamo alcuni nuove funzionalità dell’importantissimo componente Web Box
Classi standard
Il componente box mette a disposizione alcune classi standard (da utilizzare nella definizione G.SUB dello script di scheda) che permettono di modificare la grafica del componente. Vediamo nel dettaglio quali sono.
-UP-BOX-Radius
Questa classe permette di avere i box con i bordi arrotondati. Esempio di script di scheda:
::G.SUB.BOX Tit="Angoli arrotondati" Class="-UP-BOX-Radius"
::G.SET.BOX Layout="WETEST_0A"
::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_BOX) 2(;;BOX_001)
Il risultato sara’ il seguente:
-UP-BOX-BigRadius
Questa classe e’ molto simile alla precedente, in quanto anche questa classe permette di avere i bordi arrotondati. Con questa classe pero’ l’arrotondamento e’ molto piu’ marcato.
::G.SUB.BOX Tit="Angoli arrotondati" Class="-UP-BOX-BigRadius"
::G.SET.BOX Layout="WETEST_0A"
::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_BOX) 2(;;BOX_001)
Il risultato e’ il seguente:
-UP-BOX-noShadow
Questa classe serve per avere box senza bordi e senza ombreggiatura.
::G.SUB.BOX Tit="Angoli arrotondati" Class="-UP-BOX-noShadow"
::G.SET.BOX Layout="WETEST_0A"
::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_BOX) 2(;;BOX_001)
Selezione multipla
Per abilitare la selezione multipla nei box, bisogna utilizzare l’attributo di setup MultiSelect=”Yes”.
Questo e’ un esempio di script di scheda in cui viene usata questa funzionalita’.
::G.SUB.BOX Tit="*NONE" SubNote="Esempio di Box con selezione multipla"
::G.SET.BOX Layout="WETEST_0A" MultiSelect="Yes" DisableSwipe="Yes"
::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_EXB) 2(;;ROW_CN)
Posizionandosi col mouse su un box, comparira’ nell’angolo in basso a destra una checkbox che ne permette la selezione.
Cliccando la checkbox, il box verra’ selezionato. A questo punto, la checkbox sara’ sempre visibile:
Selezionando uno o piu’ box, in basso alla pagina comparira’ un menu’ con le azioni effettuabili sui box selezionati. Al momento, tra le opzioni, troviamo l’aggiungi a lista e l’aggiungi a preferiti, oltre al pulsante per chiudere il menu (funzionalità dipendenti dalla Versione)
Drag & drop
Drag
Per abilitare il drag su un box, bisogna utilizzare l’attributo Drag=”Yes” della G.SUB.BOX
::G.SUB.BOX Tit="*NONE" Drag="Yes"
::G.SET.BOX Layout="WETEST_0AA" PageSize="3" Cols="3"
::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_BOX) 2(;;BOX_021)
Posizionandosi su un singolo box, comparira’ nell’angolo in basso a destra un’icona che ci permette di trascinare il box.
Drop
Aggiungendo un dinamismo ‘Drop’ ad un componente BOX, si abilitera’ la possibilita’ di trasciare elementi sul componente.
::G.SUB.BOX Tit="*NONE"
::G.SET.BOX Layout="WETEST_0AA" PageSize="3" Cols="3"
::G.DIN Where="TARGET" When="Drop"
::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;WETEST_BOX) 2(;;BOX_021)
In questo esempio, si vede il drop di un box su un altro box:
Al dinamismo generato vengono applicate le variabili dei due componenti (quello da cui e’ partito il drag e quello su cui si e’ effettuato il drop) prefixate, rispettivamente, con i prefissi FROM e TO (ad esempio, verranno generate le variabili [FROM.COL01], [FROM.COL02], [TO.COL01], [TO.COL02])
Sezioni layout collassabili
Come per altri componenti, quali l’input panel, nel layout del box si puo’ specificare che una sezione e’ collassabile. Vediamo un esempio di script:
::Sez Pos="1"
::Sez Pos="1A"
::Fld Nam="A"
::Sez Pos="1B"
::Fld Nam="C"
::Sez Pos="2" Txt="Dettagli" Collapsible="Yes"
::Sez Pos="2A"
::Sez Pos="2A1"
::Fld Nam="B"
::Sez Pos="2A2"
::Fld Nam="D"
Il risultato sara’ il seguente:
Come si puo’ notare, nell’angolo in basso a destra e’ presente un’icona per espandere la sezione collassata. Cliccandola, la sezione collassata si espandera’ e questo sara’ il risultato: