在GWT

Question

我試圖做一些與GWT很常見的創建自定義按鈕。

我已經使用了HTML小部件，但是如何才能使文本無法選擇？

Answer 1

你的意思是擺脫文本選擇光標的，或使文本完全不可選擇？

，使它看起來象是點擊，你可以使用光標CSS規則。

.widget_style {cursor: pointer;} 

實際上使其無法選擇，從我的理解中得不到很好的支持。它在用戶選擇的CSS3規範中。

.widget_style {user-select:none;} 

Answer 2

我會用按鈕的小部件，並調用setHTML（）函數。 您可以使用此代碼：

public class Custombutton extends Button { 
    public CustomButton(String text, String img) { 
     this.setHTML(text + "<br><img src=\"" + img + "\">"); 
    }  
} 

你只需要在創建按鈕提供文本和圖像網址。

Answer 3

你試過gwt的CustomButton類嗎？

這裏是鏈接：

http://projectpossibility.org/projects/word_prediction/gwt-linux-1.4.60/doc/javadoc/com/google/gwt/user/client/ui/CustomButton.html

Answer 4

我最近有一個GWT按鈕，允許添加圖片和文字同樣需要。所以我自己編寫了一個，因爲已經可用的實現不起作用。我wrote a post on my blog但我也複製此代碼：

下面是我的自定義按鈕

import com.google.gwt.resources.client.ImageResource; 
import com.google.gwt.user.client.DOM; 
import com.google.gwt.user.client.Element; 
import com.google.gwt.user.client.ui.Button; 
import com.google.gwt.user.client.ui.Image; 

public class CustomButton extends Button { 
    private String text; 

    public CustomButton(){ 
     super(); 
    } 

    public void setResource(ImageResource imageResource){ 
     Image img = new Image(imageResource); 
     String definedStyles = img.getElement().getAttribute("style"); 
     img.getElement().setAttribute("style", definedStyles + "; vertical-align:middle;"); 
     DOM.insertBefore(getElement(), img.getElement(), DOM.getFirstChild(getElement())); 
    } 

    @Override 
    public void setText(String text) { 
     this.text = text; 
     Element span = DOM.createElement("span"); 
     span.setInnerText(text); 
     span.setAttribute("style", "padding-left:3px; vertical-align:middle;"); 

     DOM.insertChild(getElement(), span, 0); 
    } 

    @Override 
    public String getText() { 
     return this.text; 
    } 
} 

用法與UiBinder的XML定義

... 
<!-- ImageBundle definition --> 
<ui:with field="res" type="com.sample.client.IDevbookImageBundle" /> 
... 
<d:CustomButton ui:field="buttonSave" text="Save" resource="{res.save}"></d:CustomButton> 

這種按鈕的截圖代碼：

Answer 5

允許除了任意窗口小部件的按鈕：

import java.util.ArrayList; 
import java.util.Iterator; 

import com.google.gwt.user.client.DOM; 
import com.google.gwt.user.client.ui.Button; 
import com.google.gwt.user.client.ui.HasWidgets; 
import com.google.gwt.user.client.ui.Widget; 

public class ButtonWithWidgets extends Button implements HasWidgets 
{ 
    private ArrayList<Widget> widgets = new ArrayList<Widget>(); 

    @Override 
    public void add(Widget w) 
    { 
     DOM.insertChild(getElement(), w.getElement(), widgets.size()); 
    } 

    @Override 
    public void clear() 
    { 
     for (Widget widget : widgets) 
     { 
      DOM.removeChild(getElement(), widget.getElement()); 
     } 
     widgets.clear(); 
    } 

    @Override 
    public Iterator<Widget> iterator() 
    { 
     return widgets.iterator(); 
    } 

    @Override 
    public boolean remove(Widget w) 
    { 
     if (widgets.indexOf(w) != -1) 
     { 
      widgets.remove(w); 
      DOM.removeChild(getElement(), w.getElement()); 
      return true; 
     } 
     else 
      return false; 
    } 

} 

與UiBinder的：

...

<customwidgets:ButtonWithWidgets> 
    <g:Label>Whatever</g:Label> 
    <g:Image url="etc.png"/> 
</customwidgets:ButtonWithWidgets>