GWT Bootstrap Modal buttons won't work with ClickHandler's onClick

Question

I'm trying to create a dialog box using GWT-Bootstrap modal widget. I can get it to display but have not been able to get the buttons to recognize events. The cancel button onClick never fires. Had some other code to try to get the addClass button to do do something but stripped it out. If I can get the cancel button to do something (anything!) I should be in good shape.

I've also tried the java using addDomHandler and that didn't work either.

Here's the XML:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
  xmlns:a="urn:import:cgs.common.client.gwt.bootstrap"
  xmlns:b="urn:import:com.github.gwtbootstrap.client.ui"
  xmlns:g="urn:import:com.google.gwt.user.client.ui">
  <b:Modal title="Add Class?" ui:field="addClassModal" backdrop="STATIC" keyboard="true" animation="true">
    <a:BootstrapField label="Classname:">
     <a:BootstrapTextInput
          ui:field="classname" 
          placeholder="Classname" />
        </a:BootstrapField>
    <b:Button ui:field="addClass">Add Class</b:Button>
    <b:Button ui:field="cancel">Cancel</b:Button>
    </b:Modal>
</ui:UiBinder> 

And here's the java:

package cgs.teacher.portal.client.view.impl.bootstrap;


import cgs.common.client.gwt.bootstrap.BootstrapTextInput;

import com.github.gwtbootstrap.client.ui.Button;
import com.github.gwtbootstrap.client.ui.Modal;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;

import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;



public class AddClassDialogViewImpl
        extends Composite

{


    interface AddClassDialogViewImplUiBinder extends UiBinder<Widget, AddClassDialogViewImpl>
    {
    }

    private static AddClassDialogViewImplUiBinder uiBinder = GWT
            .create(AddClassDialogViewImplUiBinder.class);

    @UiField
    Modal addClassModal;
    @UiField
    BootstrapTextInput classname;
    @UiField
    Button addClass;
    @UiField
    Button cancel;



    public AddClassDialogViewImpl()
    {
        initWidget(uiBinder.createAndBindUi(this));



        cancel.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
              addClassModal.hide();
            }
          });

        addClassModal.toggle();  //PS. Show gave error. Had to use toggle to show!

    }

}

Thanks!

Answer 1

Another workaround which I have found is adding the Modal component to the RootPanel :

    public AddClassDialogViewImpl() {
    
      initWidget(uiBinder.createAndBindUi(this));
    
      cancel.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
        //hide the widget
        addClassModal.hide();
        
        // unless you want to keep this modal as a singleton, you need to remove it from the DOM
        RootPanel.get().remove(AddClassDialogViewImpl.this);
        }
      });
     
      //add the widget to the DOM
      RootPanel.get().add(this);
      // show the widget
      addClassModal.show();
    
    }