Yahoo! UI を使ったら困った現象発生! ・・・ やっと解決か?

Yahoo! UI を使うことでカッコ良い、画面が出来たのですが先週末の時点では困った問題がありました。
Tooltipに表示する内容はページを描画した時点ではまだブラウザー側にはなく、表示エリアにマウスが入った時点(mouseover イベント)でYahoo UI のConnection Managerを使い非同期にデータを取得て表示するという Ajax らしいアプローチを取っているのですが、最初に表示エリアにマウスが入った時はTooltipが表示されません。一度マウスを表示エリアから出し再度入ると上手く表示されます ^^);


すぐに、データ取り込み直後に Tooltipコンポーネントの表示メソッド onShow() を呼び出せば良いのではと思いつき入れてみたのですが、かなりの確率で Tooltip がへんな場所に表示されてしまいます・・・・





Yahoo! UIのAPIドキュメントやソースコードを読みながら、Javascripに不慣れなこともあり4日間もあれこれトライしてやっと表示出来るようになりました(まだ完璧ではない部分もありますが)。


原因は、Tooltip コンポーネントは マウスの座標を mousemoveイベント(onContextMouseMoveイベントハンドラー)を使って取り込むようになっていて、 mousemoveイベントが発生する前に 表示メソッドが呼ばれた場合は正しくない位置にTooltipを表示してしまいます。
そこで、onShow()の前にonContextMouseMove()を呼び出しマウスの座標を設定するように変更しなんとか表示できました。

今回学んだ事は
  • FireFoxFireBugプラグイン 最強! これがないと今回のような問題の対処は無理だと思います。
  • YUI のファイルは空白等を無くし小さくした container-min.js 等のファイルが使われているが、デバック時は -minのないインデントやコメントのあるファイル (container.js 等)を使うと良い。
  • Javascript のプロトタイプベースのオブジェクト指向Java等のクラスベースのオブジェクト指向とは異なり、最初はとまどうが、なれればシンプルで強力
  • Javascript もシンプルだが案外強力
  • Javascript のオブジェクトも代入等では参照しかコピーされないので、内容が書き換わっている事があるので適宜実態のコピーを行う必要ある。Event オブジェクトの内容が書き換わっていてハマった ^^;