Vi è mai capitato di essere sommersi da finestre di dialogo di conferma, caselle di avviso e finestre di aiuto contestuali che rendono quasi impossibile individuare la finestra del modulo su cui stavate lavorando? Non sarebbe più facile rimanere sulla stessa pagina e vedere le bolle di aiuto che puntano direttamente all’obiettivo originale?
Questo è possibile grazie al componente 4D AJUI_Tip. Si tratta di un potente motore di tooltip basato sulle tecnologie disponibili in 4D, come ORDA, New Formula, SVG, SubForm, CALL FORM, per citarne alcune. In questo post del blog, metteremo in evidenza l’uso del componente e mostreremo come sia possibile progettare bellissimi tooltip per migliorare l’interfaccia utente delle applicazioni. Il link per il download si trova alla fine del post.
Cos’è AJUI_Tip
AJUI_Tip è un componente 4D che consente di generare e visualizzare dinamicamente i tooltip (suggerimenti) nel contesto di un modulo. Il componente offre diversi metodi per personalizzare e manipolare i suggerimenti tramite un oggetto e delle funzioni.
Il componente è composto da tre elementi:
- Una variabile immagine: Il componente costruisce l’immagine a partire da una serie di proprietà in linguaggio SVG. Il risultato è un insieme di calcoli basati su diversi criteri (dimensione del contenuto, padding, raggio, ecc.) che verranno utilizzati per disegnare il contorno del tooltip e la sua freccia. L’SVG può anche integrare una casella di testo e un pulsante (per chiudere il tooltip).
- Una sottomaschera: È possibile integrare nel tooltip un modulo del database principale. Il sottomaschera, se definito, prende il posto di una casella di testo.
- Una variabile oggetto: Mantiene le proprietà del tooltip durante le varie operazioni del componente.
Ciao mondo
L’impostazione del primo tooltip può essere riassunta in quattro passaggi:
- Innanzitutto, occorre richiamare il metodo di inizializzazione new AJUI_Tip per recuperare un oggetto e un’istanza con tutte le proprietà e le formule di un tooltip predefinito. Si consiglia di utilizzare direttamente la variabile “Form” per memorizzare l’istanza corrente, in modo da poter navigare facilmente tra il metodo e gli oggetti del form.
Form.Tip:= new AJUI_Tip
- Utilizzare le formule dell’oggetto per definire le proprietà dell’istanza del tooltip, in base alle proprie esigenze.
Form.Tip.TipName("test")
Form.Tip.TextLabel("Hello World")
- Definire un nome che rimarrà associato all’istanza del tooltip.
- Assicurarsi di definire un testo da visualizzare. Questo testo può essere stilizzato(ad esempio, parole o lettere in grassetto, corsivo o colore in una casella di testo).
- Infine, utilizzare la formula “mostra” per avviare la generazione dell’istanza di tooltip. Ad esempio, è possibile testarla su uno degli oggetti del modulo con un evento “On Clicked”.
Case of
: ( ) ()$evt=On Clicked
Form.Tip.show
End case
Seguendo i passi precedenti, si dovrebbe vedere qualcosa di simile all’immagine seguente. Congratulazioni, avete creato il vostro primo tooltip!
animare i tooltip
Che ne dite di rendere il vostro tooltip ancora più espressivo? AJUI_Tip consente di animare queste piccole bolle con diversi stili di animazione( ad esempio, dissolvenza in entrata e in uscita, lampeggiamento, salto, ecc.)
AJUI_Tip in profondità
Questo post ha appena scalfito la superficie di questo potente componente. Ulteriori dettagli e un tutorial passo-passo sul suo utilizzo e sulla sua configurazione sono disponibili qui. È anche possibile scaricarlo. Buon divertimento!