2012-12-20 55 views
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

你嘗試widget1.setUrl( 「圖像/ GB-wp1.jpg」)? –

+0

'widget1.src(newURL)'? – Barney

+0

之前我曾嘗試過,因爲這是我從文檔中讀取的內容。現在工作肯定是一個錯字。我可以假設使用一個簡單的圖像是不太需要內存密集的。性能如何?我沒有注意到任何延遲交換的圖像,但後來我的手機是一個四核 – MayoMan

回答

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) 
} 
+0

這看起來像一個乾淨的做法,雖然我很少或沒有CSS的經驗,它看起來像如果我想繼續使用我的GWT應用程序,我應該進入這一步 – MayoMan

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=Search+Trunk

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(); 
    } 
+0

我只會推薦Client Bundle用於小圖像(圖標)或用戶一定會使用的圖像(即UI的一部分,默認背景等)。如果圖像很大並且/或者大多數用戶可能不需要它,它會更好使用靜態圖像。 –

+0

是的。我假設上面的例子中的兩個圖像是向上和向下箭頭以指示價格上漲或下跌!!!!!! – SSR

+0

我認爲作者有一個英國國旗,另一個是澳大利亞:) –