Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Silverlight入門(3)-JavaScript によるオブジェクトの動的な制御

実行時にJavaScriptからオブジェクトを操作する

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/12/14 14:00

本稿では、SilverlightオブジェクトをJavaScriptから操作する方法について解説します。JavaScriptを通して、Silverlightオブジェクトを実行時に生成して表示したり、Silverlightオブジェクトの状態を動的に変更することが可能です。

目次

はじめに

 これまでは、XAMLを用いてSilverlightオブジェクトを表示する方法を解説しました。しかし、XAMLによるオブジェクトの宣言はSilverlight起動時の静的なものでしかありません。起動時に、表示する図形が確定しているものであれば問題ありませんが、実行時に他の情報ソースから動的に生成しなければならない場合、スクリプトでオブジェクトを制御する必要があります。本稿では、JavaScriptから動的にSilverlightオブジェクトを操作する方法について解説します。

これまでの記事

Silverlight起動時のイベント

 Silverlight.jsに含まれているSilverlight.createObject()メソッドを用いてSilverlightプラグインを表示するとき、パラメータにonLoadという名前のハンドラを渡すことができます。この引数に渡した関数オブジェクトは、Silverlightがブラウザに読み込まれ直後にSilverlightから呼び出されます。onLoad()イベントを受けるハンドラは、次のように宣言します。イベントによって呼び出される関数の名前は任意です。

onLoad()イベント
onLoad(sender, context, source)

 senderには、このイベントを呼び出したSilverlight Plug-inオブジェクトが格納されています。このオブジェクトは、XAMLで用いることはありませんが、スクリプトからSilverlightプラグインそのものを制御するために用いる重要なオブジェクトです。contextには、Silverlight.createObject()メソッドの最後のパラメータに指定した値がそのまま渡されます。sourceには、読み込まれたXAMLのルート要素となっているオブジェクトが格納されています。

 まずは、onLoad()イベントを発生させてSilverlight.createObject()メソッドに渡したパラメータが受け取られているかどうかを調べてみましょう。

コード01 index.html
<!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 実行結果
図01 実行結果

 コード01は、Silverlightプラグインが実行されると同時に、HTMLのhead要素内で宣言しているJavaScriptのonLoadHandler()関数を呼び出します。onLoadHandler()関数は、Silverlight.createObject()メソッドのパラメータでonLoad()イベントとして呼び出すために渡しています。onLoadHandler()関数内では、alert()メソッドで表示したダイアログに context パラメータの値を表示しています。よって、コード01をブラウザで表示すると、Silverlightプラグインが読み込まれた時点で図01のようなダイアログが表示されます。表示する「test.xaml」ファイルはどのようなものでもかまいません。

 onLoad()イベントはsendercontextsourceの3つのパラメータを受け取ります。コード01では、このうちのcontextをダイアログで表示しています。この変数に格納されている値は、Silverlight.createObject()メソッドの最後のパラメータに渡した文字列に一致しています。このように、onLoad()イベントに任意のパラメータを渡すことができます。このパラメータには任意のオブジェクトを渡すことができます。Silverlightの起動オプションなどに応用することができるでしょう。

 senderに格納されているオブジェクトは、Silverlightそのものを表すSilverlight Plug-inオブジェクトです。このオブジェクトはSilverlight.createObject()メソッドから生成されるもので、明示的にインスタンス化することはありません。このオブジェクトは、Silverlightに関連する重要なプロパティやメソッドを提供しています。

 例えば、Silverlight.createObject()メソッドに渡された初期化パラメータをSilverlight Plug-inオブジェクトのInitParamsプロパティから取得することができます。

Silverlight Plug-inオブジェクトInitParamsプロパティ
value = silverlightObject.InitParams

 このプロパティは、Silverlight.createObject()メソッドに渡された初期化パラメータをそのまま返します。性質的にはonLoad()イベントで受け取ったcontextパラメータと同じ役割ですが、contextonLoad()メソッドに渡される一時的な値であることに対して、InitParamsはSilverlight Plug-inオブジェクトに所持されるステートとして機能します。

コード02 index.html
<!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 実行結果
図02 実行結果

 コード02は、Silverlight.createObject()メソッドの第6パラメータに指定する初期化パラメータに適当な文字列を渡し、この文字列がSilverlight Plug-inオブジェクトのInitParamsプロパティから取得して利用することができることを確認しています。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 赤坂 玲音(アカサカ レオン)

    平成13年度「全国高校生・専門学校生プログラミングコンテスト 高校生プログラミングの部」にて最優秀賞を受賞。 2005 年度~ Microsoft Most Variable Professional Visual Developer - Visual C++。 プログラミング入門サイト Wis...

バックナンバー

連載:Silverlight入門
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5