Javascriptが好きな人のためのSilverlight入門

http://www.atmarkit.co.jp/fwcr/rensai2/silverlight01/silverlight01_1.html
ここにあるサンプルはほとんどXAMLで書かれていてゲロ吐きそうになった。XAMLはCanvasだけでも、JavaScriptで色々と書ける。高機能なcanvasエレメントみたい。

準備

• Silverlight.js
• Silverlight SDKあたりに入ってるヘルプファイル

XAMLを書く

canvas.xaml

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Loaded="Canvas">
</Canvas>

Loadedの値は、XAMLが読み込まれたときに実行されるfunction名。

XAMLを読ます

window.onload = function(){
	Silverlight.createObjectEx({
		source       : "canvas.xaml",
		parentElement: document.getElementById("canvas"),
		id           : "silverlightControlHost",
		properties   : {
			width               : "300",
			height              : "300",
			inplaceInstallPrompt: false,
			background          : "#eee",
			isWindowless        : 'false',
			framerate           : '24',
			version             : '1.0'
		},
		events       : {
			onError: null,
			onLoad : null
		}
	});
};

Silverlight.createObjectExはSilverlight.jsにあるやつ。canvasというIDの要素にSilverlightをブッ込みます。

Hello World

function Canvas(sender, args){
	var plugin = sender.getHost();
	var text_xaml = "<TextBlock Width=\"304\" Height=\"51\" TextWrapping=\"Wrap\" FontFamily=\"Arial\" FontSize=\"48\" FontWeight=\"Bold\" Text=\"Hello World!!\"></TextBlock>";
	var text = plugin.content.CreateFromXAML(text_xaml);
	sender.children.add(text);
}

上のXAMLで書いたLoadedの値をグローバルから使える所に定義。引数のsenderはCanvasオブジェクト、argsは他の何かが入ってきます。
CanvasにTextBlockをブッ込んでいるけど、結局XAML書いてしまっていて酷い。XAMLを書ける何かを作ったほうがいいです。

// xaml.js
Silverlight.XAML = function(elementName, attributes){
	var self = this;

	self.attributes = attributes;

	self.toString = function(){
		var xaml = ['<' + elementName];

		for(var x in self.attributes){
			xaml.push(x + '="' + self.attributes[x] + '"');
		}

		xaml.push('>');
		xaml.push('</'+elementName+'>');

		return xaml.join(' ');
	};
};

こういうのを用意してやればXMLっぽくなく書けますね。

function Canvas(sender, args){
  var plugin = sender.getHost();
  var text = plugin.content.CreateFromXAML(new Silverlight.XAML("TextBlock", {
      Width       : 304,
      Height      : 51,
      TextWrapping: "Wrap",
      FontFamily  : "Arial",
      FontSize    : 48,
      FontWeight  : "Bold",
      Text        : "Hello World!!"
  }).toString());
  sender.children.add(text);
}

あと何だっけ

まあ、これだけでもHello World!!と表示されてるはずです。
プロパティは、値がプリミティブのときはそのまま設定できますが、Silverlightのオブジェクトの場合はCreateFromXAMLで作ってから設定します。

// 縦長くする
var scale = plugin.content.CreateFromXAML(new Silverlight.XAML("ScaleTransform", {
  ScaleX: 1,
  ScaleY: 6
}).toString());
text.RenderTransform = scale;

ヘルプ

を読もう。