タイトルイメージ 本文へジャンプ
Curlテクノロジー >> WEBトレーニング


ステップ3:グラフィックコンテナの役割

curl™

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

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

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

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

・View、Frame、Table、ScrollBox、TextFlowBox

・HBox、VBox、RasterBox、OverlayBox、Canvas、Grid

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

View 1つのオブジェクトを格納しウィンドウ関連の操作、イベントハンドリングするために使用する。主に一番外側に位置する親コンテナとなるケースが多く、コントロールが複数配置されたHBoxなどを子として受け入れる。

Frame Viewの親クラスであり1つのオブジェクトを格納する。色やフォントの定義など子オブジェクトに影響(伝播)させる非ローカル オプションを指定、一定エリアに別のグラフィックコンテナを表示する抽象的な場所を表現する場合など一般的なパネルとして使われる。

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ラベルを生成
            "名前:",

            ||1行の入力フィールドを生成
            {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コンテナの動作を確認してきます。








    Copyright © 2006 Creer, Inc. All rights reserved. 株式会社クレール