[1]Tech Fielders セミナー 東京 [Weekend], 2008/12/13, Copyright (C) 2008 hiyohiyo

[2]Tech Fielders セミナー 東京 [Weekend], 2008/12/13, Copyright (C) 2008 hiyohiyo

自己紹介

[3]Tech Fielders セミナー 東京 [Weekend], 2008/12/13, Copyright (C) 2008 hiyohiyo

はじめに※MFC (Visual C++ 用クラスライブラリ) プログラマを対象としています。

本日のプレゼンテーションでは……・HTML/CSS を使った GUI 設計・MFC と JavaScript のコラボレーションについて紹介します。

アプリケーションの GUI をクールにしたいと考えたことはありませんか？

[4]Tech Fielders セミナー 東京 [Weekend], 2008/12/13, Copyright (C) 2008 hiyohiyo

CDHtmlDialog とは？

•ダイアログを (X)HTML+CSS で作成できるクラス•Visual C++ 7.0 (.NET 2002) 以降で利用可能!!*MFC が含まれる Standard Edition 以上

リソースエディタ HTMLエディタ

[5]Tech Fielders セミナー 東京 [Weekend], 2008/12/13, Copyright (C) 2008 hiyohiyo

CDHtmlDialog の特徴

•JavaScriptライブラリが利用可能⇒ オープンソースのライブラリが多数あります!!

•CSSによりデザインを簡単に変更可能

メリット

デメリット

•IEの設定に影響を受けてしまう!?⇒ 画像表示設定など

•IEのバージョンにより挙動が異なる!?⇒ IE6/7/8で動作確認が必要

[6]Tech Fielders セミナー 東京 [Weekend], 2008/12/13, Copyright (C) 2008 hiyohiyo

ボタンのクリック

<a href=“#” id=“All” title=“All”>All</a>

HTML

C++ (.h ファイル)

BEGIN_DHTML_EVENT_MAP(CSampleDlg)DHTML_EVENT_ONCLICK(_T("All"), OnAll)

END_DHTML_EVENT_MAP()

HRESULT OnAll(IHTMLElement *pElement);

C++ (.cpp ファイル)

HRESULT CSampleDlg::OnAll(IHTMLElement* /*pElement*/){

AfxMessageBox(_T(“ボタンがクリックされたよ”));return S_FALSE;

}

C++ (.cpp ファイル)

クリック

[7]Tech Fielders セミナー 東京 [Weekend], 2008/12/13, Copyright (C) 2008 hiyohiyo

JavaScript 関数の呼び出しHTML (JavaScript)

C++ (.cpp ファイル)

<script id="source" language="javascript" type="text/javascript">

function changeBgImage(x){

// 背景画像の変更document.body.style.backgroundImage = x;

}</script>

CString fileName;fileName = _T(“url(background.png)");

CallScript(_T("changeBgImage"), fileName);

[8]Tech Fielders セミナー 東京 [Weekend], 2008/12/13, Copyright (C) 2008 hiyohiyo

CallScript関数の実装void CDHtmlDialogEx::CallScript(CString function, CString argument){

CComPtr<IHTMLDocument2> pDocument;HRESULT hr = GetDHtmlDocument(&pDocument);CComPtr<IDispatch> script;// スクリプトを取得hr = pDocument->get_Script(&script);CComBSTR name = CComBSTR(function);DISPID dispid;// 指定関数を検索hr = script->GetIDsOfNames(IID_NULL, &name, 1,

LOCALE_SYSTEM_DEFAULT, &dispid);CComVariant arg1 = CComVariant(argument);// 引数を設定DISPPARAMS params = {&arg1, NULL, 1, 0};VARIANT ret;EXCEPINFO exp;// 指定関数を呼び出しhr = script->Invoke(dispid, IID_NULL, LOCALE_SYSTEM_DEFAULT,

DISPATCH_METHOD, &params, &ret,&exp, NULL);

}

[9]Tech Fielders セミナー 東京 [Weekend], 2008/12/13, Copyright (C) 2008 hiyohiyo

JavaScript ライブラリの活用

jQuery ベースのグラフライブラリflot (http://code.google.com/p/flot/)

flotで描画

[10]Tech Fielders セミナー 東京 [Weekend], 2008/12/13, Copyright (C) 2008 hiyohiyo

まとめ