Francesco VerzelettiIndice articolo
Questo articolo è un vero è proprio tutorial per creare delle schede e l’invito è quello che tutti quelli che lo leggeranno provino a loro volta a ripeterlo!
Il tutorial si basa sui concetto di prototipo: i dati sono finti, ma tutto il resto è vero e funzionante.
A questo proposito, prima di iniziare, vi invito a leggere il primo articolo riguardante questo argomento, Prototipazione con Sme.UP.
Cosa realizzeremo
Quello che costruiremo è una applicazione web per prenotare uno spazio pubblicitario su un giornale.
Il risultato finale è in questo video:
Let’s go!
Per semplificazione le schede che andrete a creare per i vostri “esprimenti” dovranno chiamarsi con i seguenti nomi PROTO_1, PROTO_2, PROTO_3, PROTO_4, PROTO_5 e PROTO_6.
utilizzando l’ambiente SVIU su srvlab01 e la libreria sarà la propria “W” (quindi W_[VOSTRO NOME UTENTE]) quindi ad esempio W_VERFRA. Inoltre in questo tutorial utilizzeremo anche molti scp_lay per definire i vari stili, e un scp_set che conterrà tutti i nostri dati prototipo, utilizzate sempre la denominazione LAYPRO_1, LAYPRO_2 etc… , per l’scp_set basterà chiamarlo PROTO.
Pagina 1: Scelta giornale
ok partiamo iniziando a creare la nostra prima pagina che io chiamerò PROTO_1, andiamo a inserire come prima cosa una label con il titolo della nostra pagina:
::G.SEZ Pos(1) ::G.SUB.LAB Tit="*NONE" ::G.SET.LAB FontSize="24" Align="CENTER" ::D.OGG D(Inserisci annuncio)
Inseriamo cinque box che ci indicheranno la pagina in cui ci troviamo, si noti anche l’introduzione degli stili (STY) riferiti al layout laypro_1, e l’utilizzo del servizio “B£SER_46” che produce l’XML leggendo i dati dallo script PROTO, e la sotto-scheda proto01_a.
::G.STY Name="A01" Align="center" FontSize="24 FontColor="R255G255B255" ::G.STY Name="A02" Align="center" FontSize="12 FontColor="R255G255B255" …… …… ::G.SEZ Pos(2) ::G.SUB.BOX Tit="*NONE" ::G.SET.BOX Layout="LAYPRO_1" Cols="5" BackgroundColName="BCKCOL" ::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;PROTO) 2(;;PROTO01_A)
Ora creiamo il layout laypro_1, che richiamiamo nel box in posizione due.
::Sez Pos="A" Dim="10%" Sty="A01" ::Sez Pos="B" ::Sez Pos="B1" Sty="A02" ::Sez Pos="B2" Sty="A02"
e ora i editiamo il nostro scp_set che io ho chiamato proto, che conterrà tutti i dati prototipo utilizzati in questo nostro test.
::TBL Nam="PROTO01_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|red"
::DAT Fld="3|Dati|Nome|red"
::DAT Fld="4|Scegli|data|red"
::DAT Fld="5|Inserisci|testo|red"
Arricchiamo, ora, lo script di scheda inserendo ulteriori informazioni mediante il componente LAB (label) e mediante variabili di comando (TXTn), che ci serviranno a dare un effetto più dinamico grazie alla comunicazione di variabili tra i vari componenti, nativa delle schede di SmeUP.
::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 FontSize="14" FontBold="Yes" Align="CENTER" ::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" ::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])
Aggiungiamo ora un bottone che che ci consentirà di avanzare alla pagina seguente, tramite un dinamismo che scatterà al click sul bottone. Da notare la sintassi “Enabled=”{‘[TXT1]’ NE ”}” che non permette di avanzare alla pagina successiva se non c’è nessun elemento selezionato tra quelli disponibili!
::G.SEZ Pos(4)
::G.SUB.BTN Tit="*NONE"
::G.SET.BTN Horiz="Yes" FontColor="R255G255B255" BackColor="R000G092B230"
::G.DIN When="Click" Enabled="{'[TXT1]' NE ''}" Exec="F(EXD;*SCO;) 2(MB;SCP_SCH;PROTO_2) P(TXT1([TXT1]) TXT2([TXT2]) TXT3([TXT3]) TXT4([TXT4]) )"
::D.OGG D(Avanti)
Inseriamo ora il titolo della sezione, e i box che l’utente potrà selezionare per scegliere su quale giornale pubblicare il proprio annuncio pubblicitario.
::G.SEZ Pos(5) ::G.SUB.LAB Tit="*NONE" ::G.SET.LAB Align="CENTER" FontSize="20" ::D.OGG D(Scegli il giornale su cui pubblicare il tuo annuncio) ::G.SEZ Pos(6) ::G.SUB.BOX Tit="Brescia" Flat="Yes" ::G.SET.BOX Layout="LAYPRO_2" 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;PROTO) 2(;;PROTO01_B) ::G.SEZ Pos(7) ::G.SUB.BOX Tit="Bergamo" Flat="Yes" ::G.SET.BOX Layout="LAYPRO_3" 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;PROTO) 2(;;PROTO01_C)
Si noti che in questo ultimo passaggio abbiamo usato due scp_lay: laypro_2 & laypro_3, quindi dobbiamo andare a crearli ed editarli con la seguente sintassi
::Sez Pos="A" ::Sez Pos="A1" ::Sez Pos="A2" ::Sez Pos="A" ::Sez Pos="A1" ::Sez Pos="A2"
Editiamo anche il nostro scp_set con i seguenti script…
::TBL Nam="PROTO01_B" ::COL Cod="REGIONE" Txt="Regione" Lun="99" IO="O" Ogg="**" ::COL Cod="PROVINCIA" Txt="Provincia" Lun="99" IO="O" Ogg="**" ::DAT Fld="BRESCIA DAY - LOMBARDIA|ERBUSCO" ::DAT Fld="BRESCIA DAY - LOMBARDIA|DESENZANO" ::DAT Fld="BRESCIA DAY - LOMBARDIA|MARCHENO" ::DAT Fld="BRESCIA DAY - LOMBARDIA|ISEO" ::DAT Fld="BRESCIA DAY - LOMBARDIA|REGIONALE" ::TBL Nam="PROTO01_C" ::COL Cod="REGIONE" Txt="Regione" Lun="99" IO="O" Ogg="**" ::COL Cod="PROVINCIA" Txt="Provincia" Lun="99" IO="O" Ogg="**" ::DAT Fld="GAZZETTA DI BERGAMO|DALMINE" ::DAT Fld="GAZZETTA DI BERGAMO|TELGATE"
Ora che abbiamo aggiunto anche questi script la nostra prima pagina è pronta! Il risultato che dovreste avere sarà questo…
Pagina 2: Tipologia annuncio
Completata la prima pagina, creiamo una seconda scheda PROTO_2. La prima parte resta uguale alla precedente, eccetto per alcuni piccoli dettagli che dopo vederemo:
::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.STY Name="A01" Align="center" FontSize="24" FontColor="R255G255B255" ::G.STY Name="A02" Align="center" FontSize="12" FontColor="R255G255B255" ::G.STY Name="A03" Align="center" FontSize="12" FontColor="R000G000B000" ::G.SEZ Pos(1) ::G.SUB.LAB Tit="*NONE" ::G.SET.LAB Align="CENTER" FontSize="24" ::D.OGG D(Inserisci Annuncio) ::G.SEZ Pos(2) ::G.SUB.BOX Tit="*NONE" ::G.SET.BOX Layout="LAYPRO_4" Cols="5" BackgroundColName="BCKCOL" ::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;PHDEMO_PRO) 2(;;PROTO02_A) ::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" ::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])
Notiamo che sono cambiate alcune piccole cose! Ad esempio il layout dei 5 BOX che indicano la pagina in cui ci troviamo che ora si chiama LAYPRO_4, inoltre modifichiamo anche la sottoscheda che utilizziamo… questo perché, evidenziamo la seconda pagina e non più la prima, ora usiamo la PROTO02_A.
::TBL Nam="PROTO02_A"
::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="**"
::DAT Fld="1|Scegli|giornale|red"
::DAT Fld="2|Scegli|tipologia|blue"
::DAT Fld="3|Dati|nome|red"
::DAT Fld="4|Scegli|data|red"
::DAT Fld="5|Inserisci|testo|red"
Creiamo anche il nuovo scp_lay da richiamare, che ho denominato LAYPRO_4
::Sez Pos="A" Dim="10%" Sty="A01" ::Sez Pos="B" ::Sez Pos="B1" Sty="A02" ::Sez Pos="B2" Sty="A02"
Aggiungiamo anche il bottone per avanzare alla pagina seguente, si noti che un’altra modifica che è stata fatta è stata aggiungere, oltre al pulsante avanti, anche il pulsante indietro che ci rimanda alla home di Web.UP.
::G.SEZ Pos(4) ::G.SUB.BTN Tit="*NONE" ::G.SET.BTN Horiz="Yes" BackColor="R000G092B230" FontColor="R255G255B255" ::D.OGG D(Indietro) E(CLOSE) ::D.OGG D(Avanti) E(F(EXD;*SCO;) 2(MB;SCP_SCH;PROTO_3) P(TXT1([TXT1]) TXT2([TXT2]) TXT3([TXT3]) TXT4([TXT4])) )
Ora sempre sulla nostra scheda andiamo ad aggiungere una semplicissima label con il titolo dello scopo di questa pagina, cioè quello di scegliere su che testata giornalistica inserire il nostro annuncio.
::G.SEZ Pos(5) ::G.SUB.LAB Tit="*NONE" ::G.SET.LAB Align="CENTER" FontSize="20" ::D.OGG D(Scegli la tipologia per il tuo annuncio)
Aggiungiamo dei box attraverso i quali possiamo selezionare il tipo di annuncio che vogliamo far pubblicare.
::G.SEZ Pos(6) ::G.SUB.BOX Tit="*NONE" ::G.SET.BOX Layout="LAYPRO_5" Cols="3" ::G.DIN When="Click" Where="IDTip" Sch.Var="TXT2([TESTO1])" ::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;PROTO) 2(;;PROTO02_B)
editiamo ancora una volta il nostro scp_set, PROTO inserendo la sottoscheda PROTO02_B, tramite la quale andiamo a scrivere dentro i nostri box i vari tipi di annunci possibili
::TBL Nam="PROTO02_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 DI VENDITA|Questo annuncio può essere inserito solo da chi è interessato a vendere il proprio divano." ::DAT Fld="VENDITA IMMOBILIARE|Annuncio usato per creare un inserzione per vendere/acquistare un bene immobiliare." ::DAT Fld="ANNIVERSARIO|Annuncio per celebrare un anniversario o un compleanno." ::DAT Fld="ANNUNCIO DI LAVORO|Annuncio per inserire un'offerta/ricerca di lavoro." ::DAT Fld="VARIO|Utilizzabile per qualsiasi altro scopo non sopra citato."
come sempre creiamo l’scp_lay utilizzato sopra, il LAYPRO_5
::Sez Pos="A" ::Sez Pos="A1" Sty="A03" ::Sez Pos="A2"
Ora per concludere anche la seconda pagina, inseriamo ancora una volta i pulsanti di navigazione “avanti” & “indietro”
::G.SEZ Pos(7) ::G.SUB.BTN Tit="*NONE" ::G.SET.BTN Horiz="Yes" BackColor="R000G092B230" FontColor="R255G255B255" ::D.OGG D(Indietro) E(CLOSE) ::D.OGG D(Avanti) E(F(EXD;*SCO;) 2(MB;SCP_SCH;PROTO_3) P(TXT1([TXT1]) TXT2([TXT2]) TXT3([TXT3]) TXT4([TXT4])) )
Ora che abbiamo concluso la nostra seconda pagina andiamo a vedere quale è il risultato finale:
Pagina 3: nome
Ora passiamo a creare la terza scheda che denominiamo PROTO_3.
teniamo sempre per buono la prima parte di script (Sempre con le dovute modifiche). Notiamo che abbiamo inserito una nuova variabile “NOME” che valorizzeremo con il nome della persona che inserirà l’annuncio.
::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)" ::S.VAR.VAL Sch.Var="NOME()" ::G.STY Name="A01" FontColor="R255G255B255" FontSize="24" Align="center" ::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 Annuncio) ::G.SEZ Pos(2) ::G.SUB.BOX Tit="*NONE" ::G.SET.BOX Layout="LAYPRO_6" Cols="5" BackgroundColName="BCKCOL" ::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;PROTO) 2(;;PROTO03_A) ::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])
Andiamo ad aggiungere la seguente sottoscheda PROTO03_A nel nostro scp_set, come sempre per evidenziare non più la seconda pagina ma la terza!
::TBL Nam="PROTO03_A" ::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="**" ::DAT Fld="1|Scegli|giornale|red" ::DAT Fld="2|Scegli|tipologia|red" ::DAT Fld="3|Dati|nome|blue" ::DAT Fld="4|Scegli|data|red" ::DAT Fld="5|Inserisci|testo|red"
Creiamo anche il relativo scp_lay utilizzato, il LAYPRO_6
::Sez Pos="A" Dim="10%" Sty="A01" ::Sez Pos="B" ::Sez Pos="B1" Sty="A02" ::Sez Pos="B2" Sty="A02"
Aggiungiamo come sempre alla nostra scheda i bottoni di navigazione di “avanti” e “indietro”, da notare sempre il cambio della scheda a cui punta il pulsante avanti. (non preoccupatevi se la scheda non esiste ancora, dopo la creeremo).
::G.SEZ Pos(4) ::G.SUB.BTN Tit="*NONE" ::G.SET.BTN Horiz="Yes" BackColor="R000G092B230" FontColor="R255G255B255" ::D.OGG D(Indietro) E(CLOSE) ::D.OGG D(Avanti) E(F(EXD;*SCO;) 2(MB;SCP_SCH;PROTO_4) P(TXT1([TXT1]) TXT2([TXT2]) TXT3([TXT3]) TXT4([TXT4]) NOME([NOME])) )
Adesso inseriamo la funzione di questa scheda, inserire il nome di che desidera creare un proprio annuncio, per fare questo inseriamo come sempre una label con il titolo:
::G.SEZ Pos(5) ::G.SUB.LAB Tit="*NONE" ::G.SET.LAB Align="center" FontSize="20" ::D.OGG D(Inserisci il tuo nome)
Inseriamo nel nostro script di scheda un input panel (INP) di Web.UP, che ci permetterà di inserire il nome di colui che vuole inserire l’annuncio:
::G.SEZ Pos(6) ::G.SUB.INP Tit="*NONE" ::G.SET.INP SubmitButton="No" ::G.DIN Where="IDNam" When="Click" Sch.Var="TXT3([NOME] - [PARENTELA]) NOME([NOME])" ::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;PROTO) 2(;;PROTO03_B) INPUT()
Come sempre editiamo anche il nostro scp_set, PROTO inserendo i dati che ci permettono di configurare il nostro input panel
::TBL Nam="PROTO03_B" Tit="" ::COL Cod="NOME" Txt="Cognome e nome" Tip="" Lun="70" IO="B" Ogg="**" ::DAT Fld="|"
Ora vediamo il risultato finale di questa nostra terza scheda:
Pagina 4: Scelta data di pubblicazione
Procediamo come sempre andando a creare la quarta scheda, che rappresenterà la nostra quarta pagina del sito:
::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)" ::S.VAR.VAL Sch.Var="NOME(&PA.NOME)" ::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 annuncio) ::G.SEZ Pos(2) ::G.SUB.BOX Tit="*NONE" ::G.SET.BOX Layout="LAYPRO_7" Cols="5" BackgroundColName="BCKCOL" ::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;PHDEMO_PRO) 2(;;PROTO04_A) ::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" ::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])
Con questo pezzo di script andiamo sempre ad aggiungerlo al nostro scp_set, PROTO, notiamo sempre che l’unica cosa che cambia è il colore della quarta colonna.
::TBL Nam="PROTO04_A" ::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="**" ::DAT Fld="1|Scegli|giornale|red" ::DAT Fld="2|Scegli|tipologia|red" ::DAT Fld="3|Dati|nome|red" ::DAT Fld="4|Scegli|data|blue" ::DAT Fld="5|Inserisci|testo|red"
Creiamo subito anche l’scp_lay che abbiamo utilizzato, che io chiamato LAYPRO_7
::Sez Pos="A" Dim="10%" Sty="A01" ::Sez Pos="B" ::Sez Pos="B1" Sty="A02" ::Sez Pos="B2" Sty="A02"
Inseriamo i classici bottoni di “avanti” & “indietro”, sempre ricordandoci di modificare la scheda a cui punta il pulsante “avanti”.
::G.SEZ Pos(4) ::G.SUB.BTN Tit="*NONE" ::G.SET.BTN Horiz="Yes" BackColor="R000G092B230" FontColor="R255G255B255" ::D.OGG D(Indietro) E(CLOSE) ::D.OGG D(Avanti) E(F(EXD;*SCO;) 2(MB;SCP_SCH;PROTO_5) P(TXT1([TXT1]) TXT2([TXT2]) TXT3([TXT3]) TXT4([TXT4]) NOME([NOME])) )
Inseriamo una label con il titolo per la funzione della nostra scheda, che in questo caso deve farci inserire una data la pubblicazione del nostro annuncio.
::G.SEZ Pos(5) ::G.SUB.LAB Tit="*NONE" ::G.SET.LAB Align="CENTER" FontSize="20" ::D.OGG D(Scegli la data di pubblicazione del tuo annuncio)
Introduciamo il componente calendario annuale (CHA) di Web.UP, tramite il quale potremmo selezionare una data
::G.SEZ Pos(6) ::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;PROTO) 2(;;PROTO04_B)
Ora aggiorniamo anche il nostro scp_set, PROTO con i dati del calendario, che ci simulerà delle data tra qui scegliere
::TBL Nam="PROTO04_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" ::DAT Fld="20170306|1988" ::DAT Fld="20170307|1081" ::DAT Fld="20170308|8512" ::DAT Fld="20170309|0159" ::DAT Fld="20170310|9856" ::DAT Fld="20170311|6666" ::DAT Fld="20170312|3333" ::DAT Fld="20170313|4444" ::DAT Fld="20170314|5555" ::DAT Fld="20170315|1598" ::DAT Fld="20170316|2369" ::DAT Fld="20170317|5897" ::DAT Fld="20170318|6584" ::DAT Fld="20170319|4236" ::DAT Fld="20170320|9874" ::DAT Fld="20170321|9999" ::DAT Fld="20170322|2658" ::DAT Fld="20170323|7562" ::DAT Fld="20170324|6258" ::DAT Fld="20170325|9853" ::DAT Fld="20170326|0000" ::DAT Fld="20170327|1587" ::DAT Fld="20170328|8743" ::DAT Fld="20170329|3258" ::DAT Fld="20170330|7896"
Inseriamo i bottoni di “avanti” & “indietro“
::G.SEZ Pos(7) ::G.SUB.BTN Tit="*NONE" ::G.SET.BTN Horiz="Yes" BackColor="R000G092B230" FontColor="R255G255B255" ::D.OGG D(Indietro) E(CLOSE) ::D.OGG D(Avanti) E(F(EXD;*SCO;) 2(MB;SCP_SCH;PROTO_5) P(TXT1([TXT1]) TXT2([TXT2]) TXT3([TXT3]) TXT4([TXT4]) NOME([NOME])) )
Abbiamo concluso anche la quarta pagina del nostro prototipo, vediamo come dovrebbe risultare:
Pagina 5: immagine & testo
Aggiungiamo ora la quinta pagina, che presenta qualche complessità in più, andremo a sfruttare molti componenti di Web.UP come l’upload di file e gli input panel.
::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)"
::S.VAR.VAL Sch.Var="NOME(&PA.NOME)"
::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 annuncio)
::G.SEZ Pos(2)
::G.SUB.BOX Tit="*NONE"
::G.SET.BOX Layout="LAYPRO_8" Cols="5" BackgroundColName="BCKCOL"
::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;PHDEMO_PRO) 2(;;PROTO05_A)
::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"
::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])
Creiamo la nuova sottoscheda nel nostro scp_set, proto.
::TBL Nam="PROTO05_A" ::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="**" ::DAT Fld="1|Scegli|giornale|red" ::DAT Fld="2|Scegli|tipologia|red" ::DAT Fld="3|Dati|nome|red" ::DAT Fld="4|Scegli|data|red" ::DAT Fld="5|Inserisci|testo|blue"
creiamo anche il nuovo scp_lay, che chiameremo LAYPRO_8
::Sez Pos="A" Dim="10%" Sty="A01" ::Sez Pos="B" ::Sez Pos="B1" Sty="A02" ::Sez Pos="B2" Sty="A02"
Ora aggiungiamo anche i bottoni, ma rispetto ai precedenti ne aggiungeremo un terzo che chiameremo “anteprima“. Che ci consentirà di visualizzare in una nuova finestra una anteprima del nostro annuncio, premendo invece “fine” verremo rimandati alla prima scheda (proto_1), con “fine” torneremo alla home di Web.UP.
::G.SEZ Pos(4) ::G.SUB.BTN Tit="*NONE" ::G.SET.BTN Horiz="Yes" BackColor="R000G092B230" FontColor="R255G255B255" ::D.OGG D(Indietro) E(CLOSE) ::D.OGG D(Anteprima) E(F(EXD;*SCO;) 2(MB;SCP_SCH;PROTO_6) P(NOME([NOME])) G(NFIR)) ::D.OGG D(Fine) E(F(EXD;*SCO;) 2(MB;SCP_SCH;PROTO_1))
Continuiamo aggiungendo una label con il titolo, e di seguito vari componenti per la gestione delle immagini, ora introduciamo il componente di Upload (FUP) usato per eseguire l’upload di file. Di seguito troviamo tre immagini di esempi tra cui scegliere per impostare uno sfondo per il nostro annuncio.
::G.SEZ Pos(5) ::G.SUB.LAB Tit="*NONE" ::G.SET.LAB Align="CENTER" FontSize="20" ::D.OGG D(Inserisci il testo del tuo annuncio)
::G.SEZ Pos(6) ::G.SEZ Pos(61) ::G.SEZ Pos(61A) Dim(30%) ::G.SUB.LAB Tit="*NONE" ::G.SET.LAB ::D.OGG D(Moduli Annunci) ::G.SEZ Pos(61B) ::G.SUB.FLD Tit="*NONE" ::G.SET.FLD Label="Base" Type="Rad" ::D.OGG T() P() K(a) D(2) ::D.OGG T() P() K(b) D(3) ::D.OGG T() P() K(c) D(4) ::D.OGG T() P() K(d) D(6) ::G.SEZ Pos(61C) ::G.SUB.FLD Tit="*NONE" ::G.SET.FLD Label="Altezza" Type="Rad" ::D.OGG T() P() K(a) D(4) ::D.OGG T() P() K(b) D(6) ::D.OGG T() P() K(c) D(7) ::D.OGG T() P() K(c) D(13) ::G.SEZ Pos(62) ::G.SEZ Pos(62A) Dim(30%) ::G.SUB.LAB Tit="*NONE" ::G.SET.LAB ::D.OGG D(Formato Fotografia) ::G.SEZ Pos(62B) ::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) ::G.SEZ Pos(63) ::G.SEZ Pos(63A) Dim(30%) ::G.SUB.LAB Tit="*NONE" ::G.SET.LAB ::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" ::G.SET.IML Type="Fup" ::D.OGG T(J4) P(IMG) K(J1;URL;http://www.aresfvg.it/files/uploads/logo_news.jpg) ::D.OGG T(J4) P(IMG) K(J1;URL;http://www.articolo36.it/wp-content/uploads/2017/10/franchise.jpg) ::D.OGG T(J4) P(IMG) K(J1;URL;http://www.dolomiti-casa.it/immagini/pubblicita-immobiliare.jpg)
Utilizziamo un’altra volta il componente input panel, che simula l’inserimento del testo per l’annuncio
::G.SEZ Pos(6)
::G.SUB.INP Tit="*NONE"
::G.SET.INP SubmitButton="No" Layout="LAYPRO_9"
::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;PHDEMO_PRO) 2(;;PROTO05_B) INPUT()
Creiamo ancora una sottoscheda all’interno del nostro scp_set, proto
::TBL Nam="PROTO05_B" ::COL Cod="APE" Txt="Testo apertura" Lun="99" IO="B" Ogg="**" ::COL Cod="SUB" Txt="Sottotitolo annuncio" Lun="99" IO="B" Ogg="**" ::COL Cod="ETA" Txt="Età" Lun="3" IO="B" Ogg="NR" ::COL Cod="CHI" Txt="Testo chiusura" Lun="99" IO="B" Ogg="**" ::COL Cod="LOC" Txt="Località e data" Lun="99" IO="B" Ogg="**" ::DAT Fld="|||||"
Creiamo anche l’scp_lay, LAYPRO_9 che andrà editato con la seguente sintassi
::Sez Pos="A" ::Fld Nam="APE" Cmp="Mem" ::Fld Nam="DEF" ::Fld Nam="ETA" ::Fld Nam="SUB" Cmp="Mem" ::Fld Nam="CHI" Cmp="Mem" ::Fld Nam="FIR" ::Fld Nam="LOC"
Inseriamo ancora una volta i nostri tre bottoni.
::G.SEZ Pos(7) ::G.SUB.BTN Tit="*NONE" ::G.SET.BTN Horiz="Yes" BackColor="R000G092B230" FontColor="R255G255B255" ::D.OGG D(Indietro) E(CLOSE) ::D.OGG D(Anteprima) E(F(EXD;*SCO;) 2(MB;SCP_SCH;PROTO_6) P(NOME([NOME])) G(NFIR)) ::D.OGG D(Fine) E(F(EXD;*SCO;) 2(MB;SCP_SCH;PROTO_1)) ::I.SCH.END
Ora anche la nostra quinta scheda è pronta! vediamo quale dovrebbe essere il nostro risultato:
Pagina 6: Anteprima
Creiamo ora la nostra sesta ed ultima scheda, quella che ci verrà mostrata quando premiamo il pulsante di anteprima, che io chiamerò VERFRA5.
Andiamo a creare la nostra scheda gestendo sempre una variabile “NOME”, e usando due stili “A01” e “A02“, e in posizione 1 inseriamo il titolo della scheda dove la variabile nome, chiusa tra parentesi quadre, verrà sostituita con il vero nome dell’utente che ha inserito l’annuncio.
::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 annuncio di: [NOME])
Ora inseriamo una matrice che contiene tutte le nostre informazioni che abbiamo aggiunto precedentemente come il nome del giornale, il tipo di annuncio scelto, etc… . I dati li prende dalla sottoscheda PROTO06_A
::G.SEZ Pos(2) ::G.SUB.MAT Tit="*NONE" ::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;PROTO) 2(;;PROTO06_A)
aggiungiamo ora un unico grande box che conterrà tutte le informazioni aggiunte nella scheda precedente come l’immagine di presentazione annuncio, le sue dimensioni, etc… .
::G.SEZ Pos(3) ::G.SUB.BOX Tit="*NONE" ::G.SET.BOX Layout="LAYPRO_10" BackgroundColName="BCKCOL" ::D.FUN.STD F(EXB;B£SER_46;WRK.SCP) 1(MB;SCP_SET;PHDEMO_PRO) 2(;;PROTO06_B)
Ho di proposito saltato i due pezzi di script da aggiungere al nostro scp_set, proto, che saranno PROTO06_A & PROTO06_B
::TBL Nam="PROTO06_A" ::COL Cod="TESTATA" Txt="Testata" Lun="30" IO="O" Ogg="**" ::COL Cod="EDIZIONE" Txt="Edizione" Lun="30" IO="O" Ogg="**" ::COL Cod="TIPOLOGIA" Txt="Tipologia" Lun="30" IO="O" Ogg="**" ::COL Cod="DATA" Txt="Data" Lun="10" IO="O" Ogg="D8*YYMD" ::COL Cod="PREZZO" Txt="Prezzo" Lun="12;2" IO="O" Ogg="**" ::DAT Fld="BRESCIA DAY - LOMBARDIA ERBUSCO|VENDITA IMMOBILIARE|Francesco Verzeletti|20170125|19.50"
::TBL Nam="PROTO06_B" ::COL Cod="IMGG" Txt="ImmagineC" 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.dolomiti-casa.it/immagini/pubblicita-immobiliare.jpg|J1;URL;http://amplifylife.org/wp-content/plugins/testimonials-widget/assets/images/user.jpg|Vendo appartamento bilocale Zona Brescia centro Prezzo 200000 euro trattabili| Se interessanti rivolgersi all'agenzia Albanove oppure chiamate il numero 2849633278 | white"
Creiamo anche l’scp_lay relativo al box, sarà il LAYPRO_10
::Sez Pos="1" Sty="A01" ::Sez Pos="1A" ::Sez Pos="2" ::Sez Pos="2A" Dim="10%" ::Sez Pos="2B" Sty="A02" ::Sez Pos="2B1" ::Sez Pos="2B2"
Ora che anche la nostra ultima scheda è pronta andiamo a vedere come dovrebbe essere il risultato finale!
Per concludere
Questo prototipo creato con Web.UP ci dovrebbe dare un idea generale su come dovrebbe essere una soluzione vera e propria. Ci permette anche di simulare la navigazione e le funzionalità delle schede, In modo da avere una vera e propria analisi funzionale.
Ricordo che per realizzare questa applicazione non è stato necessario scrivere nessun programma, tutti i dati sono fittizi presi da un scp_set e gestiti grazie al programma B£SER_46 (quindi è normale che il testo che inserirete non verrà inserito, ma verrà preso dai dati prototipo, come la maggior parte delle cose). Quindi ci si è potuti concentrare sulla struttura delle pagine, sulla navigazione e sulle richieste del cliente.
1 commento su “Tutorial: creare una scheda”