メッセージカードアプリの概要
前回は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を指定して、
ここで、

card.jsの作成
土台となるファイルの作成が完了しました。続いてはメッセージカードを表示する部分を作成していきます。まずは以下の内容をcard.
if(typeof sample == "undefined") var sample = {};
(function(){
//[1]
sample.card = function(plugin){
//[2]
};
})();
[1]と[2]の部分にコードを記述していきます。少し長めのコードになりますので、
作成したcard.
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="card.js"></script>
<script type="text/javascript" src="index.htm.js"></script>
メッセージカードのXAML
メッセージカードを表示するためには、
var rectangle = plugin.content.createFromXaml("<Rectangle />");
ここでのpluginはSilverlightのプラグインオブジェクトを指しています。Silverightを表示しているHTMLタグのことで、
では、
var cardXaml =
"<Canvas xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' " +
"Width='200' Height='150'>" +
"<Rectangle Width='200' Height='150' Fill='#FF727272' Opacity='0.3' />" +
"<Rectangle Width='194' Height='144' Canvas.Left='3' Canvas.Top='3'>" +
"<Rectangle.Fill>" +
"<LinearGradientBrush EndPoint='0.7,1.2' StartPoint='0.2,-0.2'>" +
"<GradientStop Color='#FFCCCCCC' Offset='0' />" +
"<GradientStop Color='#FFFFFFFF' Offset='1' />" +
"<GradientStop Color='#FFFFFFFF' Offset='0.3' />" +
"</LinearGradientBrush>" +
"</Rectangle.Fill>" +
"</Rectangle>" +
"<Rectangle Opacity='0.5' Width='188' Height='30' Fill='#FF9F9F9F' " +
"RadiusX='7.5' RadiusY='7.5' Canvas.Left='6' Canvas.Top='6' />" +
"<Rectangle Width='186' Height='28' RadiusX='7.5' RadiusY='7.5' " +
"Canvas.Left='7' Canvas.Top='7'>" +
"<Rectangle.Fill>" +
"<LinearGradientBrush EndPoint='0.5,0' StartPoint='0.5,1'>" +
"<GradientStop Color='#FFE67D00' Offset='0' />" +
"<GradientStop Color='#FFFFB55E' Offset='1' />" +
"</LinearGradientBrush>" +
"</Rectangle.Fill>" +
"</Rectangle>" +
"<TextBlock Width='175' Height='25' Canvas.Left='12' " +
"Canvas.Top='10' TextWrapping='NoWrap' x:Name='cardtitle{id}' />" +
"<TextBlock Width='186' Height='100' Canvas.Left='6' " +
"Canvas.Top='40' TextWrapping='Wrap' x:Name='cardmessage{id}'>" +
"<TextBlock.Clip>" +
"<RectangleGeometry Rect='0, 0, 186, 100' />" +
"</TextBlock.Clip>" +
"</TextBlock>" +
"</Canvas>";
最後のほうにある2つのTextBlockに設定されているx:Name属性の値の最後が{id}という文字になっています。これは同じNameの値をもつオブジェクトを複数追加できないため、
メッセージカードの表示
では、
- サフィックスの取得
- XAMLの読み込み
- オブジェクトの追加
まず、
var obj = plugin.content.findName("cardtitle");
[function]の中に、
var getSuffixValue = function(plugin){
var counter = 0;
while(true){
if(plugin.content.findName("cardtitle" + counter) == null){
return counter.toString();
}
counter++;
}
}
上記のコード、
続いて、
var createCardObject = function(plugin, suffix){
var cardObject =
plugin.content.createFromXaml(cardXaml.replace(/{id}/g, suffix));
plugin.content.root.children.add(cardObject);
return cardObject;
}
上記、
sample.card = function(plugin){
var suffix = getSuffixValue(plugin);
var cardObject = createCardObject(plugin, suffix);
};
最後に、
function createNewCard(){
var plugin = document.getElementById("agControl");
var card = new sample.card(plugin);
}
createNewCard関数では最初にSilverlightプラグインのオブジェクトを取得しています。次にsample.
HTMLのボタンがクリックされた時にcreateNewCardが呼び出されるようにして、
<button onclick="createNewCard();">Create</button>
では、

無事にメッセージカードが表示されましたが、
var createCardObject = function(plugin, suffix){
var cardObject =
plugin.content.createFromXaml(cardXaml.replace(/{id}/g, suffix));
//追加
cardObject["Canvas.Left"] =
Math.random() * (plugin.content.root.width - 200);
cardObject["Canvas.Top"] =
Math.random() * (plugin.content.root.height - 150);
plugin.content.root.children.add(cardObject);
return cardObject;
}
XAMLを読み込んでオブジェクトを生成した後に、
index.

タイトルとメッセージを表示する
では、
まずは、
this.setTitle = function(title){
plugin.content.findName("cardtitle" + suffix).text = title;
};
this.setMessage = function(message){
plugin.content.findName("cardmessage" + suffix).text = message;
};
findName関数によって、
続いて、
function createNewCard(){
var plugin = document.getElementById("agControl");
var card = new sample.card(plugin);
//追加
card.setTitle(document.getElementById("titleTextBox").value);
card.setMessage(document.getElementById("messageTextBox").value);
}
では、

文字の表示ですが、
Silverlight2.
では、
- 重なりが発生する
- 作成したカードを修正できない
- カードを保存できない
これらの機能を追加することで、
このサンプルではドラッグドロップもマウスを離した後に少し滑って止まるように実装しています。また、
次回予告
今回はSilverlight1.
次回は、