Silverlight の勉強

調べながら書いてるので、どんどん追記していきます。

とりあえずSilverlight2.0 の SDK をインストール
SDKをインストールすると、Silverlight.js というファイルが手に入る。
- Silverlight.js は SWFObject.js 的なもの。500行と結構ボリュームはあるけど中身はスカスカで、絶対に必要というわけでもない。
- isInstalled と createObject だけ参考にして自分でコード書いたほうが良い → 書く。

Silverlight = {
  _silverlightCount = 0, // 参照カウンタ的なもの
  isInstalled= function() {}, // プラグインの存在確認。バージョン指定可能
  WaitForInstallCompletion = function() {}, // インストール完了を待つ
  __startup= function() {}, // インストールが必要かどうかを判断し、インストール完了を待つ
  createObject = function() {}, // キモ。パラメタを受け取り、object要素を生成する
  buildHTML= function() {}, // objectタグの雛形にパラメタを入れ込む sprintf あればいらない
  createObjectEx = function() {}, // createObject が複数の引数を取るのに対し、createObjectExはまとめたものを1つ受け取る。
  buildPromptHTML= function() {}, // SilverLight をダウンロードさせるためのリンクを生成する
  HtmlAttributeEncode = function() {} // objectタグに渡すパラメタをunicodeの数値参照(&#0000;)にエンコードする
};

createObject に渡すパラメタで "background" というものがある
- 不透明度(α値)を指定可能らしいので、MSDNを見たら、見たことも無いフォーマットが2つ出現。
  - "#AARRGGBB" or "sc#0.5,1,0,0" 形式で指定できるらしいが、rgba(0,0,0,1.0) ではなく、なぜ独自フォーマットなのかと小1時間。完全に透明にするには "#00000000" を指定するらしい。"transparent"が使えるか後で試してみる
Silverlight2.0からは、JavaScript以外の言語(C#,VB,...)からも利用可能になったが、そのためドキュメントが読みづらい。
- JavaScriptに絞って話しが進む SilverLight1.0の説明のほうが、シンプルで分かりやすい場合もある。

createObjectするとこんな感じのobjectタグが追加されるらしい

  <object id="id" data="data:application/x-silverlight,"
          type="application/x-silverlight" width="100%" height="100%">
    <param name="source" value="SilverlightApplication.xap" />
    <param name="onError" value="onErrorHandler" />
    <param name="onResize" value="onResizeHandler" />
  </object>

こんな感じで使う

<html>
<head>
  <script type="text/javascript">
    function onErrorHandler(sender, args) { }
    function onResizeHandler(sender, args) { }
  </script>
</head>
<body>
  <object id="id" data="data:application/x-silverlight,"
          type="application/x-silverlight" width="100%" height="100%">
    <param name="source" value="SilverlightApplication.xap" />
    <param name="onError" value="onErrorHandler" />
    <param name="onResize" value="onResizeHandler" />
  </object>
</body>
</html>

インラインXAML というのもあるらしいので、xamlをファイルで用意しなくても、htmlファイル内に埋め込めるらしい。

<script type="text/xaml" id="xamlContent"><?xml version="1.0"?>
  <Canvas xmlns="http://schemas.microsoft.com/client/2007" Background="Wheat">
    <TextBlock Canvas.Left="20" FontSize="24" Loaded="setDate" />
  </Canvas>
</script>

Hello worldは無事通過(サンプルまんま)

<html>
<head>
  <title>Display Date</title>
  <script type="text/javascript" src="lib/Silverlight.js"></script>
</head>

<body bgcolor="Teal">
<div id="pluginHost" >
</div>
<script>
function createSilverlightEx() {  
    Silverlight.createObjectEx({
        source: 'sl.xaml',
        parentElement:parentElement,    // DOM reference to hosting DIV tag.
        id:'myPlugin',                  // Unique plug-in ID value.
        properties:{                    // Plug-in properties.
            width:'75%',                // Width of rectangular region of plug-in, in pixels.
            height:'75%',               // Height of rectangular region of plug-in, in pixels.
            background:'oldlace',       // Background color of plug-in.
            version:'1.0'},             // Plug-in version.
        events:{
            onLoad:null}});             // OnLoad property value -- event-handler function name.
}
var parentElement = document.getElementById("pluginHost");
createSilverlightEx();

</script>

</body>
</html>

// FILE: sl.xaml
<Canvas 
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Ellipse
    Height="200" Width="200"
    Stroke="Black" StrokeThickness="10" Fill="SlateBlue" />
</Canvas>

- source: 'sl.xaml' を DataURI化してIE6で外部ファイルなしで動かそうとしたけど出来なかった。IE8やFirefoxならできるかもとおもったけどダメだった。何かコツがあるのかも知れないし、出来ないのかもしれない。

source: 'data:application/x-silverlight;base64,
  PENhbnZhcyB4bWxucz0iaHR0cDovL3NjaGVtYXMubWljcm
  9zb2Z0LmNvbS9jbGllbnQvMjAwNyIgICB4bWxuczp4PSJo
  dHRwOi8vc2NoZW1hcy5taWNyb3NvZnQuY29tL3dpbmZ4Lz
  IwMDYveGFtbCI%2BPEVsbGlwc2UgSGVpZ2h0PSIyMDAiIF
  dpZHRoPSIyMDAiIFN0cm9rZT0iQmxhY2siIFN0cm9rZVRo
  aWNrbmVzcz0iMTAiIEZpbGw9IlNsYXRlQmx1ZSIgLz48L0
  NhbnZhcz4NCg%3D%3D',

Opera9.61ではSilverlightが動いた(Opea9.27ではだめ)。
- Silverlightの公式ページに行くと、Safari, Opera9.61 は「Silverlightがインストールされていない」と出る。気にしないことにする。
メソッドは大小文字を区別しないが、XAML要素と属性名は大小文字が区別される(XMLベースの言語だからこちらは当然)
- FINDNAME() も findName() も FindName() も FinDNamE() も全て同じAPIを呼び出すとある。

<Rectangle Width="100"></Rectangle> は <rectangle width="100"></rectangle> と書けない

これはOKらしい。
<script>
function hoge(sender, arg) {
  sender.gETHOSt();
}
</script>

SilverLightのオブジェクトの上に、div要素を配置することは可能。
- ただし、windowless = "true" と background = "#00000000" の同時指定が必要。

<style>
#hoge {
  position: absolute;
  top: 80px;
  left: 80px;
  z-index: 3;
  border: 3px outset red;
  background-color: pink;
  color: gray;
  font-weight: bold;
  width: 100px;
  height: 100px;
  filter: alpha(opacity=50);
}
</style>
<div id="hoge">hoge</div>
<script>
function createSilverlightEx() {  
  Silverlight.createObjectEx({
    source: 'sl.xaml',
    parentElement:parentElement,  // DOM reference to hosting DIV tag.
    id:'myPlugin',                // Unique plug-in ID value.
    properties:{                  // Plug-in properties.
      width:'75%',                // Width of rectangular region of plug-in, in pixels.
      height:'75%',               // Height of rectangular region of plug-in, in pixels.
      background:'#00000000',     // Background color of plug-in.
      windowless: "true",
      version:'1.0'},             // Plug-in version.
    events:{
      onLoad:null}});             // OnLoad property value -- event-handler function name.
}
</script>

- Silverlight(青)の上に div(hoge)を配置

理解できたこと一覧

空のxamlファイルをコピーして複数登場させることが可能。
他の要素の上に表示することも、他の要素のしたに表示させることも可能。
DOMと同じようにアクセスできないので、薄皮となるライブラリが必要。