SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Silverlight入門

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

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


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

本稿では、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プロパティから取得して利用することができることを確認しています。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
エラー処理

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
Silverlight入門連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/1938 2008/08/20 11:59

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング