第 1 章 : はじめに RogueWave Visualization for C++ の Views5.7 に付属している Views Studio を使い 簡単な GUI アプリケーションの開発手順を紹介します この文書では Windows 8 x64 上で Visual Studio2010

を作成す る

第

1 章 　

は じ めに

...1

1.1 アプ リ ケーシ ョ ン の概要 ... 1 1.2 Views Studio と は ... 2

第

2 章 　

Views Studio を起動する ...3

2.1 起動画面( メ イ ン ウ ィ ン ド ウ ) の説明 ... 4 2.2 ガジ ェ ッ ト エ ク ス テ ン シ ョ ン ... 4

第

3 章 　

アプ リ ケーシ ョ ン を作成す る

...5

3.1 アプ リ ケーシ ョ ン ク ラ ス のセ ッ ト ア ッ プ ... 5 3.2 1 つ目の ク ラ ス を作成する ... 6 3.3 2 つ目の ク ラ ス を作成する ... 9 3.4 C++ の コー ド を生成する ... 10 3.5 コ ー ド を実装す る ... 11 目次

第

1 章 ： は じ めに

RogueWave Visualization for C++ の Views5.7 に付属 し てい る Views Studio を使い、 簡単 な GUI アプ リ ケーシ ョ ンの開発手順を紹介 し ます。 こ の文書では Windows 8 x64 上で Visual Studio2010 を使っ て説明 し てい ますが、 起動時 と ビル ド の具体的な方法以外は Linux 等の他の環境で も 同様に進め る こ と がで き ます。

こ の getting started は Rogue Wave Software の ウ ェ ブサ イ ト に掲載 さ れてい る 「User

Manuals」 「Gadgets」 「Creating GUI Applications with Rogue Wave Views Studio」 に基

づいてい ます。

http://www.roguewave.com/portals/0/products/visualization/docs/views/5.7/views.html#page/ ControlsGadgets/ctrusrpart1.html#ww144909

1.1 　 アプ リ ケーシ ョ ンの概要

こ れか ら 作成す る アプ リ ケーシ ョ ンは、 図 1 の よ う に 3 つのパネルか ら 成る単一の実 行フ ァ イ ル(myappli.exe) です。 上の 2 つのパネル (First Panel と Second Panel) で ス ラ イ ダーを使っ て整数値を指定 し 、 一番下の Result Panel で 「計算する」 ボ タ ン を押す と 、 二つの整数値を足 し 合わせた値が結果のテ キ ス ト フ ィ ール ド に表示 さ れ ます。 作成す る ク ラ ス は、 全 体 を 管 轄 す る MyApplication ク ラ ス、 上 の 2 つ の パ ネ ル を 作 る FirstPanelClass、 下の結果パネルを作る SecondPanelClass の合計 3 つにな り ます。

1.2 　 Views Studio と は

RogueWave Views Studio は、Views のオブジ ェ ク ト を使っ て GUI アプ リ ケーシ ョ ン を容 易に作成す る こ と ので き るGUI ビルダーです。 ボ タ ンやパネル、 ス ラ イ ダーの よ う な 標準的な部品は も ち ろん、 多様な グ ラ フやガ ン ト チ ャ ー ト 、 地図やSQL な どのデー タ ベースへア ク セ スす る ための部品 も こ の Views Studio で配置 し てプ ロ パテ ィ を設定す る こ と がで き ま す。 アプ リ ケーシ ョ ン設定後に C++ の コ ー ド を出力 し ますが、 こ の コ ー ド は Views が対応 し てい る プ ラ ッ ト フ ォームで ビル ド 可能なため、 容易に ク ロ ス プ ラ ッ ト フ ォ ーム のアプ リ ケーシ ョ ン を作成す る こ と がで き ます。 さ ら に、 こ のViews Studio 自体 も 様々に拡張可能であ る ため、分野ご と に特化 し た使いやすい GUI ビルダー を独自に作成す る こ と も で き ます。 マニ ュ アルの以下の部分にViews Studio についての説明があ り ます。 http://www.roguewave.com/portals/0/products/visualization/docs/views/5.7.jp/ views.html#page/ProductOverview/prodoverview.3.15.html#ww415757

第

2 章 ： Views Studio を起動する

