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: