[ 前へ | 目次 | 次へ ]

各種GUIコンポーネント

GUIコンポーネントには、様々な種類のものが存在します。 ここでは、各種GUIコンポーネントの作成について扱います。

※このページの画像に掲載されているGUIコンポーネントのデザインは模式図です。実際のデザインは、オペレーティングシステムの種類や、VCSSL処理システムのバージョン、その他環境によって異なります。


ウィンドウの作成

ウィンドウの図。
「ウィンドウ」コンポーネント
※実際の外観は、実行環境によって異なります。

GUI開発において最初に作成するのが、ウィンドウです。 ウィンドウを作成するには、newWindow関数を呼び出します。 この関数は以下の仕様を持っています。

- 関数仕様 -
int newWindow( int x, int y, int width, int height, string title )

引数のxとyでウィンドウ左上頂点の座標を指定し、 widthとheightでウィンドウの幅と高さを指定します。 また、引数titleでウィンドウのタイトルバー表示文字列を指定します。

ボタンの作成

ボタンの図。
「ボタン」コンポーネント
※実際の外観は、実行環境によって異なります。

続いて扱うボタンは、頻繁に使用される代表的なGUIコンポーネントです。 ボタンを作成するには、newButton関数を呼び出します。この関数は以下の仕様を持っています。

- 関数仕様 -
int newButton(int x, int y, int width, int height, string text )

引数には、 xとyでボタン左上頂点の座標を指定し、 widthとheightでボタンの幅と高さを指定します。 最後の引数textには、ボタンに表示する文字列を指定します。

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

テキストフィールドの図。
「テキストフィールド」コンポーネント
※実際の外観は、実行環境によって異なります。

次に、文字列を入力する一行の入力項目、テキストフィールドの作成です。 こちらもボタンと並ぶ、代表的なGUIコンポーネントの一つです。 テキストフィールドを作成するには、newTextField関数を呼び出します。 この関数は以下の仕様を持っています。

- 関数仕様 -
int newTextField ( int x, int y, int width, int height, string text )

引数には、 xとyでテキストフィールド左上頂点の座標を指定し、 widthとheightでテキストフィールドの幅と高さを指定します。 最後の引数textには、項目に初期状態で表示する文字列を指定します。

テキストエリアの作成

テキストエリアの図
「テキストエリア」コンポーネント
※実際の外観は、実行環境によって異なります。

続いて、文字列を入力する広い領域、テキストエリアの作成です。 テキストエリアはテキストフィールドと違い、複数行の文章を表示/入力する事が可能です。 テキストエリアを作成するには、newTextArea関数を呼び出します。 この関数は以下の仕様を持っています。

- 関数仕様 -
int newTextArea ( int x, int y, int width, int height, string text )

引数には、 xとyでテキストエリア左上頂点の座標を指定し、 widthとheightでテキストエリアの幅と高さを指定します。 最後の引数textには、項目に初期状態で表示する文字列を指定します。

セレクトフィールドの作成

セレクトフィールドの図
「セレクトフィールド」コンポーネント
※実際の外観は、実行環境によって異なります。

ユーザーに自由に文字列を入力してもらうのではなく、 いくつかの候補の中から選択してほしい場合には、セレクトフィールドを使用します。 セレクトフィールドを作成するには、newSelectField関数を呼び出します。 この関数は以下の仕様を持っています。

- 関数仕様 -
int newSelectField ( int x, int y, int width, int height, string[ ] text )

引数には、 xとyでセレクトフィールド左上頂点の座標を指定し、 widthとheightでセレクトフィールドの幅と高さを指定します。 最後の引数textには、項目に初期状態で表示する選択項目をstring型の配列で指定します。

チェックボックスの作成

チェックボックスの図
「チェックボックス」コンポーネント
※実際の外観は、実行環境によって異なります。

ユーザーにON/OFFの2択を提示するには、チェックボックスを使用します。 チェックボックスを作成するには、newCheckBox関数を呼び出します。 この関数は以下の仕様を持っています。

- 関数仕様 -
int newCheckBox ( int x, int y, int width, int height, string text, bool b )

引数には、 xとyでチェックボックス左上頂点の座標を指定し、 widthとheightでチェックボックスの幅と高さを指定します。 続く引数textには、チェックボックスに表示するテキストを指定します。 最後のbには、初期状態でのON/OFF状態を指定します。

テキストラベルの作成

画面上に文字列を埋め込んで表示するには、テキストラベルを使用します。 テキストラベルの作成にはnewTextLabel関数を呼び出します。 この関数は以下の仕様を持っています。

- 関数仕様 -
int newTextLabel ( int x, int y, int width, int height, string text )

引数には、 xとyでテキストラベル左上頂点の座標を指定し、widthとheightでテキストラベルの幅と高さを指定します。続く引数textには、テキストラベルに表示するテキストを指定します。

グラフィックスラベルの作成

続いて、画面上にグラフィックス関連の内容(描画内容や画像など)を表示する方法を扱います。

それにはまず準備として、VCSSLプログラム中で「グラフィックスデータ」を作成する必要があります。 グラフィックスデータとは、描画内容や画像を扱うためのデータで、 いわば画用紙のようなものです。全くの白紙から作成する事も可能ですが、 ここでは画像ファイルから読み込みましょう。

