Už se vám někdy stalo, že vás zaplavila potvrzovací dialogová okna, okna s upozorněními a okna kontextové nápovědy, která téměř znemožňovala najít okno formuláře, na kterém jste pracovali? Nebylo by uživatelsky příjemnější zůstat na stejné stránce a vidět bubliny nápovědy směřující přímo na původní cíl?
To je možné díky komponentě 4D AJUI_Tip. Jedná se o výkonný engine tooltipů založený na technologiích dostupných ve 4D, jako jsou ORDA, New Formula, SVG, SubForm, CALL FORM a další. V tomto příspěvku na blogu upozorníme na použití této komponenty a ukážeme, jak můžete navrhovat krásné tooltipy, které vylepšují uživatelské rozhraní vašich aplikací. Odkaz ke stažení najdete na konci příspěvku na blogu.
Co je AJUI_Tip
AJUI_Tip je komponenta 4D, která umožňuje dynamicky generovat a zobrazovat tooltipy (Tip) v kontextu formuláře. Komponenta nabízí několik metod pro přizpůsobení a manipulaci s tipy prostřednictvím objektu a funkcí.
Komponenta se skládá ze tří prvků:
- Proměnné obrázku: Komponenta vytváří obrázek z několika vlastností v jazyce SVG. Výsledkem je sada výpočtů založených na různých kritériích (velikost obsahu, výplň, poloměr atd.), které se použijí k vykreslení obrysu tipu nástroje a jeho šipky. SVG může také integrovat textové pole a tlačítko (pro zavření tooltipu).
- Dílčí formulář: Do tooltipu lze integrovat formulář z hlavní databáze. Dílčí formulář, pokud je definován, zaujme místo textového pole.
- Objektová proměnná: Udržuje vlastnosti tooltipu při různých operacích komponenty.
Hello world
Nastavení prvního tooltipu lze shrnout do čtyř kroků:
- Nejprve je třeba zavolat inicializační metodu new AJUI_Tip, abyste získali objekt a instanci se všemi vlastnostmi a vzorci výchozího tooltipu. Pro uložení aktuální instance doporučujeme použít přímo proměnnou „Form“, abyste mohli snadno přecházet mezi metodou a objekty formuláře.
Form.Tip:= new AJUI_Tip
- Pomocí vzorců objektu definujte vlastnosti instance tooltipu podle svých potřeb.
Form.Tip.TipName("test")
Form.Tip.TextLabel("Hello World")
- Definujte jméno, které zůstane spojeno s instancí tooltipu.
- Nezapomeňte definovat text, který se má zobrazit. Tento text může být stylizován(např. slova nebo písmena v textovém poli tučně, kurzívou nebo barevně).
- Nakonec pomocí vzorce „zobrazit“ spusťte generování instance tooltipu. Můžete jej například otestovat na jednom z objektů formuláře pomocí události „Při kliknutí“.
Case of
: ( ) ()$evt=On Clicked
Form.Tip.show
End case
Po provedení předchozích kroků byste měli vidět něco jako na obrázku níže. Gratulujeme, vytvořili jste svůj první tooltip!
Animujte své tooltipy
Co takhle udělat svůj tooltip ještě výraznější? Inu, AJUI_Tip umožňuje tyto malé bubliny animovat různými styly animace( např. blednutí a zhasínání, blikání, skoky atd.).
AJUI_Tip do hloubky
Tento příspěvek sotva poškrábal povrch této výkonné komponenty. Více podrobností, stejně jako návod krok za krokem k jejímu použití a konfiguraci, naleznete zde. Můžete si ji také stáhnout. Užijte si to!