Silverlightの領域を確保する
Silverlightを作成するには、複数のファイルが必要です。必要最小限のファイルは次の3つです。
- index.html
- createSilverlight.js
- Silverlight.js
ファイル名は、各ファイル間の整合性がとれていれぱ自由に付けてかまいません。後述しますが、このうちSilverlight.jsはMicrosoft Silverlight 1.0 Software Development Kit（通称、Silverlight 1.0 SDK ）をインストールすると、そこに含まれているものです。
では、さっそく3つのファイルを示して、具体的な表示方法を紹介します。なお、以下ではまだXAML（ザムル）は出てきません。結論から先に書くと、以下の3つのファイルを行うのは、Silverlightプラグインの領域を確保するだけです。確保した領域に円や四角、画像や動画を表示するとき、XAMLを使うことになります。
【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" xml:lang="ja">
<head>
<title>はじめてのSilverlight</title>
<script type="text/javascript" src="
Silverlight.js
"></script>
<script type="text/javascript" src="
createSilverlight.js
"></script>
</head>
<body onload="
createMySilverlightPlugin()
">
</body>
</html>
【createSilverlight.js】
function
createMySilverlightPlugin()
{
Silverlight.createObject("",document.body,"firstsample",{width:"300",height:"300",background:"lavender",version:"1.0"},{onError:null,onLoad:null});
}
【 Silverlight.js 】（そのまま使うので内容省略）
SilverlightのSDKに含まれるJSファイルをそのまま使います。中身は一切、編集しません。入手する場合は、上のリンクをクリックしてください。
以上の3つのファイルを同一フォルダに置き、index.htmlをブラウザ（Silverlightをインストールしてあれば、IEでもFirefoxでも可）に読み込みます。セキュリティに警告が出たら、許可を与えてください。次が実際の表示です。
http://www.makoto3.net/xaml/silverlight0020/index.html
まず、index.htmlには、Silverlight.jsとcreateSilverlight.jsの2つの外部スクリプトファイルが指定されています。Silverlight.jsは、SDKに含まれるものをそのまま使うので、内容はここでは無視します。"決まり事"ととらえればOKです。
createSilverlight.jsについては、先に示したソースのとおりで、createMySilverlightPlugin()という関数を1つ定義しているだけです。引数の説明をざっとします。最初の""はXAMLファイルを指定するのですが、ここではまだ何も指定してないので空欄です。2番目はSilverlightプラグインを作成する位置を示しています。document.bodyなので、Webページのボディ部に作成されます。次の"firstsample"は、作成するSilverlightプラグインの名前です。次の{ }内は幅、高さ、背景色、バージョンの指定です。最後の{ }内はエラー処理で、nullを指定すると「デフォルト設定の従う」という意味になるそうです。
index.htmlを読み込むと、<body>のonloadイベントハンドラによってcreateMySilverlightPlugin()関数が呼び出され、引数の指定にしたがって、Silverlightプラグインの領域が確保されます。引数で指定してあるとおり、幅300px、高さ300px、背景色がlavenderとなります。
以上、Silverlightの領域を確保する、最もシンプルな例を紹介しました。
このページは
xfy Blog Editor
を利用して作成されました。
コメント