グラフィカルユーザーインターフェイス

GUI ツールキットは、テキスト書式、画像、リンク、ボタン、ドロップダウンリスト、テキストフィールドなど、シンプルな定義済みの要素に基づく一連の機能をサポートしています。これらを使って、シンプルな HTML に似たインタラクティブ Web ページ、複雑で高度にカスタマイズされた Web アプリケーションの両方を作成することができます。

ツールキットは以下の開発者を対象としています。

GUI ツールキットは高レベルのユーザーインターフェイスの作成に使われることから、ほとんどの Curl Web アプリケーションで使用されています。ツールキットの機能は次のとおりです。

テキストの操作と表示
基本的なグラフィカルオブジェクトとそのプロパティ
ネストされたオブジェクトとレイアウト
ウィンドウ化とイベントハンドリング
コントロールとダイアログ

テキストのフォーマットの方法は「テキスト書式について」でチュートリアル方式で解説されています。　「テキストフォーマット」は組み込まれたテキスト書式と自分で作成する書式方法について書かれています。

GUI ツールキットのスーパーパッケージ： CURL.GUI.STANDARD

GUI ツールキットは、テキストやグラフィックスを受け入れる高レベルユーザーインターフェイスをサポートするパッケージから成り立っています。

スーパーパッケージの CURL.GUI.STANDARD はすべてのGUI ツールキットパッケージを含んでいます。

Curl® 実行環境が、アプレットソースコードの中の {curl ... applet} ヘラルドに遭遇すると、自動的にCURL.GUI.STANDARD がインポートされます。 Curl アプレットとヘラルドの詳細は「アプレット」を参照してください。 CURL.GUI.STANDARD も CURL.GRAPHICS.STANDARD スーパーパッケージをインポートします。

{curl ... package} ヘラルドを指定してアプレットではなくパッケージを作成する場合は、 CURL.GUI.STANDARD パッケージがコンパイルされる時に自動的にロードされません。 GUI ツールキット機能をパッケージに含めるには、インポート式を使用してください。

{import * from CURL.GUI.STANDARD}

注意: アプレットが必要としているパッケージのみをインポートする場合は、 CURL.GUI.STANDARDの中のパッケージには多くの従属関係があることに注意してください。

グラフィカルオブジェクト

Curl® GUI ツールキットには、グラフィカルユーザーインターフェイスでアプリケーションを作成するために使用されるクラスの完全なセットがあります。このシステムにおいて、ディスプレイ用に作成されたすべてのオブジェクトは、それらが Visual サブクラスのインスタンスであることから、可視オブジェクトと呼ばれます。Visual クラスは、表示可能なオブジェクトを表します。

可視オブジェクトには、書式設定されたテキストとその他すべてのグラフィックの 2 つの異なるタイプがあります。書式設定されたテキストには、文字書式、段落書式、表テキスト書式など、テキストの書式設定式で作成されたすべてのオブジェクトが含まれます。テキストの書式設定の詳細は、「テキスト書式」を参照してください。他のすべての可視オブジェクトは、Graphic サブクラスのインスタンスであるため、グラフィカルオブジェクトと呼ばれます。

以下は、グラフィカルオブジェクトがプロパティーを継承できる重要なトップレベルクラスです。

OptionListInterface
∟ DataBindingTarget
∟ GraphicOptions
∟ Visual
∟ Graphic

Curl® 言語で書き込まれたアプレットをプログラミングする場合は、通常、グラフィカルオブジェクトを別のグラフィカルオブジェクト (ウィンドウやコンピュータ画面など) 内で表示される可能性がある、コンテナとして機能する他のグラフィカルオブジェクト (スクロールボックスや表など) に挿入することによって、グラフィカルオブジェクトのグラフィック階層を構築し、ユーザーインターフェイスを作成します。

非グラフィカルオブジェクトをグラフィック階層に加えると、Curl® 実行環境は自動的にまずその非グラフィカルオブジェクトをグラフィカルオブジェクトに変換しようと試みます。文字列や書式が設定されたテキストは、グラフィカルコンテナ内に置かれると自動的にグラフィカルオブジェクトに変換されます。この自動変換メカニズムによって、テキストを簡単に各グラフィック階層に追加できます。このように、さまざまな方法で書式が設定されたテキストや設定されていないテキストの一部をグラフィカルオブジェクトのように使用できます。

