1 Reply Latest reply on Nov 28, 2011 6:59 AM by mn3

How to make a toggleButton?

mn3 Nov 22, 2011 8:46 AM

Hi,

i need a rich:commandButton that works like a toggleButton? That means when i press the button it should stay pressed and when i click it again it should went back to normal state. I tried something with CSS but it does not work correctly. I wonder if Richfaces offers a simpler solution?

Any Ideas?

Thanks

Mathias

1. Re: How to make a toggleButton?

mn3 Nov 28, 2011 6:59 AM (in response to mn3)

I found a solution by myself but maybe there ist a simpler one!

First the CSS Styles for the toggleButton need to overwrite the skinning.ecss styles from richfaces:
input[class="toggleButton"] {
    outline:grey outset thin;
    background-color: LemonChiffon;
    background-image:none;
    margin-left:10px;
    border-color: none;
    border-width: 0px;
}

input[class="toggleButton"]:HOVER {
    outline:grey inset thin;
    background-color: LemonChiffon;
    background-image:none;
    border-width: 0px;
    border-color: none;
}

input[class="toggleButton"]:ACTIVE {
    outline:grey inset thin;
    background-color: LemonChiffon;
    background-image:none;
    border-width: 0px;
    border-color: none;
}

input[class="toggleButtonDown"] {
    outline:grey inset 2px;
    background-color: LemonChiffon;
    background-image:none;
    margin-left:10px;
    background-position: left bottom;
    background-repeat: repeat-x;
    border-color: none;
    border-width: 0px;
}

input[class="toggleButtonDown"]:HOVER {
        outline:grey inset 2px;
    background-color: LemonChiffon;
    background-image:none;
    margin-left:10px;
    background-position: left bottom;
    background-repeat: repeat-x;
    border-color: none;
    border-width: 0px;
}

input[class="toggleButtonDown"]:ACTIVE {
        outline:grey inset 2px;
    background-color: LemonChiffon;
    background-image:none;
    margin-left:10px;
    background-position: left bottom;
    background-repeat: repeat-x;
    border-color: none;
    border-width: 0px;
}

Next the JSF Code for the toggleButton:
<h:commandButton id="toggleButton"
                        styleClass="#{prototypAVModel.toggleButtonStyleClass}"
                        action="#{prototypAVModel.switchState}" value="Toggle"
                        onmousedown="jQuery(this).removeClass('toggleButton'); jQuery(this).addClass('toggleButtonDown');" />

And the BackBean Code:
private String toggleButtonStyleClass = "toggleButton";

public void switchState() {
        if (toggleButtonStyleClass.equals("toggleButton")) {
            toggleButtonStyleClass= "toggleButtonDown";
        } else {
           toggleButtonStyleClass= "toggleButton";
        }
    }

public String getToggleButtonStyleClass() {
        return toggleButtonStyleClass;
    }

Hope that helps someone or someone can recommend a simpler solution ...
Actions