0

ボタンのクリックに基づいて交換したい2つの画像があります

private Image widget1 = new Image("images/AU-wp5.jpg");
private Image widget2 = new Image("images/GB-wp1.jpg");
private boolean flag = false;

private void onClick()
{
    flag = !flag;
    if(flag)
    {                       
        RootPanel.get("stockList").add(widget1);
        RootPanel.get("stockList").remove(widget2);
    }
    else
    {           
        RootPanel.get("stockList").add(widget2);
        RootPanel.get("stockList").remove(widget1);
    }
}

これは画像を切り替える正しい方法ですか? 私は1つの画像を持ち、そのURLを変更することについて読んだことがありますが、その方法では機能しません。

4

2 に答える 2

0

SSRで説明したように、セルリソースを介して実行することも、CSSを使用してより簡単で推奨されるアプローチを選択することもできます。

Button button = new Button ( "Click me" );
private boolean flag = true;
button.addClickHandler ( new ClickHandler() 
{
     public void OnClick()
     {
             b.setStyleName( "my-button-clicked-" + flag );
             flag = !flag;
     }
}

CSSは次のようになります

.my-button-clicked-true{
 background : url ( // image path )
}

.my-button-clicked-false{
 background : url ( // image path )
}
于 2012-12-20T17:15:40.420 に答える
0

イメージが修正されていることが確実な場合は、GWT の Dev Guided Client Bundle 機能を使用して、最適化とパフォーマンスを最適化することを検討する必要があります。関連セクションhttps://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle#ImageResource。

その使用の最も良い例は、ツリー ノードの + および - 記号の切り替えです。

http://code.google.com/p/google-web-toolkit/source/search?q=CellTree&origq=CellTree&btnG=検索+トランク

  public interface BasicResources extends Resources {

    @ImageOptions(flipRtl = true)
    ImageResource cellTreeClosedItem();

    @ImageOptions(flipRtl = true)
    @Source("cellTreeLoadingBasic.gif")
    ImageResource cellTreeLoading();

    @ImageOptions(flipRtl = true)
    ImageResource cellTreeOpenItem();

    /**
     * The styles used in this widget.
     */
    @Source(BasicStyle.DEFAULT_CSS)
    BasicStyle cellTreeStyle();
  }
于 2012-12-20T16:01:10.057 に答える