はじめてのSilverlight - 匣の向こう側

いまいち全容がつかめてませんが、面白そうなので久々に新しいものに食いついてみました。

勉強がてら簡単なコードを書いてみました。サンプルは以下のファイルから構成されています。

Default.html
silverlight.js
CreateSilverlight.js
hello.xaml
hello.py

せっかくDLRでIronPythonが使えるので無駄にPythonでのサンプルにしてみました。(^^;

では、Default.htmlから順にトップダウンで見ていこうと思います。

<!DOCTYPE HTMLPUBLICWCDTDHTMLTransitionalENhttpwwwwcorgTRREChtmlloosedtdsavedfromurl=(0014)about:internet >
<html xmlns="http://www.w3.org/1999/xhtml" xmllang="en">
<head>
    <title>Silverlight 1.1 Alpha Samples ? Hello</title>
    <script src="silverlight.js" type="text/javascript" ></script>
    <script src="CreateSilverlight.js" type="text/javascript" ></script>
</head>

<body>
    <div id="SilverlightControl1Host" >
        <script type="text/javascript">
                var pe = document.getElementById("SilverlightControl1Host");
                createSilverlight();
        </script>
    </div>
</body>
</html>

最初に読み込まれるHTMLファイルですがポイントとしては、まずは、JavaScriptを読み込んでいる部分です。

silverlight.js
CreateSilverlight.js

この２つのファイルのうちsilverlight.jsは、MSから配布されている内容そのままで使うようなものなのでとりあえずはスルーします。で、もうひとつのCreateSilverligth.jsはこんな感じ。

function createSilverlight()
{  
    Sys.Silverlight.createObject("hello.xaml", pe, "wpf",
                                 {width:'640', height:'480', 
                                  inplaceInstallPrompt:false, background:'white', isWindowless:'false', 
                                  framerate:'30', version:'0.95'},
                                 {onError:null, onLoad:null},
                                 null);
}

これもMSが配布しているままですが、createObjectの第一引数にルート要素となるXAMLファイルを指定します。今回はhello.xamlとします。このファイルで定義しているcreateSilverlightメソッドがDefault.htmlから呼び出されています。メソッドが実行されるとhello.xamlが呼び出されることになりますので、続いてhello.xamlを見てみます。

<Canvas
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Name="Root"
    Width="640" Height="480"
  Background="Yellow"
    >
    <x:Code Source="hello.py" Type="text/python" />
    <TextBlock x:Name="textBlock" MouseEnter="enter" MouseLeave="leave">Hello</TextBlock>

</Canvas>

XAMLのルート要素としてCanvasを用意し、サイズと背景色などを指定しています。子要素にはCodeとTextBlockがあります。TextBlockはWinFormsで言うところのLavelのようなものでテキストを表示する領域となります。Codeはコードビハインドを実現するもので、使用する言語とソースファイルを指定します。ここでは、Pythonを指定してみました。また、注意としてCode要素は一番最初の子要素でないとエラーになるようです。

TextBlockのEnter、Leaveイベントにメソッドを指定していますが、そのメソッドはCode要素で指定したソースファイルに定義してあります。Pythonコードはこんな感じです。

def enter(sender, args):
    textBlock.Text="enter"

def leave(sender, args):
    textBlock.Text="leave"

見てのとおり、TextBlockのTextプロパティをenterやleaveに書き換えています。ここで指定しているtextBlockはXAMLのTextBlockのNameプロパティに指定したものです。Nameプロパティの値が変数名になるわけです。あとは、これらのファイルをIISの仮想ディレクトリにおいてIISゲストユーザにアクセス権を与えれば、ブラウザで動かすことができます。

全然、Silverlightらしくないサンプルでしたが、取っ掛かりになれば幸いです。