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に定義されているストーリーボード) を開始しています。