ここではMFCを選択します。これまでの説明は、これからの説明の前提知識になります。
ウインドウやボタンなどマウスで操作するアプリケーションをGUI( Graphical User Interface ) アプリケーションと呼びます。今まで作っていたプログラムのことをCUI (Character based User Interface)アプリケーション と呼びます。
それでは簡単なボタンとテキストを表示するプログラムを作ってみましょう。
実は、GUIはかなり予備知識が必要ですが、ここでは、まず作ってみることを優先します。
まずは、手順に従ってプログラムを完成させてください。
ファイル→新規作成→プロジェクトをクリックして新しいプロジェクトを作ります。
ここではMFCを選択します。
そして、MFCアプリケーションを選択します。
プロジェクト名は、guihelloとします。
OKボタンをクリックします。
OKボタンをクリックすると、下図のようなMFC アプリケーション ウィザードが現れます。
次へをクリックします。
設定は、下図と完全に同じにしてください。
ダイアログベースを選択し、ユニコードライブラリを使用するのチェックを解除します。
そして、次へをクリックしてください。
つぎの画面は下図のようにしてください。
すべてのチェックを解除し、ダイアログタイトルを「はじめてのGUI」とします。
次へをクリックします。
次の画面もすべてのチェックを下図のように解除してください。
次へをクリックします。
最後に完了ボタンをクリックします。
完了ボタンを押すと、プロジェクトには複数のファイルが自動生成されます。生成されるファイルの数は、Visual Studioのバージョンで異なることがありますがここでは特に気にしないで良いです。
ウィザードによって、プログラムのひな型ができています。
すでに、ウィンドウが開く状態になっているので、ビルドして実行してください。
下図のようなウィンドウが開いたら成功です。ボタンの位置やデザインはVisual Studioのバージョンで異なります。
OKボタンを押して閉じてください。
ウィンドウのボタンなど、マウスで操作可能な部品をコントロールと呼びます。
これから、これらコントロールを追加していきます。
その前に、まずは、不要な物を消します。
ソリューションエクスプローラの下のリソースビューのタブをクリックします。
表示が切り替わったらDialogを展開し、IDD_GUIHELLO_DIALOGをダブルクリックします。
すると下図のように先ほど表示したウィンドウのデザインが出てきます。
真ん中の文字をクリックして小さくて黒い四角が出ている状態にします。この状態でDelキーを押します。
すると、文字は消えます。貼り付けたコントロールを削除したい場合は同様にしてください。
次に、文字と、ボタンを貼り付けます。
文字を表示するコントロールをstatic textまたはstatic コントロールと呼びます。
画面の右側にあるツールボックスをクリックすると下図のようにことロールが現れます。
Static Textをクリックします。
この状態で、貼り付けたい部分をドラッグします。
貼り付けが完了しました。
貼り付けたStatic Textを右クリックしてプロパティをクリックします。
右側にプロパティの一覧が出てくるので、Captionの項目を左図のように変更します。
するとデザインに反映されます。
次に、Static Textのときと同様にしてボタンを張ります。
同様にプロパティでCaptionの項目を変更してください。
このような状態になります。少しボタンが小さいので大きくします。
小さな黒い四角をドラッグして大きさを調整します。
これで、準備完了です。
次に、ボタンがクリックされた時の動作を記述します。
まず、上で張り付けた押しちゃダメ！ボタンをダブルクリックします。
すると、表示が変わってプログラムコードが出てきます。
デザイン画面と、プログラムのコードの画面は上のタブをクリックすることで切り替わります。
まず、下図のように入力してください。括弧の中にはボタンのIDを入力します。
ボタンのIDは、デザイン画面に移動してプロパディを見ます。
押しちゃダメ！ボタンを選択して、IDの項目をコピーします。
ソースコードに戻って下図のように貼り付けます。IDC_BUTTON1が押しちゃダメ！ボタンのIDです。
括弧を閉じてセミコロンを入力します。
この追加した一行は、押しちゃダメ！ボタンへのアドレスをpButtonに取得します。
アドレスを取得するとpButtonを経由してボタンを操作することができます。
次に、ボタンの表示を変更するコードを記述します。
SetWindowTextAで表示が変えられます。
SetWindowTextAがない場合、または、エラーになる場合はSetWindowTextWを使ってください。SetWindowTextWを使う場合は引数のダブルクォーテーションの前にLをつけます。
例えば、上のコードは
pButton->SetWindowTextW(L"押したな。");
となります。ダブルクォーテーションの前にLをつけるとその文字列はUTL-16LEという文字コードの文字列として解釈されます。この文字コードはWindows標準の文字コードで位置文字を2バイト(=16bit)で表現するので漢字などが混じった文字を扱いやすくなります。文字コードの名前のLEはリトルエンディアンであることを表します。文字列を引数に取る関数でWがつくものはこのエンコードの文字列を引数に取ることを示唆していますのでダブルクォーテーションの前にLをつけてください。
ここで、ビルトして、実行してください。
実行して、ボタンをクリックてボタンの表示が変わったら成功です。
次に、Static Textのほうも表示が変わるようにします。
IDC_STATICがStatic TextコントロールのIDになっています。これもボタンと同様にプロパティのIDで見つけます。
ここで、ビルドして実行します。
ボタンをクリックして文字の表示化が変わったら成功です。
ここで、クラスの説明を簡単にしておきます。
CButtonクラスがボタンのクラスです。
CStaticクラスがStatic Textのクラスです。
GetDlgItemにIDを与えて呼び出すと、各コントロールのポインタが返ってきます。
CButton* pButton = (CButton*)GetDlgItem(IDC_BUTTON1);
という行がありますが、GetDlgItemの後ろの(CButton*)は何でしょうか。これは、明示的な型変換を行うときの記述です。
GetDlgItemをヘルプで調べるとわかりますが、返り値がCWnd型のポインタになっています。
この返り値をそのままCButton型のポインタであるpButtonに代入するとエラーになるので、このように書いて、返ってきたポインタの値を明示的にCButton型のポインタに変換して代入しています。
今は、そういう約束だという程度の理解で十分です。
それでは、さらにコントロールを追加しましょう。
デザインの画面に戻って、今度はエディットコントロールを追加します。
さらにボタンを追加してCaptionを変更します。
次にコードを追加します。書き込みボタンをクリックしたら、エディットボックス入力された内容が、先ほどのStatic Textに反映されるようにします。
書き込みボタンをダブルクリックして下図のようにコードを書き込んでください。
ビルドして、実行します。
左図のように、エディットコントロールに文字を書き込んで、書き込みボタンをクリックしたら、Static
Textコントロールに反映されます。
また、新しいクラスが出てきました。
CEditは、エディットコントロールのクラスです。使い方はCButtonやCStaticと同じです。
ただし、今回は、書き込みではなく、エディットコントロールの内容を読み込んでいます。
読み込むときは、文字用クラスのCStringを使います。
この例では、CString text;として文字列クラスのインスタンスtextを作り、GetWindowTextA（もしくは、GetWindowsTextW）でエディットコントロールの内容をtextに一旦格納します。
そして、textの内容をStaticTextコントロールに書き込みます。書き込み方は、既出の例と同じです。
それでは、課題をやりましょう。