レイアウトしよう!


レイアウトコンテナとポータルにも使えるTabContainerクラス

レイアウトコンテナとポータルにも使えるTabContainerクラス

Curlで画面遷移を実現する場合、HTMLのように新しいページにリンクして画面を変更するのではなく、グラフィカル・コンテナと呼ばれるオブジェクトにTextFieldなどのオブジェクトを配置したり、または入れ替えたりすることで実現します。

代表的なグラフィカル・コンテナとしてVBox、HBox、Frameがあります。VBoxは垂直方向にHBoxは水平方向にオブジェクトを配置でき、Frameは1つのオブジェクトを配置する機能を持っています。グラフィカル・コンテナはBoxクラスを継承しているため、それぞれaddメソッドおよびclearメソッドを使用してオブジェクトの追加および削除ができ、その機能を使用して画面を変更できます。

サンプル・アプリケーションでは、GUI部品の配置にFrameやVBoxといったグラフィカルコンテナを使用しています。対象ファイルは「layout.scurl」です。VBox、HBoxは中のグラフィカルおオブジェクトを縦方向および横方向に並べてくれる便利なものです。Frameは写真のフレームのように中のオブジェクトを1つのみ入れることができて、別のものを入れるときは中のものを取り出してから入れます。

コード13 VBoxの中にある子オブジェクト

プロジェクト
プロジェクト

プロジェクト

上記以外にもさまざまなコンテナがあります。詳しくは「Curl IDE ドキュメント」の「目次」タブ-「グラフィカル ユーザー インターフェイス」-「グラフィカルコンテナ」を参照してください。

また、簡単に画面を切り替えられるTabContainerクラスを使用しています。 対象ファイルはtabcontainer.scurlです。
これは複数のページを構成できるコントロールで、Excelのシート(タブ)のように使用できます。ページを切り替えてもサーバにアクセスする必要はありません。TabContainerクラスは複数のTabPaneで構成され、それぞれのTabPaneが1つのタブになります。サンプル・アプリケーションの例では、静的にTabContainerクラスのパラメータにTabPaneを設定していますが、TabContainerクラスのadd-paneメソッドを使用して複数のTabPaneを動的に追加することもできます。

コード14 TabContainerクラスに動的にTabPaneを追加

このようにTabContainerは簡単でポータル画面の作成にも向いています。また、オプション、メソッドなども豊富で、tab-placementオプションを変更することによりタブの位置を変更することも可能です。詳しくは「Curl IDE ドキュメント(開発環境CDEの中に入ってます)」の「目次」タブ-「APIリファレンス」から「TabContainer」クラスを参照してください。