Silverlight の HTML ブリッジは、マネージ コードから HTML DOM (Document Object Model: ドキュメント オブジェクト モデル) へのアクセス、および JavaScript からのマネージ コードの呼び出しを実現するテクノロジです。このクイックスタートでは、Silverlight での HTML ブリッジの使用方法について説明します。
このクイックスタートは、次のセクションで構成されています。
HTML ブリッジの詳細については、MSDN の Silverlight ドキュメントの「HTML ブリッジ: HTML とマネージ コード間のやリ取り」を参照してください。
HTML ブリッジの概要
HTML ブリッジは型とメソッドの統合セットで、これによって次の処理が可能になります。
- Silverlight マネージ イベント ハンドラーを HTML コントロールにアタッチする。
- JavaScript マネージ イベント ハンドラーを Silverlight コントロールにアタッチする。
- スクリプト作成のためにマネージ型を完全に JavaScript に公開する。
- スクリプト作成のためにマネージ型の個々のメソッドを JavaScript に公開する。
- マネージされているコンテナーを window、document、標準 HTML 要素などの DOM 要素に提供する。
- JavaScript の関数とオブジェクトにマネージ型をパラメーターとして渡す。
- JavaScript からマネージ型を返す。
- Silverlight ベースのアプリケーションをセキュリティの観点から多角的に制御する。
Silverlight プラグインの設定
このクイックスタートで使用するサンプルはテキストベースであるため、Silverlight プラグインで XAML ベースの UI 要素を表示する必要はありません。したがって、Silverlight プラグインの幅と高さは 0 ピクセルに設定して、プラグインが Web ページを占有したり、通常の HTML フローを妨げたりすることがないようにします。Silverlight プラグインに UI は表示されませんが、ページの DOM にはアクセスできます。
このページには、次に示す HTML が埋め込まれています。この HTML は、このクイックスタートの 2 つの例で使用されています。
HTML
<div id="silverlightControlHost"> <object id="SLP" data="data:application/x-silverlight" type="application/x-silverlight-2" width="0px" height="0px"> <param name="source" value="Samples/HtmlBridge1.xap"/> <param name="background" value="white" /> <param name="minRuntimeVersion" value="2.0.30926.0" /> <param name="autoUpgrade" value="true" /> <param name="onerror" value="onSilverlightError" /> <a href="http://go.microsoft.com/fwlink/?LinkID=149156" 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>
メモ
Silverlight プラグインまたはそれを格納する DIV タグのスタイルとして display:none または visibility:hidden を設定すると、Silverlight プラグインはページの DOM にアクセスできなくなります。
マネージ コードから HTML DOM へのアクセス
HTML ブリッジには、Silverlight から HTML DOM へのアクセスや変更を可能にする型が複数用意されています。次の例は、HTML DOM にアクセスして、マネージ コードで以下の処理を実行する方法を示します。
- 最初のテキスト ボックスを有効にする。
- 最初のテキスト ボックスのテキストとして "This text is set from managed code. (このテキストはマネージ コードから設定されました。)" を設定する。
- Silverlight イベント ハンドラーを [Convert] (変換) ボタンにアタッチする。
- 最初のテキスト ボックスのテキストを大文字に変換して、2 番目のテキストボックスに表示する。
このサンプルを実行するには、最初のテキスト ボックスにテキストを追加して、[Convert] ボタンをクリックしてください。テキストが大文字に変換されて、2 番目のテキストボックスに表示されます。
次の HTML は、2 つのテキスト ボックスとボタンを作成します。この HTML には次のような特徴があります。
Input という名前のテキスト ボックスは無効。- 各要素が ID 値を持つ。これは、Silverlight から要素にアクセスすることが必要な場合に役立つ。
- インライン HTML イベント ハンドラーは割り当てられていない。
- (ここには HTML の一部しか示していないが、) JavaScript ハンドラーは埋め込まれていない。
HTML
<div> Enter lowercase text <input type="text" id="Input" disabled="true"/><br> Convert to uppercase <button type="button" id="Convert">Convert </button><br> Uppercase text <input type="text" id="Output"/> </div>
HTML DOM へのアクセス
Silverlight から HTML DOM にアクセスするには、一般的に次の HTML ブリッジ クラスを使用します。
マネージ コードで HTML ブリッジのクラスを使用するには、using または Imports ステートメントを System.Windows.Browser 名前空間に追加する必要があります。HTML 要素が ID を持っている場合は、HtmlDocument.GetElementById メソッドを使用して各 HTML 要素にアクセスできます。要素のプロパティと属性を取得するには、HtmlElement.GetProperty メソッドと HtmlElement.GetAttribute メソッドを使用します。要素のプロパティと属性を設定するには、HtmlElement.SetProperty メソッドと HtmlElement.SetAttribute メソッドを使用します。
Page.xaml ファイル (Page.xaml.cs または Page.xaml.vb) 内の次のマネージ コードは、Silverlight から HTML DOM にアクセスする方法を示します。このコードは Page コンストラクター内にあり、アプリケーションの起動時に実行されます。このコードでは、Input 要素への参照を取得し、disabled プロパティを false に設定し、value 属性に "This text is set from managed code. (このテキストはマネージ コードから設定されました。)" を設定します。
C#
public Page() { InitializeComponent(); HtmlDocument htmlDoc = HtmlPage.Document; HtmlElement htmlEl = htmlDoc.GetElementById("Input"); htmlEl.SetProperty("disabled", false); htmlEl.SetAttribute("value", "This text is set from managed code."); ... }
Visual Basic
Public Sub New() InitializeComponent() Dim htmlDoc As HtmlDocument = HtmlPage.Document Dim htmlEl As HtmlElement = htmlDoc.GetElementById("Input") htmlEl.SetProperty("disabled", False) htmlEl.SetAttribute("value", "This text is set from managed code.") ... End Sub
マネージ イベント ハンドラーのアタッチ
HTML DOM にアクセスできるだけでなく、HTML コントロールにイベントをアタッチして、マネージ コードでイベントを処理することが可能です。HtmlElement は、HtmlObject から派生しています。HtmlObject には HtmlObject.AttachEvent メソッドが含まれます。このメソッドを使用することで、Silverlight イベント ハンドラーを HTML 要素にアタッチできます。
Page.xaml (Page.xaml.cs または Page.xaml.vb) ファイルの次のマネージ コードは、HtmlObject.AttachEvent メソッドを使用して、[Convert] ボタンの onclick ハンドラーを OnConvertClicked というマネージ イベント ハンドラーにアタッチする方法を示します。また、このコードでは、OnConvertClicked イベント ハンドラーで Input テキスト ボックスの value 属性を取得し、大文字の文字列に変換してから Output 要素の value 属性に設定しています。
C#
public Page() { InitializeComponent(); HtmlDocument htmlDoc = HtmlPage.Document; HtmlElement htmlEl = htmlDoc.GetElementById("Input"); ... // Add an event handler for the Convert button. htmlEl = htmlDoc.GetElementById("Convert"); htmlEl.AttachEvent("onclick", new EventHandler(this.OnConvertClicked)); }
void OnConvertClicked(object sender, HtmlEventArgs e) { HtmlDocument htmlDoc = HtmlPage.Document; HtmlElement input = htmlDoc.GetElementById("Input"); HtmlElement output = htmlDoc.GetElementById("Output"); output.SetAttribute("value", input.GetAttribute("value").ToUpper()); }
Visual Basic
Public Sub New() InitializeComponent() Dim htmlDoc As HtmlDocument = HtmlPage.Document Dim HtmlElement htmlEl As HtmlElement = htmlDoc.GetElementById("Input") ... ' Add an event handler for the Convert button. htmlEl = htmlDoc.GetElementById("Convert") htmlEl.AttachEvent("onclick", _ New EventHandler(Of HtmlEventArgs)(AddressOf OnConvertClicked)) End Sub
Private Sub OnConvertClicked(ByVal sender As Object, ByVal e As HtmlEventArgs) Dim htmlDoc As HtmlDocument = HtmlPage.Document Dim input As HtmlElement = htmlDoc.GetElementById("Input") Dim output As HtmlElement = htmlDoc.GetElementById("Output") output.SetAttribute("value", input.GetAttribute("value").ToUpper) End Sub
JavaScript からのマネージ コードの呼び出し
HTML ブリッジには、ScriptableType 属性と ScriptableMember 属性が用意されています。これらの属性を使用して、マネージ型とマネージ メンバーをスクリプト可能としてマークします。これらの属性を型またはメンバーに適用後、その型を新しい演算子でインスタンス化し、HtmlPage.RegisterScriptableObject メソッドを使用して登録する必要があります。登録すると、その型またはメソッドを JavaScript から呼び出せるようになります。
次の例は、JavaScript からマネージ コードを呼び出す方法を示します。最初のテキスト ボックスに任意のテキストを入力し、[Call Silverlight Scriptable method] (スクリプト可能な Silverlight メソッドを呼び出す) ボタンをクリックしてください。SimpleMethodExample マネージ メソッドが呼び出されたことを示すダイアログ ボックスが表示され、入力したテキストが表示されます。[OK] をクリックすると、返された文字列が 2 番目のテキスト ボックスに表示されます。
次の HTML は、2 つのテキスト ボックスとボタンを作成します。[Call Silverlight Scriptable method] ボタンをクリックすると、JavaScript の Call_SL_Scriptable 関数が呼び出されます。
HTML
<div> Enter the text to send <input type="text" id="Text1" /><br> Call Silverlight method <button type="button" onclick="Call_SL_Scriptable()"> Call Silverlight Scriptable method</button><br> Display the return string <input type="text" id="Text2"/> </div>
JavaScript の呼び出し
次に、JavaScript の Call_SL_Scriptable 関数について説明します。この JavaScript は、Text1 テキスト ボックスからテキストを取得し、SimpleMethodExample マネージ メソッドに渡します。メソッドから返されたテキストは、Text2 テキスト ボックスに表示されます。SimpleMethodExample メソッドの呼び出しの書式を次に示します。
SLPlugin は、Silverlight プラグインへの参照です。Content は、プラグイン領域を表すオブジェクトです。SL_SMT は、マネージ オブジェクトの登録に使用する名前です。SimpleMethodExample は、スクリプト可能としてマークされたマネージ メソッドの名前です。
JavaScript
<script type="text/javascript"> function Call_SL_Scriptable() { var SLPlugin = document.getElementById("SLP"); var strIn = document.getElementById("Text1").value; var strOut = SLPlugin.Content.SL_SMT.SimpleMethodExample(strIn); document.getElementById("Text2").value = strOut; } </script>
スクリプト可能なマネージ コード
次に、JavaScript の Call_SL_Scriptable 関数によって呼び出される Page.xaml (Page.xaml.cs または Page.xaml.vb) ファイルのマネージ コードを示します。アプリケーションの起動時に、Page コンストラクターで新しい ScriptableManagedType が作成および登録されます。このオブジェクトは、HtmlPage.RegisterScriptableObject メソッドによって SL_SMT という名前で登録されます。
Page コンストラクターの次に、ScriptableManagedType クラス定義が記述されています。ScriptableManagedType には、ScriptableMember 属性を持つ SimpleMethodExample という名前のメソッドが 1 つあります。SimpleMethodExample は、渡された文字列を使用して HtmlWindow.Alert メソッドを呼び出します。このメソッドは JavaScript 関数に文字列を返します。
C#
public Page() { InitializeComponent();
// Create and register a scriptable object. ScriptableManagedType smt = new ScriptableManagedType(); HtmlPage.RegisterScriptableObject("SL_SMT", smt); }
public class ScriptableManagedType { [ScriptableMember] public string SimpleMethodExample(string s) { HtmlPage.Window.Alert("You called the Silverlight 'SimpleMethodExample'\n" + "and passed this string parameter:\n\n" + s); return "Returned from managed code: " + s; } }
Visual Basic
Public Sub New() InitializeComponent()
' Create and register a scriptable object. Dim smt As ScriptableManagedType = new ScriptableManagedType() HtmlPage.RegisterScriptableObject("SL_SMT", smt) End Sub
Public Class ScriptableManagedType <ScriptableMember> _ Public Function SimpleMethodExample(ByVal s As String) As String HtmlPage.Window.Alert("You called the Silverlight 'SimpleMethodExample'" + _ vbCrLf + "and passed this string parameter:" + vbCrLf + vbCrLf + s) Return "Returned from managed code: " + s End Function End Class
参照
フィードバックを送信する