Evoluzione degli oggetti di forma

Per consentirvi di realizzare le interfacce più belle, continuiamo a migliorare gli oggetti modulo. Da 4D v19 R6, è possibile definire un bordo arrotondato per gli oggetti modulo di testo statico e di testo in entrata.

Con 4D v20, sono disponibili nuove possibilità.

• Per i pulsanti, i pulsanti di opzione e le caselle di controllo sono state aggiunte nuove impostazioni per il testo e l’icona.
• Per i pulsanti di opzione e le caselle di controllo, il numero di stati per l’icona è stato migliorato per consentire una migliore resa per l’utente finale.

Esempio HDI

Posizione del testo e dell’icona

Allineamento del testo

La proprietà“Allineamento del testo” è ora applicabile ai pulsanti, ai pulsanti di opzione e alle caselle di controllo. È possibile definire l’allineamento del testo con l’elenco di proprietà, il CSS e il comando OBJECT SET HORIZONTAL ALIGNMENT e con il comando

Elenco proprietà:

Esempio CSS:

.align {
    textAlign : destra;
}

Esempio di codice:

Al comando OBJECT SET HORIZONTAL ALIGNMENT è possibile passare una delle tre costanti: Align left, Align right, e Align center.

OBJECT SET HORIZONTAL ALIGNMENT (*; "pulsante"; Align center )

Titolo dell’immagine degli abbracci

È stata aggiunta la nuova proprietà“Image hugs title” per i pulsanti, i pulsanti di opzione e le caselle di controllo.

Quando il valore di questa proprietà è false, l’immagine viene posizionata secondo la proprietà “Title/ImagePosition” sul bordo del pulsante. Quando il valore di questa proprietà è true, l’immagine viene posizionata direttamente adiacente al titolo in base alla proprietà “Title/ImagePosition”.

Questa proprietà può essere impostata con l’elenco delle proprietà, il CSS e il comando OBJECT SET FORMAT e il comando.

Elenco delle proprietà:

Esempio di CSS:

.hug {
    imageHugsTitle : false;
}

Esempio di codice:

Per formattare i pulsanti, con il comando OBJECT SET FORMAT si deve passare una stringa che rispetti la seguente sintassi: “title; picture; background; titlePos; titleVisible; iconVisible; style; horMargin; vertMargin; iconOffset; popupMenu; hyperlink; numStates; imageHugsTitle“. Se non si vuole modificare un valore, non è necessario passarlo.

Per modificare solo la proprietà imageHugsTitle:

OBJECT SET FORMAT (*; "button"; ";;;;;;;;;;;;;0")

Risultato

Ecco diversi esempi di ciò che possiamo ottenere:

Numero di stati delle icone

Per i pulsanti di opzione e le caselle di controllo, prima di 4D v20, è possibile definire un’icona a quattro stati per gli stati Vero, Falso, Rollover e Disattivo.

Per una migliore esperienza dell’utente finale, in alcuni casi è necessario che lo stato di rollover o di disattivazione consideri lo stato vero o falso. È quindi possibile utilizzare un’icona con 2 stati fino a 6 stati.

Avanti…

Per ulteriori dettagli, consultate questa funzione con l’HDI e la documentazione! E, come sempre, sono ansioso di leggere i vostri commenti.