Le strutture binarie classiche di 4D consentono di definire i fogli di stile per specificare il carattere, la dimensione del carattere e lo stile del testo da utilizzare nei moduli per le piattaforme macOS e Windows. I database di progetto consentono di spingersi ancora più in là, definendo le proprietà di un pulsante a 4 stati o specificando il colore e il bordo di tutti gli oggetti linea o addirittura impostando l’altezza dell’intestazione di tutte le caselle di riepilogo di un’applicazione! Ispirandosi alla grammatica e alla sintassi dei CSS, 4D li ha adattati per soddisfare le esigenze specifiche dei moduli dei database dei progetti 4D. Grazie ai fogli di stile, è possibile configurare tutte le proprietà per creare moduli davvero accattivanti. Questo post vi mostra come fare!
Esempio di database con fogli di stile
Piattaforma
Nei database di progetto è possibile definire fogli di stile individuali per entrambe le piattaforme (Windows o macOS) e un foglio di stile “generale”.
Perché si dovrebbero volere fogli di stile diversi per ogni piattaforma? Perché spesso su macOS si usa un carattere/una dimensione di carattere diversa da quella usata su Windows. D’altra parte, il colore del testo è spesso identico per entrambi.
Ora, è possibile definire gli stili comuni nel file “stylesheets.css” e gli stili specifici per ogni piattaforma nei propri file: “stylesheets_mac.css” e “stylesheets_windows.css”.
Proprietà
Una delle principali rivoluzioni nei database di progetto è che tutte le proprietà supportate dagli oggetti modulo possono essere utilizzate nei fogli di stile.
Ad esempio, è possibile creare una classe “buttonAction” per creare pulsanti a 4 stati con l’aspetto di “barra degli strumenti”, testo grigio e non focalizzabile:
.buttonAction {
iconFrames: 4;
style: toolbar;
stroke: grey;
focusable: false;
}
In questo modo è più facile progettare i moduli per l’applicazione, mantenendo lo stesso design grafico.
Selettori
Un altro grande cambiamento è la possibilità di creare fogli di stile per classe, per tipo di oggetto, per nome di oggetto o per attributi.
Selettore del tipo di oggetto
Con il selettore del tipo di oggetto (equivalente al selettore di elementi CSS), è possibile definire proprietà comuni applicabili a tutti gli oggetti del database. Ad esempio, tutte le caselle di riepilogo devono avere un’intestazione di 2 righe, le righe vuote non devono essere visualizzate e i colori di sfondo delle righe devono essere gainsboro e whitesmoke:
listbox {
headerHeight: 2em;
hideExtraBlankRows: true;
fill: gainsboro;
alternateFill: whitesmoke;
}
Grazie a questo selettore, è possibile definire il proprio look and feel per gli oggetti del modulo.
Selettore di attributi
Con il selettore di attributi, è possibile definire un foglio di stile in base al valore di una proprietà.
Ad esempio, nei moduli di input/output dei dati, ho dei pulsanti per aggiungere, modificare o cancellare i record. Tutti questi pulsanti utilizzano la stessa icona, lo stesso titolo e gli stessi suggerimenti.
Perché non creare un foglio di stile per i pulsanti di azione e designare un valore specifico per la proprietà azione? Ad esempio, se la proprietà azione è impostata su “editSubrecord”:
.buttonAction[action=editSubrecord] {
icon: url("/RESOURCES/Images/Buttons/edit.png");
tooltip: ":xliff:button_tip_EditRecord";
text: ":xliff:button_EditRecord" !important;
}