Создание пользовательской кнопки в GWT - PullRequest
Новая
       31

Создание пользовательской кнопки в GWT

4 голосов
/ 05 декабря 2009

Я пытаюсь сделать что-то довольно общее с GWT - создать поведение кнопки с изображением и текстом, расположив текст поверх изображения.

Я использовал виджет HTML, но как сделать текст недоступным для выбора?

Ответы [ 5 ]

9 голосов
/ 15 марта 2010

У меня недавно была такая же потребность в кнопке GWT, которая позволяет добавлять изображение и текст. Поэтому я сам написал один, поскольку уже имеющиеся реализации не работали. Я написал сообщение в своем блоге , но я также скопировал код здесь:

Вот код для моей пользовательской кнопки 

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

Использование с определением XML UiBinder 

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

Скриншот такой кнопки:
alt text

1 голос
/ 27 ноября 2010

Класс, который позволяет добавлять произвольные виджеты к кнопке: 

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>
1 голос
/ 08 декабря 2009
1 голос
/ 05 декабря 2009

Вы хотите избавиться от курсора выделения текста или сделать текст полностью невыбираемым?

Чтобы это выглядело как нечто кликабельное, вы можете использовать CSS-правило курсора. 

.widget_style {cursor: pointer;}

На самом деле сделать его невыбираемым не очень хорошо подтверждается из того, что я понимаю. Это в спецификациях CSS3 с user-select. 

.widget_style {user-select:none;}
0 голосов
/ 05 декабря 2009

Я бы использовал Button-Widget и вызвал бы функцию setHTML (). Вы можете использовать этот код: 

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

Вы просто должны предоставить текст и URL-адрес при создании кнопки.

...