はじめに
これまでは、XAMLを用いてSilverlightオブジェクトを表示する方法を解説しました。しかし、XAMLによるオブジェクトの宣言はSilverlight起動時の静的なものでしかありません。起動時に、表示する図形が確定しているものであれば問題ありませんが、実行時に他の情報ソースから動的に生成しなければならない場合、スクリプトでオブジェクトを制御する必要があります。本稿では、JavaScriptから動的にSilverlightオブジェクトを操作する方法について解説します。
これまでの記事
Silverlight起動時のイベント
Silverlight.jsに含まれているSilverlight.createObject()メソッドを用いてSilverlightプラグインを表示するとき、パラメータにonLoadという名前のハンドラを渡すことができます。この引数に渡した関数オブジェクトは、Silverlightがブラウザに読み込まれ直後にSilverlightから呼び出されます。onLoad()イベントを受けるハンドラは、次のように宣言します。イベントによって呼び出される関数の名前は任意です。
onLoad(sender, context, source)
senderには、このイベントを呼び出したSilverlight Plug-inオブジェクトが格納されています。このオブジェクトは、XAMLで用いることはありませんが、スクリプトからSilverlightプラグインそのものを制御するために用いる重要なオブジェクトです。contextには、Silverlight.createObject()メソッドの最後のパラメータに指定した値がそのまま渡されます。sourceには、読み込まれたXAMLのルート要素となっているオブジェクトが格納されています。
まずは、onLoad()イベントを発生させてSilverlight.createObject()メソッドに渡したパラメータが受け取られているかどうかを調べてみましょう。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Silverlight test</title> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript"> function onLoadHandler(sender, context, source) { alert("onLoad:" + context); } </script> </head> <body> <div id="silverlight"></div> <script type="text/javascript"> var parentElement = document.getElementById("silverlight"); Silverlight.createObject( "test.xaml", //ソースファイル parentElement, //Silverlight を表示するDIVタグのDOMオブジェクト "silverlight01", //任意の一意なプラグインID { width: "400", //幅 height: "300", //高さ background: "#FFFFFF", //背景色 version: "1.0" //Silverlight のバージョン }, { onError: null, //エラー時のイベントハンドラ onLoad: onLoadHandler //読み込み時のイベントハンドラ }, null, //初期化パラメータ "Kitty on your lap" //onLoad イベントに渡される値 ); </script> </body> </html>
コード01は、Silverlightプラグインが実行されると同時に、HTMLのhead要素内で宣言しているJavaScriptのonLoadHandler()関数を呼び出します。onLoadHandler()関数は、Silverlight.createObject()メソッドのパラメータでonLoad()イベントとして呼び出すために渡しています。onLoadHandler()関数内では、alert()メソッドで表示したダイアログに context パラメータの値を表示しています。よって、コード01をブラウザで表示すると、Silverlightプラグインが読み込まれた時点で図01のようなダイアログが表示されます。表示する「test.xaml」ファイルはどのようなものでもかまいません。
onLoad()イベントはsender、context、sourceの3つのパラメータを受け取ります。コード01では、このうちのcontextをダイアログで表示しています。この変数に格納されている値は、Silverlight.createObject()メソッドの最後のパラメータに渡した文字列に一致しています。このように、onLoad()イベントに任意のパラメータを渡すことができます。このパラメータには任意のオブジェクトを渡すことができます。Silverlightの起動オプションなどに応用することができるでしょう。
senderに格納されているオブジェクトは、Silverlightそのものを表すSilverlight Plug-inオブジェクトです。このオブジェクトはSilverlight.createObject()メソッドから生成されるもので、明示的にインスタンス化することはありません。このオブジェクトは、Silverlightに関連する重要なプロパティやメソッドを提供しています。
例えば、Silverlight.createObject()メソッドに渡された初期化パラメータをSilverlight Plug-inオブジェクトのInitParamsプロパティから取得することができます。
value = silverlightObject.InitParams
このプロパティは、Silverlight.createObject()メソッドに渡された初期化パラメータをそのまま返します。性質的にはonLoad()イベントで受け取ったcontextパラメータと同じ役割ですが、contextがonLoad()メソッドに渡される一時的な値であることに対して、InitParamsはSilverlight Plug-inオブジェクトに所持されるステートとして機能します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Silverlight test</title> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript"> function onLoadHandler(sender, context, source) { alert("context=" + context + "\n" + "初期化パラメータ=" + sender.InitParams ); } </script> </head> <body> <div id="silverlight"></div> <script type="text/javascript"> var parentElement = document.getElementById("silverlight"); Silverlight.createObject( "test.xaml", //ソースファイル parentElement, //Silverlight を表示するDIVタグのDOMオブジェクト "silverlight01", //任意の一意なプラグインID { width: "400", //幅 height: "300", //高さ background: "#FFFFFF", //背景色 version: "1.0" //Silverlight のバージョン }, { onError: null, //エラー時のイベントハンドラ onLoad: onLoadHandler //読み込み時のイベントハンドラ }, "Dote up a cat.", //初期化パラメータ "Kitty on your lap" //onLoad イベントに渡される値 ); </script> </body> </html>
コード02は、Silverlight.createObject()メソッドの第6パラメータに指定する初期化パラメータに適当な文字列を渡し、この文字列がSilverlight Plug-inオブジェクトのInitParamsプロパティから取得して利用することができることを確認しています。
