メッセージカードアプリの概要
前回はSDKを導入してSilverlight.
メッセージカードアプリは以下のような機能を持っています。
- タイトルの入力
- メッセージの入力
- メッセージカードの表示
また，
今回はJavaScriptを使用してプログラミングを行います。残念ながらJavaScript自体の解説は連載の主題ではないため行いませんが，
では，
基本となるファイルの準備
Silverlightでの開発時の基本となるファイル構成は，
- HTMLファイル
（index. htm） - JavaScriptファイル
（index. htm. js） - XAMLファイル
（app. xaml）
今回も基本の構成はこの形になります。最初にそれぞれの骨組となるコードを記載します。まずはindex.
<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を表示するための領域のほかに，
また，
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;
}
続いては，
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]の部分ですが，
次に[2]の部分ですが，
では，
<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を指定して，
ここで，
