Как стилизовать ButtonCell в CellTable Gwt?

Question

Как стилизовать ButtonCell в CellTable Gwt?

Я искал в интернете и нашел 2 решения:

-Решение 1: использование urColumn.setCelLStyleNames("yourStyleName"); ( Добавление стиля в ButtonCell)

ButtonCell nextStepButton=new ButtonCell();
Column<String[], String> nextStepColumn = new Column<String[], String>(nextStepButton) {

        @Override
        public String getValue(String[] oneOrder) {
            return oneOrder[11];
        }
};
nextStepColumn.setCellStyleNames(getView().getRes().css().buttonCell());

в CSS

.gwtButton, .buttonCell.getButton {
  margin: 0;
  padding: 5px 7px;
  text-decoration: none;
  cursor: pointer;
  cursor: hand;
  font-size:small;
  background: black;
  border:1px solid #bbb;
  border-bottom: 1px solid #a0a0a0;
  border-radius: 3px;
 -moz-border-radius: 3px;
  color: white;

}

Я пытался, но ничего не произошло.

-Решение2: изменить ButtonCell ( https://code.google.com/p/google-web-toolkit/issues/detail?id=7044)

               ButtonCell nextStepButton=new ButtonCell(){
                    // A native button cell doesn't have the gwt-button class, which makes it
                      // look weird next to other gwt buttons. Fix that here.
                      @Override
                      public void render(
                          final Context context,
                          final SafeHtml data,
                          final SafeHtmlBuilder sb) {
                        sb.appendHtmlConstant("<button type=\"button\" class=\"gwt-Button\" tabindex=\"-1\">");
                        if (data != null) {
                          sb.append(data);
                        }
                        sb.appendHtmlConstant("</button>");
                      }
                };

для решения2, я вижу разницу (т.е. стиль ButtonCell изменился). Однако у меня нетgwt-Button"класс CSS, но только есть"gwtButton"класс css (см. выше css). Однако, когда я меняю"gwt-Button"на" gwtButton "во втором коде sb.appendHtmlConstant("<button type=\"button\" class=\"gwtButton\" tabindex=\"-1\">"); тогда ничего не случилось.

Итак, как оформить ячейку кнопки так, чтобы она могла подобрать gwtButton css class

Answer 1

Если опубликованный код соответствует тому, что есть на вашей странице, у вас есть ошибка в селекторе, если вы не ошиблись при копировании на ваш вопрос.

• попробуйте изменить .buttonCell.getButton с .buttonCell.gwtButton
• или изменить .buttonCell.getButton просто .gwtButton

[EDITED]

Хорошо, я вижу ошибку, вы устанавливаете стиль для контейнера кнопки, поэтому вы должны изменить свой селектор. Используйте это в вашем ресурсе CSS:

.gwtButton button {
  margin: 0;
  padding: 5px 7px;
  ...
}

Answer 2

Для меня работало создание собственного класса Button Cell (например, StyledButtonCell), который расширяет ButtonCell и переопределяет метод рендеринга по моему вкусу. В моем примере ниже я задаю базовый стиль кнопки начальной загрузки, а также использую дополнительный значок, чтобы перейти к тексту кнопки.

Пример кода для пользовательского класса ячейки кнопки (производного от базового класса ButtonCell):

public class StyledButtonCell extends ButtonCell{
/**
   * Construct a new StyledButtonCell that will use a {@link SimpleSafeHtmlRenderer}.
   */
  public StyledButtonCell() {
    super(SimpleSafeHtmlRenderer.getInstance());
  }

  @Override
  public void render(Context context, SafeHtml data, SafeHtmlBuilder sb) {
    sb.appendHtmlConstant("<button class=\"btn btn-default\" type=\"button\" tabindex=\"-1\">");
    sb.appendHtmlConstant("<i class=\"fa fa-refresh\"></i>");
    if (data != null) {
      sb.append(data);
    }
    sb.appendHtmlConstant("</button>");
  }

}

Пример ссылки на StyledButtonCell при определении таблицы / столбцов gwt:

... new Column<XYZClass, String>(new StyledButtonCell()) {
        @Override
        public String getValue(XYZClass object) {
            return "buttonText_goes_here";
        }