スクリプトの基本1～新しいJSファイルを追加して処理を書く
ここからは、JavaScriptを使って、Silverlightでの動的な変化を制御する方法を説明します。まずは、最もベーシックな例として、四角形をクリックしたら、塗りつぶしの色を変化させる例を取り上げます。サンプルは↓。
http://www.makoto3.net/xaml/silverlight0092/index.html
黒い四角形をクリックすると、内部が赤に変化するだけのシンプルな例です。このサンプルを構成しているファイルは、次の5つです、
- index.html
- myxaml.xaml
- createSilverlight.js
- Silverlight.js
- myScript.js
すべてのファイルのソースを示します。
【index.html】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>はじめてのSilverlight</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="createSilverlight.js"></script>
<script type="text/javascript" src="myScript.js"></script>
</head>
<body>
<h2>JavaScriptでSilverlight</h2>
<div id="silverlightBlock"></div>
<script type="text/javascript">
var parentElement = document.getElementById"silverlightBlock");
createMySilverlightPlugin();
</script>
</body>
</html>
【myxaml.xaml】
<Canvas
xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300" Height="300"
Background="lavender">
<Rectangle Width="200" Height="200" Canvas.Left="50" Canvas.Top="50" Fill="Black"
MouseLeftButtonDown="myFunc"
/>
</Canvas>
【createSilverlight.js】
function createMySilverlightPlugin() {
Silverlight.createObject("myxaml.xaml",parentElement,"firstsample",{width:"300",height:"300",background:"lavender",version:"1.0"},{onError:null,onLoad:null});
}
【Silverlight.js】（そのまま使うので内容省略）
【myScript.js】
function myFunc(sender,args) {
sender.Fill.Color='Red';
}
createSilverlight.jsとSilverlight.jsは、これまで登場したサンプルと同じなので、特に解説することはありません。
大切なのは、次の3点です。
-
myScriprt.jsという新しい外部JavaScriptファイル（JSファイル）を追加し、そこに実行したい処理を書いている。
-
index.htmlに次のように指定し、追加したmyScriprt.jsを利用可能にしている。
<script type="text/javascript" src="myScript.js"></script>
-
myxaml.xamlの四角形（Rectangle）のタグに次のように指定し、クリックされたときの処理を指定している。
MouseLeftButtonDown="myFunc"
このように、xamlで描いた図形、画像、文字などをスクリプト（JavaScript）を使って動的に変化させるときは、新しいJSファイル（この例ではmyScript.js）を追加して、そこに具体的な処理を書きます。そして、Silverlightプラグインを表示するHTMLファイル（この例ではindex.html）にこのJSファイルを指定して利用できるようにし、XAMLファイル（この例ではmyxaml.xaml）中に、MouseLeftButtonDownなどの指定（これを「イベントハンドラ」と呼びます）を入れて、処理の名前を指定する、という流れになります。
次に、MouseLeftButtonDownなどのイベントハンドラとJSファイル（この例ではmyScript.js）の書き方について、詳しく見ていきましょう。
<< JavaScriptでSilverlight 目次 >>
このページは
xfy Blog Editor
を利用して作成されました。
コメント