Graphics ライブラリのインポート

画像ファイルを読み込んでグラフィックスデータを作成するには、 まず、VCSSL標準ライブラリの一つであるGraphicsライブラリを インポートする必要があります:

import Graphics ;

Graphicsライブラリは、 VCSSLでグラフィックスデータを扱うための基盤となるライブラリです。 別のライブラリと連携してグラフィックスデータを動的に生成したり、 画像ファイルから読み込んだり、 逆にグラフィックスデータを画像ファイルに出力するなどの機能が用意されています。

画像ファイルの読み込み

画像ファイルからグラフィックスデータを生成するには、 newGraphics関数を呼び出します。この関数は以下の仕様を持っています。

- 関数仕様 -
int newGraphics ( string filePath )

この関数は、 引数に指定された場所から画像ファイルを読み込んでグラフィックスデータを生成し、 グラフィックスデータIDを戻り値として返します。 グラフィックスデータIDとは、グラフィックスデータに割り振られる識別番号です。

このnewGraphics関数の引数filePathには、読み込む画像ファイルの場所を、 実行モジュールから見た相対パスで指定します。 画像ファイルが実行モジュールと同じ場所にある場合には、 画像ファイル名だけで読み込み可能です。 読み込みが可能な画像形式は、環境やバージョンによって異なります。 PNG形式の画像ファイルは、大抵の環境で読み込む事が可能なので、 機種依存性を回避したい場合には、PNG形式画像の使用が推奨されます。

グラフィックスラベルの作成

ここまでで準備は終了です。読み込んだグラフィックスデータを画面上に表示するには、 グラフィックスラベルというGUIコンポーネントを使用します。 グラフィックスラベルの作成にはnewImageLabel関数を呼び出します。 この関数は以下の仕様を持っています。

- 関数仕様 -
int newImageLabel ( int x, int y, int width, int height, int graphicsID )

引数には、 xとyでグラフィックスラベル左上頂点の座標を指定し、 widthとheightでグラフィックスラベルの幅と高さを指定します。 最後の引数grarphicsIDには、表示対象のグラフィックスデータIDを指定します。

プログラム例

これまでに扱った各種GUIコンポーネントを、 実際に使用してみましょう。下記のように記述し、実行してみてください。

このプログラムを実行すると、ウィンドウが起動し、その上に様々なGUIコンポーネントが表示されます。

実行結果の図。ウィンドウ上に様々なGUIコンポ―ネントが並ぶ。
実行結果
※実際の外観は、実行環境によって異なります。


スポンサーリンク



スポンサーリンク

この階層の目次
お知らせ

リニアングラフ3D/2Dが連番ファイルのアニメーションに標準で対応
2019年07月17日 - リニアングラフ3D/2Dでは、7月17日公開の最新版より、連番ファイルを連続的に読み込みながらアニメーション描画するプログラムを同梱し、メニューから標準で使用可能になりました。その概要をお知らせします。

Vnanoのスクリプトエンジンアーキテクチャ解説2: コンパイラ
2019年07月03日 - オープンソースで開発中のスクリプトエンジン「 Vnano 」のアーキテクチャを解説する連載の第2回です。今回は、スクリプトを中間コードへと変換する、コンパイラ部分の内部をクローズアップして解説します。

Vnanoのスクリプトエンジンアーキテクチャ解説1: 全体像
2019年05月28日 - RINEARNでは現在、 アプリケーション組み込み用スクリプトエンジン「 Vnano 」を、オープンソースで開発中です。今回は、このスクリプトエンジンのアーキテクチャ面を掘り下げて解説します。複数回の連載予定です。

新着
連番ファイルから3Dグラフをアニメーション描画するツール

フォルダ内の連番データファイルを読み込み、3Dグラフを高速で連続描画して、アニメーションさせるツールです。グラフを連番の画像ファイルに保存する事もできます。
2019年06月03日
連番ファイルから2Dグラフをアニメーション描画するツール

フォルダ内の連番データファイルを読み込み、2Dグラフを高速で連続描画して、アニメーションさせるツールです。グラフを連番の画像ファイルに保存する事もできます。
2019年05月24日
[公式ガイドサンプル] 立体モデルを生成して3D空間に配置する

「VCSSL 3DCG開発ガイド」内のサンプルコードです。立体モデルを生成し、3D空間に配置します。
2019年05月21日
[公式ガイドサンプル] ポリゴンを生成して3D空間に配置する

「VCSSL 3DCG開発ガイド」内のサンプルコードです。立体の基本的な構成要素となるポリゴンを生成し、3D空間に配置します。
2019年05月20日
[公式ガイドサンプル] CSVファイルにデータを書き出し&読み込んで、複雑な3次元曲面のグラフを描く(魔法陣形)

「VCSSLスタートアップガイド」内のサンプルコードです。CSVファイルにデータを書き出し、さらにそれを読み込んで、魔法陣のような3次元曲面のグラフを描画します。
2019年05月17日
開発元Twitterアカウント

スポンサーリンク