AJUI_Tip。4D用ツールチップエンジン

確認ダイアログ、アラートボックス、コンテキストヘルプウインドウなどに振り回されて、作業中のフォームウィンドウを見つけることがほとんど不可能になったことはないでしょうか？同じページに留まり、元のターゲットを直接指すヘルプバブルが表示されれば、よりユーザーフレンドリーだと思いませんか？

これは、4DコンポーネントAJUI_Tipのおかげで可能になりました。これは、ORDA、New Formula、SVG、SubForm、CALL FORMなど、4Dで利用できる技術をベースにした、強力なツールチップエンジンです。このブログでは、このコンポーネントの使い方を紹介し、あなたのアプリケーションのUIを向上させる美しいツールチップをデザインする方法を説明します。ダウンロードリンクは、ブログポストの最後にあります。

AJUI_Tipとは？

AJUI_Tipは、フォームのコンテキストでツールチップ（Tip）を動的に生成して表示することができる4Dコンポーネントです。このコンポーネントには、オブジェクトと関数を使ってTipをカスタマイズしたり、操作したりする方法がいくつか用意されています。

このコンポーネントは、3つの要素で構成されています。

• イメージ変数。このコンポーネントは、SVG言語による多数のプロパティから画像を構築します。その結果は、ツールチップの輪郭とその矢印を描くために使われる、異なる基準（コンテンツサイズ、パディング、半径など）に基づいた計算のセットです。SVGは、テキストボックスとボタン（ツールチップを閉じるためのもの）を統合することも可能です。
• サブフォーム。メインのデータベースからフォームをツールチップに統合することができます。サブフォームが定義されていれば、テキストボックスの代わりとなります。
• オブジェクト変数。コンポーネントの様々な操作の間、ツールチップのプロパティを維持する。

ハローワールド

最初のツールチップのセットアップは、4つのステップにまとめることができます。

• まず、new AJUI_Tip の初期化メソッドを呼び出して、オブジェクトと、デフォルトのツールチップのすべてのプロパティと数式を持つインスタンスを取得する必要があります。フォームメソッドとフォームオブジェクトの間を簡単に行き来するために、現在のインスタンスを保存するために “Form” 変数を直接使用することをお勧めします。

FormTip:=new AJUI_Tip

• オブジェクトの数式を使用して、必要に応じて、ツールチップのインスタンスのプロパティを定義します。

Form.Tip.TipName("test")
Form.Tip.TextLabel("Hello World")

• ツールチップのインスタンスに関連づけられる名前を定義します。
• 表示するテキストを定義していることを確認してください。このテキストは、スタイル付けすることができます（例：テキストボックス内の単語や文字を太字、斜体、色で表示）。
• 最後に、”show” 式を使用して、ツールチップ・インスタンスの生成を開始します。例えば、フォーム・オブジェクトの1つで、”On Clicked” イベントでテストすることができます。

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

前のステップに従うと、下の画像のようなものが表示されるはずです。おめでとうございます！これで、最初のツールチップを作成できました。

ツールチップをアニメーション化する

ツールチップをもっと表現力豊かにしてみませんか？AJUI_Tipでは、この小さな泡を様々なアニメーションスタイル（フェードイン、フェードアウト、ブリンク、ジャンプなど）で動かすことができます。

AJUI_Tipの詳細

この記事は、この強力なコンポーネントの表面をやっとこさ削ったところである。より多くの詳細と、その使用と設定に関するステップバイステップのチュートリアルは、ここで入手できます。また、ダウンロードすることもできます。お楽しみください。