すべてのグラフィカルオブジェクトおよび要素にはそれらの表示方法を定義する属性があります。これらの属性はオプションと呼ばれ、オプションによってグラフィカルユーザーインターフェイスを構築する際に、明示的にまたは自動的に設定できます。

グラフィック階層

ユーザーインターフェイスとして機能するために構築されたグラフィック階層は、ネストされたグラフィカルオブジェクトの構造を表します。たとえば、

ダイアログボックスにあるテキスト、編集可能なテキストフィールドおよび 2 つのコマンドボタンで構成される構造は、グラフィック階層を表します。

テキスト、テキストフィールド、ボタン、およびダイアログボックスはすべてグラフィカルオブジェクトです。ボタンがダイアログボックスに置かれた場合、ボタンはダイアログボックスのグラフィカルな子で、ダイアログボックスはボタンのグラフィカルな親です。

通常、Curl アプレットの実行中は、複数のグラフィック階層は任意のどの時点にも存在しますが、任意のグラフィカルオブジェクトは同時に多くて 1 つのグラフィック階層の一部となります。各グラフィック階層は RootFrame オブジェクトをその階層のルートに持ちます。

オブジェクトをグラフィック階層に追加すると、Curl 実行環境はこれらのオブジェクトのいくつかを変換し、他のオブジェクトをそれらのオブジェクトに暗黙的に追加したりする可能性があります。これらのオブジェクトはディスプレイには表示されませんが、グラフィック階層を表示するためのインスペクターを使用すると、インスペクター に表示されます。インスペクタ に関する詳細は、IDEドキュメンテーションのインスペクタの章を参照してください。

Curl 言語では、次の 2つのスタイルを使用してグラフィック階層を作成できます。

宣言型 - 変数を使用せずにグラフィカルオブジェクトを表示する。
作成する階層が反映されるような構造の Curl 言語式を記述することによって階層を作成します。これは、一般に宣言型プログラミングスタイルと呼ばれ、ネストされたグラフィカルオブジェクトを作成する比較的簡単な方法です。この方法でインスタンス化されたオブジェクトは、後でメソッド呼び出しを作成するために使用できません。
変数を使用してグラフィカルオブジェクトを表示する。
変数を宣言し、その変数をインスタンス化されたコンテナオブジェクトに設定します。次にメソッドの呼び出し (addなど) または代入ステートメント (set x = y) を使用して、グラフィカルな子を追加したり、オプション値を設定できます。この方法では、より多くのコードの記述が必要となりますが、グラフィック階層を構築するための多数のツールを使用できます。

GUI ツールキットを使用すると、これら 2 つのスタイルをシームレスに結合できます。次のセクションに、両方のプログラミングメソッドの例を示します。

グラフィック階層の構築

このセクションでは、VBox テキスト要素、TextField、HBox、および 2 つの CommandButton で構成される簡単なグラフィック階層の構築方法を 2 つ示します。VBox、HBox、および他のすべてのグラフィカルコンテナのタイプに関する詳細は、「グラフィカルコンテナ」の章を参照してください。CommandButton の詳細は、『開発者ガイド』の「ボタンコントロール」のセクションを参照してください。

宣言型でのグラフィック階層の作成

宣言型スタイルを使用してネストされたグラフィカルオブジェクトを作成すると、グラフィック階層が 1 つの大きなステップで構築されたと考えることができます。グラフィック階層は次のように構築されます。

Curl 言語式の構造は、グラフィック階層の構造を映します。このグラフィック階層の構造で、VBox にはテキスト、TextField、および 2 つの CommandButton を持つ HBox が含まれます。オブジェクトの相対的な配置は、各オブジェクトの中かっこの相対的位置で定義します。次のサンプルグラフィック階層に、このような式の構文を示します。

{ClassName1 option-bindings1,
    {ClassName2 option-bindings2},
    {ClassName3 option-bindings3}
}

説明：

各 ClassName* は Curl 言語のクラス名です。
{ClassName1} は、クラス ClassName1 のインスタンスを作成します。
option-bindings* は、カンマで区切られたオプションのバインディングです。各オプションバインディングは、オプション=値のコンストラクトで構成され、すべて作成されたオブジェクトを初期化するために使用されます。
グラフィック階層は、2 つのタイプのグラフィカルな子 ClassName2 と ClassName3 のグラフィカルな親として、新しい ClassName1 オブジェクトで構築されます。グラフィカルな子はカンマで互いに区切られます。

