MAKOTO3.NET Blog

スクリプトを使って図形の色を変えたり、図形や画像の位置やサイズを変えたりするためには、スクリプト中で図形や画像（これらを「オブジェクト」と呼びます）を正確に指定する必要があります。スクリプトを使って"何を"変化させるかを指定する必要があるわけです。1つの方法は、senderを使う方法です。

スクリプトの基本2～イベントの指定とスクリプトの書き方 で書いたように、JSファイルで関数を定義するとき、第一引数のsenderを使うと、イベントが発生したオブジェクトそのものを指し示すことができます。

しかし、senderが指し示すのはイベントが発生したオブジェクトです。このため、"図形Ａをクリックしたら図形Ａの色を変更する"という処理はできますが、"図形Ａをクリックしたら図形Ｂの色を変更する" ことはできないことになります。それは、ちょっと不便です。

そこで、XAMLで指定されている図形や画像などのオブジェクトを、もっと汎用的に指し示す方法が必要になります。それを実現するのが、findNameというメソッドです。

では、findNameを使ったサンプルを紹介します。

http://www.makoto3.net/xaml/silverlight0097/index.html

2つの四角形が表示されますが、上の四角形をクリックすると下の四角形の色が変化し、下の四角形をクリックすると上の四角形の色が変化します。

以下に、XAMLファイルとJSファイルを示します。

【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="50" Canvas.Left="50" Canvas.Top="75"
  Fill="Black" MouseLeftButtonDown="myFunc1"
  x:Name="myRectangle1" />
 <Rectangle
  Width="200" Height="50" Canvas.Left="50" Canvas.Top="175"  Fill="Black" MouseLeftButtonDown="myFunc2"
  x:Name="myRectangle2" />
</Canvas>

【myScript.js】

function myFunc1(sender,args) {
 sender. findName("myRectangle2") .Fill.Color='Red';
}
function myFunc2(sender,args) {
 sender. findName("myRectangle1") .Fill.Color='Blue';
}

2つの四角形には、それぞれ名前を付けています。名前を付けるときは、x:Nameに続けて指定します。サンプルでは、上の四角形に"myRectangle1"、下の四角形に"myRectangle2"という名前を付けています。

そして、上の四角形をクリックすると（正確には左ボタンを押し下げると）myFunc1、下の四角形をクリックするとmyFunc2という関数を呼び出すように指定してあります。

JSファイルでは、myFunc1関数とmyFunc2関数を定義しています。それぞれの関数で使用しているのが、finfNameメソッドです。これは、次のように使います。

　　 sender.findName("名前")

これによって、その名前のオブジェクトを指し示すことができます。

myFunc1関数の定義では、"myRectangle2"という名前のオブジェクト、つまり下の四角形を指し示し、そのFill.Colorを赤に変えます。したがって、上の四角形をクリックすると、下の四角形が赤に変化します。

myFunc2関数の定義では、"myRectangle1"という名前のオブジェクト、つまり上の四角形を指し示し、そのFill.Colorを青に変えます。したがって、下の四角形をクリックすると、上の四角形が青に変化します。

このように、findNameメソッドを使用すると、関数の定義中でSilverlightのオブジェクトを自由に指し示すことができます。とても便利なので、ぜひ覚えておきたいメソッドです。

なお、はじめてfindNameメソッドの存在を知ったときは、指定できるオブジェクトに何か制限があるのかと思ったのですが、特にそういうことはないようです。

というのは、XAMLはXMLドキュメントなので、XMLのツリーとして表現できるわけですが、「イベントが発生したオブジェクトの子ノード以下しか指定できないのでは……」と（何となく）疑ったのです。つまり、イベントが発生したオブジェクトの親とか兄弟は指定できないのではないか、と思って、いくつか試してみましたが、親でも兄弟でも指し示すことができました。

なので、関数を定義するとき、オブジェクトのツリー構造を深く考えることなく sender.findName("名前") と書けばオブジェクトを指し示すことができます。便利です。

<< JavaScriptでSilverlight 目次  >>

このページは xfy Blog Editor  を利用して作成されました。