図 2 スタートメニューから起動   図 3 プラグインの選択画面（初回起動時のみ） 図2 の よ う に ス ター ト メ ニ ューか ら IVFStudio を ク リ ッ ク する と 、図 3 の よ う なプ ラ グ イ ン の選択画面が起動 し て アプ リ ケーシ ョ ン に必要なプ ラ グ イ ン を選択 し ます。 こ の 画面が起動時に現れ る のは初回のみですが、Views Studio 起動後で も メ ニ ューの 「ツー ル」 「プ ラ グ イ ン を選択…」 か ら 変更がで き ます。

2.1 　 起動画面 ( メ イ ン ウ ィ ン ド ウ ) の説明

図４ メインウィンドウ

2.2 　 ガジ ェ ッ ト エ ク ス テ ン シ ョ ン

メ ニ ュ ーバーの右端にあ り 、 設定画面を呼び出 し ます。 図５ ガジェットエクステンション 1) 　 テ ス ト アプ リ ケーシ ョ ンやパネルを テ ス ト し ます。 2) 　 パネル ク ラ スパレ ッ ト パネル ク ラ ス パ レ ッ ト の表示非表示を切 り 替え ます。 3) 　 アプ リ ケーシ ョ ンの編集 ア プ リ ケーシ ョ ン バ ッ フ ァ を前面に出 し てパネル ク ラ ス パ レ ッ ト を表示 し ます。 4) 　 アプ リ ケーシ ョ ンの詳細設定 アプ リ ケーシ ョ ン の イ ン スペ ク タ パネルを開 き ます。

第

3 章 ： アプ リ ケーシ ョ ン を作成する

3.1 　 アプ リ ケーシ ョ ン ク ラ ス のセ ッ ト ア ッ プ

図６ アプリケーションの詳細設定 「ア プ リ ケーシ ョ ン の詳細設定」 を ク リ ッ ク し て ア プ リ ケーシ ョ ン パネル を起動 し 、 「一般」 タ ブの 「 ク ラ ス」 を 「MyApplication」 に変え、 「適用」 し て 「閉 じ る」 ボ タ ン を押 し て ウ ィ ン ド ウ を閉 じ ます。 メ ニ ュ ーの 「フ ァ イ ル」 か ら 「名前を付けて保存」 で myappli.iva と し て保存 し ます。 こ の と き アプ リ ケーシ ョ ンバ ッ フ ァ ウ ィ ン ド ウ( 「 Application – testapp.iva」 ) が前 面に出ていない と 保存画面が現れないので ご注意 く だ さ い。

3.2 　 1 つ目の ク ラ ス を作成する

3.2.1 　 パネルデー タ フ ァ イ ルを作成する

図 7 ガジェットバッファウィンドウにコントロールを追加する 1) 　 パ レ ッ ト パ ネ ル か ら ス ラ イ ダ ー (IlvSlider)、 メ ッ セ ー ジ ラ ベ ル (IlvMessageLabel)、 テ キ ス ト フ ィ ール ド (IlvTextField) を ガジ ェ ッ ト バ ッ フ ァ ウ ィ ン ド ウ に ド ラ ッ グ し ます。 2) 　 それぞれのガジ ェ ッ ト を ダブル ク リ ッ ク する と イ ン スペ ク タ が現れます。 （図 8） 図 8 ガジェットをダブルクリックするとインスペクタが開く 3) 　 メ ッ セージ ラ ベルの 「詳細」 タ ブ を開いて 「 ラ ベル」 を 「Value」 と 設定 し 、 「適用」 し て 「閉 じ 」 ます。

4) 　 テキ ス ト フ ィ ール ド の 「詳細」 タ ブを開いて 「 ラ ベル」 の値を消去 し 、 「整列」 か ら 「右」 を選択 し 、 「編集可」 のチ ェ ッ ク ボ ッ ク ス を オ フ に し 、 「適用」 し て 「閉 じ 」 ます。 図 9 下部インスペクタエリアのジェネリックインスペクタで名前とコールバック名を設定する 5) 　 パネルバ ッ フ ァ ウ ィ ン ド ウ で ス ラ イ ダーを選 択 し 、 メ イ ン ウ ィ ン ド ウ 下部のジ ェ ネ リ ッ ク イ ン スペ ク タ の 「名 前」 に 「Slider」、 「 コ ールバ ッ ク 」 に 「SliderCB」 と 記入 し ます。 適用ボ タ ン な ど の動作は不要です。 6) 　 テ キ ス ト フ ィ ー ル ド を 選択 し 、 ジ ェ ネ リ ッ ク イ ン ス ペ ク タ の 「名前」 に 「TextField」 と 入力 し ます。 7) 　 ガジ ェ ッ ト バ ッ フ ァ ウ ィ ン ド ウ がア ク テ ィ ブにな っ てい る こ と を確認 し 、 メ ニ ュ ーの 「フ ァ イ ル」 「名前を付けて保存」 でclass1.ilv と い う 名前で こ の ク ラ ス を保存 し ます。

