Indice articolo

Scripting Vs. Coding

Il presente documento mostra come l’approccio a prototipi possa portare rapidamente a fornire esempi concreti di fattibilità e supporto all’analisi per un progetto, in questo caso un sito web esistente.

Nello specifico, il caso di studio è un progetto web preesistente in cui il cliente vuole avere la percezione il più realistica possibile di come sarà il sito un volta effettuato il porting verso la tecnologia Web.UP.

Web.UP viene alimentato da file XML provenienti dal server, i quali contengono principalmente le seguenti informazioni:

  • componenti grafici (tabelle, bottoni, immagini…)
  • disposizione dei componenti
  • interazione componente-componente ed utente-componente
  • i dati

I file XML sono generati a runtime e solitamente occorre scrivere programmi dedicati a questo scopo, il che influisce in grande misura in termini di tempi di sviluppo.

La prototipazione di Sme.UP svolge un ruolo chiave nello sgravare il consulente dall’onere di creare programmi, in quanto permette, mediante la stesura di scripting, di concentrarsi sulla forma e sul contenuto.

Lo schema seguente esemplifica questo concetto:

 

  • La prototipazione supporta l’analisi (parte sinistra dello schema)
  • Il basso costo stimola un ciclo iterativo di analisi-prototipaziona
  • Il lavoro di codifica è molto più basso (parte destra) e la probabilità di dover tornare all’analisi è scarsa
  • Il time-to-user è massimizzato

Se ad esempio fosse necessario visualizzare una tabella di articoli, il consulente dovrebbe semplicemente limitarsi a scrivere un elenco di articoli in formato testuale all’interno di uno script, senza quindi preoccuparsi di dover scrivere un programma che acceda ad un database e che reperirisca i dati per poi convertirli in formato XML.

Quanto sopra è possibile grazie ad un unico programma in grado di leggere script e generare XML, noto come B£SER_46.

Allo stato dell’arte B£SER_46 è in grado di leggere script (o fogli excel ndr) che contengono dati nelle due forme:

Sme.UP (forma normale) -> l’xml viene generato a partire dallo script

 ::TBL
  ::COL
  ::DAT

Sme.UP (XML cablato) -> l’xml viene tornato così come è stato scritto

 <?xml version="1.0"...   
  <UiSmeup Testo="...   
  <Service Titolo1="...   
  <Griglia>   
    <Colonna ...   
  </Griglia>   
  <Righe>   
    <Riga ...   
  <Riga ...

E’ importante sapere che lo script non necessita la conoscenza di alcun linguaggio di programmazione, nè tantomeno di competenze informatiche.

E’ sufficiente conoscere i rudimenti degli script di scheda di Sme.UP.

Gli script di prototipo sono contenuti nel file SCP_SET di Sme.UP ERP e vengono passati come argomenti (Oggetto 1 ed Oggetto 2) alla funzione (FUN)  che chiama il servizio standard di prototipazione:

F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;<nome_dello_script>) 2(;;<nome_della_sottosezione_script>)

Si rimanda alla documentazione ufficiale per quanto riguarda il protocollo delle funzioni di Sme.UP ERP.

Let’s go

Sebbene questo tutorial enfatizzi la forma, è importante soffermarsi principalmente sulla navigazione e struttura delle pagine (scelta dei componenti, disposizione, interazioni…) e non sconfinare nell’ambito della grafica (colori, stili, fonts…), poichè si rischierebbe di perdere tempo su temi che potrebbero non essere di dominio del consulente o comunque non determinanti ai fini della dimostrabilità del progetto.

E’ bene inoltre non ostentare tecnicismi quali chiamate ricorsive di script, inclusioni, tag di condizione (IF…ELS…)… è preferibile piuttosto raggiungere un equilibrio che permetta una prototipazione efficace, chiara, semplice e lineare ma al tempo stesso non prolissa.

