gwt에 사용자 정의 버튼 만들기

Question

GWT에서 꽤 일반적인 작업을하려고합니다. 이미지 위에 텍스트를 배치하여 이미지와 텍스트의 버튼 비헤이비어를 만듭니다.

나는 HTML 위젯을 사용해 왔지만 어떻게 텍스트를 선택하지 못하게 할 수 있습니까?

Answer 1

텍스트 선택 커서를 없애거나 텍스트를 완전히 선택 취소 할 수 있습니까?

클릭 할 수있는 것처럼 보이게하려면 커서 CSS 규칙을 사용하면됩니다.

.widget_style {cursor: pointer;} 

실제로 내가 선택하지 않는 것은 내가 이해하는 것으로부터 잘 지원되지 않습니다. 그것은 사용자 선택과 CSS3 사양에 있습니다.

.widget_style {user-select:none;} 

Answer 2

저는 Button-Widget을 사용하고 setHTML() 함수를 호출합니다. 당신은이 코드를 사용할 수 있습니다 : 당신은 당신이 버튼을 만들 때 텍스트와 IMG의 URL을 제공해야

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 버튼에 대해 같은 요구를했다 : 여기

는 링크입니다. 이미 사용 가능한 구현이 작동하지 않았으므로 코딩했습니다. I wrote a post on my blog하지만 나 또한 여기에 코드를 복사 : 여기

는 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> 

이러한 버튼의 스크린 샷을 내 사용자 정의 버튼

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; 
    } 
} 

사용에 대한 코드입니다 :

Answer 5

버튼에 임의의 위젯 추가 : UiBinder와

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; 
    } 

} 

:

...

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