Interfaccia dinamica con Libri

Questa sezione del percorso ci introduce all’utilizzo dei libri per la generazione di interfacce dinamiche. Instant Developer consente la creazione di interfacce “extra”, con l’inclusione di componenti Javascript esterni, ma per diversi motivi, potremmo preferire l’approccio che vedremo in questa sezione, approccio offerto dagli oggetti Libro.

Cosa intendo con interfaccia dinamica? Beh, intendo quello che state vedendo ora e, precisamente, una interfaccia che non è prevista tra quelle standard del framework di Instant Developer.

Nell’applicazione You B&B vorrei includere una videata per ottenere una situazione generale delle prenotazioni con il layout che state vedendo a monitor.

Esiste qualcosa di già pronto? Ahime, no. Esiste qualche componente Javascript che potrebbe aiutarci? Non saprei rispondere, bisognerebbe mettersi a cercare. Nel frattempo vi dico che, progettando i libri, possiamo comunque ottenere il risultato.

Analizzando il prototipo possiamo notare come la videata dovrà essere suddivisa in 3 riquadri:

• Riquadro superiore sinistro contenente un pannello filtro, per poter indicare su quali dati desideriamo la situazione
• Riquadro Inferiore sinistro con un elenco dei Servizi offerti. Le voci dell’elenco dovranno essere trascinabili
Riquadro Centrale con una situazione a colonne. Ogni colonna contiene una card, con informazioni sulla prenotazione, un pulsante per ottenere ulteriori dettagli ed un lucchetto per attivare la modalità editing delle card

Questo prototipo è completamente realizzabile nel progetto con l’utilizzo degli oggetti Libro ed ovviamente degli oggetti Stili Visuali per la formattazione.

Allora, possiamo passare al progetto iniziando la creazione della videata: Applicazione YouB&B, Tasto Destro, Aggiungi Videata.

Un doppio Clic su Nuova Videata, assegniamo il nome Situazione: quindi confermiamo.

Abbiamo detto che la videata deve essere suddivisa in 3 Riquadri. Creiamo i riquadri con la toolbar di progettazione, precisamente con i pulsanti di divisione: divido una volta in Orizzontale e poi, con la selezione sul riquadro sinistro, divido anche in Verticale.

I riquadri sono pronti: allargo un attimo, perfetto. I riquadri sono pronti, ma dobbiamo ovviamente aggiungere i componenti all’interno. Il riquadro superiore sinistro, cioè quello dedicato al filtro, dovrebbe contenere un pannello, un pannello con 3 campi per la scelta del filtro.

E’ possibile creare pannelli, sganciati dal database, che consentano l’input di valori, grazie ad un oggetto denominato tabella IMDB.

Che cos’è la tabella IMDB? E’ una struttura dati in memoria, come potrebbe essere un array, ma con una struttura simile alle tabelle database: IMDB è infatti l’acronimo di In Memory Database.

Dove si creano le tabelle IMDB? Preferibilmente all’interno della videata dove si utilizzano. Nel nostro caso, quindi, Albero di progetto, Videata Situazione, Tasto destro, Aggiunti Tabella.

Assegniamo come identificativo alla tabella Filtro Situazione e confermiamo.

Nell’albero di progetto troverete le tabelle IMDB con una colorazione Verde, differente dalla colorazione arancione, che normalmente è dedicata alle tabelle del database reali.

Possiamo passare con l’aggiunta dei campi a questa tabella. Nello specifico abbiamo necessità di 3 campi:

idAppartamento, DataSituazione e Tipologia.

I campi IMDB possono essere creati con il trascinamento da un campo database reale. Potremmo, ad esempio, cercare la tabella delle Prenotazioni, o la tabella degli Appartamenti e trascinare il campo Id sulla tabella IMDB. La creazione del campo, come vedete, è avvenuta correttamente (tutte le caratteristiche del campo sono state ereditate).

Proviamo a creare, invece, un campo manualmente. Bè, tabella IMDB, Filtro Situazione, tasto destro, Aggiungi Campo.

Questa è la stessa interfaccia della creazione campi database reali. Impostiamo come Nome DataSituazione, come Titolo Data e come Esempi di contenuto impostiamo alcune date separate da punto e virgola: confermiamo.

Siccome nel prototipo il campo della Tipologia dovrà essere una ComboBox, una ComboBox con 3 scelte, mi avvalgo di un oggetto, l’oggetto Lista Valori. Creo la lista valori con le 3 opzioni e successivamente creo un campo basato sulla lista.

Sempre nell’Albero di progetto, Libreria Database, tasto destro, Aggiungi Lista Valori. Assegno come Nome Tipo Situazione, quindi confermo.

Sono tre sono le costanti da aggiungere, costanti che saranno nel mio caso numeriche: la costante Arrivo vale 10, la costante Partenza vale 20 e Presenza vale 30.

Quindi, lista Valori Tipo Situazione, tasto Destro, Aggiungi Costante:

      Nome: Tipo Arrivo, Titolo: Arrivo, Valore: 10

Altra costante:

      Nome: Tipo Partenza, Titolo: Partenza, Valore: 20

Ultima costante

      Nome: Tipo Presenza, Titolo: Presenza, Valore: 30

Adesso abbiamo la lista valori. Possiamo tornare alla tabella IMDB per aggiungere l’ultimo campo: Tasto Destro, Aggiungi Campo.

Impostiamo come nome Tipologia, come Titolo Tipologia e Lista Valori la lista che abbiamo appena creato, TipoSituazione. C’è… eccola qua: perfetto, confermo.

A questo punto, avendo la tabella IMDB, il riquadro superiore sinistro è pronto, perchè basta trascinare la tabella IMDB all’interno del riquadro vuoto ed ecco comparire il pannello. Anche nell’albero di progetto, come notate, adesso la videata Situazione ha al suo interno anche il pannello Filtro Situazione.

Potrebbe capitare che il campo di pannello idAppartamento non sia visibile. Ma, niente paura: basta entrare nelle proprietà e impostare la voce mostra alla opzione Dettaglio.

Come esercizio vi lascio la modifica dell’aspetto, è un attimo da sistemare ovviamente questo pannello. Quindi, vi lascio alla modifica dell’aspetto del pannello e vi aspetto al prossimo video, dove invece inizieremo ad impostare gli altri riquadri.