Questa sensibilità nell’adottare metodi agili con cui realizzare prototipi è legata all’esperienza  ed alle competenze del singolo.

A seguire analizzeremo un caso reale, per cui è stato chiesto di prototipare l’attuale sito di annunci (nello speficico necrologi) mediante Web.UP.

Come detto in precedenza è necessaria competenza relativa agli script di scheda di Sme.UP.

Prototipazione mediante scripting

Un breve video relativo all’applicazione web di partenza di cui effettuare la prototipazione in Web.UP:

Si parte da uno script di scheda (SCP_SCH/NECRO01) contenente l’intestazione, per poi arricchirlo in seguito:

::G.SEZ Pos(1) 
 ::G.SUB.LAB Tit="*NONE" 
 ::G.SET.LAB Align="center" FontSize="24" 
 ::D.OGG D(Inserisci Necrologio)

 

che produce la singola pagina (notare l’header personalizzato, frutto dell’intervento a posteriori di un web designer)

 

Si arricchisce ora la pagina di cinque box (BOX) indicativi della pagina in cui ci si trova. Per i dettagli sul componente boxlist si consulti questo articolo.

Si noti l’introduzione degli stili (STY) referenziati nel layout (NECRO01_A) e l’utilizzo del servizio di prototipazione (B£SER_46) che produce XML leggendo i dati dallo script NECRODATA, sottosezione NECRO01_A:

::G.STY Name="A01" Align="center" FontSize="24" FontColor="R255G255B255" 
::G.STY Name="A02" Align="center" FontSize="12" FontColor="R255G255B255" 
 
::G.SEZ Pos(1) 
 ::G.SUB.LAB Tit="*NONE" 
 ::G.SET.LAB Align="center" FontSize="24" 
 ::D.OGG D(Inserisci Necrologio) 
 
::G.SEZ Pos(2) 
 ::G.SUB.BOX Tit="*NONE" 
 ::G.SET.BOX Layout="NECRO01_A" Cols="5" BackgroundColName="BCKCOL" 
 ::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;NECRODATA) 2(;;NECRO01_A)

 

layout del box in SCP_LAY/NECRO01_A:

::Sez Pos="A" Dim="10%" Sty="A01" 
::Sez Pos="B" 
::Sez Pos="B1" Sty="A02" 
::Sez Pos="B2" Sty="A02"

 

dati da script:

::TBL Nam="NECRO01_A"
--definizione delle colonne
::COL Cod="NUMERO" Txt="Numero" Lun="1;0" IO="O" Ogg="NR" 
 ::COL Cod="TESTO1" Txt="Testo 1" Lun="30" IO="O" Ogg="**" 
 ::COL Cod="TESTO2" Txt="Testo 2" Lun="30" IO="O" Ogg="**" 
 ::COL Cod="BCKCOL" Txt="Background color" Lun="30" IO="O" Ogg="**" 
-- definizione delle righe
::DAT Fld="1|Scegli|giornale|blue" 
 ::DAT Fld="2|Scegli|tipologia|" 
 ::DAT Fld="3|Dati|defunto|" 
 ::DAT Fld="4|Scegli|data|" 
 ::DAT Fld="5|Inserisci|testo|"

 

infine il rendering web:

 

Arricchiamo lo script di scheda introducendo ulteriori informazioni mediante il componente LAB (Label) e mediante variabili di comodo (TXTn), che ci serviranno a dare un effetto più dinamico, grazie alla cominicazione di variabili tra componenti, nativa delle schede di Sme.UP:

::S.VAR.VAL Sch.Var="TXT1(&PA.TXT1)" 
::S.VAR.VAL Sch.Var="TXT2(&PA.TXT2)" 
::S.VAR.VAL Sch.Var="TXT3(&PA.TXT3)" 
::S.VAR.VAL Sch.Var="TXT4(&PA.TXT4)" 

...
...