例にあるコードは、幅、高さ、境界の色といった様々なグラフィカルオブジェクトの表示方法を決定するオプション設定を示すことに注目してください。コードはクラス名の後に置く必要がありますが、コードが対応するオブジェクトインスタンスの中かっこ内であれば、グラフィカルな子の前、中、後ろのどこにでも置くことができます。

例: 宣言型でのグラフィック階層の作成

|| Here graphical objects are created directly within a
|| VBox container without assignment to variables
{VBox spacing=6pt,
    margin=0.25in,
    background="silver",

    ||text
    "Enter the name of a famous Curler:",

    ||TextField
    {TextField width=3in},

    ||HBox containing two CommandButtons
    {HBox spacing=6pt,
        {CommandButton label="OK"},
        {CommandButton label="Cancel"}
    }
}

変数でのメソッド呼び出しの使用

次の例に示すように、グラフィカルオブジェクトを表す変数を使用して同じレイアウトを構築できます。この例では、(すべてのグラフィカルオブジェクトによって継承された) Visual.add メソッドおよび代入式の使用方法も示します。

set field-access-expression = option-value

この方法を使用して、次のようにグラフィック階層を構築できます。

VBox と HBox を作成します。
2 つの CommandButton を HBox に加えます。
テキストを VBox に加えます。
同様に TextField を加えます。
同様に CommandButton を含む HBox を加えます。
VBox のオプションを設定します。

例: 変数でのメソッド呼び出しの使用

|| Using the variables v and h to represent the
|| VBox and HBox graphical objects respectively

||Create VBox and HBox
{value
    let v:VBox={VBox}
    let h:HBox={HBox spacing=6pt}

    ||Add two buttons to HBox
    {h.add {CommandButton label="OK"}}
    {h.add {CommandButton label="Cancel"}}

    ||Add text, TextField and HBox to VBox
    {v.add "Enter the name of a famous Curler: "}
    {v.add {TextField width=3in}}
    {v.add h}

    ||set the options of the VBox
    set v.spacing=6pt
    set v.margin=0.25in
    set v.background="silver"

    v
}

グラフィック階層のオブジェクトのインスタンス

n オブジェクトがある各グラフィック階層には、n オブジェクトインスタンスがあることに注意してください。つまり、グラフィック階層に同じオブジェクトの複数のコピーは存在できないため、どのオブジェクトもコピーではないということです。可視オブジェクトを表す変数を使用している場合、参照された各変数は、特定の Visual インスタンスを示します。

よくある間違いは、グラフィック階層への可視オブジェクトの追加を配列へのオブジェクトのコピーの追加と同様に扱うことです。可視オブジェクトをグラフィック階層のどこかに追加しようとする際に、そのオブジェクトが既にグラフィック階層にある場合、そのオブジェクトは新しい場所に移動されます。

以下の例を参照してください。表 (t) は、それ自体に 2 つのボタンを追加しようとします。最初の t.add 呼び出しは、ボタンを最初の行にある右のテーブルセルに置きます。しかし、t が同じボタンを次の呼び出しに追加しようとするため、2 番目の t.add 呼び出しは最初の行からボタンを取り出し、そのボタンを 2 番目の行に置きます。結果として生じるテーブルにあるボタンは 1 つだけで、そのボタンは 2 番目の行の右のテーブルセルにあります。

例: 同じオブジェクトを 2 回追加

{value let b:CommandButton={CommandButton label="hello"} let t:Table={Table columns=2, background="pink", valign="center"} {t.add {text Button 1:}} {t.add b} {t.add {text Button 2:}} {t.add b} t }

次の例は、ボタンのクローンをテーブルに追加する方法を示します。コードでは、ボタンが呼び出されるたびに新しいボタンを作成するプロシージャを定義します。このプロシージャにより、オブジェクトを現在の在置から取り出し、グラフィック階層にある別の位置に置く動作が回避されます。

例: オブジェクトのクローンの追加

{define-proc public {another-b}:CommandButton
    {return {CommandButton label="hello"}}
}

{value let t:Table={Table columns=2,
                       background="pink",
                       valign="center"}
    {t.add {text Button 1:}}
    {t.add {another-b}}
    {t.add {text Button 2:}}
    {t.add {another-b}}
    t
}

Copyright © 1998-2019 SCSK Corporation. All rights reserved.
Curl, the Curl logo, Surge, and the Surge logo are trademarks of SCSK Corporation. that are registered in the United States. Surge Lab, the Surge Lab logo, and the Surge Lab Visual Layout Editor (VLE) logo are trademarks of SCSK Corporation.