3.2.2 　 パネル ク ラ ス をセ ッ ト ア ッ プする

1) 　 ガジ ェ ッ ト エ ク ス テ ン シ ョ ン ( 図 5) のパネル ク ラ ス ア イ コ ン を ク リ ッ ク し てパネル ク ラ ス パ レ ッ ト を表示 さ せます。 2) 　 「パネル ク ラ ス を登録」 ア イ コ ン を ク リ ッ ク す る と 、 図 10 の よ う に Class1 が表示 さ れます。 Class1 を選択 し てア イ コ ン を ク リ ッ ク し てパネル ク ラ ス イ ン スペ ク タ を開 き 、 「一般」 タ ブの 「 ク ラ ス」 の欄にFirstPanelClass と 入れて 「適用」 し て 「閉 じ 」 ます。 図 10 パネルクラスパレット

3.2.3 　 1 つ目のパネルを作る

1 つめのパネルの イ ン ス タ ン ス を作 り ます。 1) 　 「ア プ リ ケ ー シ ョ ン の編集」 　 ア イ コ ン を 押 し て ア プ リ ケ ー シ ョ ン バ ッ フ ァ ウ ィ ン ド ウ を前面に出 し ます。 2) 　 パネル ク ラ スパレ ッ ト にあ る FirstPanelClass を アプ リ ケーシ ョ ンバ ッ フ ァ ウ ィ ン ド ウ に ド ラ ッ グ し ます。( 図 11)

図 11 アプリケーションバッファにパネルを追加する。

3) 　 FirstPanelClass の タ イ ト ルバーを ダブル ク リ ッ ク する と パネル イ ン ス タ ン ス の イ ン スペ ク タ が表示 さ れ ます( 図 12)

図 12 FirstPanelClass のパネルインスタンス

4) 　 「一般」 タ ブ を 開 く と 既に 「FirstPanelClass」 と い う 名前が設定 さ れて い る の で、 「名前」 を 「FirstPanel」 に変え、 タ イ ト ルを 「First Panel」 に変更 し ます。

こ の と き 「名前」 は変数名なので空白は使え ません。 ま た、 「サ イ ズ」 タ ブで 位置を(x,y)=(50,50) に し ます。

3.2.4 　 2 つ目のパネルを作る

2 つめのパネル も ク ラ スは 1 つ目のパネル と 同様に FirstPanelClass を使い ます。 図 13 2 つ目のクラスの設定 1) 　 同様にアプ リ ケーシ ョ ンバ ッ フ ァ を前面に出 し 、 パネル ク ラ ス パ レ ッ ト か ら FirstPanelClass を ド ラ ッ グ し 、 タ イ ト ルバーを ダブル ク リ ッ ク し てパネル イ ン ス タ ン ス の イ ン スペ ク タ を表示 し 、 「一般」 タ ブで 「名前」 を 「SecondPanel」、 「 タ イ ト ル」 を 「Second Panel」 と し 、 「サ イ ズ」 タ ブで位置を (x,y)=(50,250) に

し ます。 2) 　 「適用」 し てパネル イ ン ス タ ン ス を 「閉 じ 」 ます。

3.3 　 2 つ目の ク ラ ス を作成する

3.3.1 　 パネルデー タ フ ァ イ ルを作成する

1) 　 メ ニ ューの 「フ ァ イ ル」 か ら 「新規」 「ガジ ェ ッ ト 」 と し て新 し いガジ ェ ッ ト バ ッ フ ァ を作 り ます。 図 13 の よ う に メ ッ セージ ラ ベル (IlvMessageLabel) と テ キ ス ト フ ィ ール ド (IlvTextField)、 ボ タ ン (IlvButton) を置き ます。 2) 　 図 13 を参考にガジ ェ ッ ト の イ ン スペ ク タ で ラ ベルを編集 し ます。 3) 　 同様に図 13 を参考にジ ェ ネ リ ッ ク イ ン スペ ク タ で名前 と コールバ ッ ク を編集 し ます。 4) 　 メ ニ ューの 「フ ァ イ ル」 「名前をつけて保存」 か ら ガジ ェ ッ ト バ ッ フ ァ の内容 をClass2.ilv と し て保存 し ます。

