2011年8月27日土曜日

JavaScriptとC#の連携方法(2)

ずっと前にJavaScriptとC#の連携について投稿しました.まずはDOM要素にアクセスするところだけ投稿して,その後C#からJavaScriptの関数を呼んだり,その逆を投稿しようとして後回しにしたまま忘れていました.と言うことで,C#からJavaScriptの関数を呼ぶ方法および,JavaScriptからC#の関数を呼ぶ方法について説明します.
今回は「Microsoft Visual Web Developer 2010 Express」(以下VWD)を使用して,C#を使ってSilverlight3アプリケーションを作成しました.HTMLファイルはVWDによって自動生成されたものに若干手を入れています.

また,ものすごく単純化して,以下の2つの機能を持つ一つのアプリケーションを作成します.Silverlight→JavaScriptの例として,Silverlightで一つのTextBoxと一つのButtonを設置し,Buttonが押されたらJavaScriptにTextBoxの内容を受け渡して,JavaScriptでAlertを使って受け取った内容を表示します.次にJavaScript→Silverlightの例として,HTMLで一つのTextと一つのButtonを設置して,Buttonが押されたらSilverlightにTextの内容を受け渡して,SilverlightのTextBoxに受け取った内容を表示します.

C#からJavaScriptの関数を呼ぶ方法

まず,呼び出される関数(JavaScript)を生成します.VWDが自動生成したMHTMLファイルは,"<プロジェクト名>TestPage.html"という名前で保存されています.その中の(今回は)21行目から56行目にJavaScriptの記述があるので,そこに以下の内容を追加します.見れば分かると思いますが,messageを受け取って,その内容をalertとして表示するだけです.
注意事項として,"<プロジェクト名>TestPage.html"は,コンパイルの度に標準状態に戻されます.悲しい思いをしないよう,バックアップを作成しながら作業してください.


次に,上記alertData関数を呼び出すC#のプログラムを記述します.VWDでは当たり前ですが,C#のプログラムは,TextBoxやButtonを配置した後,そのButtonをダブルクリックすれば,面倒な関数定義などは自動でやってくれます.念のため断っておくと,MainPage.xaml.csというファイルを編集します.
プログラムでは,button1が押された場合に,textBox1の内容をalertDataに送るという処理を記述します.実際の呼び出しはInvokeメソッドで行います.第一引き数に呼び出したい関数名を文字列で与え,第二引き数にオブジェクト型の配列として,実際にalertDataに与えたい引き数を列挙します.


この例では使用しませんが,例えばalertDataが三つの文字列を受け取るのであれば,次のように記述します.

System.Windows.Browser.HtmlPage.Window.Invoke( "alertData", new Object[] { "mouse", "cow", "tiger" } );


JavaScriptからC#の関数を呼ぶ方法

C#→JavaScriptは簡単でしたが,JavaScript→C#はちょっとやっかいです.順に説明するので,焦らずにいきましょう.先ほどと同じように,まずは呼び出される関数から記述します.記述するファイルは先程と同じくMainPage.xaml.csです.


一目瞭然ですが,messageを受け取って,textBox1に代入しています.ScripttableMember()は,外部からアクセスできるメソッドであることを示します.次に,外部からプログラム内部にアクセスできるように設定するため,App.xaml.csに変更を加えます.具体的には,27行から始まるApplication_Startup関数に追加します.以下にApplication_Startup関数を全て掲載しますが,実際には4行目を追加することになります.


次に,HTMLに入力欄とボタンを設置し,さらにSilverlightオブジェクトにIDを付加してJavaScriptからアクセスできるようにします.1行目から4行目を追加し,7行目に「id="slobj"」を挿入してください.1〜4行目では,入力欄とボタンを設置しています.ボタンがクリックされたらsendSL関数(後述)を呼び出します.記述するファイルは"<プロジェクト名>TestPage.html"です.繰り返しますが,"<プロジェクト名>TestPage.html"はコンパイルの度に標準状態に戻されます.


最後に,"<プロジェクト名>TestPage.html"にsendSL関数を記述します.これは,前述したalertData関数に続けて記述してください.

見ての通り,HTMLのIDからSilverlightオブジェクトを取得(3行目)して,呼び出したい関数を記述(4行目)するだけです.4行目のMainPageは,App.xaml.csのApplication_Startup関数に記述した文字列なので,対応さえしっかりしていれば変更可能です.
このエントリーをはてなブックマークに追加