Добавление значков на кнопку в gwt

Есть много способов добиться этого.

Способ 1: легкий способ

Просто установите фоновое изображение с помощью кода. myButton.getElement().getStyle().setBackgroundImage("path");

Способ 2: Еще один простой способ

Установите свой собственный HTML myButton.setHtml("Pass the html string");

Способ 3: простой, но дает больше контроля

myButton.addStylename("buttonStyle")

Используйте css для оформления этого

.buttonStyle{
color : red;
}

Способ 4: лучший способ, по моему мнению

Создайте свою собственную разделенную кнопку, обернув ее вокруг flowpanel или horizontalPanel с изображением в качестве первого виджета и кнопкой в ​​качестве другого виджета. Это дает вам дополнительный контроль над изображением и кнопкой. У вас может быть обработчик кликов как на изображении, так и на кнопке, и вы можете стилизовать каждый из них по отдельности.

Вот как я установил значок в моей кнопке get:.

Добавьте к вашей кнопке gwt дополнительный крючок класса стиля, мой ниже — btn-fa-group. Если вы используете атрибут addStyleNames, вы можете определить их в своей таблице стилей и иметь несколько классов.

<g:Button text=" Post Your Answer" enabled="false" ui:field="showPostButton" addStyleNames="btn btn-default btn-fa-group" />

Теперь в вашем CSS определите следующее объявление:

btn-fa-group:before {
    color: #333333;
    content: "\f0c0";
    display: inline-block;
    font-family: "fontawesome";
}

Некоторые важные вещи, чтобы отметить; не забудьте перед селектором, убедитесь, что юникод начинается с косой черты, и установите fontAwesome. В качестве альтернативы вы можете использовать другой значок глифа, если у вас установлен шрифт.

Вы можете установить innerhtml с изображением в кнопке, т.е.

 Button button=new Button("<image src='abc.jpg' width='200px' height='300px' />Ok");

Button bt = new Button();

bt.getElement().getStyle().setBackgroundImage("url('path/to/ur/image/imagename.extention')");

также установите размер фонового изображения по размеру кнопки

bt.getElement().getStyle().setProperty("backgroundSize","30px");

Добавить класс Css к вашей кнопке, вероятно, будет лучшим решением.

button.addStyleName("Значок кнопки");

Как определить CSS и HTML, вы можете прочитать здесь.

Да, вы можете .Gwt иметь кнопку типа SmartGwt под названием push buttopn

com.google.gwt.user.client.ui.PushButton

Вы можете передать ему объект изображения, как показано ниже.

Image  image = new Image(GWT.getModuleBaseURL() + "/images/search-arrow.png");
RootPanel.get().add(new PushButton(image));