::G.SEZ Pos(3) 
::G.SEZ Pos(3A) 
 ::G.SUB.LAB Id="IDGio" Tit="Giornale" 
 ::G.SET.LAB Align="center" FontSize="14" FontBold="Yes" 
 ::D.OGG D([TXT1]) 
::G.SEZ Pos(3B) 
 ::G.SUB.LAB Id="IDTip" Tit="Tipologia" 
 ::G.SET.LAB Align="center" FontSize="14" FontBold="Yes" 
 ::D.OGG D([TXT2]) 
::G.SEZ Pos(3C) 
 ::G.SUB.LAB Id="IDNam" Tit="Nome defunto/parentela" 
 ::G.SET.LAB Align="center" FontSize="14" FontBold="Yes" 
 ::D.OGG D([TXT3]) 
::G.SEZ Pos(3D) 
 ::G.SUB.LAB Id="IDDat" Tit="Data" 
 ::G.SET.LAB Align="center" FontSize="14" FontBold="Yes" 
 ::D.OGG D([TXT4])

 

si ottiene:

 

Si aggiungono infine i bottoni (in questo caso solo il bottone “AVANTI”, trattandosi della prima pagina) di navigazione (componente BTN). Al click (dinamismo) si passa alla scheda NECRO02:

::G.SEZ Pos(4) 
::G.SUB.BTN Tit="*NONE" 
::G.SET.BTN Horiz="Yes" BackColor="R000G092B230" FontColor="R255G255B255" 
::G.DIN When="Click" Enabled="{'[TXT1]' NE ''}" Exec="F(EXD;*SCO;) 2(MB;SCP_SCH;NECRO02) P(TXT1([TXT1]) TXT2([TXT2]) TXT3([TXT3]) TXT4([TXT4]) )" 
::D.OGG D(Avanti)

Si noti che il click è abilitato solo se la variabile TXT1 è riempita

Enabled="{'[TXT1]' NE ''}"

ossia se l’utente ha cliccato sul BOX di cui parleremo appena sotto: questo ci permette di implementare una logica di controllo, anche qui senza scrivere programmi.

e ancora si procede aggiungendo informazioni mediante i componenti LAB e BOX

... 
 ::G.SUB.LAB Tit="*NONE" 
 ::G.SET.LAB Align="center" FontSize="20" 
 ::D.OGG D(Scegli il giornale su cui pubblicare il tuo necrologio) 
 
...
... 
 ::G.SUB.BOX Tit="ALTO ADIGE-TRENTINO" Flat="Yes" 
 ::G.SET.BOX Layout="NECRO01_B" Cols="3" 
 ::G.DIN When="Click" Where="IDGio" Sch.Var="TXT1([REGIONE] [PROVINCIA])" 
 ::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;NECRODATA) 2(;;NECRO01_B) 
 
...
... 
 ::G.SUB.BOX Tit="GAZZETTA DI MODENA" Flat="Yes" 
 ::G.SET.BOX Layout="NECRO01_C" Cols="3" 
 ::G.DIN When="Click" Where="IDGio" Sch.Var="TXT1([REGIONE] [PROVINCIA])" 
 ::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;NECRODATA) 2(;;NECRO01_C)

Si noti In questo caso i componenti BOX gestiscono anche dei dinamismi (DIN) atti a valorizzare la variabile TXT1 di cui sopra, ed aggiornare una delle sezioni Label di cui abbiamo parlato poco prima:

::G.SUB.LAB Id="IDGio" Tit="Giornale" 
::G.SET.LAB Align="center" FontSize="14" FontBold="Yes" 
::D.OGG D([TXT1])

 

Si procede ora con la seconda pagina, gestita da un nuovo script (NECRO02) analogo a quello precedente, solo con contenuti diversi, forniti dallo script NECRODATA sottosezione NECRO02_B:

