RW View Studio Getting Started (1) : 簡単な GUI アプリケーションを作成する 目次 第 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 ローグウェーブソフトウェアジャパン株式会社
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 http://www.roguewave.jp 2
第 2 章 :Views Studio を起動する 2 3 図 2 のようにスタートメニューから IVFStudio をクリックすると 図 3 のようなプラグインの選択画面が起動してアプリケーションに必要なプラグインを選択します この画面が起動時に現れるのは初回のみですが Views Studio 起動後でもメニューの ツール プラグインを選択 から変更ができます 3 ローグウェーブソフトウェアジャパン株式会社
2.1 起動画面 ( メインウィンドウ ) の説明 2.2 ガジェットエクステンション メニューバーの右端にあり 設定画面を呼び出します 1) テスト アプリケーションやパネルをテストします 2) パネルクラスパレットパネルクラスパレットの表示非表示を切り替えます 3) アプリケーションの編集アプリケーションバッファを前面に出してパネルクラスパレットを表示します 4) アプリケーションの詳細設定アプリケーションのインスペクタパネルを開きます http://www.roguewave.jp 4
第 3 章 : アプリケーションを作成する 3.1 アプリケーションクラスのセットアップ アプリケーションの詳細設定 をクリックしてアプリケーションパネルを起動し 一般 タブの クラス を MyApplication に変え 適用 して 閉じる ボタンを押してウィンドウを閉じます メニューの ファイル から 名前を付けて保存 で myappli.iva として保存します このときアプリケーションバッファウィンドウ ( Application testapp.iva ) が前面に出ていないと保存画面が現れないのでご注意ください 5 ローグウェーブソフトウェアジャパン株式会社
3.2 1 つ目のクラスを作成する 3.2.1 パネルデータファイルを作成する 7 1) パレットパネルからスライダー (IlvSlider) メッセージラベル (IlvMessageLabel) テキストフィールド (IlvTextField) をガジェットバッファウィンドウにドラッグします 2) それぞれのガジェットをダブルクリックするとインスペクタが現れます ( 図 8) 8 3) メッセージラベルの 詳細 タブを開いて ラベル を Value と設定し 適用 して 閉じ ます http://www.roguewave.jp 6
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) 7 ローグウェーブソフトウェアジャパン株式会社
11 3) FirstPanelClass のタイトルバーをダブルクリックするとパネルインスタンスのインスペクタが表示されます ( 図 12) 12 FirstPanelClass 4) 一般 タブを開くと既に FirstPanelClass という名前が設定されているので 名前 を FirstPanel に変え タイトルを First Panel に変更します このとき 名前 は変数名なので空白は使えません また サイズ タブで位置を (x,y)=(50,50) にします 5) 適用 してパネルインスタンスを 閉じ ます http://www.roguewave.jp 8
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 に変更し 適用 して 閉じ ます 9 ローグウェーブソフトウェアジャパン株式会社
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 つのパネルが表示されます 終了するには一番下のパネルの右上にある x ボタンを押します この時点でパネルの GUI が完成しました このあとコールバック関数の実装を行います 15 GUI http://www.roguewave.jp 10
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) このコードは スライダーのコールバック関数の定義で スライダーを動かしたときにその位置に対応する値をテキストフィールドに表示させるためのものです void FirstPanelClass::SliderCB(IlvGraphic*) { gettextfield()->setvalue(getslider()->getvalue(), IlTrue); } 17 SliderCB (class1.cpp FirstPanelClass) 4) 適用 してパネルインスペクタを 閉じ ます 3.5.2 SecondPanelClass のコードを編集する 1) FirstPanelClass と同様にパネルクラスパレットから SecondPanelClass のパネルインスペクタを立ち上げます ( 図 16) 11 ローグウェーブソフトウェアジャパン株式会社
2) オプション タブの コールバックの定義 のチェックをオフにします 3) ソース タブを開き ソースファイル用コード に以下のコードを入力します ( 図 18) 計算する ボタンのコールバック関数 ComputeCB では上の 2 つのパネルを表現する FirstPanelClass への参照を取得してそれぞれのテキストフィールドから整数値を取り出します その後 2 つの値を足しあわせて SecondPanelClass 自身の Result テキストフィールドにセットします QuitCB にはアプリケーション全体の終了処理を書きます MyApplication クラスと FirstPanelClass クラスの情報が必要であるため それぞれが宣言されているヘッダを include します 4) 適用 してパネルインスペクタを 閉じ ます #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); } 3.5.3 実行 18 ComputeCB QuitCB class2.cpp SecondPanelClass 5) 再びメニューの コード すべてを生成 でコードを出力します 6) Microsoft Visual Studio のコマンドプロンプトを開き ファイルを出力したフォルダに移動して nmake myappli.mak と打ち込みます ビルドが開始され myappli.exe が生成されます myappli.exe をクリックして実行すると図 19 のように 3 つのウィンドウが表示されます スライダーによって First Panel と Second Panel の値を設定し Result Panel の 算する ボタンを押すと結果のテキストフィールドに 2 つの値を加算した値が表示されます また 閉じる ボタンを押すとアプリケーション全体が終了します http://www.roguewave.jp 12
19 以上で RogueWave Views を使用して 基本的なガジェットを使ったクロスプラットフォームの簡単なGUI アプリケーションを作成することができました 13 ローグウェーブソフトウェアジャパン株式会社