MFCアプリケーションのユーザインタフェースをすべてJavascript(JQuery)におまかせしてしまう

wpfがある.NETと違って、MFCアプリを作っていると、ユーザインタフェースの見た目がしょぼくなりがち。
ちょっと凝ったことをしようとすると、すぐに複雑化してしまう。

面倒なので、ユーザインタフェースをJavascriptにおまかせしてしまう方法。
(CDHtmlDialogを使うので、MFC限定です)

今回は、Javascriptを使うところまでを記述します。
JavascriptとMFC間のイベントの受け渡しは次回やります。

1.プロジェクトの作成

VisualStudioから、"testJQuery"という名前で、MFCのプロジェクトを作成します。
CDHtmlDialogを使用するため、以下をチェックしてください

2.Javascriptをリソースへ追加する

Javascriptのライブラリとして、JQueryを使います。
jQuery

"jquery.js"を、作成したプロジェクトの"res"フォルダにコピーしておきます。

VisualStudioのソリューションエクスプローラーの、リソースフォルダで右クリックをして、"追加"、"既存の項目"で、先程コピーした"res\jquery.js"を選択します。

VisualStudioのソリューションエクスプローラーの、リソースビューを開き、プロジェクトのトップで右クリックをして、"リソース"の追加、"カスタム"を選択し、"JS"を入力します。

こんな感じになります。

VisualStudioのソリューションエクスプローラーの"testJQuery.rc"を右クリック、"コードの表示"を選択します。

"JS"の項目が空の状態になっているので、ここに、"jquery.js"を追加します。

/////////////////////////////////////////////////////////////////////////////
//
// JS
//
IDR_JS1 JS "res\\jquery.js"

3.JQueryの実行

"testJQuery.htm"を開いて、以下のように書き換えます。*1

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis"/>
<SCRIPT src="res:/JS/#129" type=text/javascript>
</SCRIPT>
<script type="text/javascript">
    function fadeIn() {
        $("#contents").fadeIn("fast");
    }
    function fadeOut() {
        $("#contents").fadeOut();
    }
</script>
</HEAD>
<BODY ID=CtestJQueryDlg BGCOLOR=LIGHTGREY style="font-family:MS UI Gothic;font-size:9">

<TABLE WIDTH=100% HEIGHT=100%>
<TR WIDTH=100% HEIGHT=45%>
<TD ALIGN=CENTER VALIGN=BOTTOM id="contents">
TODO: Place controls here.
</TD>
</TR>
<TR WIDTH=100% HEIGHT=100%>
<TD ALIGN=RIGHT VALIGN=BOTTOM>
<BUTTON STYLE="WIDTH:100" ID="ButtonFadeIn" onClick="fadeIn()">fadeIn</BUTTON>
<BUTTON STYLE="WIDTH:100" ID="ButtonFadeOut" onClick="fadeOut()">fadeOut</BUTTON>
<BUTTON STYLE="WIDTH:100" ID="ButtonOK"">OK</BUTTON>&nbsp;<BUTTON STYLE="WIDTH:100" ID="ButtonCancel">キャンセル</BUTTON>
</TD>
</TR>
</TABLE>

</BODY>
</HTML>