::TBL Nam="NECRO02_B" 
 ::COL Cod="TESTO1" Txt="Testo 1" Lun="99" IO="O" Ogg="**" 
 ::COL Cod="TESTO2" Txt="Testo 2" Lun="99" IO="O" Ogg="**" 
 ::DAT Fld="ANNUNCIO FAMIGLIA(Solo parenti di 1° grado)|+ 
 Questo annuncio può essere inserito solo dai componenti della + 
 famiglia del defunto che hanno una parentela di 1° grado." 
 ::DAT Fld="PARTECIPAZIONE(Parenti dal 2° grado o amici)|+ 
 Per comunicare alla famiglia la propria condivisione al dolore. + 
 Dai parenti dal 2° grado in poi, gli amici, i colleghi e conoscenti." 
 ::DAT Fld="ANNIVERSARIO|+ 
 All'anniversario della morte del defunto per ricordare la persona cara." 
 ::DAT Fld="ANNIVERSARIO 2 FOTO|+ 
 All'anniversario della morte del defunto per ricordare la persona cara." 
 ::DAT Fld="RINGRAZIAMENTO-TRIGESIMO|+ 
 A un mese dalla morte (trigesimo) del congiunto, per ricordare la persona cara, + 
 da parte della famiglia"

di fatto è stato aggiunto il bottone INDIETRO e vengono presentati dati di altra natura nei BOX centrali:

 

La terza pagina di navigazione (NECRO03), simile per struttura alle due precendenti,  presenta ora come novità dei campi di input/output, gestiti dal componente Input Panel (INP) di Web.UP.

Nel caso in oggetto vi sono due sezioni gestite da due input panel:

...
 ::G.SUB.INP Tit="*NONE" 
 ::G.SET.INP SubmitButton="No" 
 ::G.DIN Where="IDNam" When="ItemSelected" Sch.Var="TXT3([NOME] - [PARENTELA]) NOME([NOME])" 
 ::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;NECRODATA) 2(;;NECRO03_B) INPUT()

...
...
 ::G.SUB.INP Tit="*NONE" 
 ::G.SET.INP SubmitButton="No" Cols="2" FldPerCol="8" 
 ::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;NECRODATA) 2(;;NECRO03_C) INPUT()

 

e i dati e i campi di input vengono forniti ancora una volta dal B£SER_46 e dallo script NECRODATA, sezioni NECRO03_B e NECRO03_C:

 ::TBL Nam="NECRO03_B" Tit="" 
::COL Cod="NOME" Txt="Cognome e nome" Tip="" Lun="70" IO="B" Ogg="**" 
 ::COL Cod="PARENTELA" Txt="Parentela" Tip="" Lun="15" IO="C" Ogg="V4NECRO.PAR" 
 ::DAT Fld="|" 


::TBL Nam="NECRO03_C" Tit=""
::COL Cod="COGNOME" Txt="Cognome" Tip="" Lun="70" IO="B" Ogg="**" 
 ::COL Cod="NOME" Txt="Nome" Tip="" Lun="70" IO="B" Ogg="**" 
 ::COL Cod="TITOLO" Txt="Titolo legame" Tip="" Lun="70" IO="B" Ogg="**" 
 ::COL Cod="NAZINA" Txt="Nazione nascita" Tip="" Lun="70" IO="E" Ogg="TANAZ" 
 ::COL Cod="COMUNA" Txt="Comune nascita" Tip="" Lun="70" IO="E" Ogg="TAV§PIT" 
 ::COL Cod="LOCANA" Txt="Loc. estera nascita" Tip="" Lun="70" IO="O" Ogg="**" 
 ::COL Cod="NAZIMO" Txt="Nazione morte" Tip="" Lun="70" IO="E" Ogg="TANAZ" 
 ::COL Cod="COMUMO" Txt="Comune morte" Tip="" Lun="70" IO="E" Ogg="TAV§P" 
 ::COL Cod="LOCAMO" Txt="Loc. estera morte" Tip="" Lun="70" IO="O" Ogg="**" 
 ::COL Cod="DATANA" Txt="Data nascita" Tip="" Lun="10" IO="B" Ogg="D8*YYMD" 
 ::COL Cod="DATAMO" Txt="Data morte" Tip="" Lun="10" IO="B" Ogg="D8*YYMD" 
 ::COL Cod="DATAFU" Txt="Data funerale" Tip="" Lun="10" IO="B" Ogg="D8*YYMD" 
 ::COL Cod="COMUFU" Txt="Comune funerale" Tip="" Lun="70" IO="E" Ogg="TAV§PIT" 
 ::COL Cod="COMUTU" Txt="Comune tumulazione" Tip="" Lun="70" IO="E" Ogg="TAV§PIT" 
