1

ページに画像を追加する宣言型/UIバインダー方式を使用しています。ImageBundleこれは、 GWTが提供する機能の使用と組み合わせて使用​​されます。

私がやりたいのは、画像にカーソルを合わせたときに画像を変更することです。私の質問は次のとおりです。これを行うための最良の方法は何ですか、そして私の現在の方法はそもそも最良の方法ですか？

私のコードは次のようになります。

<ui:with field='res' type='path.to.my.app.AppResources' />
...
<g:HorizontalPanel ui:field='horizPanel' >
    <g:Image ui:field='image1' resource='{res.image1}'/>
</g:HorizontalPanel>

ImageBundle次に、を介してクラスに関連付けられAbstractImagePrototypeます。

次に、メインハンドラーに次のようなものがあります。

@UiHandler("image1")
public void onMouseOver(MouseOverEvent event)
{
    /* What do I do here? */
}

ユーザーがimage1にカーソルを合わせたときにimage1をimage2に置き換えたいと言います（そしてポインターが画像を離れたときにimage1を戻します）。image1オブジェクトを置き換えますか？その画像にsetUrl関数を使用しますか？まったく新しい画像を作成し、水平パネルの追加/削除機能を使用して画像を追加しますか？それはひどく非効率的なようです。私も必要ありませんImageBundle;; のようなものを介して画像を追加し<g:Image .... url='path/to/image1.png' />、CSSとホバー属性を使用して画像を交換できますか？

いくつかのガイダンスは素晴らしいでしょう。GWTのドキュメントは、この分野で深刻に欠けています。ありがとう。

4

2 に答える 2

3

PushButtonこの種の行動に適しています。あなたはより父になる:hoverことができます-あなたはボタンの異なる面のために任意のhtmlとウィジェットを指定することができます。

uibinderの例については、UiBinderのgwtpushButtonを参照してください。

このアプローチでは、マウスハンドラーを登録し、ウィジェット全体を設定するため、オーバーヘッドが大きくなります。ロールオーバーイメージのみが必要で、他のイベント処理は必要ない場合は、:hovercssセレクター（おそらく@sprite？）がおそらく最適です。

于 2011-11-29T05:05:21.237 に答える
2

ここでマウスハンドラーを使用すると、少しオーバーヘッドが発生するようです。私はcssとホバーセレクターを使用します

.foo {
    background: url('path/to/image1.png');
    /* height, width, etc. */
}

.foo:hover {
    background: url('path/to/image2.png');
    /* ... */
}

次に、画像の代わりにdiv要素（SimplePanelなど）をレンダリングするウィジェットを使用し、スタイルfooをstylePrimaryNameとして設定します

<g:HorizontalPanel ui:field='horizPanel' >
    <g:SimplePanel ui:field='image1' stylePrimaryName='foo'/>
</g:HorizontalPanel>
于 2011-11-29T00:35:42.407 に答える