Banche dati del progetto: abbellire i moduli con i fogli di stile

Novembre 8, 2019 3 Tempo di lettura

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;
}