4D Japan Knowledge Base

ウィンドウの拡張、縮小動作を示す三角マーク

このTipsでは、ウィンドウの拡大・縮小機能を実装する簡単な方法とそのインターフェイスとして一般的な横倒しになる小さな三角マーク（ディスクロージャートライアングル）の実現方法について説明します。

まずは、この動作の様子から見ていきましょう。

初期状態では、下のような状態でウィンドウを開くとしましょう：

次に、ユーザが、左下の青い小さな三角マークをクリックします。
するとウィンドウが下の図のように拡張され、より多くの入力項目が現れます。

ユーザがもう一度、青い三角マークをクリックすると、ウィンドウは縮小され、初期状態へ戻ります。


この機能で使用した青い三角マークを実現するためには、２フレームのピクチャをピクチャライブラリに作成します。

そのライブラリピクチャをフォーム上にドロップし「vPic」と命名しておきます。



次に、ウィンドウのサイズを決定します。初期状態と拡張した状態の２ステイトを検討します。

このサンプルでは、フォームは縦３３３横２８６ピクセルですが、初期状態では縦１９０ピクセルで表示することにしました。（ちょうどその位置にexitボタンとsaveボタンがあります。）

ライブラリピクチャを利用したピクチャボタン「vPic」のオブジェクトメソッドは以下のようなものです：

If (Form event=On Clicked )
 GET WINDOW RECT($Left;$Top;$Right;$Bottom;Frontmost window)
 $tempSize:=150
 If (vPic=1)
  SET WINDOW RECT($Left;$Top;$Right;$Bottom+$tempSize;Frontmost window)
 Else 
  SET WINDOW RECT($Left;$Top;$Right;$Bottom-$tempSize;Frontmost window)
 End if 
End if