図1 SDKのメニューから、参考文書を起動できる
図2「Reference」が示している用語をハッキリさせないと
目次に書いてある「Object」、「Method」、「Property」...こうした用語がわたしたちが書いてきたxaml ファイルやJavaScriptファイルとどのように関係するのかを、ハッキリさせておきましょう。
図3「オブジェクト」に分類されるものの一覧(ほんの一部)
これらの中で、わたしたちのサンプルコードでよく使った主なものをあげてみます。
すなわち、「オブジェクト」とは「目に見えるもの」や「しかけ・手段」です。
図4 Ellipseで指定できるプロパティ、メソッド、イベントが全部書いてある
図4でたとえばプロパティの「Canvas.Left」について調べたければ、そう書かれている文字をクリックすれば、目次の「Properites」の下にある「Canvas.Left」のページへリンクできるのです。
ということで、「プロパティ」「メソッド」及び「イベント」には、サンプルコード中に「どんなものがあったか」を列記することはやめ、「どのように使ったか」を解説することにします。
本書で「設定」と書いた事項の多くはこの「プロパティ」です。
似たような「オブジェクト」には、共通する「プロパティ」を設定できます。逆に言えば、共通する「プロパティ」を設定できるオブジェクトは、似ているということになります。
ただし、意味的には似ているのでしょうけれども、オブジェクトによって微妙に違うプロパティを設定する場合もあります。
たとえば、オブジェクト「Image」で、画像ファイルのパスはプロパティ「Source」で指定しましたが、オブジェクト「ImageBrush」ではプロパティ「ImageSource」で指定します。
ですから、オブジェクトが似ているからと言って安心せず、初めて使うときはこの「Reference」で確かめるようにしましょう。
[メソッドと関数の違い]
メソッドは関数とよく似た書き方をしますが、関数はJavaScript中で
videosetting();
のように、関数名だけを指定するのに対して、
メソッドは
movie.play();
のように、オブジェクトに対して(ドットでつなげて)行うように指定します。
図4の「Ellipse」オブジェクトの説明ページをもう一度見て、どんな「メソッド」が使えるのか見てみましょう。
図5「Ellipse」で使えるメソッド一覧、「FindName」と「GetHost」に注目
図5のように、本書では使ったことのないメソッドがたくさんありますね。ハイ、これらはより複雑で壮大なコンテンツを作るのに使います。本書で使ったのはというと「FindName」と「GetHost」があります。
Ellipse GetHost....なんて使ったことない「メソッド」は、そういう使い方はしません。XAMLファイル中ではなく、JavaScriptで使うのです。
証拠をお見せしましょう。図5で「GetHost」をクリックしてみてください。
目次の「Methods」の下にある「GetHost」の説明ページに移動できます。
その上の方に、図6のような使い方の説明がありますが、「XAML」という欄に、「メソッド(というもの)はXAMLでは使えません」と書いてあります。
図6 「メソッドはXAMLでは使えない」という動かぬ証拠
図6では、その下に「Scripting」という欄があって、JavaScript中での使い方が示してあります。
このように「ヘルプ」では、各用語の「XAML中での使い方」「JavaScriptでの使い方」が示されているのです。
「メソッド」だけでなく「オブジェクト」、「プロパティ」についても同様に説明がありますが、ちと説明が長くなるので、あとに回します。
さて、この「GetHost」メソッド、アタマが大文字ですが、わたしたちがよく使ってきたgetHostと同じです。しかしこれはSilverlightで用意された(つまり、このHelpに上がっている)メソッドにだけ通用することで、JavaScript一般、及びXAML中では大文字と小文字は区別されます。
同じページに、GetHostメソッドの使用例も示されています。見てみましょう。
図7 JavaScriptにおける使用例
「sender.getHost()」と書かれていますね。
これはこういうことです:XAMLファイル中によくこんな風に書きましたね。
<Ellipse MouseLeftButtonDown="myfunction"....
Ellipseがマウスでクリックされたときに関数myfunctionが呼び出されるとします。
こういう関数で、以下のような書き方もよくやりましたね。
function myfunction(sender, args){ var content=sender.getHost(); ....
このとき、「sender」はmyfunctionの呼び出し元、つまりEllipseである、と解説しましたね。このことなんです。
逆に言えば、
ある「オブジェクト」について「GetHost」メソッドが使えるということは
そのオブジェクトから「関数(sender,args)」を呼び出して、ということにもなります。
関数中でそのオブジェクトを「sender」として使える
ムービーを扱ったときの「MediaElement」について使ったメソッドplayやstop、アニメーションを扱ったとき「StoryBoard」について使ったメソッドbeginやstopも同様にメソッドですが、
「MediaElement」のstopと「StoryBoard」のstopは違うということが、目次の「Methods」の下の項目を見ればわかります。
図8「Methods」には二つの「Stop」がある
また、どうして「DoubleAnimation」や「ColorAnimation」に直接「begin」や「stop」をかけられないのか、という理由も、Helpを見れば明らかです。たとえば「DoubleAnimation」オブジェクトを調べると、使えるメソッドの中にそれらがありません。
図9「DoubleAniimation」に使えるメソッドは少ない
そこで、XAMLファイル中でこの「DoubleAnimation」のタグの周りを調べると、すぐ上(親)の要素に「Storyboard」があるので、こちらを使えばいいんだな、ということがわかるのです。
なお、createFromXamlも、そして前章でさんざん議論したcreateObjectも「メソッド」です。ただし、後者はプラグイン中で使えるメソッドではなく、「JavaScript」の中での位置づけが「メソッド」というだけです。
FontWeight="Bold"
この「FontWeight」は、数値ではなく、「BoldかNormalか(実は他にも選択肢があるが割愛)」という選択肢の中から選びましたね。
他には、アニメーションで
FillBehavior="Stop"
これも「Stop」か「HoldEnd」か、という選択でした。
このように「アレかコレかソレか」というのがつまり「列挙」です。この列挙された選択肢が「列挙体」というわけです。
目次で「Enumeration」の一覧を見てください。「FontWeight」や「FontStyle」、「FillBehavior」がありますね。
じゃあ「FontWeight」などは「プロパティ」じゃないの?それがめんどくさいところです。目次で「Enumeration」の下に書いてある「FontWeight」というのは、暗黙的に「FontWeightプロパティで取る値」を意味しているのです。
このように一旦理解すれば、あとは悩むことはありません。
「FontWeight」は、「プロパティ」だ。と考えて、この「Enumaration」から探さず、「Properties」の下に書いてある「FontWeight」を探します。
図10 プロパティ「FontWeight」の使い方
「FontWeight="FontWeight"」と書いてある、この後者の「FontWeight」はリンクの形になっています。
これをクリックすると、「Enumerations」の下にある「FontWeight」の説明ページに移動し、どのような値が取れるかを知ることができるのです。
すなわち、後者の「FontWeight」は
プロパティFontWeightがとれる特定の列挙体
を示しているというわけです。
ということで、目次上でのこの「Enumerations」の一覧は、ここで閉じてしまいましょう。
(1)すでにXAML中にあるオブジェクトを指定する場合
XAML中で
ellipse=...
などといきなり書くことはできません。以下の二つの方法を使います。
図11 「Ellipse」で使えるプロパティにも「Name」がちゃんとある
こうしておいて、Canvasなど他の適当なオブジェクトを呼び出し元にした関数を書き、その中で
var myellipse=sender.findName(....);
と名前を指定して呼び出せば、そのEllipseを変数「myellipse」として使うことができます。
(2)新しくオブジェクトを作成する場合
へルプの「Ellipse」の説明ページにはこんな風に書いてあります。
図12 Ellipseの「Scripting」の方法に注目しよう
「スクリプトを用いてオブジェクトを作成するには、CreateFromXAMLを見なさい」
これで思い出しましたね。しかし、そうやって作ったオブジェクトの扱いも、さらに二通りの場合によって違います。これについては他の復習事項との関連もあるので、後述します。
図13 プロパティ「Fill」の使い方
プロパティの使い方は、このようにXAML形式でもJavaScript中でも、具体的に示されています。
「object」とイタリックで書かれた部分を、たとえば「Ellipse」に読み替えればよいのです。
<Elliipse Fill="..."/>と、タグ内に書き込むことも
<Ellipse> <Ellipse.Fill> ..... </Ellipse.Fill> </Ellipse>
と、「子要素」の形でも書けることがわかります。
図13で「プロパティ」として書かれている「Brush」とは、「SolidColorBrush」とか「LinearGradientBrush」などをまとめて呼んだものだろうと見当がつきますね。
では、「Fill="Red"」という書き方についてはどうなの?ハイ、それは図13に書かれている「Brush」というリンクをつついてみるのが一番です。
図14 「色」か「ナントカブラシ」を使えばいいんだナとわかる
こちらはカンタンですね。
関数の呼び出し元なら「sender」、
あるいは、「var myellipse=sender.findName...」のようにすれば他のオブジェクトを取得できますから、これらを
sender.fill myellipse.fill
のように書けば、プロパティを取得したり設定したりできます。
最後に、あるオブジェクトのプロパティの値がオブジェクトとなることが多々あることに気をつけておきましょう。
今あげたばかりの
<Ellipse.Fill> <SolidColorBrush.../> </Ellipse.Fill>という表記の場合、プロパティFillの値は「SolidColorBrush」というオブジェクトです。
本書では「createFromXAML」をずいぶん使いました。最後に確認しておきましょう。このメソッドを使う場合は、二通りあります。
(1)オブジェクトを新規作成してCanvas中に置く場合
「Canvas」という要素の「子要素」として、付加する必要があります。
[例] Canvasから関数を呼び出せば、その関数のsenderはCanvasになりますから、
var myplugin=sender.getHost(); var myelement= myplugin.content.createFromXaml(...XAML文...); sender.children.Add(myelement);
(2)あるオブジェクトのプロパティの値として、オブジェクトを新規作成する場合
JavaScriptで記述したプロパティ」に代入すればよいだけです。
[例] オブジェクトから関数を呼び出して、そのオブジェクトのプロパティmypropertyとして、新しいオブジェクトを作成する場合は
var myplugin=sender.getHost(); sender.myproperty=myplugin.content.createFromXaml(...XAML文...);