::COL Cod="NOMECI" Txt="Nome cimitero" Tip="" Lun="70" IO="B" Ogg="**" 
::COL Cod="INDICI" Txt="Indirizzo cimitero" Tip="" Lun="70" IO="B" Ogg="**" 
::DAT Fld="||||||||||||||"

 

l’effetto grafico:

 

Si procede ora con la quarta pagina del sito prototipo, in cui viene mostrato il componente Calendario Annuale (CHA di tipo CAL) che legge dati forniti dallo script NECRODATA, sottosezione NECRO04_B:

...
::G.SUB.CHA Tit="*NONE" 
 ::G.SET.CHA Typ="CAL" 
 ::G.DIN When="Click" Where="IDDat" Sch.Var="TXT4(25-01-2017)" 
 ::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;NECRODATA) 2(;;NECRO04_B) 
...
...
...
::TBL Nam="NECRO04_B" 
 ::COL Cod="DATE" Txt="Data" Tip="Free" Lun="20" IO="O" Ogg="D8*YYMD" Fill="ASSE" 
 ::COL Cod="VALORE" Txt="Value" Tip="Free" Lun="10" IO="O" Ogg="NR" Fill="SERIE" 
 ::DAT Fld="20170301|1000" 
 ::DAT Fld="20170302|2000" 
 ::DAT Fld="20170303|3000" 
 ::DAT Fld="20170304|7000" 
 ::DAT Fld="20170305|5000" 
...
...

 

 

La quinta pagina del sito vede l’introduzione del componente Field (FLD) che permette di renderizzare un singolo campo di input/output, che gestisce dinamismi, senza dover necessariamente utilizzare un Input Panel, pensato invece per aggiornare dati.

Inoltre FLD è in grado i gestire diverse tipologie di rendering in funzione alla necessità (Fup=file upload, Rad=Radio button…) per gestire scelte singole, upload di foto, scelta di immagini, ecc…

...
::G.SUB.FLD Tit="*NONE" 
 ::G.SET.FLD Type="Rad" 
 ::D.OGG T() P() K(a) D(Nessuna fotografia) 
 ::D.OGG T() P() K(b) D(1 colonna, altezza 34 mm, tipo B/N) 
 ::D.OGG T() P() K(c) D(1 colonna, altezza 34 mm, tipo C) 
...
...
 
::D.OGG D(Foto) 
 ::G.SEZ Pos(63B) 
 ::G.SUB.FLD Tit="*NONE" 
 ::G.SET.FLD Type="Fup" 
 ::D.OGG T() P() K() 
