how to allow only one togglebutton to be active in gwt under mvp

Question

im working on a new project and have a little problem with toggle buttons. what i want is that only one togglebutton out of six can be activated at the time and if the user click another togglebutton, the old togglebutton sets isDown(false) and the new togglebutton sets isDown(true). but how to reach this without violating the mvp pattern.

view: 6 togglebuttons
display: HasClickHandlers
presenter: addClickHandlers to ToggleButtons

another thing is the automatic border of togglebuttons, if the user clicked it (something like orange). is it possible to hide this border?

Edit
the border is visible, if the user focus the button, textfield or whatever. so its not css properties of togglebutton itself

Answer 1

Your presenter catches the click-event and traverses the togglebuttons. It sets each one to isDown(false) except for the one that has been clicked. Try to identify the one clicked togglebutton out of the six possible. In before-JavaScript-times I did this by giving each toggleButton a unique identifier like "button_1". That should not break your MVP-pattern by any means.

Regarding the automatic border: thats a matter of CSS. There a several states you would have to define css for, like .gwt-ToggleButton-down,.gwt-ToggleButton-down-hovering,.gwt-ToggleButton-down-disabled and so on.

Answer 2

for other developers: focus borders can be removed by:

:-moz-focus-inner { border: 0; padding: 0; } /*firefox*/
:focus { outline: none; } /*chrome, ie*/