Vaadin ändert den Schaltflächenstil nach dem Klicken ⇐ CSS

[Anonymous]

BEARBEITEN: Entschuldigung, wenn es nicht klar war, ich brauche eine „Vaadin“-Lösung

Anscheinend sollte das sehr intuitiv sein, aber ich schaffe es nicht, es zum Laufen zu bringen. Wenn auf eine Schaltfläche geklickt wird, sollte ich ihren Stil ändern. Wenn ich erneut klicke, wird der Stil wieder auf den ursprünglichen Stil zurückgesetzt. Meine Vermutung wäre:

Code: Select all

@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");
}
}
}

Bei Verwendung des Chrome-Inspektors wird die aktive Klasse hinzugefügt, aber die Schaltfläche verschwindet. Wenn ich auf die Position klicke, an der sich die Schaltfläche befand, wird die „aktive“ Klasse entfernt (und beim erneuten Klicken hinzugefügt). Die Schaltfläche wird erst wieder angezeigt, wenn ich außerhalb des Bereichs klicke, in dem sich die Schaltfläche befand.

Könnten Sie mir einen Einblick geben?

BEARBEITEN: Ich korrigiere den Beispielcode hier wie vorgeschlagen (in meiner Klasse war er bereits wie vorgeschlagen, ich wusste aber nicht, dass es einen Unterschied macht, also danke!)

Beim Laden der Seite hat die Schaltfläche diese Klasse:

Code: Select all

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

Wenn ich klicke, kann ich mit dem Chrome-Inspektor sehen, dass die Klasse active hinzugefügt wurde:

Code: Select all

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

Wenn ich erneut klicke, wird es entfernt. Anscheinend wird der Onclick-Code also korrekt ausgeführt.

Es gibt zwei Probleme:

• Der „aktive“ Stil wird nicht auf die Schaltfläche angewendet, die Schaltfläche verschwindet!
• Wenn ich außerhalb der Schaltfläche klicke, wird die Schaltfläche erneut angezeigt, aber der Stil wird auf den nicht aktiven Stil zurückgesetzt. Der nicht aktive Stil funktioniert einwandfrei, daher wird das CSS von der Seite geladen.

Zur weiteren Information ist dies das CSS, das ich verwende:

Code: Select all

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

Ich habe auch eine Problemumgehung mit dem Styling :active und :focus gefunden. Es funktioniert, aber es gibt keinen wirklichen Grund, warum es funktionieren sollte. Ich denke, es sollte so funktionieren, wie ich es ursprünglich beabsichtigt hatte. Durch das Hinzufügen einer Klasse wird die Schaltfläche mit diesem Stil gerendert, durch Entfernen der Klasse wird der Stil auf den ursprünglichen Stil zurückgesetzt.

Ich denke, das Problem liegt in der Art und Weise, wie ich die Seite mit den Komponenten erstellt habe, und nicht in der onClick-Aktion selbst. Ich bin sehr neugierig, herauszufinden, was falsch läuft:) Die Schaltfläche ist Teil einer Komponente, die Teil anderer Komponenten ist, insbesondere wird die Komponente mit der Schaltfläche durch Folgendes dargestellt Klasse:

Code: Select all

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