Personalizza pulsanti, pulsanti di opzione e caselle di selezione con le proprietà di sfondo e bordo

Immagina di creare una barra degli strumenti con pulsanti colorati o un pannello delle impostazioni con pulsanti di opzione e caselle di controllo stilizzati. Non servono immagini personalizzate né grafica complessa, basta un pulsante blu con angoli arrotondati e un bordo discreto.

Fino ad ora, anche la più semplice personalizzazione visiva richiedeva la creazione di risorse immagine dedicate.

A partire da 4D 21 R5, è possibile impostare il colore di sfondo e le proprietà del bordo direttamente su pulsanti, pulsanti di opzione e caselle di controllo con stile personalizzato.

Colora direttamente i tuoi oggetti

In precedenza, per personalizzare il colore di sfondo di un pulsante, un pulsante di opzione o una casella di controllo con stile personalizzato era necessario utilizzare un’immagine di sfondo. Ora è possibile definire un colore di sfondo nell’Editor di moduli o modificarlo in fase di esecuzione utilizzando i comandi 4D.

Per i pulsanti, è stato introdotto un nuovo stile di bordo “personalizzato” per garantire la retrocompatibilità. Consente di utilizzare la nuova proprietà di sfondo senza modificare l’aspetto dei pulsanti esistenti.

// Set a blue background on a custom-styled button
OBJECT SET BORDER STYLE(*; "myButton"; Border custom)
OBJECT SET RGB COLORS(*; "myButton"; 0xFFFFFF; 0x1E90FF)

// Set a blue background on a custom-styled check box
OBJECT SET RGB COLORS(*; "myCheckBox"; 0xFFFFFF; 0x1E90FF)

Il valore predefinito è “none”, che mantiene l’aspetto dei moduli esistenti. Quando è presente un’immagine di sfondo, questa viene visualizzata sopra il colore di sfondo, consentendo di combinare sfondi colorati con icone o immagini trasparenti.

Aggiungere bordi in pochi secondi

Non è più necessario disporre di risorse immagine dedicate solo per aggiungere un bordo. Le nuove proprietà relative ai bordi consentono di personalizzare direttamente l’aspetto di pulsanti, pulsanti di opzione o caselle di controllo con stile personalizzato:

• Colore del bordo
• Larghezza del bordo
• Raggio degli angoli

Che si preferiscano contorni discreti o pulsanti di azione arrotondati, ora tutto può essere configurato direttamente dall’Editor dei moduli, tramite CSS o codice 4D.

E quando si combinano gli angoli arrotondati con un’immagine di sfondo o un colore di sfondo, 4D ritaglia automaticamente lo sfondo in base al bordo. Non sono necessari mascheramenti né modifiche alle immagini.

Per i pulsanti, queste nuove proprietà sono disponibili solo quando lo Stile del bordo è impostato su “personalizzato”, preservando l’aspetto dei moduli esistenti.

// Set a border radius on a custom-styled button 
OBJECT SET BORDER STYLE(*; "myButton"; Border custom) 
OBJECT SET CORNER RADIUS(*; "myButton"; 2) 

// Set a border radius on a custom-styled check box 
OBJECT SET CORNER RADIUS(*; "myCheckBox"; 2) 

Definisci lo stile una volta sola con i CSS

Se la vostra applicazione utilizza già i CSS, queste nuove proprietà si integrano naturalmente nello stile esistente. Definite uno stile una sola volta e applicatelo ovunque ne abbiate bisogno.

@media (prefers-color-scheme: light) {
    .custom-style-class {
        borderStyle: custom;
        borderRadius: 10;
        borderFillColor: #e0f7fa;
        borderColor: #00ACC1;
        customBorderX: 1;
        iconFrames: 4;
        textPlacement: right;
        imageHugsTitle: false;
        stroke: #00ACC1;
        textAlign: center;
    }
}
@media (prefers-color-scheme: dark) {
    .custom-style-class {
        borderStyle: custom;
        borderRadius: 10;
        borderFillColor: #164B52;
        borderColor: #45A9B9;
        customBorderX: 1;
        iconFrames: 4;
        textPlacement: right;
        imageHugsTitle: false;
        stroke: #45A9B9;
        textAlign: center;
    }
}

Ciò semplifica la creazione di un’identità visiva coerente in tutti i moduli, riducendo al contempo il numero di risorse immagine da gestire.

Stile più semplice, meno manutenzione

Gli oggetti basati su immagini rimangono la scelta migliore quando è necessario un aspetto diverso per ogni stato. Tuttavia, nei numerosi casi in cui è sufficiente un semplice pulsante colorato, un pulsante di opzione o una casella di controllo, le proprietà di sfondo e bordo offrono una soluzione molto più rapida e semplice.

Che li configuri nell’Editor dei moduli, li personalizzi con i CSS o li aggiorni tramite codice, il risultato è lo stesso: meno risorse immagine da gestire e più tempo da dedicare allo sviluppo dell’applicazione invece che alla modifica della grafica.