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:
Questo ri chiede di costruire:
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.
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.
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:
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.