Personalizzare l'interfaccia di pannello

Scopriamo come personalizzare l’interfaccia di pannello conoscendone le proprietà relative. In primis vi ricordo che abbiamo 2 layout da sistemare, quello in Lista e quello in Dettaglio: partiamo dalla Lista.

Per selezionare una colonna dobbiamo fare clic sulla prima riga dei dati e non sull’intestazione, quindi se facciamo clic sulla prima riga della colonna Denominazione si seleziona il campo di Pannello Denominazione, se faccio clic su ISOSTATO seleziono il campo di pannello ISOSTATO.

E’ possibile definire la larghezza delle colonne con i quadrati di ridimensionamento: il metodo corretto sarebbe quello di scegliere, in progettazione, una dimensione della videata (è possibile spostando la cornice esterna) e ridimensionare le colonne in modo tale che siano interamente visibili senza mai far comparire delle barre di scorrimento. Ora ho allargato troppo e sono comparse delle barre di scorrimento: il pannello possiede delle proprie barre di scorrimento native, se esageriamo con le dimensioni delle colonne compaiono le barre di scorrimento anche del riquadro (quindi doppie).

Ora notiamo un altro aspetto: lo spazio inferiore tra la fine della lista e il bordo di videata: tale spazio viene sempre mantenuto, anche nel caso, in esecuzione, applicassimo un ridimensionamento della videata quello spazio rimarrebbe: se non si desidera dobbiamo renderlo minimo usando i quadrati di ridimensionamento del pannello (trascino la lista verso il basso).

Prima di passare alla sistemazione del Layout Dettaglio torno su una affermazione di poc'anzi: nel caso applicassimo un ridimensionamento alla videata: significa quindi che in esecuzione la videata non comparirà con le dimensioni di progettazione ma andrà ad estendersi per occupare tutta la finestra browser disponibile; ovviamente questa è una opzione, opzione però’ impostata automaticamente: visualizziamo le proprietà della Videata -> Albero di progetto -> Videata Località -> doppio clic (se la videata non fosse in primo piano nell’area di progettazione il primo doppio clic mostrerebbe la videata ed il secondo doppio clic le proprietà).

Tra le proprietà troviamo Ridimensionamento nelle due versioni L come Larghezza e A come Altezza: sono definite entrambi come Estendi, quindi la videata sarà estesa alla finestra browser; possiamo scegliere Adatta o Nessuno; beh Nessuno è chiaro, non si ridimensiona quindi compare come definito in progettazione e con Adatta? la videata seguirà sempre la dimensione della finestra Browser.

Parlando ancora di ridimensionamento, quindi abbiamo la videata che si Estende e il Pannello ? Ogni oggetto ha una proprietà di ridimensionamento: doppio clic sul Pannello per la scheda Proprietà e troviamo Ridimensiona, Orizzontale e Verticale impostato su Adatta, cioè il pannello si Adatta alle dimensioni del Riquadro Videata Padre: quindi occuperà tutta la zona.

Rimaniamo sulla scheda del pannello: troviamo 2 flag (Layout Dettaglio e Layout Lista): determinano come il pannello sarà mostrato in esecuzione. Disattivando un Layout in progettazione non sarà utilizzabile in esecuzione, e non sarà attivabile in esecuzione: se abbiamo disattivato in progettazione il Layout Dettaglio, l’utente in esecuzione non potrà andare in Dettaglio e non potremo farlo neanche da codice e ricordo non potremo neanche riattivare l’opzione da codice: quindi in progettazione devo decidere come il pannello dovrà mostrarsi in esecuzione.

Nella parte destra abbiamo 4 flag che determinano le funzionalità operative del pannello: Può aggiornare, Può inserire, Può cancellare, Può ricercare: rappresentano le 4 operazioni che sarà possibile eseguire sui dati: aggiornamento, inserimento, cancellazione e ricerca.

Disattivando una funzionalità operativa in progettazione, sarà possibile riattivarla, via codice, in esecuzione; il comportamento è quindi differente rispetto a quello appena visto del Layout: l’operatività posso modificarla a runtime.

Nella parte centrale troviamo l’opzione Stato Iniziale: all’apertura della Videata, il pannello in quale stato operativo dovrà trovarsi? di default è impostato come Ricerca QBE, le altre possibilità sono: Trova Dati, Nuova riga pronta per l’inserimento. (le altre le tralascio perchè non sono quasi mai usate).

Quindi il pannello potrà essere in modalità di Ricerca: vuole dire che non viene eseguita la query di caricamento dei dati ma si attende che l’utente inserisca delle condizioni di filtro (QBE Query ByExample Query con criteri) e prema sulla toolbar il pulsante Trova Dati.

Oppure altra modalità Trova Dati dove i dati vengono subito caricati all’apertura della videata, oppure come terza opzione Nuova Riga, il pannello si troverà su una nuova riga per fare inserire un nuovo elemento.

L’opzione Ricerca QBE è stata depotenziata dalla versione 19 di Foundation: ora esistono 2 modalità di ricerca:

• Ricerca classica dove la lista viene svuotata dei dati, l’utente inserisce i criteri e preme il pulsante sulla toolbar Trova Dati (è rappresentata da questa immagine di esecuzione)
• Ricerca Smart, dove la lista rimane con i dati e la prima riga della lista consente sempre l’inserimento di filtri di ricerca (questa altra immagine ne è un esempio)

Capite che nella versione Ricerca Smart i dati sono comunque recuperati, perché sono sempre visibili, quindi la voce Stato Iniziale Ricerca QBE dipende dalla impostazione globale della modalità di ricerca: di default è impostata la Ricerca Smart. (in seguito conosceremo come modificare l’impostazione).

L’area denominata Proprietà Visuali consente di attivare o disattivare alcuni elementi del pannello, Mostra Toolbar, Riordina Colonne, Ridimensiona colonne.

Torniamo al pannello e passiamo al Dettaglio: (tasto destro del mouse Mostra Dettaglio): questa è la visualizzazione singola e dobbiamo sistemare i campi di pannello come desideriamo: se notate posseggono già una etichetta: etichetta che potremo mostrare a sinistra, sopra o nascondere). Qui non ho molto da dirvi cercate di spostare e ridimensionare gli elementi come meglio credete.

Abbiamo visto le proprietà di Videata, di Pannello e quindi arriviamo alle proprietà dei campi di pannello: Doppio clic sul campo di pannello desiderato così scopriamo cosa si può’ definire.

Si può’ assegnare un titolo che è l’etichetta, un watermark che sarà visibile quando il campo non ha un valore, poi i flag Visible, Abilitato appunto per determinare se il campo è visibile, e se è possibile modificarne il contenuto. Il flag Attivo lo tralasciamo un attimo e passo all’area del Ridimensionamento: certo anche il campo di pannello ha un ridimensionamento che potrà essere differente per quando si trova in dettaglio rispetto alla Lista: notate il campo Denominazione si Adatta in lista quindi cercherà di espandersi per riempire tutto il pannello.

Importante è il flag Mostra sotto a Dettaglio e sotto a Lista: posso avere dei campi visualizzati in dettaglio ma non il Lista o viceversa, i flag da modificare sono proprio questi due.
Queste sono alcune delle impostazioni che possiamo applicare per la creazione dell’interfaccia, molte altre le conosceremo in seguito: prima di concludere vi lascio con un esercizio: creare 2 nuove videate basate sul documento Servizio e sul documento Utenti; nella prossima lezione queste due videate saranno già presenti.