Yahoo!ウィジェットのハマリどころ その１

Yahoo!ウィジェットエンジンリファレンスマニュアルを参照しながらテキストを複数行表示するサンプルを作っていると、あれれ？？表示されるはずのテキストが表示されないという問題が起きた。

リファレンスを読んでいくとどうやらwidgetタグに記述するのminimumVersionによって表示の際の挙動が違うようだ。

minimumVersion=3.0以前

<?xml version="1.0" encoding="macintosh"?>
<widget minimumVersion="1.6">
<debug>on</debug>

	<window title="mySample">
		<name>mainWindow</name>
		<width>156</width>
		<height>80</height>
		<alignment>center</alignment>
		<opacity>255</opacity>
		<visible>1</visible>
		<shadow>1</shadow>
	</window>

	<action trigger="onLoad">
	<![CDATA[
		var toDoListItems = new Array();
		var itemHeight = 17;
		function buildList() {
			for (slot = 0; slot < 5; slot++) {
				toDoListItems[slot] = new Text();
				toDoListItems[slot].vOffset = (itemHeight * slot) + 11;
				toDoListItems[slot].hOffset = 12;
				toDoListItems[slot].font = "Arial";
				toDoListItems[slot].size = 10;
				toDoListItems[slot].style = "bold";
				toDoListItems[slot].color = "#000000";
				toDoListItems[slot].data = "hoge_hoge " + slot;
			}
		}
		buildList();
	]]>
	</action>
</widget>

minimumVersion=3.0以降

<?xml version="1.0" encoding="UTF-8"?>
<widget minimumVersion="4.0" debug="on">

	<window title="mySample">
		<name>mainWindow</name>
		<width>156</width>
		<height>80</height>
		<alignment>center</alignment>
		<opacity>255</opacity>
		<visible>1</visible>
		<shadow>1</shadow>
		<frame name="myFrame"/> // ←3.0以降ではframeを追加する
	</window>
  
	<action trigger="onLoad">
	<![CDATA[
		var toDoListItems = new Array();
		var itemHeight = 17;

		function buildList() {
			for (slot = 0; slot < 5; slot++) {
				toDoListItems[slot] = new Text();
				toDoListItems[slot].vOffset = (itemHeight * slot) + 11;
				toDoListItems[slot].hOffset = 12;
				toDoListItems[slot].font = "Arial";
				toDoListItems[slot].size = 10;
				toDoListItems[slot].style = "bold";
				toDoListItems[slot].color = "blue";
				toDoListItems[slot].data = "hoge_hoge " + slot;
				myFrame.addSubview(toDoListItems[slot]); // ←frameに対して表示したいオブジェクトをadd
			}	
		}
		buildList();
	]]>
	</action>
</widget>

version3.0以降の気をつけるポイントとしては

• 表示したいオブジェクトはframeを作成しframe.addSubview(Object)
• オブジェクトの表示を消したい場合はObject.removeFromSuperview()
• スクリプトに"<"や">"を含む場合はCDATAセクションで囲む

ぐらいだと思います。（他にもありますが、基本的に上の３つをつかんでいれば大丈夫かなと。。。）