ステップ３：グラフィックコンテナの役割

Curlテクノロジー　>> WEBトレーニング
ステップ３：グラフィックコンテナの役割

curl™

Curlでは高レベルなユーザーインターフェイスを GUIツールキットと呼ばれる CURL.GUI.STANDARD スーパーパッケージにて提供しています。このステップでは画面に表示されるユーザーインターフェースオブジェクトの配置を表すグラフィカルコンテナについて説明します。

■グラフィカルコンテナとは

実際にシステムを使用するユーザーには使いやすいように考察された画面設計が一般的に行われます。Curlでは画面レイアウトを左右する方法がいくつか用意されています。いずれも１つもしくは複数のグラフィカルオブジェクトを格納する事が出来る抽象基本型クラスと呼ばれるBoxクラスのサブクラスが使用されます。

Box抽象基本型クラスのサブクラス

・View、Frame、Table、ScrollBox、TextFlowBox
・HBox、VBox、RasterBox、OverlayBox、Canvas、Grid

コンテナは役割や用途に合わせて使い分けて行きます。良く使われる物は次の通りです。

View	１つのオブジェクトを格納しウィンドウ関連の操作、イベントハンドリングするために使用する。主に一番外側に位置する親コンテナとなるケースが多く、コントロールが複数配置されたHBoxなどを子として受け入れる。
Frame	Viewの親クラスであり１つのオブジェクトを格納する。色やフォントの定義など子オブジェクトに影響(伝播)させる非ローカルオプションを指定、一定エリアに別のグラフィックコンテナを表示する抽象的な場所を表現する場合など一般的なパネルとして使われる。
HBox、HBox	水平、垂直方向に複数のオブジェクトを表示するために使用する。WEBページのような画面の大きさが決まっていない場合に複数を組み合わせて使用する。非常に良く使われるコンテナで後述のエラスティック(Elastics)と共に使用することで柔軟な画面レイアウトが実現します。
Canvas	複数のオブジェクトを指定したCanvasの x,y 座標位置に表示するために使用する。IDEに含まれるビジュアルレイアウトエディター（以下、VLE)にて位置や細かなプロパティを設定する事でコントロールを画面に配置する。設計するシステム画面の大きさが共通化されている場合などや配置場所を細かく指定したい場合に使われる。

■グラフィカルコンテナを使用した例

システムを利用するユーザー環境のスクリーンサイズが不定やダイヤログなどウィンドウの大きさを一定に保つ必要がない設計ではView,VBox,HBoxなどのコンテナが多く使われます。

step3_1.dcurl



{curl 4.0 applet}

{curl-file-attributes character-encoding = “shift-jis”}
|| let構文にてviewという名前のViewクラス変数を宣言後に代入

{let view:View = 
    {View

        ||縦方向のレイアウトでtext,TextField,HBoxを配置

        {VBox

            spacing=5pt, ||VBoxプロパティ設定

            margin=10pt,

            background=”silver”,
            ||textラベルを生成

            “名前：”,
            ||１行の入力フィールドを生成

            {TextField width=3in},
            ||横方向のレイアウトでボタンを配置

            {HBox

                spacing=5pt,

                {CommandButton label=”登録”},

                {CommandButton label=”終了”}

            }

        }

    }}
|| Viewの可視性初期値はHiddenです。showメソッドを呼び出すか

|| コンストラクタの引数にvisibility = “normal”を指定して表示します。

{view.show}

ファイルをテキストエディタなどにコピーしてstep3_1.dcurlと名前をつけて保存してください。IDEにドラッグするかファイル(F)メニューの開くから保存したファイルを開きます。
プロジェクトを持たないファイルはファイルビュワーではその他ファイルの下に表示されます。
step3_1.dcurlを選択したら実行(R)メニューから”step3_1.dcurl” を実行を選択します。

上記のウィンドウが表示された事を確認してください。この例ではView,VBox,HBoxをコンテナとして使用しました。VBoxが縦の列を、HBoxによりボタンが横に並んでいる事が分かりましたか？

この様にコンテナと呼ばれるコントロールは他のビジュアルコントロールを配置する際に利用します。

次のステップではビジュアルレイアウトエディターと呼ばれるユーザーインターフェイスのビジュアル開発環境を使用してCanvasコンテナの動作を確認してきます。

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル