PanelとTabbedPanelとTabと

プロローグ

ある日、タブパネルとタブの使い方を覚えた。後日、add()方式じゃなく、文字列方式でもUIを追加できると知った。過去のスクリプト全部書き換えたる!言いながら、文字列方式でタブをつけようとしたら、エラー。何してもエラー。

仕方ないのでタブ以外は文字列方式で、タブだけはadd()で、という自分でもなんてことやってんだ...と思うやり方でしばらくやっていた。

ひょんなことから、解決策に気づいた。

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

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

実行結果Panel...だと...?TabbedPanelじゃない?
データブラウザには堂々と[object Panel]
なんかそれっぽいの見つけた~

解決法

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" を与えてやってください。

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

出た...!!