AJUI_Tip: Eine Tooltip-Engine für 4D

Wurden Sie schon einmal von Bestätigungsdialogen, Warnmeldungen und kontextbezogenen Hilfefenstern überflutet, die es fast unmöglich machten, das Formularfenster zu finden, an dem Sie gerade arbeiteten? Wäre es nicht benutzerfreundlicher, auf der gleichen Seite zu bleiben und Hilfeblasen zu sehen, die direkt auf das ursprüngliche Ziel zeigen?

Dies ist dank der 4D Komponente AJUI_Tip möglich. Es handelt sich um eine leistungsstarke Tooltip-Engine, die auf den in 4D verfügbaren Technologien wie ORDA, New Formula, SVG, SubForm, CALL FORM, um nur einige zu nennen, basiert. In diesem Blog-Beitrag stellen wir die Verwendung der Komponente vor und zeigen, wie Sie schöne Tooltips zur Verbesserung der Benutzeroberfläche Ihrer Anwendungen entwerfen können. Einen Download-Link finden Sie am Ende des Blogbeitrags.

Was ist AJUI_Tip?

AJUI_Tip ist eine 4D-Komponente, mit der Sie dynamisch Tooltips (Tipps) im Kontext eines Formulars erzeugen und anzeigen können. Die Komponente bietet mehrere Methoden zur Anpassung und Manipulation von Tipps über ein Objekt und Funktionen.

Die Komponente besteht aus drei Elementen:

• Eine Bildvariable: Die Komponente baut das Bild aus einer Reihe von Eigenschaften in SVG-Sprache auf. Das Ergebnis ist eine Reihe von Berechnungen auf der Grundlage verschiedener Kriterien (Größe des Inhalts, Polsterung, Radius usw.), die zum Zeichnen des Umrisses der QuickInfo und ihres Pfeils verwendet werden. Die SVG kann auch ein Textfeld und eine Schaltfläche (zum Schließen der QuickInfo) integrieren.
• Ein Unterformular: Sie können ein Formular aus der Hauptdatenbank in den Tooltip integrieren. Das Unterformular, falls definiert, nimmt den Platz eines Textfeldes ein.
• Eine Objektvariable: Behalten Sie die Eigenschaften der QuickInfo während verschiedener Operationen der Komponente bei.

Hallo Welt

Das Einrichten Ihrer ersten QuickInfo lässt sich in vier Schritten zusammenfassen:

• Zunächst müssen Sie die Initialisierungsmethode new AJUI_Tip aufrufen, um ein Objekt und eine Instanz mit allen Eigenschaften und Formeln einer Standard-Tooltip zu erhalten. Wir empfehlen, die Variable „Form“ direkt zum Speichern der aktuellen Instanz zu verwenden, um einfach zwischen Ihrer Formularmethode und Ihren Formularobjekten zu navigieren.

Form.Tip:= new AJUI_Tip

• Verwenden Sie die Formeln Ihres Objekts, um die Eigenschaften der Tooltip-Instanz nach Ihren Bedürfnissen zu definieren.

Form.Tip.TipName("test")
Form.Tip.TextLabel("Hallo Welt")

• Definieren Sie einen Namen, der mit der Tooltip-Instanz verbunden bleibt.
• Stellen Sie sicher, dass Sie einen Text definieren, der angezeigt werden soll. Dieser Text kann gestylt werden(z. B. Wörter oder Buchstaben in Fett- oder Kursivschrift oder in Farbe in einem Textfeld).
• Verwenden Sie schließlich die Formel „show“, um die Erstellung der Tooltip-Instanz zu starten. Sie können dies zum Beispiel an einem Ihrer Formularobjekte mit einem „On Clicked“-Ereignis testen.

Case of
: ( ) ()$evt=On Clicked
Form.Tip.show
End case

Wenn Sie die vorangegangenen Schritte befolgt haben, sollten Sie etwas wie das folgende Bild sehen. Herzlichen Glückwunsch, Sie haben Ihren ersten Tooltip erstellt!

Animieren Sie Ihre Tooltips

Wie wäre es, wenn Sie Ihren Tooltip noch ausdrucksstärker machen? Nun, mit AJUI_Tip können Sie diese kleinen Blasen mit verschiedenen Animationsstilen animieren( z.B. ein- und ausblenden, blinken, springen, etc.).

AJUI_Tip in der Tiefe

Dieser Beitrag hat kaum an der Oberfläche dieser leistungsstarken Komponente gekratzt. Weitere Einzelheiten sowie eine Schritt-für-Schritt-Anleitung zu ihrer Verwendung und Konfiguration finden Sie hier. Sie können es auch herunterladen. Viel Spaß!