Silverlight-browser-integration
提供：Dev Guides
Silverlight-ブラウザー統合
この章では、ブラウザー統合サポートを使用して、SilverlightアプリケーションがWebページと連携して動作する方法を説明します。
次の2つの方法で、ブラウザーとSilverlightの統合を検討できます-
- ブラウザで実行されているJavaScriptコードは、Silverlightアプリケーション内の機能にアクセスできます。
- Silverlightには、オブジェクトのJavaScriptラッパーを提供する機能があります。 Silverlightプラグイン内で実行される .NET コードは、JavaScriptオブジェクトのSilverlight .NET ラッパーにより、HTML DOMおよびその他のブラウザースクリプト機能にアクセスできます。
ブラウザベースのソフトウェアアプリケーションがクライアントに情報を永続的に保存する方法を確認します。
SilverlightとHTML
HTMLの世界に関する限り、Silverlightコンテンツはただの要素です。 これはレイアウトにも当てはまります。 Silverlightプラグイン全体とそのすべてのコンテンツは、1つのオブジェクト要素のように見えます。
あなたはそれを覚えておく必要があります-
- SilverlightはHTMLの代わりではなく、それを補完するように設計されています。 したがって、DOMの別の要素にのみアクセスできることが重要です。
- 適切な場所でSilverlightを使用できます。
- 主にHTMLを使用するページでは、ブラウザーの世界とのSilverlightの統合は、通常のHTMLレイアウトに従って、単にDOM要素として存在するだけではありません。
DOMへのアクセス
Silverlightコンテンツは、Webページに完全に参加できる必要があります。 したがって、HTML DOMにアクセスできるはずです。 Silverlightは、ブラウザースクリプトオブジェクトをシステム内の* Scriptオブジェクト*クラスであるDot Netオブジェクトとしてラップするブリッジオブジェクトを提供します。 ブラウザーの名前空間には、ブラウザースクリプトオブジェクトのプロパティの読み取りと書き込み、および関数の割り当てを可能にするメソッドが用意されています。
そもそもScriptオブジェクトを保持する方法が必要です。 Silverlightは、スクリプトオブジェクトなどの機能のさまざまなページにアクセスできるHTMLページクラスを提供します。
いくつかの属性を持つオブジェクトを作成する簡単なスクリプトがある簡単な例を見てみましょう。 それらのいくつかは単なる値であり、それらのいくつかは関数です。
<script type = "text/javascript">
myJsObject = {
answer: 42,
message: "Hello, world",
modifyHeading: function(title)
{ document.getElementById('heading').innerHTML = title; },
performReallyComplexCalculation: function(x, y) { return x + y; }
};
</script>以下に、ボタンが追加されたXAMLコードを示します。
<UserControl x:Class = "DomAccess.Page"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
Width = "400" Height = "300">
<Grid x:Name = "LayoutRoot" Background = "White">
<Button x:Name = "useDomButton" Content = "Use DOM" Width = "75" Height = "30"
Click = "useDomButton_Click"/>
</Grid>
</UserControl>これは、HTMLファイルで作成されるスクリプトが呼び出されるボタンクリック実装です。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
using System.Diagnostics;
namespace DomAccess {
public partial class Page : UserControl {
public Page() {
InitializeComponent();
}
private void useDomButton_Click(object sender, RoutedEventArgs e) {
ScriptObject myJsObject = HtmlPage.Window.GetProperty("myJsObject") as ScriptObject;
string[] propertyNames = { "answer", "message", "modifyHeading",
"performReallyComplexCalculation" };
foreach (string propertyName in propertyNames) {
object value = myJsObject.GetProperty(propertyName);
Debug.WriteLine("{0}: {1} ({2})", propertyName, value, value.GetType());
}
object result = myJsObject.Invoke("performReallyComplexCalculation", 11, 31);
HtmlElement h1 = HtmlPage.Document.GetElementById("heading");
h1.SetProperty("innerHTML", "Text from C# (without JavaScript's help)");
h1.SetStyleAttribute("height", "200px");
}
}
}以下に完全な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" >
<!-- saved from url = (0014)about:internet -->
<head>
<title>DomAccess</title>
<script type = "text/javascript">
myJsObject = {
answer: 42,
message: "Hello, world",
modifyHeading: function(title) {
document.getElementById('heading').innerHTML = title; },
performReallyComplexCalculation: function(x, y) { return x + y; }
};
</script>
<style type = "text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
}
</style>
<script type = "text/javascript" src = "Silverlight.js"></script>
<script type = "text/javascript">
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
}
var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;
var errMsg = "Unhandled Error in Silverlight 2 Application " +
appSource + "\n" ;
errMsg += "Code: "+ iErrorCode + " \n";
errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";
if (errorType == "ParserError") {
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
} else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
errMsg += "MethodName: " + args.methodName + " \n";
}
throw new Error(errMsg);
}
</script>
</head>
<body>
<!-- Runtime errors from Silverlight will be displayed here.
This will contain debugging information and should be removed or hidden when
debugging is completed -->
<div id = 'errorLocation' style = "font-size: small;color: Gray;"></div>
<h1 id = 'heading'></h1>
<div id = "silverlightControlHost">
<object data = "data:application/x-silverlight-2,"
type = "application/x-silverlight-2" width = "100%" height = "100%">
<param name = "source" value = "ClientBin/DomAccess.xap"/>
<param name = "onerror" value = "onSilverlightError"/>
<param name = "background" value = "white"/>
<param name = "minRuntimeVersion" value = "2.0.30923.0"/>
<param name = "autoUpgrade" value = "true"/>
<a href = "http://go.microsoft.com/fwlink/?LinkID=124807"
style = "text-decoration: none;">
<img src = "http://go.microsoft.com/fwlink/?LinkId=108181"
alt = "Get Microsoft Silverlight" style = "border-style: none"/>
</a>
</object>
<iframe style = 'visibility:hidden;height:0;width:0;border:0px'></iframe>
</div>
</body>
</html>上記のコードをコンパイルして実行すると、出力ファイルにすべての値が表示され、HTMLファイルから取得されます。
