Supponiamo di voler costruire una applicazione WEB per un rivenditore di auto nuove ed usate che consenta ad un qualunque utente della rete di poter visionare la sua offerta ed, eventualmente, di fermare un' auto.

Considerando che l' ambiente di lavoro della BBT consente di sviluppare prototipi molto velocemente, il nostro approccio sarà quello di cominciare a costruire l' interfaccia e posizionare i campi necessari per la gestione delle informazioni in modo da dare fin da subito l' idea al nostro Rivenditore di quella che sarà l' architettura dell' interfaccia e di come verranno gestite le informazioni: questo approccio ci consente inoltre di verificare passo a passo che l' applicazione rispetta l' analisi fatta con il Rivenditore.

Cominciamo ad impostare le pagine

Immaginiamo l' interfaccia utente suddivisa in tre aree, ognuna delle quali rappresentata da una pagina WEB:

  • Area delle occasioni: si visualizzeranno tutte le occasioni attive e l' intervallo di tempo per cui resteranno tali;
  • Area dell' usato: l' utente avrà la possibilità di navigare tra l' usato per verificare se la sua richiesta ha o meno una risposta;
  • Area del nuovo: l' utente avrà la possibilità di navigare tra il nuovo, eventualmente configurandoselo, per verificare se la sua richiesta ha o meno una risposta;

Questo ri chiede di costruire:

  • 3 pagine WEB standard;
  • 1 pagina contenitore: da decidere se Tabs o Expanders;

Costruzione delle pagine e del contenitore

Le pagine vanno costruite prima del loro contenitore: riportiamo i passi per la costruzione di una prima pagina, le altre sono di fatto una ripetizione.

(1) Accedere alla tab Box Tree della pagina Box e creare il Sheet 'PagineWEB' che conterrà la pagine: il comando per la creazione del Sheet (Add Sheet) è disponibile sul tasto destro del mouse.

(2) Accedere alla pagina Pages e creare le pagine: il comando per la creazione della pagina (New Page) è disponibile sul tasto desto del mouse.

 

(3) Accedere alla pagina Pages e creare il contenitore: notare le diverse info della pagina.

 

 

  • Type = PagewithTab: definiamo la pagina come contenitore di Tabs;
  • Start Page = Yes: la pagina è quella che viene attivata al lancio dell' applicazione;
  • Tabs - Expanders: vengono selezionate le tre Tabs e ad ognuna associata l' etichetta. L' ordine con cui vengono presentate può essere modificato spostando le righe all' interno della grid;

Se esportiamo il Box e lanciamo l' applicazione, la pagina si presenta come nell' immagine che segue:

 

 

Ovviamente le pagine sono vuote in quanto non è stato inserito alcun elemento del Box: viene attivata la prima Tab.

Se modifichiamo il Type sulla pagina contenitore e lo settiamo a PageWithExpander, otteniamo questo effetto:

 

La struttura si sviluppa in verticale anzichè in orizzontale: viene attivato il primo expander.

A fronte di una prima verifica si opta per la struttura ad Expander ma si richiede di spostare in testa l' expander Occasioni: si va in edit della pagina contenitore e si sposta l' expander in testa.

 

 

 

Cominciamo ad inserire elementi sulla pagina Occasioni

Possiamo ipotizzare di costruire un grid sulla quale riportare l' elenco delle occasioni

Per ogni singola occasione definiamo il modello, il colore dell' auto, la tipologia di alimentazione, il valore di mercato e il prezzo: per visualizzare le occasioni e le loro info, utilizziamo un controllo di tipo Grid

Vediamo i passi per costruire l' elemento, riempirlo con le info disponibili e posizionarlo sulla pagina.

  1. Creiamo un nuovo Sheet che chiameremo InfoOccasioni: questo Sheet conterrà gli elementi utili per gestire le Occasioni;
  2. Attiviamo la Tab Elements e, utilizzando il tasto destro del mouse, attiviamo il comando New List: creiamo un elemento di tipo List che chiamiamo ElencoOccasioni. Questo elemento sarà composto dai campi:
    • Key: chiave che identifica univocamente l' occorrenza. Nel caso specifico potrebbe essere un codice;
    • Modello: campo descrittivo, di tipo String;
    • Colore: campo descrittivo, di tipo String;
    • Alimentazione: campo di tipo List che contiene i possibili valori <Benzina;Diesel;Metano;Gas>. I valori di una lista devono essere separati tra loro dal carttere ';';
    • ValoreMercato: valore dell' auto sul mercato, di tipo Number;
    • Prezzo: prezzo applicato, di tipo Number;
  3. Rimanendo sulla Tab Elements, attivo il comando Compile List ed inserisco manualmente o importo da XLSX le informazioni;
  4. Attivo la Tab Pages e vado in compilazione della pagina Occasioni: inserisco l' elemento ElencoOccasioni sulla pagina rappresentandolo attraverso un controllo di tipo Grid;

 Il filmato che segue mostra come creare un elemento di tipo List.

 

 

Il filmato che segue mostra come compilare un elemento List: le info relative possono essere inserite manualmente o importate da SQL o da Excel.

 

 

Il filmato che segue mostra come inserire un elemento su una pagina associandolo ad un controllo di tipo Grid: non ci soffermiamo sulla struttura della pagina nè sulla modalità di costruirla in quanto questo argomento sarà oggetto di un Tutorial a parte.

 

 

Se esportiamo il Box e lanciamo l' applicazione, la pagina si presenta come nell' immagine che segue:

 

 

Se osserviamo con attenzione la pagina che abbiamo costruito, possiamo notare due piccole anomalie:

  • Sulla riga della griglia non è definito il colore: si dovrà intervenire in modifica sull' elemento per correggere questa informazione;
  • Il filtro sulla colonna non è modificabile: si dovrà modificare il controllo definendo per la grid il valore Read Only = No. Le colonne della Grid rimangono immodificabili, mentre diventa editabile il Filtro;

Ovviamente per attivare le modifiche apportate si deve esportare il Box e riattivare l' applicazione.

 

Conclusioni

Se si creano tutti gli elementi utili per l' applicazione e si posizionano questi elementi sulle diverse pagine di competenza si ottiene già un qualcosa che dà un' idea di come opererà l' applicazione: di fatto abbiamo definito l' architettura dell' interfaccia e siamo in grado di verificarne il gradimento con il rivenditore.

Nei Tutorials che seguono vedremo come inserire nuove tipologie di campi e come presentarli con diverse tipologie di controlli.