Silverlightのテンプレートを読む(JavaScript)
ここでは、Visual Studio2005上に作成されるテンプレートを読んで見ます。
Default.htmlを読む
最初に読み込まれるDefault.htmlを読んでみます。
いくつかのJavaScriptが読み込まれ、createSilverlightが実行されます。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SilverlightJSApplication1</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="Default.html.js"></script>
<script type="text/javascript" src="Scene.xaml.js"></script>
</head>
<body>
<div id="SilverlightPlugInHost">
<script type="text/javascript">
createSilverlight();
</script>
</div>
</body>
</html>
- Silverlight.js：Silverlightのコアで、インスタンスを生成するcreateObjectやcreateObjectExなどを持つ 。
- Default.html.js：Silverlight.jsのcreateObjectExを呼びアプリケーションのインスタンスを生成します。
- Scene.xaml.js：Scene.xamlの動作部分(イベント)を定義しています。ボタンのイベントなど。
最初に、**div id=“SilverlightPlugInHost”**タグがSilverlightコンテンツを表示させる場所となります。
このタグ内の**createSilverlight()**でSilverlightコンテンツのインスタンスを生成します。 createSilverlight()は、Default.html.jsに定義されています。
Default.html.jsを読む
Default.html.jsでは、Silverlightコンテンツのインスタンス生成やSilverlightコンテンツonLoadイベント時の 定義などを行います。
function createSilverlight()
{
var scene = new SilverlightJSApplication1.Scene();
Silverlight.createObjectEx({
source: 'Scene.xaml',
parentElement: document.getElementById('SilverlightPlugInHost'),
id: 'SilverlightPlugIn',
properties: {
width: '400',
height: '400',
background:'#ffffff',
isWindowless: 'false',
version: '1.0'
},
events: {
onError: null,
onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
},
context: null
});
}
if (!window.Silverlight)
window.Silverlight = {};
Silverlight.createDelegate = function(instance, method) {
return function() {
return method.apply(instance, arguments);
}
}
Scene.xaml.jsに定義されているSceneのインスタンスを生成します。
次にSilverlightのインスタンスを生成します。Silverlight.createObjectExの 第一引数(source)にXAMLファイル名、第二引数(parentElement)に Silverlightコンテンツを表示させる場所としてDefault.htmlで指定したIDを渡します。
第三引数(id)には、ここで生成するSilverlightコンテンツのIDを指定します。
第四引数(properties)には、Silverlightコンテンツのサイズ、背景色、ウィンドウレスで表示するかどうか、 バージョン等を指定します。
第五引数(events)には、Silverlightコンテンツ実行時のonError及びonLoadイベントのイベントハンドラー を指定します。上記サンプルでは、onLoad時にマウスのイベントハンドラーが定義されるようになっています。
実際にマウスイベントのハンドラー登録およびイベントは、Scene.xaml.jsに定義されています。
上記サンプルでは、onLoadイベントでcreateDelegateを介しScene.xaml.js内のscene.handleLoadが実行されます。
Scene.xaml.jsを読む
Scene.xaml.jsでは、ボタンへのイベントハンドラーの登録と各イベントでの動作を定義しています。
if (!window.SilverlightJSApplication1)
window.SilverlightJSApplication1 = {};
SilverlightJSApplication1.Scene = function()
{
}
SilverlightJSApplication1.Scene.prototype =
{
handleLoad: function(plugIn, userContext, rootElement)
{
this.plugIn = plugIn;
// Sample button event hookup: Find the button and then attach event handlers
this.button = rootElement.children.getItem(0);
this.button.addEventListener("MouseEnter",
Silverlight.createDelegate(this, this.handleMouseEnter));
this.button.addEventListener("MouseLeftButtonDown",
Silverlight.createDelegate(this, this.handleMouseDown));
this.button.addEventListener("MouseLeftButtonUp",
Silverlight.createDelegate(this, this.handleMouseUp));
this.button.addEventListener("MouseLeave",
Silverlight.createDelegate(this, this.handleMouseLeave));
},
// Sample event handlers
handleMouseEnter: function(sender, eventArgs)
{
// The following code shows how to find an element by name and call a method on it.
var mouseEnterAnimation = sender.findName("mouseEnter");
mouseEnterAnimation.begin();
},
handleMouseDown: function(sender, eventArgs)
{
var mouseDownAnimation = sender.findName("mouseDown");
mouseDownAnimation.begin();
},
handleMouseUp: function(sender, eventArgs)
{
var mouseUpAnimation = sender.findName("mouseUp");
mouseUpAnimation.begin();
// Put clicked logic here
alert("clicked");
},
handleMouseLeave: function(sender, eventArgs)
{
var mouseLeaveAnimation = sender.findName("mouseLeave");
mouseLeaveAnimation.begin();
}
}
handleLoadは、Silverlightコンテンツロード時に実行されイベントと関数を関連付けています。
それ以外の部分では、実際のマウスイベントに合わせた動作を定義しています。
このサンプルでは、MouseEnter、MouseLeftButtonDown、MouseLeftButtonUp、MouseLeaveの 4つが定義されており、他にもMouseMoveがあります。
今回のサンプルでは、マウスの状態に合わせてアニメーション(xamlに定義されているストーリーボード) を開始しています。