3.3.2 　 パネル ク ラ ス をセ ッ ト ア ッ プする

1) 　 Class2 のガジ ェ ッ ト バ ッ フ ァ ウ ィ ン ド ウ が前面に来てい る こ と を確認 し ます。 パネル ク ラ ス パ レ ッ ト でclass2 を 「パネル ク ラ スへ登録」 し ます。 2) 　 ク ラ ス の イ ン スペ ク タ の 「一般」 タ ブで 「 ク ラ ス」 を 「SecondPanelClass」 に変更 し 、 「適用」 し て 「閉 じ 」 ます。

3.3.3 　 結果表示パネルを作る

1) 　 先ほど と 同様にSecondPanelClass を アプ リ ケーシ ョ ンバ ッ フ ァ に ド ラ ッ グ し ま す。

2) 　 タ イ ト ルバーを ダブル ク リ ッ ク し てパネル イ ン ス タ ン ス の イ ン スペ ク タ を起 動 し 、 「一般」 タ ブで 「名前」 を 「Result」 、 「タ イ ト ル」 を 「Result Panel」 に 変更 し 「終了 コ ールバ ッ ク 」 は 「Exit」 を選びます ( 図 14)。 図 14 SecondPanelClass のパネルインスタンス 3) 　 「サ イ ズ」 タ ブで位置は (x,y) = (50,450) に し ます。 4) 　 「適用」 し て イ ン スペ ク タ を 「閉 じ 」 ます。

3.4 　 C++ の コー ド を生成する

メ ニ ュ ーの 「 コ ー ド 」 か ら 「すべて生成」 を選びます。.iva フ ァ イ ルを出力 し た フ ォル ダに ク ラ ス ご と の ソ ース フ ァ イ ル と ヘ ッ ダ フ ァ イ ル、 make フ ァ イ ルが出力 さ れます。

1) 　 Microsoft Visual Studio の コ マ ン ド プ ロ ンプ ト を 開 き 、 フ ァ イ ルを出力 し た フ ォ ルダに移動 し て、 「nmake myappli.mak」 と 打ち込みます。 ビル ド が 開始 さ れ、myappli.exe が生成 さ れます。 2) 　 myappli.exe を起動する と 図 15 の よ う に 3 つのパ ネルが表示 さ れ ま す。 終了す る には一番下のパ ネルの右上にあ る ｘ ボ タ ン を押 し ます。 こ の時点でパネルのGUI が完成 し ま し た。 こ のあ と コ ールバ ッ ク 関数の実装を行い ます。 図 15 アプリケーションの GUI 

3.5 　 コー ド を実装する

こ こ では コ ールバ ッ ク 関数を実装す る ために コ ー ド を編集す る 手順を説明 し ます。 直 接class1.cpp を編集 し て実装を書き加えて も き ちん と 動作する のですが、 後か ら Views Studio で追加や変更を行っ て フ ァ イ ルを再度出力す る と 、 手で編集 し た内容が上書 き さ れて消え て し ま い ます。 それを防 ぐ ために、Views Studio のパネル イ ン スペ ク タ か ら パネル ク ラ ス に コ ー ド を挿入す る 方法 と 、 ク ラ ス を継承 し て仮想関数を オーバー ラ イ ド す る 方法があ り ます。

こ こ ではViews Studio で class1, class2 に コールバ ッ ク 関数の実装を挿入するや り 方でサ ン プルア プ リ ケーシ ョ ン を 実装 し ま す。 ク ラ ス を 継承す る や り 方は別の文書 「Views Studio Getting Started(2)」 で説明 し ます。

3.5.1 　 Views Studio 上で FirstPanelClass の コー ド を編集する

1) 　 パネル ク ラ スパレ ッ ト か ら FirstPanelClass のパネル イ ン スペ ク タ を立ち上 げます。( 図 16) 図 16 パネルのインスペクタ 2) 　 「オプシ ョ ン」 タ ブの 「コールバ ッ ク の定義」 のチ ェ ッ ク をオ フに し ます。 3) 　 「 ソ ー ス」 タ ブ を開 き、 「 ソ ース フ ァ イ ル用 コ ー ド 」 に以下の コ ー ド を入力 し ます( 図 17)。 こ の コー ド は、 ス ラ イ ダーの コールバ ッ ク 関数の定義で、 ス ラ イ ダーを動か し た と き にその位置に対応す る 値を テ キ ス ト フ ィ ール ド に表示 さ せ る ための も のです。

図 17 SliderCB の実装 (class1.cpp の FirstPanelClass)

4) 　 「適用」 し てパネル イ ン スペ ク タ を 「閉 じ 」 ます。

3.5.2 　 SecondPanelClass の コー ド を編集する

1) 　 FirstPanelClass と 同様にパネル ク ラ スパレ ッ ト か ら SecondPanelClass のパネル void FirstPanelClass::SliderCB(IlvGraphic*) { getTextField()->setValue(getSlider()->getValue(), IlTrue); }

2) 　 「オプシ ョ ン」 タ ブの 「コールバ ッ ク の定義」 のチ ェ ッ ク をオ フに し ます。 3) 　 「 ソ ー ス」 タ ブ を開 き、 「 ソ ース フ ァ イ ル用 コ ー ド 」 に以下の コ ー ド を入力 し

ます( 図 18)。 「計算する」 ボ タ ンの コールバ ッ ク 関数 ComputeCB では上の ２ つのパネルを表現す るFirstPanelClass への参照を取得 し てそれぞれのテキ ス ト フ ィ ー ル ド か ら 整数値 を 取 り 出 し ま す。 そ の 後 ２ つ の 値 を 足 し あ わ せ て SecondPanelClass 自身の Result テキ ス ト フ ィ ール ド にセ ッ ト し ます。QuitCB に は ア プ リ ケ ー シ ョ ン 全体 の 終了処理 を 書 き ま す。MyApplication ク ラ ス と FirstPanelClass ク ラ ス の情報が必要で あ る ため、 それぞれが宣言 さ れてい る ヘ ッ ダ をinclude し ます。

4) 　 「適用」 し てパネル イ ン スペ ク タ を 「閉 じ 」 ます。

図 18 ComputeCB と QuitCB の実装（class2.cpp の SecondPanelClass）

5) 　 再び メ ニ ューの 「コー ド 」 「すべて を生成」 で コー ド を出力 し ます。

6) 　 Microsoft Visual Studio の コ マ ン ド プ ロ ンプ ト を開き、フ ァ イ ルを出力 し た フ ォ ルダに移動 し て、 「nmake myappli.mak」 と 打ち込みます。 ビル ド が開始 さ れ、 myappli.exe が生成 さ れます。

3.5.3 　 実行

myappli.exe を ク リ ッ ク し て実行する と 図 19 の よ う に 3 つの ウ ィ ン ド ウ が表示 さ れま す。 ス ラ イ ダーに よ っ てFirst Panel と Second Panel の値を設定 し 、 Result Panel の 「算 す る 」 ボ タ ン を押す と 結果のテ キ ス ト フ ィ ール ド に2 つの値を加算 し た値が表示 さ れ ます。 ま た、 「閉 じ る 」 ボ タ ン を押す と アプ リ ケーシ ョ ン全体が終了 し ます。 #include <ilviews/gadgets/appli.h> #include <class1.h> void SecondPanelClass::ComputeCB(IlvGraphic*) { IlvApplication* appli = IlvApplication::GetApplication(this);

FirstPanelClass* pan1 = (FirstPanelClass*)appli->getPanel("FirstPanel");

FirstPanelClass* pan2 = (FirstPanelClass*)appli->getPanel("SecondPanel");

int value1 = pan1->getTextField()->getIntValue(); int value2 = pan2->getTextField()->getIntValue(); getResult()->setValue(value1 + value2, IlTrue); }

void SecondPanelClass::QuitCB(IlvGraphic*) { delete IlvApplication::GetApplication(this); IlvExit(0);

図 19 実行画面

以上で RogueWave Views を使用 し て、 基本的な ガ ジ ェ ッ ト を使っ た ク ロ ス プ ラ ッ ト フ ォームの簡単なGUI アプ リ ケーシ ョ ン を作成する こ と がで き ま し た。