Report a colonne
copia linkTrascrizione
In questo tutorial la nostra attenzione è rivolta all’area centrale, dove vorremmo ottenere qualcosa di simile al prototipo.
Siccome non stiamo utilizzando un tema Responsive, tipo Bootstrap, come possiamo creare una grigliatura con delle card all’interno? Utilizzeremo la funzionalità dei report a colonne, dove è possibile definire un numero di colonne per riga. Ogni record occuperà una colonna sino a completare la riga per poi proseguire a quella successiva.
Tornando al progetto, prima di parlare di colonne dovremmo impostare la Master Query del Report Situazione. Questa volta utilizziamo il documento come sorgente dati e precisamente il documento Prenotazione, in quanto le card mostrano riferimenti di prenotazione.
Albero di progetto, Videata Situazione, Libro Situazione, doppio clic sulla Master Query: impostiamo come sorgente from il documento Prenotazione e come colonne ASTERISCO + <INVIO> così da includerle tutte.
Passiamo alla Pagina Mastro per distanziare, anche in questo caso, Corpo Pagina da Testata Pagina: doppio clic sulla Pagina Mastro ed apportiamo la modifica.
L’oggetto Report Situazione possiede troppe sezioni: possiamo eliminare Intestazione Report, Piede Pagina e Piede Report.
Dedichiamoci alla Sezione che conterrà la card precisamente la sezione Dettaglio: doppio clic per modificare le proprietà.
Decidiamo di creare card con una altezza di 50 millimetri, un numero di colonne pari a 2 e uno spazio di 5 millimetri tra colonne. Confermiamo e vediamo il risultato in progettazione.
Non ho creato più colonne, perché andremo a modificare il numero di colonne a runtime, a seconda della dimensione del browser. Ecco, anzi, a tale scopo creiamo una funzione che ritorna il numero di card da prevedere a seconda della dimensione del contenitore.
Quindi, Albero di progetto, Videata Situazione, Tasto destro Aggiungi Procedura.
Useremo questa funzione tra poco negli eventi per la stampa del libro.
Prepariamo ora il contenuto della Card. Aggiungiamo una prima box che servirà a fare da sfondo alla card: disegniamo un rettangolo all’interno della sezione tenendo il tasto SHIFT premuto. Al rilascio assegniamo come identificativo Card.
Ora, doppio clic sulla box Etichetta Card e modifichiamo le proprietà:
Ridimensionamento Orizzontale: Adatta
Ridimensionamento Verticale: Adatta
Stile Visuale: Situazione Sfondo
Da Sinistra: 1 millimetro
Dall’alto: 2 millimetro
Larghezza: 43 millimetri
Altezza: 41 millimetri
Confermiamo: la card di sfondo è pronta. Dobbiamo solo eliminare lo span contenuto all’interno.
Ora, all’interno di questa Card trovano posto 3 Box con i valori, 1 Box con un Pulsante e 1 Box con una Icona.
Espandiamo il ramo della Master Query del Report Situazione e trasciniamo i campi di interesse, sempre con il tasto SHIFT premuto (vi ricordo che, se non premete il tasto SHIFT, otterrete 2 Box: una con il valore e una con l’etichetta). Trasciniamo la colonna Nominativo, la colonna Arrivo, la colonna Totale Prenotazione.
Passiamo alla formattazione delle box appena create: io, ovviamente, vi suggerisco dei valori e voi potete disporre le informazioni un po’ come desiderate.
Box Nominativo doppio clic:
Ridimensionamento Orizzontale: Adatta
Stile Visuale: Situazione H3
Da Sinistra: 3 millimetro
Dall’alto: 4 millimetro
Larghezza: 39 millimetri
Altezza: 10 millimetri
Confermo e passo al Box Arrivo:
Ridimensionamento Orizzontale: Adatta
Stile Visuale: Situazione H5
Da Sinistra: 3 millimetro
Dall’alto: 15 millimetro
Larghezza: 39 millimetri
Altezza: 6 millimetri
Ultima box Totale Prenotazione:
Ridimensionamento Orizzontale: Adatta
Stile Visuale: Situazione H3
Da Sinistra: 3 millimetro
Dall’alto: 23 millimetro
Larghezza: 39 millimetri
Altezza: 5 millimetri
Per completare la card mancano 2 elementi, un'immagine del lucchetto e un pulsante. L’immagine la trovate nella cartella custom images. (Se non trovate l’immagine, potete scaricare il materiale didattico della lezione precedente)
Quindi, Toolbar di progettazione, pulsante immagine, un clic e disegnamo un quadrato. Il file dell’immagine si chiama my_lock_close.png.
Dico subito, l’immagine PNG non sempre viene mostrata in progettazione, per un problema relativo ai formati png. In esecuzione andrà tutto a posto.
Modifichiamo subito le proprietà. Doppio clic su my_lock_close.
Stile Visuale: Situazione Icon
Da Sinistra: 3 millimetro
Dall’alto: 32 millimetro
Larghezza: 9 millimetri
Altezza: 9 millimetri
Per concludere dobbiamo aggiungere il bottone, il bottone che è un falso bottone, in quanto, non è che una box opportunamente stilizzata con del CSS. Quindi, Toolbar di progettazione, pulsante dell’Etichetta e disegniamo, anche in questo caso, un’area rettangolare a fianco dell’icona.
Assegniamo come identificativo Button Dettagli e confermiamo.
Anche questo oggetto va stilizzato quindi entriamo nelle proprietà con un doppio clic:
Ridimensionamento Orizzontale: Adatta
Stile Visuale: Situazione Button
Da Sinistra: 16 millimetro
Dall’alto: 32 millimetro
Larghezza: 26 millimetri
Altezza: 9 millimetri
Allineamento Verticale: Centrato
Siccome non stiamo utilizzando un tema Responsive, tipo Bootstrap, come possiamo creare una grigliatura con delle card all’interno? Utilizzeremo la funzionalità dei report a colonne, dove è possibile definire un numero di colonne per riga. Ogni record occuperà una colonna sino a completare la riga per poi proseguire a quella successiva.
Tornando al progetto, prima di parlare di colonne dovremmo impostare la Master Query del Report Situazione. Questa volta utilizziamo il documento come sorgente dati e precisamente il documento Prenotazione, in quanto le card mostrano riferimenti di prenotazione.
Albero di progetto, Videata Situazione, Libro Situazione, doppio clic sulla Master Query: impostiamo come sorgente from il documento Prenotazione e come colonne ASTERISCO + <INVIO> così da includerle tutte.
Passiamo alla Pagina Mastro per distanziare, anche in questo caso, Corpo Pagina da Testata Pagina: doppio clic sulla Pagina Mastro ed apportiamo la modifica.
L’oggetto Report Situazione possiede troppe sezioni: possiamo eliminare Intestazione Report, Piede Pagina e Piede Report.
Dedichiamoci alla Sezione che conterrà la card precisamente la sezione Dettaglio: doppio clic per modificare le proprietà.
Decidiamo di creare card con una altezza di 50 millimetri, un numero di colonne pari a 2 e uno spazio di 5 millimetri tra colonne. Confermiamo e vediamo il risultato in progettazione.
Non ho creato più colonne, perché andremo a modificare il numero di colonne a runtime, a seconda della dimensione del browser. Ecco, anzi, a tale scopo creiamo una funzione che ritorna il numero di card da prevedere a seconda della dimensione del contenitore.
Quindi, Albero di progetto, Videata Situazione, Tasto destro Aggiungi Procedura.
//La funzione ritorna un valore intero e ha in input la larghezza del contenitore
Int getNumColonne(int contentWidth) {
Int lgCard = 0
Int numColonne = 0
//Decidiamo di avere le card di 300 millimetri di larghezza
lgCard = 300
numColonne = tointeger(contentWidth / lgCard)
//Se ottengono meno di 1 colonna riporto il valore a 1
if (numColonne < 1) {
numColonne = 1
}
Return numColonne
}
Useremo questa funzione tra poco negli eventi per la stampa del libro.
Prepariamo ora il contenuto della Card. Aggiungiamo una prima box che servirà a fare da sfondo alla card: disegniamo un rettangolo all’interno della sezione tenendo il tasto SHIFT premuto. Al rilascio assegniamo come identificativo Card.
Ora, doppio clic sulla box Etichetta Card e modifichiamo le proprietà:
Ridimensionamento Orizzontale: Adatta
Ridimensionamento Verticale: Adatta
Stile Visuale: Situazione Sfondo
Da Sinistra: 1 millimetro
Dall’alto: 2 millimetro
Larghezza: 43 millimetri
Altezza: 41 millimetri
Confermiamo: la card di sfondo è pronta. Dobbiamo solo eliminare lo span contenuto all’interno.
Ora, all’interno di questa Card trovano posto 3 Box con i valori, 1 Box con un Pulsante e 1 Box con una Icona.
Espandiamo il ramo della Master Query del Report Situazione e trasciniamo i campi di interesse, sempre con il tasto SHIFT premuto (vi ricordo che, se non premete il tasto SHIFT, otterrete 2 Box: una con il valore e una con l’etichetta). Trasciniamo la colonna Nominativo, la colonna Arrivo, la colonna Totale Prenotazione.
Passiamo alla formattazione delle box appena create: io, ovviamente, vi suggerisco dei valori e voi potete disporre le informazioni un po’ come desiderate.
Box Nominativo doppio clic:
Ridimensionamento Orizzontale: Adatta
Stile Visuale: Situazione H3
Da Sinistra: 3 millimetro
Dall’alto: 4 millimetro
Larghezza: 39 millimetri
Altezza: 10 millimetri
Confermo e passo al Box Arrivo:
Ridimensionamento Orizzontale: Adatta
Stile Visuale: Situazione H5
Da Sinistra: 3 millimetro
Dall’alto: 15 millimetro
Larghezza: 39 millimetri
Altezza: 6 millimetri
Ultima box Totale Prenotazione:
Ridimensionamento Orizzontale: Adatta
Stile Visuale: Situazione H3
Da Sinistra: 3 millimetro
Dall’alto: 23 millimetro
Larghezza: 39 millimetri
Altezza: 5 millimetri
Per completare la card mancano 2 elementi, un'immagine del lucchetto e un pulsante. L’immagine la trovate nella cartella custom images. (Se non trovate l’immagine, potete scaricare il materiale didattico della lezione precedente)
Quindi, Toolbar di progettazione, pulsante immagine, un clic e disegnamo un quadrato. Il file dell’immagine si chiama my_lock_close.png.
Dico subito, l’immagine PNG non sempre viene mostrata in progettazione, per un problema relativo ai formati png. In esecuzione andrà tutto a posto.
Modifichiamo subito le proprietà. Doppio clic su my_lock_close.
Stile Visuale: Situazione Icon
Da Sinistra: 3 millimetro
Dall’alto: 32 millimetro
Larghezza: 9 millimetri
Altezza: 9 millimetri
Per concludere dobbiamo aggiungere il bottone, il bottone che è un falso bottone, in quanto, non è che una box opportunamente stilizzata con del CSS. Quindi, Toolbar di progettazione, pulsante dell’Etichetta e disegniamo, anche in questo caso, un’area rettangolare a fianco dell’icona.
Assegniamo come identificativo Button Dettagli e confermiamo.
Anche questo oggetto va stilizzato quindi entriamo nelle proprietà con un doppio clic:
Ridimensionamento Orizzontale: Adatta
Stile Visuale: Situazione Button
Da Sinistra: 16 millimetro
Dall’alto: 32 millimetro
Larghezza: 26 millimetri
Altezza: 9 millimetri
Allineamento Verticale: Centrato
Con la definizione grafica della Card dovremmo esserci. Mancherebbe il titolo, il titolo nella Sezione Intestazione Pagina: possiamo creare una box ed applicare il titolo Situazione, per esempio. Quindi, disegniamo la box Situazione e poi entriamo subito col doppio clic nelle proprietà e applichiamo come ridimensionamento orizzontale Adatta e lo stile uguale a Servizi Titolo.
Ancora un aspetto grafico e poi passiamo ai dati. I riquadri a sinistra dovrebbero rimanere con una Larghezza Fissa così come decisa in progettazione: è una impostazione presente sia nel pannello che nel libro.
Quindi, Libro Servizi, doppio clic: attiviamo il flag Larghezza Fissa.
Pannello Filtro Situazione, doppio clic: anche in questo caso attiviamo il flag Larghezza Fissa. Siccome siamo nelle proprietà del pannello, cambiamo anche lo Stato Iniziale in Trova dati (non modificando lo stato, a runtime, il pannello rimarrebbe in ricerca e sarebbe inutilizzabile). Possiamo confermare.
Poi, nel pannello è presente un campo, idAppartamento, che andrebbe decodificato con una Lista Valori. Quindi, Campo di Pannello, Tasto destro, Aggiungi Query, Lista Valori.
La query recupera i dati dalla tabella Appartamenti, nelle colonne impostiamo l’Id e il Nome. Aggiungo anche un Order By: tasto destro, Order By Nome.
Ricordo che per impostare la decodifica automatica del campo, è necessario attivare il flag Lookup Automatico presente nelle proprietà. Quindi, campo di pannello idAppartamento, Lookup Automatico e siccome al variare del valore dell’idAppartamento vogliamo eseguire il refresh del Libro, impostiamo anche il flag attivo. Diciamo che questa impostazione è una impostazione che dovremmo dare anche a Data Situazione e alla Tipologia.
Allora, riordiniamo un attimo le idee e pensiamo a cosa dovrebbe succedere a runtime. L’utente modifica un campo di pannello, i dati del libro devono aggiornarsi recuperando le informazioni adeguate.
Per ora non abbiamo implementato questo aspetto, ma a dire il vero non è neanche così complicato, perché basta modificare la Master Query del Report Situazione, includendo nella porzione Where delle condizioni di filtro che facciano riferimento alla tabella IMDB sottesa al pannello del filtro.
Per cui, Albero di progetto, Libro Situazione, Master Query del Report.
Sulla riga from digitiamo where.
//La prima condizione idAppartamento (Campo Query) deve essere uguale a idAppartamento della tabella FiltroSituazione
idAppartamento = FiltroSituazione.idAppartamento or length(nullvalue(FiltroSituazione.idAppartament,’’)) = 0
//Seconda condizione più complessa: sono 3 condizioni in OR
( Tipologia = TipoArrivo and getDate(Arrivo) = DataSituazione)
OR
( Tipologia = TipoPartenza and getDate(Partenza) = DataSituazione)
OR
( Tipologia = TipoPresenza and between(DataSituazione, getDate(Arrivo) ,getDate(nullvalue(Partenza,Today)))
Il framework di Instant Developer prevede che, quando i valori dei campi di una tabella IMDB, inclusi in una WHERE, cambiano, tutte le Query di riferimento devono essere rieseguite in automatico. Bè, Ottimo, nel nostro caso!! Cambiando i dati nel pannello, variano i valori dei campi della IMDB ed essendo i campi inclusi nella Where del Report, la query verrà rieseguita, con la conseguente ristampa del Libro.
Quindi tutto risulta tutto concatenato, senza aver scritto una riga di codice.
Dobbiamo gestire solo l’ultimo aspetto: cioè, il numero delle colonne variabili a seconda dello spazio disponibile e la relativa stampa del libro Situazione.
Definiamo una variabile globale alla videata: quindi, Videata Situazione, Tasto destro, Aggiungi Variabile Globale.
Assegniamo come Nome NumColonne e come Tipo di dati Integer.
Quando sarà il momento opportuno per stampare il Libro Situazione?
Abbiamo già visto che al variare dei dati nel pannello filtro, il libro viene ristampato; solo che dobbiamo anche stamparlo all’avvio, o meglio, stamparlo all’avvio e tutte le volte che la videata viene ridimensionata.
Intercettiamo l’evento di Load della videata:
Event Load() {
//Valori di partenza della IMDB
DATA SITUAZIONE = TODAY
TIPOLOGIA = TIPO PRESENZA
//Impostiamo un numero base di Colonne
numColonne = 3
//Impostiamo il report Situazione in uno stato di congelamento (per evitare che inizi a stampare qualcosa quando ancora non sappiamo il numero preciso di colonne)
ReportSituazione.freezed = TRUE
}
Quindi, ho congelato il report perché riesco a calcolare il numero di colonne corretto in un altro evento, non nell’evento di Load, bensì nell’evento On Resize della videata: l’evento ovviamente scatta ogni volta che si ridimensiona la videata ed una volta dopo il Load.
Intercettiamo l’evento. Videata Situazione, Tasto destro, Eventi, On Resize:
Event OnResize() {
//Notate l’evento ha come parametri le dimensioni attuali della videata
Int lgContent = 0
lgContent = NewWidth – FiltroSituazione.panelWidth();
//Devo considerare la larghezza del pannello sinistro
This.NumColonne = getNumColonne(lgContent)
If (Report.freezed) {
//Stampo
Report.freezed = false;
LibroSituazione.print(1, -1)
}
Else {
LibroSituazione.refresh(1, -1)
}
}
Il metodo Refresh, a differenza del metodo print, esegue solo un refresh dell’interfaccia, senza ricaricare i dati dal database.
La variabile NumColonne, che qui abbiamo impostato, è però da assegnare alla Sezione Dettaglio del report negli eventi di Formattazione: quindi, Sezione Dettaglio, Tasto Destro, Eventi, Before Formatting.
Impostiamo per la Sezione Dettaglio il numero delle colonne desiderate:
SezioneDettaglio.columnNumber = NumColonne
Un’ultima correzione al progetto, una correzione che non c'entra con il libro, bensì con il documento, precisamente il documento di Prenotazione: nell’evento OnEndTransaction, cioè quando vengono modificati i dati della prenotazione, in questo evento manca una porzione per aggiornare il nominativo al variare di idUtente. Lo inseriamo:
If (wasModified(idUtente)) {
Select into variabled
vNominativo = nominativo
From Utenti
Where id = idUtente
Nominativo = vnominativo
}
Prima di testare la nuova videata, dobbiamo popolare un attimo il database con alcune prenotazioni. Io inserisco un po di dati, vi chiedo se volete eseguire anche voi la stessa operazione e vi aspetto al prossimo video per l’esecuzione e il test del nostro progetto.
Ultima modifica: 15/06/2021 / Validità: da 21.0.8100
