gwt widget - mutually-exclusive toggle button

Question

I want a hybrid of a ToggleButton and RadioButton. I want the "mutually-exclusive" part of RadioButton, and the gui look and behavior of ToggleButton(up and down states). Does one already exist?

Triliteral

Answer 1

I've adapted kirushik's solution and created a simple "ToggleButtonPanel" widget that takes an arbitrary number of ToggleButtons (and possibly any other widgets you'd like to add) and a panel of your choosing (defaults to VerticalPanel) and makes the buttons mutually exclusive.

What's nice about this is that the panel itself fires ClickEvents when the buttons are clicked. This way, you can add a single ClickHandler to the ToggleGroupPanel and then determine which button was clicked using event.getSource()

import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.HasClickHandlers;
import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HasWidgets;
import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.user.client.ui.ToggleButton;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;

public class ToggleButtonPanel extends Composite implements HasWidgets, HasClickHandlers{

    public ToggleButtonPanel() {
        this(new VerticalPanel());
    }

    public ToggleButtonPanel(Panel panel){
        this.panel = panel;
        initWidget(panel);
    }

    @Override
    public void add(Widget w) {
        if(w instanceof ToggleButton){
            ToggleButton button = (ToggleButton) w;
            button.addClickHandler(handler);
        }
        panel.add(w);
    }

    @Override
    public void clear() {
        panel.clear();
    }

    @Override
    public Iterator<Widget> iterator() {
        return panel.iterator();
    }

    @Override
    public boolean remove(Widget w) {
        return panel.remove(w);
    }

    @Override
    public void setWidth(String width) {
        panel.setWidth(width);
    };

    @Override
    public void setHeight(String height) {
        panel.setHeight(height);
    }

    private final Panel panel;
    private ClickHandler handler = new ClickHandler(){
        @Override
        public void onClick(ClickEvent event) {
            Iterator<Widget> itr = panel.iterator();
            while(itr.hasNext()){
                Widget w = itr.next();
                if(w instanceof ToggleButton){
                    ToggleButton button = (ToggleButton) w;
                    button.setDown(false);
                    if(event.getSource().equals(button)) {
                        button.setDown(true);
                    }
                }
            }

            for(ClickHandler h : handlers){
                h.onClick(event);
            }
        }
    };

    private List<ClickHandler> handlers = new ArrayList<ClickHandler>();
    @Override
    public HandlerRegistration addClickHandler(final ClickHandler handler) {
        handlers.add(handler);
        return new HandlerRegistration() {

            @Override
            public void removeHandler() {
                handlers.remove(handler);
            }
        };
    }

}

Ingravescent

Answer 2

Here is my pure-gwt variant:

class ThreeStateMachine extends FlowPanel{
        // This is the main part - it will unset all the buttons in parent widget
        // and then set only clicked one.
        // One mutual handler works faster and is generally better for code reuse
        private final ClickHandler toggleToThis = new ClickHandler() {
                @Override
                public void onClick(ClickEvent clickEvent) {
                    for(Widget b: ThreeStateMachine.this.getChildren()){
                        ((ToggleButton)b).setDown(false);
                    }
                    ((ToggleButton)clickEvent.getSource()).setDown(true);
                }
            };

        private ThreeStateMachine() { // Create out widget and populat it with buttons
            super();

            ToggleButton b = new ToggleButton("one");
            b.setDown(true);
            b.addClickHandler(toggleToThis);
            this.add(b);

            b = new ToggleButton("two");
            b.addClickHandler(toggleToThis);
            this.add(b);

            b = new ToggleButton("three");
            b.addClickHandler(toggleToThis);
            this.add(b);
        }
    }

Surely, one'll need css styles for gwt-ToggleButton with variants (-up-hovering etc.)

Sunshinesunspot

I don't remember why I wanted this, but +1 for the answer. – Triliteral

Thanks, that's not such a big deal -- this is only a paste from my current project:) – Sunshinesunspot

Answer 3

I have something that is both not in an extension library, and not dependent on a panel like the other answers. Define this class which manages the buttons. We're adding a new click listener to the buttons, which is in addition to whatever click handler you attached in the "GUI Content" class. I can't copy and paste this in, so hopefully it's syntatically correct.

    public class MutuallyExclusiveToggleButtonCollection {

      List<ToggleButton> m_toggleButtons = new ArrayList<ToggleButton>();

       public void add(ToggleButton button) {
          m_toggleButtons.add(button);
          button.addClickListener(new ExclusiveButtonClickHandler());
     }

    private class ExclusiveButtonClickHandler impelments ClickHandler {
       public void onClick(ClickEvent event) {
          for(ToggleButton button : m_toggleButtons) {
            boolean isSource = event.getSource().equals(button);
            button.setIsDown(isSource);       
       }

   }

  }

Dendritic

Answer 4

Came across the same need, heres another solution that does away with the separate handler and works nicely in UIBinder with a declaration like:

<my:RadioToggleButton buttonGroup="btnGroup" text="Button 1" />

Here's the extended class:

import java.util.HashMap;

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.uibinder.client.UiConstructor;
import com.google.gwt.user.client.ui.ToggleButton;

public class RadioToggleButton extends ToggleButton
{
    private static HashMap<String,ButtonGroup> buttonGroups = new HashMap<>();
    private ButtonGroup buttonGroup;

    public @UiConstructor RadioToggleButton( String buttonGroupName )
    {
        buttonGroup = buttonGroups.get( buttonGroupName );
        if( buttonGroup == null ){
            buttonGroups.put( buttonGroupName, buttonGroup = new ButtonGroup() );
        }
        buttonGroup.addButton( this );
    }

    @Override
    public void setDown( boolean isDown )
    {
        if( isDown ){
            RadioToggleButton btn = buttonGroup.pressedBtn;
            if( btn != null ){
                btn.setDown( false );
            }
            buttonGroup.pressedBtn = this;
        }
        super.setDown( isDown );
    }

    private class ButtonGroup implements ClickHandler
    {
        RadioToggleButton pressedBtn = null;

        public void addButton( ToggleButton button )
        {
            button.addClickHandler( this );
        }

        @Override
        public void onClick( ClickEvent event )
        {
            Object obj = event.getSource();
            if( pressedBtn != null ){
                pressedBtn.setDown( false );
            }
            pressedBtn = (RadioToggleButton)obj;
            pressedBtn.setDown( true );
        }
    }
}

Gudgeon

Answer 5

gwt-ext toggleButtons

"This example illustrates Toggle Buttons. When clicked, such Buttons toggle their 'pressed' state.

The Bold, Italic and Underline toggle Buttons operate independently with respect to their toggle state while the text alignment icon Buttons belong to the same toggle group and so when one of them is click, the previously pressed Button returns to its normal state."

Triliteral

But those don't have the mutual exclusion property of radio buttons (ie you click one, then click another and you have two buttons selected). – Birdman

Answer 6

Register an additional ClickHandler on all the ToggleButtons. For example, ToggleButtons home, tree, summary, detail.

 public class Abc extends Composite implements ClickHandler {
        ToggleButton home, tree, summary, detail
        public Abc() {
            // all your UiBinder initializations... blah, blah....
            home.addClickHandler(this);
            tree.addClickHandler(this);
            summary.addClickHandler(this);
            detail.addClickHandler(this);
        }
        @Override
        public void onClick(ClickEvent p_event) {
            Object v_source = p_event.getSource();        
            home.setDown(home==v_source);
            tree.setDown(tree==v_source);
            summary.setDown(summary==v_source);
            detail.setDown(detail==v_source);
        }
}

Of course, you just need to add all the other boilerplate code and register additional ClickHandlers for each ToggleButton.

Sandstone