PanelとTabbedPanelとTabと

現象の確認 激ハマりポイント

これはほんとハマった。UIにタブを使いたい時、addで追加していくならば、

var w = new Window('dialog{ text : "panelとtabbedpanel" }');

var tp = w.add('tabbedpanel');a

var tab1 = tp.add('tab{ text : "tab1" }');

var tab2 = tp.add('tab{ text : "tab2" }');

w.show();

という具合にできる。マニュアルにも書いてるし。

そのノリで文字列方式にするぜぇ～って、以下の感じに書き直すと、

var w = new Window('dialog{ text : "panelとtabbedpanel" , \

tp : TabbedPanel{\

tab1 : Tab{ text : "tab1" }\

tab2 : Tab{ text : "tab2" }\

}\

}');

w.show();

「- TabbedPanel はオブジェクトではありません。」と言われる。ずっと意味わからんかったけどやっと解決した。

解決のヒント

Javascript Tools GuideにはTabbedPanelとTabというクラスがあるように書いてるので、それをぶち込めると思うに決まってる。

ここで、エラーの出なかった前者のソースコードの最後に以下の文を足してみる。

alert(tp);

なんてことはない。アラート表示してみただけ。これが alert(w) なら [object Window] が返ってくるので、上の場合は [object TabbedPanel] が返ってくると思っていた。

・・・違った。（右図）

「詳しく見てみよう」と、データブラウザで確認してみる。（右図）

tp = [object Panel]

しっかりそう書いてある。Panel なのでしょう。そう言ってるんだから。プロパティを見ていくと、

type = tabbedpanel

・・・む！？なるほど、わかりましたね。Tab のほうも見てみると、

type = tab

・・・むむむ！！確定ですね。

解決法

TabbedPanel , Tab そんなものなかった。全部 Panel だったんだ...。

Panel がプロパティによって Panel , TabbedPanel , Tab に変身できるかもしれないことがわかった。キューティーハニーかよ。

エラー出てたソースコードを次のように変えてみる。

var w = new Window('dialog{ text : "panelとtabbedpanel" , \

tp : Panel{ type : "tabbedpanel" , \

tab1 : Panel{ type : "tab" , text : "tab1" }\

tab2 : Panel{ type : "tab" , text : "tab2" }\

}\

}');

w.show();

ウィンドウ出た！エラー出ない！気づくまでめちゃくちゃ時間かかった。

という訳で、add を使わないでタブを使いたければ、TabbedPanelやTabを使ってはダメ。

Panelのtypeプロパティに "tabbedpanel"、"tab" を与えてやってください。

つまり、タブパネルとタブは、パネルの亜種！