Yahoo!WidgetEngineReference－［Basics］

Yahoo!WidgetEngine（以降エンジン）は、ウィジェットとウィジェットを組み上げるためのオブジェクト郡を定義するために、"XML"を利用している。
ウィジェットのオブジェクトの定義・ウィジェット上に配置されるオブジェクトの順番・オブジェクトが持つ属性同士の関連などは、XMLによって明確な階層構造として表現されている。

もっともシンプルなウィジェットはこんな風になる。

<widget debug="on">
  <window title="Sample Yahoo! Widget">
    <name>main_window</name>
    <width>500</width>
    <height>500</height>
    <image src="Images/Sun.png" name="sun1">
      <hOffset>250</hOffset>
      <vOffset>250</vOffset>
      <alignment>center</alignment>
    </image>
    <text data="Click Here" size="36" style="bold">
      <name>text1</name>
      <hOffset>250</hOffset>
      <vOffset>100</vOffset>
      <alignment>center</alignment>
      <onMouseUp>
        sun1.opacity = (sun1.opacity / 100) * 90;
      </onMouseUp>
    </text>
  </window>
</widget>

ここでやっているのは、"Click Here"のテキストがクリックされるたびに10%ずつ画像の透明度を下げているということだけだ。これは明らかに実用的ではないが、この単純な例でいくつかのポイントを知ることができる。ちなみに、このサンプルは外部ファイル（Images/Sun.png）を1つ使っていて、仮にこのファイルなしでウィジェットを実行した場合には"missing image"と表示される。

まず最初に、ウィジェットの構造に注意してほしい。XMLは対照的な構造を持った言語で、オブジェクトを表す文字列（例：<text>）は対になる終端を表す文字列を持っている（例：</text>）。このペアの中にはオブジェクトの画面上の"位置"や"寄せの設定"など、各種属性が定義されている。
また、XMLで定義されているオブジェクトはJavaScript（例では"text1"オブジェクトの"onMouseDown"ハンドラ）で操作できることにも注意してほしい。なお、オブジェクト名の先頭は半角英数字でなければならず、先頭以外の部分は"半角英数字"、"半角数字"、"半角アンダースコア"のいずれかでなければならない。ウィジェットを記述するXMLは、拡張子が".kon"のファイル内に記述する。

"本物の"ウィジェットは多数の画像とテキストオブジェクト、複数のJavaScriptセクションを含み、複雑な機能を実現するためにランタイム上でJavaScriptによる新たなオブジェクトを生成するのが普通だ。

Yahoo!ウィジェットを作り始めるうえで一番簡単かつおすすめなのが、すでに存在するウィジェットを手に入れてきて、変更してみることだ。Yahoo!ウィジェットのエンジンにはさまざまなタスクをこなすウィジェットがついてくる。こういったウィジェットはどれも、ウィジェットを作りはじめるための格好の土台になるだろう。ただし、これらのウィジェットに付属するXMLとJavaScriptは自由に再利用できるが、画像の再利用は禁止されており、また決して再配布してはならないという点には注意すること。

コメント

コメントを投稿