古川 烈
r_f_315****@hotma*****
2008年 8月 20日 (水) 10:15:15 JST
古川です、 サンプルコードありがとうございます。 コンポーネントからハンドラを削除できるのを始めて知りました。 大変勉強になりました。 AjaxEventBehaviorを利用して実装したかった理由は、 画像を切り替えること以外にも間に様々な処理を挟みたかったのが理由です。 その場合「マウスポインタが乗った」という状態に対しての動作がコード内でまとまった場所にあったほうが、 コードを初見する人間にとって分かり良いのではないか？という考えでした。 (ビューの操作に関する内容は沖野様のおっしゃったように「javascriptを直接Imageコンポーネントに追加する方法とする」 というようなルールでまとめるのも良いかもしれませんね) 今回は onmouseover,onmouseout,onmousedown,onmouseup の4つの状態について画像を切り替える操作を行いました。 イメージで言うと、サファリの「閉じる」や「拡大縮小」ボタンのような画像切替を行うためでした。 これを実現しようとした場合、沖野様ご提示の後者の方法では「onmouseover」と「onmouseout」の組み合わせに関しては 期待した動作となりましたが、そこに「onmousedown」「onmouseup」動作が混じった場合、 当然「onmouseover」のハンドラはまだ有効な状態なので、一瞬だけ「onmousedown」での画像が表示された後、 再度「onmouseover」イベントが走るというこの話題の元々の問題と同じことになり、期待した動作が実現できませんでした。 そこで、前者の方法を利用して １．「onmouseover」時にやりたい処理を行った後自身をコンポーネントから削除、 ２．「onmouseout」時に再度「onmouseover」ハンドラをコンポーネントに追加 という流れで期待の動作を実現できました。 このハンドラ内でハンドラを付けたり外したりというのは この件以外にも色々制御に使えそうで良いですね；-) 以上、ありがとうございました。 > Date: Wed, 20 Aug 2008 02:30:22 +0900 > From: shiny****@gmail***** > To: wicke****@lists***** > Subject: [Wicket-ja-user 214] Re: Ajaxでのマウスオーバーイベント処理について > > 沖野です。 > 単純に１回だけAjaxリクエストが発生すれば良いのでしたら、 > AjaxEventBehaviorをComponentから削除してしまえば良いと思います。 > > 元のコードだと > final Image buttonImage= new Image( "image", new ResourceReference( > MyPanel.class, "normal.PNG" ) ); > buttonImage.setOutputMarkupId( true ); > buttonImage.add( new AjaxEventBehavior( "onmouseover" ) { > > @Override > protected void onEvent( AjaxRequestTarget arg0 ) { > > /* イメージを変更する */ > buttonImage.setImageResourceReference( new ResourceReference( > MyPanel.class, "over.PNG" ) ); > > //自身をコンポーネントから削除する > buttonImage.remove(this); > > /* コンポーネントを再描画対象に指定する */ > arg0.addComponent( closeButtonImage ); > } > } > > こうすれば置き換わった画像でAjaxリクエストは発生しなくなります。 > > 再度マウスを載せたときにもAjaxリクエストを発生させたい場合は > javascriptで画像urlだけ書き換えるようにしないと駄目そうです。 > > final Image buttonImage= new Image( "image", new ResourceReference( > MyPanel.class, "normal.PNG" ) ); > buttonImage.setOutputMarkupId( true ); > buttonImage.add( new AjaxEventBehavior( "onmouseover" ) { > > @Override > protected void onEvent( AjaxRequestTarget arg0 ) { > > // 画像urlを取得 > ResourceReference reference = new ResourceReference( > MyPanel.class, "over.PNG" ) ; > String src = urlFor(reference).toString(); > > //javascriptで画像urlを書き換える > arg0.appendJavascript("Wicket.$('" + > buttonImage.getMarkupId()+ "').src='" + src + "';"); > } > } > > これだったらAjaxEventBehaviorを使わないでjavascriptを直接Imageコンポーネントに追加した方が良さそうな気もしますが…。 > > 自分で試した限りではうまく動きましたが、いかがでしょうか。 > > > 2008/08/18 12:32 古川 烈 <r_f_315****@hotma*****>: > > 古川です、 > > Ajaxでのマウスオーバーイベントで悩んでおります。 > > > > やりたいことはImgタグの上にマウスカーソルが乗ったときに、 > > 画像を切り替えたいということです。 > > > > 以下のようなコードを書いたのですが、 > > > > final Image buttonImage= new Image( "image", new ResourceReference( > > MyPanel.class, "normal.PNG" ) ); > > > > buttonImage.add( new AjaxEventBehavior( "onmouseover" ) { > > > > @Override > > protected void onEvent( AjaxRequestTarget arg0 ) { > > > > /* イメージを変更する */ > > buttonImage.setImageResourceReference( new ResourceReference( > > MyPanel.class, "over.PNG" ) ); > > > > /* Ajax用のIDを出力指定する */ > > buttonImage.setOutputMarkupId( true ); > > > > /* コンポーネントを再描画対象に指定する */ > > arg0.addComponent( closeButtonImage ); > > } > > } > > > > マウスを画像に乗せたときにマウスオーバーイベントが延々発生します。 > > Wicketの仕様上、指定されたIDのノードがDOMツリー上でごっそり置き換わるはずで、 > > 置き換わったノードからすれば、マウスがまだ乗っていないことになっているから再度イベントが発生するのでしょうか？？ > > > > マウスオーバーイベントを一回だけ発生させるのが目標です。 > > > > どなたか解決方法をご存知の方がいらっしゃれば、ご教示していただけませんでしょうか？ > > ________________________________ > > あなたも総裁候補に？世界に一つだけのオリジナルブログパーツを作ろう！ MSN相談箱の新ブログパーツ "出馬ナー" > > _______________________________________________ > > Wicket-ja-user mailing list > > Wicke****@lists***** > > http://lists.sourceforge.jp/mailman/listinfo/wicket-ja-user > > > > > > > > -- > 沖野信也 > shiny****@gmail***** > > _______________________________________________ > Wicket-ja-user mailing list > Wicke****@lists***** > http://lists.sourceforge.jp/mailman/listinfo/wicket-ja-user _________________________________________________________________ MSN相談箱 プレゼントキャンペーン。良回答の中から抽選で10万円Ｇｅｔ！ http://questionbox.jp.msn.com/present/ -------------- next part -------------- HTMLの添付ファイルを保管しました...下載
