Report di Interfaccia

La realizzazione di report di interfaccia è un mix di programmazione e progettazione grafica: a tale scopo ho preparato immagini png, regole css e stili visuali che servono a replicare il prototipo.

Per seguire in modo ottimale questa lezione, vi consiglio di scaricare il progetto finale della lezione precedente, così avrete tutto l’occorrente grafico.

Iniziamo con la versione più semplice di Report di Interfaccia e precisamente l’elenco dei Servizi del riquadro inferiore sinistro.

Quali sono i dati che dovremo mostrare nell’elenco? Bè, i record della tabella Servizi. Quindi prepariamo la Master Query per il recupero: Albero di progetto, nella videata Situazione, Libro Servizi, Master Query del Report. Un doppio clic.

Digitiamo la tabella Servizi sulla riga from e come colonne impostiamo il campo Id e il campo Denominazione. Applichiamo anche un Order By, quindi: tasto destro, Order By su Denominazione.

Passiamo alle sezioni del Report, eliminando le sezioni che non ci interessano, come, ad esempio: Intestazione Report, Piede Pagina e Piede Report.

Facciamo un doppio clic sulla Pagina Mastro: riduciamoleggermente l’altezza di Corpo Pagina, in modo tale da distanziarla dalla Testata Pagina.

Torno al Report Servizi e nel Report Servizi impostiamo le box. Quindi, con la Toolbar di progettazione, possiamo iniziare con l’Immagine: faccio clic sul pulsante immagine, disegno un rettangolo o, meglio, un quadrato e andiamo a ricercare l’immagine nella cartella custom, l’immagine che si chiama redcheck.png .

Passiamo subito con un doppio clic sulla Box contenente l’immagine ed impostiamo alcuni valori. Come Larghezza e Altezza Immagine 6 millimetri, come valore Dall’alto controllate di avere 2 millimetri. Confermiamo.

Il resto dello spazio di questo libro viene occupato dalla Box Denominazione, quindi con la Master Query visibile trasciniamo il campo Denominazione servizio all’interno del report. Ricordiamoci di tenere premuto il tasto SHIFT, così viene creata solo una box.

Doppio clic anche sull’oggetto Denominazione e andiamo anche ad impostare alcuni parametri:

Ridimensionamento Orizzontale: Adatta

Stile Visuale: Servizio Testo

Altezza: 8 millimetri

Dall’alto: 1 millimetro

Allineamento verticale: Centrato

Confermiamo. Possiamo già vedere alcune modifiche. Vado ad allargarlo un pochettino. Possiamo vedere alcune modifiche in anteprima di progettazione. Dico alcune perché? Perché certe regole sono anche impostate esternamente per questo esercizio, cioè esternamente come file CSS e non possono essere renderizzate all’interno dall’interfaccia di progettazione.

Ma, a proposito, dove si trovano queste regole esterne? Dove ho scritto queste regole esterne? Bè, Albero di progetto, Applicazione YouB&B, Tasto Destro, Esplora directory Custom. Nella directory custom è presente il file custom.css e il file custom.css contiene alcune regole di personalizzazione.

Una regola, ad esempio, che ho creato, è la regola denominata bg-libro-servizi: serve per applicare uno sfondo omogeneo a tutto il libro Servizi. Quindi, questa classe possiamo applicarla alla proprietà Classe CSS del Libro. Quindi, torno nel progetto, Libro Servizi, doppio clic per entrare nelle sue proprietà e alla voce Classe CSS andiamo ad impostare bg-libro-servizi. Confermo.

Tornando adesso al Report, aggiungiamo nella parte di Intestazione pagina un titolo. Quindi, pulsante Etichetta della toolbar di progettazione, disegniamo un rettangolo e al rilascio impostiamo l’etichetta, l’etichetta Servizi. Quindi confermiamo.

Anche per questa, controlliamo subito le proprietà, quindi, doppio clic su Etichetta Servizi e andiamo a impostare:

Ridimensionamento Orizzontale: Adatta

Stile Visuale: Servizio Titolo

Altezza: 6 millimetri

Dall’alto: 0 millimetro

Allineamento verticale: Centrato

Ancora due accorgimenti:

• il primo per lo Stile Visuale applicato alla Sezione Dettaglio (in quanto io vorrei un colore di sfondo ad ogni mattoncino dei servizi) : quindi, doppio clic sulla Sezione Dettaglio ed imposto lo Stile Visuale Servizio Sfondo.
• Avendo applicato un colore di sfondo alla Sezione, è necessario mettere un distanziatore verticale, altrimenti otterremo un blocco unico con tutti i servizi. Quindi, a tale scopo, aggiungiamo una sezione al Report con una colorazione di sfondo trasparente. Tasto Destro sul Report, Aggiungi Sezione, come identificativo impostiamo Separatore e come Altezza 2 millimetri.

Dunque, non possiamo ancora compilare il progetto. Non possiamo ancora compilare il progetto in quanto manca il libro centrale, però possiamo almeno cominciare a creare una procedura globale che serva ad aprire la videata.

Quindi, Procedure globali, Tasto destro Aggiungi Procedura, il nome della procedura è openSituazione:

openSituazione() {

   Situazione.show();

}

Questa procedura va aggiunta al commandSet menu Principale, al commandSet SetOfferte: trascino openSituazione su Set Offerte. Doppio clic sul comando, così applichiamo il titolo che sarà Situazione.

Aspetto importante da considerare della nostra videata Situazione è che tutti i libri contenuti in una videata NON vengono stampati automaticamente, solo perché sono nella videata. Quindi, questo vuol dire che il Libro Servizi, per poter essere effettivamente visualizzato, deve essere stampato con il metodo print che conosciamo. Quindi potremmo fare la stampa nell’evento di Load della videata. Tasto destro sulla Videata Situazione, Eventi, Aggiungi Load:

Event Load {

   LibroServizi.print(1,-1)

}

Per vedere il risultato in esecuzione dobbiamo completare anche il libro centrale e per questo vi aspetto al prossimo tutorial.