コントロールの作成2
ユーザインターフェース
作者 筧　早苗   
2008年5月12日(月曜日) 00:00

タブコンテナの作成

タブコンテナは一組の情報をいくつかのサブセットに編成します。
各サブセットはコントロール内で別々のペインに表示されます。
以下に簡単なサンプルをご紹介します。


以下にソースを示します。
{TabContainer
    {TabPane
        {text font-size = 28pt, 1}
    },
    {TabPane
        {text font-size = 28pt, 2}
    },
    {TabPane
        {text font-size = 28pt, 3}
    }
}

TabContainerはTabPaneを含みます。TabPaneは、ペインに表示されるコントロールと、
ペインの概観および動作を制御するいくつかのオプションを提供します。
TabPaneを含まないTabContainerを作成し、後からアプレットでペインを追加することもできます。
上記の例は、コンストラクタに3つのTabPaneを追加する、簡単なTabContainerを作成しています。

テキストフィールドの作成

TextFieldを使用すると、テキストをダイアログもしくはアプレットに入力することができます。
TextFieldは一度にテキストを一行表示します。
以下に簡単なサンプルをご紹介します。


以下にソースを示します。
{let last-event:Frame =
    {Frame width = 4in, margin = 2px, background = "silver"}
}
{let field:TextField =
    {TextField
        {on e:Action at tf:TextField do
            {last-event.add replace?=true,
                {format "event=%s value=\"%s\"", e, tf.value}
            }
        },
        {on e:DialogEvent at tf:TextField do
            {last-event.add replace?=true,
                {format "event=%s value=\"%s\"", e, tf.value}
            }
        }
    }
}
 
{HBox spacing = 6px,
    field,
    {CommandButton
        label = "Set Value",
        {on Action do
            set field.value = "new value"
        }
    },
    last-event
}

テキストフィールドに入力するとTextFieldのvalueプロパティが変化し、TextField自身がTextFieldイベントを
起動します。テキストフィールド内で切り抜き、コピーまたは貼り付けを行うと、ValueChangedが起動します。
また、ENTERキーを押すと、ValueFinishedイベントが起動した後にTextField自身がActionイベントを起動し、
値の入力が完了したと解釈します。


テキスト領域の作成

TextFieldはテキストの一行のみの表示でしたが、TextAreaを使用すると複数行のプレーンテキストを
ダイアログもしくはアプレットに入力することができます。TextAreaはテキストの入力だけでなく、表示も
サポートしています。表示する複数行のテキストが所定のスペースに入りきらない場合は、
垂直スクロールバーが表示されます。
以下に簡単なサンプルをご紹介します。


以下にソースを示します。
{let experience:any,
    vb:VBox = {VBox}
}
{spaced-vbox
    background = {FillPattern.get-beige},
　　{text Describe your prior experience in the space below:},
    {TextArea
        height = 2cm,
        prompt = "PRIOR EXPERIENCE: ",
        || Attach dynamic event handler
        {on ValueFinished at ta:TextArea do
            set experience = ta.value
            {vb.add
                {text
                    color = "blue",
                    {value experience}
                }
            }
            {popup-message
                modal? = true,
                vb
            }
        }
    }
}

TextAreaのvalueプロパティの現在値は、TextArea内の現在のテキストと関連づけられています。
これをプログラムから設定すると、表示されているテキストも変化します。
入力したテキストは自動的に次の行へ折り返されます。TextAreaの形状が変化するとそれに伴って
再び折り返されます。明示的に改行を入力した場合、その改行は保持されます。
TextFieldとは異なり、TextAreaはENTERキーを押してもActionやイベントは起動せず、値の入力が
完了したとは解釈しません。代わりに、カーソルを次の行に移動してさらにデータを入力できるように
します。テキストの入力を終了するには、ウィンドウの他の部分をマウスでクリックしてフォーカスを
TextAreaの外へ移動する必要があります。
この動作によりValueFinishedイベントが起動されます。


スクロールボックスの作成

スクロールボックスは、表示したいグラフィカルオブジェクトがコンテナに完全に収まらない場合に、
コンテンツを圧縮せずに水平または垂直スクロールバーを提供します。
以下に簡単なサンプルをご紹介します。


以下にソースを示します。
  {ScrollBox
    width = 5cm,
    height = 3cm,
    {Frame
        width = 7cm,
        {text
            {paragraph
                The {monospace ScrollBox} class is used to
                contain a graphical object and provide
                horizontal and/or vertical scroll bars should
                the entire graphical object not fit entirely
                within the container.
            }
            {paragraph
                The {monospace ScrollBox} class is used to
                contain a graphical object and provide
                horizontal and/or vertical scroll bars should
                the entire graphical object not fit entirely
                within the container.
            }
            {paragraph
                Graphical options specific to the {monospace
                ScrollBox} include:
            }
        }
    }
}

ScrollBoxは、子グラフィックと呼ばれるグラフィカルオブジェクトを含むFrameの１つの型です。
したがって、直接複数の子オブジェクトを含むことができません。


ProgressBarの作成

プログレスバーは、アプリケーションで時間のかかる操作の進捗状況を視覚的に表すコントロールです。
処理の進行速度と、処理がどの程度完了しているかがわかります。
以下に簡単なサンプルを示します。


以下にソースを示します。
{let max:double = 700}
{let simple-bar:ProgressBar =
    {ProgressBar
        width = 5cm,
        min-value = 0,
        max-value = max,
        value = 0,
        caption = "Press Start to Begin",
        {on e:ValueChanged at pb:ProgressBar do
            set pb.caption = pb.percent-complete & "%"
            {pb.update-view}
        }
    }
}
{HBox
    "Progress:",
    simple-bar,
    {CommandButton
        label = "Start",
        {on Action at cb:CommandButton do
            {with-busy-cursor
                {for i = 1.0 to max do
                    {simple-bar.set-value-with-events i}
                    || 待機時間を作ります。
                    {sleep .01s}
                }
            }
        }
    },
    {CommandButton
        label = "Show Popup",
        {on Action do
            {popup-message "Message"}
        }
    }
}

一般的に、アプリケーションがファイルのコピーやドキュメントの印刷などのタスクを実行する際に
使用されます。ユーザーは、視覚的な表示がないとアプリケーションが応答していないと考える
場合があります。アプリケーションでProgressBarを使用すると、アプリケーションが長時間の
タスクを実行していて、応答中であることを示すことができます。


関連ヘルプドキュメント

「Curl開発者ガイド→グラフィカルユーザーインターフェイス→タブコンテナ」
「Curl開発者ガイド→グラフィカルユーザーインターフェイス→テキストコントロール→テキストフィールド」
「Curl開発者ガイド→グラフィカルユーザーインターフェイス→テキストコントロール→テキスト領域」
「Curl開発者ガイド→グラフィカルユーザーインターフェイス→グラフィカルコンテナ→フレーム→スクロールボックス」
「Curl開発者ガイド→グラフィカルユーザーインターフェイス→その他のコントロール→プログレスバー」
最終更新 ( 2008年5月12日(月曜日) 18:09 )
 
Copyright 2008 - Sumisho Computer Systems Corporation. All rights reserved.    免責事項   プライバシーポリシー