...
...

 ::G.SEZ Pos(64) 
 ::G.SEZ Pos(64A) Dim(30%) 
 ::G.SUB.LAB Tit="*NONE" 
 ::G.SET.LAB 
 ::D.OGG D(Simbolo) 
 ::G.SEZ Pos(64B) 
 ::G.SUB.IML Tit="*NONE"
 ::D.OGG T(J4) P(IMG) K(J1;URL;https://cdn3.iconfinder.com/data/icons/abstract-1/512/no_image-512.png) 
 ::D.OGG T(J4) P(IMG) K(J1;URL;http://www.sito.it/necro4/agenzia/simbolo/croce1.jpg) 
 ::D.OGG T(J4) P(IMG) K(J1;URL;http://www.sito.it/necro4/agenzia/simbolo/david.jpg)
...
...

 

Naturalmente nella pagina possono convivere FLD ed input panel, tant’è che la seconda metà della pagina ospita un input panel per gestire meglio campi estesi come le text area:

...
::G.SEZ Pos(65) 
::G.SUB.INP Tit="*NONE" 
::G.SET.INP SubmitButton="No" Layout="NECRO05_B" 
::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;NECRODATA) 2(;;NECRO05_B) INPUT() 
...
...

 

L’effetto ottenuto:

 

L’ultima pagina realizzata presenta quello che dovrebbe essere l’anteprima di stampa dell’annuncio in oggetto.

A fronte della pressione del bottone ANTEPRIMA viene eseguita una funzione che apre una nuova finestra modale che presenta una tabella (matrice) riepilogativa ed un box contenente immagine e testo.

::S.VAR.VAL Sch.Var="NOME(&PA.NOME)" 
 
::G.STY Name="A01" Align="center" FontSize="20" FontColor="R000G000B000" 
::G.STY Name="A02" Align="center" FontSize="20" FontColor="R000G000B000" 
 
::G.SEZ Pos(1) 
 ::G.SUB.LAB Tit="*NONE" 
 ::G.SET.LAB Align="center" FontSize="14" 
 ::D.OGG D(Anteprima del Necrologio per il Defunto: [NOME]) 
 
::G.SEZ Pos(2) 
 ::G.SUB.MAT Tit="*NONE" 
 ::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;NECRODATA) 2(;;NECRO06_A) 
 
//antemprima
 ::G.SEZ Pos(3) 
 ::G.SUB.BOX Tit="*NONE" 
 ::G.SET.BOX Layout="NECRO06_B" BackgroundColName="BCKCOL" 
 ::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;NECRODATA) 2(;;NECRO06_B)

I dati:

 ::TBL Nam="NECRO06_B" 
 ::COL Cod="CROCE" Txt="Croce" Lun="99" IO="O" Ogg="J4IMG" 
 ::COL Cod="IMAGE" Txt="Immagine Persona" Lun="99" IO="O" Ogg="J4IMG" 
 ::COL Cod="TESTO1" Txt="Testo1" Lun="99" IO="O" Ogg="**" 
 ::COL Cod="TESTO2" Txt="Testo2" Lun="99" IO="O" Ogg="**" 
 ::COL Cod="BCKCOL" Txt="Background color" Lun="30" IO="O" Ogg="**" 
 ::DAT Fld="J1;URL;http://www.amcannunci.it/necro4/agenzia/simbolo/croce1.jpg|J1;URL;http://amplifylife.org/wp-content/plugins/testimonials-widget/assets/images/user.jpg|E' mancato all'affetto dei suoi cari Claudio Molteni Lo partecipano la moglie Carla, i figli Paolo, Luca e Sandro, gli adorati nipoti Giulio, Antonio.| La funzione funebre verrà celebrata Venerdì 25 Gennaio alle ore 10:30 presso la Basilica del Sacro Cuore, Milano | white"

La struttura del Box è definita nello script SCP_LAY/NECRO06_B che qui non riportiamo per smeplicità

 

Il risultato finale mostrato in un video:

Conclusioni

L’utilizzo dei prototipi in Sme.UP, nel caso specifico in Web.UP, permette, come si è visto, di ottenere in breve tempo (l’intero lavoro ha cubato 6-8 ore, tutto compreso) una soluzione presentabile e tangibile di quella che sarà la soluzione una volta realizzata.

Se non fosse già chiaro… non è stato necessario scrivere programmi per interfacciarsi a fonti dati, quindi ci si è potuti concentrare sulla navigazione, sulla struttura delle pagine e sui campi da presentare e richiedere all’utente: in altre parole sull’analisi funzionale.