メッセージカードアプリの概要
前回はSDKを導入してSilverlight.jsを用いた場合のSilverlightの表示方法と，開発時の最小のファイル構成を確認しました。今回は，それをふまえて簡単なメッセージカードアプリを作成します。
メッセージカードアプリは以下のような機能を持っています。
- タイトルの入力
- メッセージの入力
- メッセージカードの表示
また，画面イメージは以下のようになります。
今回はJavaScriptを使用してプログラミングを行います。残念ながらJavaScript自体の解説は連載の主題ではないため行いませんが，さまざまなリソースがインターネット上に公開されていますので，適宜参照してください。
では，さっそく開発を始めましょう。
基本となるファイルの準備
Silverlightでの開発時の基本となるファイル構成は，以下のようになると前回ご紹介しました。
- HTMLファイル（index.htm）
- JavaScriptファイル（index.htm.js）
- XAMLファイル（app.xaml）
今回も基本の構成はこの形になります。最初にそれぞれの骨組となるコードを記載します。まずはindex.htmです。
<html>
<head>
<title>Memo Card</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="index.htm.js"></script>
<link rel="stylesheet" href="index.css" />
</head>
<body onload="createSilverlight();">
<div id="agContainer"></div>
<!--[1]-->
<div id="inputContainer">
<dl>
<dt>Title</dt>
<dd><input type="text" id="titleTextBox" /></dd>
<dt>Message</dt>
<dd><textarea id="messageTextBox" cols="20" rows="5"></textarea></dd>
</dl>
<button>Create</button>
</div>
</body>
</html>
今回はHTMLファイルの中にSilverlightを表示するための領域のほかに，[1]の部分で入力用のテキストボックスとカード作成用のボタンを作成しています。本来であれば，入力自体もSilverlightで行いたいのですが，残念ながら現在のバージョンではTextBoxコントロールは提供されていないため，HTMLのテキストボックスを使用します。アナウンスされているSilverlight2.0の情報では，TextBoxコントロールが含まれるとのことなので，リリースが待ち望まれるところです。
また，レイアウトの調整用にCSSファイルも使用しています。以下の内容をindex.cssとして保存してください。
html,body{
width : 100%;
height : 100%;
}
*{
margin : 0px;
padding : 0px;
}
#inputContainer{
position : absolute;
top : 10px;
left : 10px;
}
#inputContainer dt{
float : left;
width : 6em;
font : bold sans-serif;
}
続いては，Silverlightを書き出すためのJavaScriptファイルです。こちらも以下の内容をindex.htm.jsとして保存してください。
function createSilverlight(){
Silverlight.createObjectEx({
source : "app.xaml",
parentElement : document.getElementById("agContainer"),
id : "agControl",
properties : {
version : "1.0",
width : "100%",
height : "100%",
background : "#000000",
isWindowless: 'true', //[1]
enableHtmlAccess: "true"
},
events : {
//[2]
onLoad : function(plugin, userContext, sender){
var setSize = function(){
plugin.content.root.width = document.body.offsetWidth;
plugin.content.root.height = document.body.offsetHeight;
}
setSize();
plugin.content.onResize = setSize;
},
onError : null
}
});
}
ポイントが2点あります。まず[1]の部分ですが，Silverlightの作成時にプロパティのisWindowlessの値をtrueにしています。これはSilverlightの上に入力用のHTMLを重ねて表示するためです。isWindowlessがfalseまたは何も設定されていない場合は，Silverightがウィンドウとして作成されてしまい，入力用のHTML部分を上に重ねることができなくなってしまいます。
次に[2]の部分ですが，これはSilverlightが常にウィンドウ全体に表示されるようにしているコードです。Silverlightのロードの成功時に，XAMLのルート要素をウィンドウのサイズと同じになるように指定しています。また，content，つまりSilverlightを表示しているHTMLのobjectタグのリサイズ時にも同様の処理を行うように指定しています。
では，最後にXAMLファイルです。以下の内容をapp.xamlとしてファイルに保存してください。
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Canvas.Background>
<LinearGradientBrush
EndPoint="0.275,0.285"
StartPoint="-0.011,-0.008"
SpreadMethod="Reflect"
MappingMode="RelativeToBoundingBox">
<GradientStop Color="#FF425F9D" Offset="0"/>
<GradientStop Color="#FF8A96AF" Offset="1"/>
</LinearGradientBrush>
</Canvas.Background>
</Canvas>
Canvasの背景としてBackgroundプロパティにLinearGradientBrushを指定して，線形にグラデーションを描けています。さらにそのグラデーションを反転させながらボックスいっぱいに連続するように指定してます。
ここで，いったんindex.htmをブラウザで開いて，内容を確認してください。以下のように表示されていれば成功です。Silverlight.jsも忘れないように同階層に配置しておいてください。
