Raccogliamo in questo articolo tutto il materiale e i link utili a chi si approccia alle schede per la prima volta. L’intento è quello di creare un percorso guidato di apprendimento sulle schede di Smeup.

Concetti preliminari alla creazione di schede

Prima di andare subito al sodo, parlando di schede è importante avere ben chiari alcuni concetti fondamentali che sono universali e valgono per qualsiasi interfaccia grafica:
Sono i principi della UX (User experience) e del design di intefaccia (User Interface Design).

La conoscenza di questi principi e la loro applicazione durante le fasi di progettazione e realizzazione delle interfacce porterà la nostra progettazione ad un livello superiore, capendo innanzitutto le necessità che gli utenti vorranno soddisfare e andando di conseguenza a migliorarne l’estetica e la funzionalità, rendendola usabile ed intuitiva per un gran numero di utenti.

Per approfondire queste tematiche, ed iniziare il nostro percorso formativo con delle basi concettuali solide, è utile leggere i seguenti articoli:

Iniziamo con le schede!

Che cosa sono nello specifico le schede di Smeup?
Se ti stai ponendo queste domanda, troverai informazioni molto utili che ti aiuteranno a capire meglio il concetto di schede in Smeup nel seguente articolo: Cosa sono le schede in Sme.UP?.

Struttura grafica e dinamismi

Ora che abbiamo un’ idea di cosa sono le schede in Smeup, addentriamoci a capire la loro struttura:

In questi articoli ci sono degli esempi di costruzione della struttura all’interno di uno script di scheda (SCP_SCH) e tutto quello che riguarda la sua suddivisione in sezioni e sottosezioni.

suddivisione in colonne (1A-1B-1C)
suddivisione in righe ( 1-2-3)


Gli script di scheda non solo ci aiutano a costruire la struttura grafica e la disposizione delle sezioni, ma anche a renderle dinamiche attraverso i dinamismi.

I dinamismi non sono altro che istruzioni che vengono specificate per ogni singolo componente e che permettono di far interagire le diverse sezioni di una scheda tra loro, oppure, di far succedere qualcosa a seguito di un’azione dell’utente.

Script di scheda: un esempio di dinamismo: In questo articolo troveremo alcuni esempi che ci aiuteranno a capire il funzionamento dei dinamismi.

Come visualizzo i dati?

Una volta impostata la struttura visiva di una scheda, e definito i dinamismi, quindi in che modo le sezioni si comportano all’interazione dell’utente e come interagiscono tra di loro, è fondamentale capire che cosa dovranno contenere i componenti nelle nostre sezioni, ovvero i dati.

Le possibilità per visualizzare i dati all’interno dei nostri componenti sono le seguenti:
– Richiamiamo un servizio che andrà a prendere i dati che vogliamo mostrare, richiedendoli al server o ad un database.


– Richiamiamo un servizio “speciale”, il B£SER_46, che inserito uno script di Setup (SCP_SET) come parametro e il codice di riferimento, va a prendere i dati direttamente da lì, nel quale posso scrivere io i dati che voglio visualizzare.
Questa possibilità di utilizzare dei dati cablati, cioè finti, scritti come esempio, è molto utile quando dobbiamo realizzare dei prototipi.

I prototipi

I prototipi ci permettono di creare una struttura grafica dell’interfaccia da mostrare all’utente, senza però aver bisogno necessariamente di avere dei dati reali da inserire nei componenti.


Per capire al meglio cosa sono i prototipi, rimandiamo a questo articolo: Prototipazione con Smeup.

Dalla teoria… alla pratica

Ora che abbiamo una panoramica generale e alcuni esempi pratici di come è fatta e come funziona una scheda con le sue sezioni e sottosezioni, siamo pronti a mettere tutto in pratica provando a costruire delle schede:

Questi due tutorial sono molto utili per chi si approccia per la prima volta alla costruzione delle schede.
Quando si costruisce una scheda, può capitare di essere in difficoltà e non capire come mai il risultato che visualizziamo non rispecchia quello atteso.
è importante anche sapere come capire i problemi legati ad una scheda, andando a scovare gli errori per risolverli e ottenere ciò che si desidera.
Per questo motivo vi potrà tornare utile leggere anche questi articoli:
Come analizzare una scheda, Funzione di debug in webup e un ulteriore aggiornamento con Le ultime novità in fatto di debug.

In conclusione, per padroneggiare gli script creando schede funzionali e intuitive è bene aver chiari i concetti teorici, ma soprattutto è bene perseverare nella pratica.

Buon allenamento!