IDEが吐いてくれるアプリケーションのひな型がVisual Studio 2012と2013ではかなり異なるみたいです。これまでの記事と少なからず重複しててゴメンナサイと謝りつつ、『C++/CX: Windows 8.1ストアアプリことはじめ』です。
step0：ペライチからはじめよう
Windows FormsやWPFを使ったデスクトップアプリにせよ、今回のストアアプリにせよ、はじめの一歩はまっさらのForm/Window/PageにTextBoxやらButtonやらを貼り付け、Button押したらTextBoxに「Hello,world」を表示する、みたいなオアソビから始めることと思います。
ユーザ入力→ロジック（処理）→画面に反映という一連の流れをXAMLの裏に貼りついたコードビハインドに埋め込みますわね。画面一枚/コード一本にすべてを詰め込んだ一枚ペラのアプリケーション:「ペライチ」ですな。実用アプリにはほど遠いけれど、僕はこのステップはとても大事だと思っています。基本的な材料と道具の扱いを身に着け、犬小屋程度のアプリケーションが作れるようになるための基礎訓練ですからね。
整数を1つ用意し、ボタンのクリックで+1/-1するペライチカウンタを作ってみました。
//
// MainPage.xaml.h
// MainPage クラスの宣言。
//
#pragma once
#include "MainPage.g.h"
namespace CounterApp
{
/// <summary>
/// Frame 内へナビゲートするために利用する空欄ページ。
/// </summary>
public ref class MainPage sealed
{
public:
MainPage();
private:
void btnInc_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
void btnDec_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
int count_; // 追加
};
}
//
// MainPage.xaml.cpp
// MainPage クラスの実装。
//
#include "pch.h"
#include "MainPage.xaml.h"
using namespace CounterApp;
using namespace Platform;
using namespace Windows::Foundation;
using namespace Windows::Foundation::Collections;
using namespace Windows::UI::Xaml;
using namespace Windows::UI::Xaml::Controls;
using namespace Windows::UI::Xaml::Controls::Primitives;
using namespace Windows::UI::Xaml::Data;
using namespace Windows::UI::Xaml::Input;
using namespace Windows::UI::Xaml::Media;
using namespace Windows::UI::Xaml::Navigation;
// 空白ページのアイテム テンプレートについては、http://go.microsoft.com/fwlink/?LinkId=234238 を参照してください
MainPage::MainPage()
{
InitializeComponent();
count_ = 0; // 追加
}
// 「ふやす」ボタンがクリックされたら..
void CounterApp::MainPage::btnInc_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
txtCount->Text = (++count_).ToString();
}
// 「へらす」ボタンがクリックされたら..
void CounterApp::MainPage::btnDec_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
txtCount->Text = (--count_).ToString();
}
step1：ちょっとイケてるペライチ
XAMLによるPageと、Pageの裏に作られるコードビハインドのなかにすべてを詰め込むこのやりかたで、およそありとあらゆるアプリが作れます。が、これだと機能が増えてくるに従ってコードビハインドが大きくかつ複雑になってきます。犬小屋の作り方は一戸建ての二階屋に適用するのには無理があるし、できたところで巨大な犬小屋。間仕切りもなく配線/配管むき出しで住み心地最悪だし、増改築に苦労します。
同じペライチでも筋のいいペライチ:機能の増大に伴う複雑さの増大を極力抑える工夫を盛り込んだ構造が望まれます。はじめの一歩は犬小屋でいいとしても、つぎの一歩は「より大きな犬小屋」じゃなく「ミニチュア一戸建て」を目指してほしい。
そんなわけで「ミニチュア一戸建て」のためのstep1ですが、これは以前にまとめたアーティクル『C++/CX: Windows 8ストアアプリことはじめ』がWindows 8.1/Visual Studio 2013でもそのまま通用します。ざっくり読んで/試して、またココに戻ってきてくださいな。
...おかえりなさい。XAMLによるUI（View）とカウンタ本体（Model）とを分離し、少しだけ見通しの良くなったコードになりました。
現時点では「ふやす/へらすボタンが押された」に反応する処理がコードビハインドに書かれています。もちろんちゃんと動いてくれます。が、ホントにこれでよいのでしょうか。アプリが本来やりたいことはユーザが「カウンタを+1/-1しろと命じた」に反応するのが筋ってもんじゃないかしら。「ふやすボタンが押されたら...」はたまたま現UIでそうなってるだけですよね。カウント値の表示も同様です。たまたま現UIでTextBlockを使ってるけど、他の表現例えばスピードメータの針や背景色の変化であってもいい。カウンタ値とその表現とは別モノとして扱う方がツブシが効くはずです。
