Roughian Examples Site Map - GWT Examples - Tutorials

ToggleButton


Version 1.4 onwards

The ToggleButton widget is a latching PushButton



Listeners


Notes


The ToggleButton could be a really handy little thing. It is styleable, you can give it two lots of text, one for the up-state, one for the down-state. Or you can do the same with two images.

It doesn't have a mouse listener unfortunately, which is odd, but they make up for it with css styles. But...


Problem


The PushButton styles let you determine the look for (when enabled) 'up', 'up-hovering', 'down', 'down-hovering' - so you can't get a button-is-being-pushed look. If you try the menu buttons on this site you get a look if you are actually pressing the button. You can't get that with this widget.


Code


ToggleButton widget = new ToggleButton("Click Me", "And Again To Release");
widget.setStylePrimaryName("demo-ToggleButton");

CSS


/****************************************
*             ToggleButton Demo
*****************************************/
.demo-ToggleButton
{
    background-color            :    #ffa;
    color                       :    #555;
    border                      :    1px solid #666;

    cursor                      :    hand;
    cursor                      :    pointer;
    font-size                   :    75%;

    margin                      :    3px 1px;
    padding                     :    1px 10px;
    width                       :    150px;
    text-align                  :    center;
}
.demo-ToggleButton-up-hovering
{
    padding                     :    0px 9px;
    color                       :    #009;
    background-color            :    #ffd;
    border-top                  :    2px solid #fff;
    border-left                 :    2px solid #fff;
    border-right                :    2px solid #888;
    border-bottom               :    2px solid #888;
}
.demo-ToggleButton-down, .demo-ToggleButton-down-hovering
{
    background-color            :    #ff0;
    padding                     :    0px 9px;
    border-top                  :    2px solid #333;
    border-left                 :    2px solid #333;
    border-right                :    2px solid #ccc;
    border-bottom               :    2px solid #ccc;
}