Assegna agli oggetti del tuo modulo il colore del bordo che meritano

Un colore del bordo ben scelto può rendere un modulo più intuitivo e conferirgli un aspetto più curato e coerente. Che tu voglia evidenziare un campo importante, distinguere un gruppo di oggetti o semplicemente allinearti all’identità visiva della tua applicazione, i bordi possono rappresentare un elemento efficace nella progettazione dell’interfaccia utente.

A partire da 4D 21 R5, è possibile definire il colore del bordo indipendentemente dal colore del carattere per gli oggetti che contengono testo, come il testo statico e gli oggetti di input. Il colore del bordo è disponibile anche per gli oggetti che non hanno un colore del testo, come i sottoformulari e gli spinner, offrendovi un controllo coerente sui bordi su una gamma più ampia di oggetti del modulo. Configuratelo nell’Editor dei moduli, aggiornatelo dinamicamente con il codice 4D o applicatelo tramite CSS.

Impostazione del colore del bordo nell’Editor dei moduli

La nuova proprietà “border color” assegna a ciascun oggetto supportato un colore del bordo dedicato. Selezionate un oggetto, quindi scegliete il colore nella sezione Bordo dell’Inspector.

Per gli oggetti che dispongono di un colore del carattere, come il testo statico o gli oggetti di input, il colore del bordo può ora essere definito in modo indipendente. Per gli oggetti privi di colore del testo, come i sottoformulari o i selettori a rotazione, la proprietà consente semplicemente di controllare direttamente il bordo.

La proprietà funziona con gli stili di bordo “semplice” e “punteggiato”. Per gli oggetti che hanno un colore del carattere, il valore predefinito è “Come carattere”. Per gli oggetti senza colore del testo, il valore predefinito è “Automatico”. Questi valori predefiniti mantengono l’aspetto dei moduli esistenti, consentendoti al contempo di definire un colore del bordo separato ogni volta che ne hai bisogno.

Ad esempio, è possibile mantenere un colore del testo intenso utilizzando un contorno più tenue, assegnare a un gruppo di campi di immissione un colore di risalto comune oppure applicare un colore del bordo coerente a diversi tipi di oggetti del modulo senza modificarne le altre proprietà visive.

Aggiornamento dei bordi in fase di esecuzione

Lo stato dell’applicazione può ora influenzare il bordo indipendentemente dagli altri colori dell’oggetto. È possibile evidenziare l’input corrente, segnalare un problema di convalida o attirare l’attenzione su un elenco che richiede un’azione. Lo stesso approccio può essere utilizzato con oggetti che non hanno un colore del testo. Ad esempio, è possibile utilizzare un colore specifico per il bordo per distinguere visivamente un sottomodulo o evidenziare un selettore quando richiede attenzione.

Ad esempio, quando un utente convalida un modulo, è possibile segnalare immediatamente un valore non valido modificando il colore del bordo del campo di immissione e visualizzando un messaggio aggiuntivo accanto ad esso.

// Example called when the user validates the form.
If (Not(Is valid email(Form.email)))
    OBJECT SET BORDER STYLE(*; "email"; Border plain)
    OBJECT SET RGB COLORS(*; "email"; "#D34145"; ""; ""; "#F89794")
    OBJECT SET VISIBLE(*; "labelEmailError"; True)
Else
    // Restore the application's normal input border color.
    OBJECT SET BORDER STYLE(*; "email"; Border plain)
    OBJECT SET RGB COLORS(*; "email"; "#FFFFFF"; ""; ""; "#BEDAFF")
    OBJECT SET VISIBLE(*; "labelEmailError"; False)
End if

È inoltre possibile utilizzare il colore del bordo per far corrispondere il bordo esterno della casella di elenco alle sue linee di griglia interne, creando un aspetto coerente in tutto l’elenco.

// Set the list box's border color.
OBJECT SET BORDER STYLE(*; "ordersList"; Border dotted)
OBJECT SET RGB COLORS(*; "ordersList";""; ""; ""; "#336699")
// Use the same color for the inner grid lines.
LISTBOX SET GRID COLOR( *; "ordersList"; "#336699"; True; True)

È inoltre possibile recuperare il colore del bordo corrente quando la logica del modulo richiede di preservare o riutilizzare lo stato visivo di un oggetto.

// Read the current colors of a hierarchical list.
OBJECT GET RGB COLORS(*; "categories"; $fontColor; $backgroundColor; $alternateColor; $borderColor)

Mantenere uno stile coerente con i CSS

Se il progetto utilizza già classi CSS per lo styling dei moduli, “borderColor” si inserisce nello stesso flusso di lavoro. Definire insieme lo stile e il colore del bordo, quindi riutilizzare la classe su tutti gli oggetti che devono condividere lo stesso linguaggio visivo.

input {
    borderStyle: plain;
    borderRadius: 4;
    borderColor: #0093F5;
}

.secondary-list {
    borderStyle: dotted;
    borderColor: #336699;
}

Il CSS semplifica la gestione delle regole di presentazione per le versioni chiara e scura o l’applicazione di uno stile visivo coerente in tutti i moduli senza dover modificare ogni oggetto singolarmente.

Un linguaggio visivo più chiaro per i moduli

La nuova proprietà `border-color` offre un controllo più preciso sugli oggetti dei moduli:

• Imposta un colore di bordo specifico per gli oggetti del modulo, indipendentemente dal loro colore del carattere, ove applicabile.
• Configura la proprietà nell’Editor dei moduli o tramite CSS.
• Leggi e aggiorna i colori dei bordi in fase di esecuzione con “OBJECT SET RGB COLORS” e “OBJECT GET RGB COLORS“.
• Mantieni l’aspetto esistente dei moduli con i valori predefiniti “likeFont” e “automatic”.

Ora è possibile utilizzare i bordi come elemento intenzionale del linguaggio visivo del modulo, indipendentemente dal fatto che siano configurati nell’Editor dei moduli, definiti tramite CSS o aggiornati dinamicamente dalla logica dell’applicazione.