Vaadin меняет стиль кнопки после нажатия ⇐ CSS

[Anonymous]

РЕДАКТИРОВАТЬ: извините, если неясно, мне нужно решение "Ваадин"

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

@Override
public void buttonClick(ClickEvent event) {
Button b = event.getButton();

if (b == my_special_button){
if(!b.getStyleName().contains("x")){
b.addStyleName("x");
} else {
b.removeStyleName("x");
}
}
}


при использовании инспектора Chrome я вижу добавленный активный класс, но кнопка исчезает. Если я нажму на то место, где была кнопка, я увижу, что «активный» класс удален (и добавлен, если нажать еще раз...). Кнопка снова появляется только тогда, когда я нажимаю за пределами области, где была кнопка.

Не могли бы вы дать некоторую информацию?

РЕДАКТИРОВАТЬ: я исправляю приведенный здесь пример кода, как было предложено (в моем классе это уже было так, как было предложено, хотя я не знал, что это имеет значение, так что спасибо!)

При загрузке страницы кнопка имеет этот класс:

v-button v-button-thumbs-up-button thumbs-up-button


когда я нажимаю, с помощью инспектора Chrome я вижу, что активный класс добавлен:

v-button v-button-thumbs-up-button thumbs-up-button v-button-active active


если я нажму еще раз, он будет удален. Таким образом, очевидно, что код onclick выполняется правильно.

Есть две проблемы:

• к кнопке не применяется «активный» стиль, кнопка исчезает!
• если я нажимаю за пределами кнопки, кнопка появляется снова, но стиль возвращается к неактивному . Неактивный стиль работает нормально, поэтому CSS загружается страницей.

Для дальнейшего использования это CSS, который я использую. :

.thumbs-up-button{
background-image: url("../covercliptheme/img/thumbs_up_1x.png");
background-position: left top;
}

.thumbs-up-button .v-button-active .active{
background-image: url("../covercliptheme/img/thumbs_up_1x_green.png");
background-position: left top;
}


Я также нашел обходной путь со стилями :active и :focus. Это работает, но нет реальной причины, почему это должно происходить. Думаю, это должно работать так, как я изначально предполагал: при добавлении класса кнопка отображается с этим стилем, при удалении класса стиль возвращается к исходному стилю.

Я Думаю, проблема в том, как я создал страницу с компонентами, а не в самом действии onClick. Мне очень любопытно узнать, что происходит не так Кнопка является частью компонента, который является частью других компонентов, в частности компонент с кнопкой представлен следующим образом класс:

public class CVRow extends CustomComponent implements Button.ClickListener{

@AutoGenerated
private AbsoluteLayout mainLayout;
@AutoGenerated
private HorizontalLayout horizontalLayout_1;
@AutoGenerated
private AbsoluteLayout absoluteLayout_2;
@AutoGenerated
private Button nativeButton_2;
@AutoGenerated
private Button nativeButton_1;

/**
* The constructor
*/
public CVRow() {
buildMainLayout();
setCompositionRoot(mainLayout);

nativeButton_1.addListener(this);
// TODO add user code here
}

@AutoGenerated
private AbsoluteLayout buildMainLayout() {
/* some layout code.. */

// add horizontalLayout_1
horizontalLayout_1 = buildHorizontalLayout_1();
mainLayout.addComponent(horizontalLayout_1, "top:0.0px;left:0.0px;");

return mainLayout;
}

@AutoGenerated
private HorizontalLayout buildHorizontalLayout_1() {
// some layout code... //

// add absoluteLayout_2

Подробнее здесь: https://stackoverflow.com/questions/182 ... fter-click