|
.NET TIPS
[Silverlight 2]HTML要素クリック時にSilverlightのメソッドを実行するには?[C#、VB]
デジタルアドバンテージ 一色 政彦
2009/06/25 |
|
|
SilverlightアプリケーションをHTMLページの一部として埋め込んでいる場合、そのHTMLページとやりとりを行いたい場面が出てくることが多い。例えば、HTMLページ上でボタンが押されたときに、Silverlightアプリケーション上の一部の表示を変えるような場合だ。
次のSilverlightアプリケーションでは、HTMLページ上のボタンをクリックすると、Silverlightアプリケーション内のメソッドを実行して、Silverlightアプリケーション上のTextBlockコントロールにメッセージを表示する。
|
JavaScriptコードからSilverlightアプリケーションのメソッドを実行してメッセージ表示を行うサンプル |
このようにHTMLページ上の要素(この場合はボタン。以降、HTML要素)からSilverlightアプリケーションのコードを呼び出すには、まずはHTML要素を記述する(※必ずid属性を記述すること)。本稿の例では次のようになる。
<input type="button" id="btnCallSilverlihgtMethod"
value= "Silverlightアプリケーションのメソッドを実行" /> |
|
Silverlightアプリケーションのメソッドを呼び出す出すためのHTMLページ上のボタン |
次にSilverlightアプリケーション側で、このHTML要素のclickイベントで実行されるイベント・ハンドラを登録する(つまり、このボタンがクリックされたときに発生するJavaScriptのイベントを利用して、Silverlightアプリケーションのメソッドが呼び出されるようにするわけである)。
JavaScriptでは、上記のHTML要素は、WebブラウザのDocumentオブジェクトのGetElementByIdメソッドにより取得できる。これがSilverlight上では、DocumentオブジェクトはHtmlDocumentクラス(System.Windows.Browser名前空間)のオブジェクトとして表現され、HtmlPageクラス(System.Windows.Browser名前空間)の静的プロパティであるDocumentプロパティにより取得できる。
GetElementByIdメソッドは、引数としてHTML要素のid値を指定する。戻り値としてHtmlElementクラス(System.Windows.Browser名前空間)のオブジェクトが返される。このHtmlElementオブジェクトがHTML要素に対応するSilverlightのオブジェクトである。
HtmlDocument doc = HtmlPage.Document;
HtmlElement btnElement =
doc.GetElementById("btnCallSilverlihgtMethod");
|
Dim doc As HtmlDocument = HtmlPage.Document
Dim btnElement As HtmlElement = _
doc.GetElementById("btnCallSilverlihgtMethod")
|
|
HTML要素を取得するSilverlightのサンプル・コード(上:C#、下:VB) |
※サンプル・コードなので、btnElementオブジェクトが取得できない場合(=nullの場合)の例外処理などは記述していないので実際のコーディングに利用する場合には注意してほしい。以下同様。 |
HtmlElementオブジェクトにはHTML要素のJavaScriptイベントとSilverlightアプリケーションのメソッドを結び付けるためのAttachEventメソッドが用意されているので、これを次のようにして呼び出せばよい。
btnElement.AttachEvent(
"click", new EventHandler(this.CallSilverlihgtMethod)); |
btnElement.AttachEvent( _
"click", New EventHandler(AddressOf Me.CallSilverlihgtMethod)) |
|
HTML要素のJavaScriptイベントとSilverlightアプリケーションのメソッドを結び付けるSilverlightのサンプル・コード(上:C#、下:VB) |
このサンプル・コードを見ると分かるが、JavaScriptのイベント名(この例では「click」)を第1引数として指定し、第2引数にEventHandlerオブジェクトを指定すればよい。EventHandlerオブジェクトを生成するためのEventHandlerクラスのコンストラクタにSilverlightアプリケーションのメソッド(この例では「CallSilverlihgtMethod」)のデリゲートを指定する。
Silverlightアプリケーションのメソッドは、本稿の例では次のようになる。
private void CallSilverlihgtMethod(object sender, EventArgs e)
{
Page pageView = this.RootVisual as Page;
pageView.textBlockMessage.Text =
"Silverlightメソッドが呼び出されました。";
} |
Private Sub CallSilverlihgtMethod(ByVal sender As Object, ByVal e As EventArgs)
Dim pageView As Page = Me.RootVisual
pageView.textBlockMessage.Text = _
"Silverlightメソッドが呼び出されました。"
End Sub |
|
Silverlightアプリケーションのメソッドのサンプル・コード(上:C#、下:VB) |
このメソッド例では、Silverlightアプリケーションのルート・ページのTextBlockコントロール(textBlockMessage)にメッセージを設定している。
以上の実装内容をまとめたのが次のコードだ。
private void Application_Startup(object sender, StartupEventArgs e)
{
HtmlDocument doc = HtmlPage.Document;
HtmlElement btnElement =
doc.GetElementById("btnCallSilverlihgtMethod");
btnElement.AttachEvent(
"click", new EventHandler(this.CallSilverlihgtMethod));
this.RootVisual = new Page(); // Page.xamlをルート・ページに設定
}
private void CallSilverlihgtMethod(object sender, EventArgs ee)
{
Page pageView = this.RootVisual as Page;
pageView.textBlockMessage.Text =
"Silverlightメソッドが呼び出されました。";
} |
Private Sub Application_Startup(ByVal o As Object, ByVal e As StartupEventArgs) Handles Me.Startup
Dim doc As HtmlDocument = HtmlPage.Document
Dim btnElement As HtmlElement = _
doc.GetElementById("btnCallSilverlihgtMethod")
btnElement.AttachEvent( _
"click", New EventHandler(AddressOf Me.CallSilverlihgtMethod))
Me.RootVisual = New Page() ' Page.xamlをルート・ページに設定
End Sub
Private Sub CallSilverlihgtMethod(ByVal sender As Object, ByVal e As EventArgs)
Dim pageView As Page = Me.RootVisual
pageView.textBlockMessage.Text = _
"Silverlightメソッドが呼び出されました。"
End Sub |
|
HTML要素クリック時にSilverlightアプリケーションのメソッドを実行するサンプル・コード(上:C#、下:VB) |
Application_StartupメソッドはSilverlightアプリケーションが起動されたときに呼び出されるイベント・ハンドラだ。通常、HTML要素のJavaScriptイベントとSilverlightアプリケーションのメソッドの結び付けはアプリケーション起動直後から必要になるので、基本的には(本稿のように)このメソッド内でその結び付け(=AttachEventメソッドの呼び出し)を行うとよいだろう。
カテゴリ:Silverlight 2 処理対象:ブラウザ
使用ライブラリ:HtmlDocumentクラス(System.Windows.Browser名前空間)
使用ライブラリ:HtmlElementクラス(System.Windows.Browser名前空間)
使用ライブラリ:EventHandlerクラス(System名前空間) |
|
generated by
|
|
Insider.NET 記事ランキング
本日
月間