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
・・・むむむ!!確定ですね。
解決法
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" を与えてやってください。
つまり、タブパネルとタブは、パネルの亜種!