ClickListener for Composite Widget

Question

Hi,

I have a composite widget made of a textbox and a custom widget, which are then added to a verticalPanel. I created this custom widget using Raphael JS.

Now i want this Composite widget to recognize both click event and also the ctrl event. I tried implementing clicklistener in both the classes with no fruitful results.

here is the code lay-out:

This class creates the custom widget from Raphael JS:

public class CustomShapeRet extends RaphaelJSWidget{

    public CustomShapeRet(){
     super();
     Rectangle r = new Rectangle(10, 10, 50, 20);

     r.attr("stroke", "black");
        r.attr("stroke-width", "5");
    }
}

This class here creates the composite widget:

public class Test extends Composite{

    public Test(){
     TextBox t1 = new TextBox();
     t1.setSize("100px", "20px");
     t1.setText("Hi");
     t1.setTitle("textbox");

     CustomShapeRet r = new CustomShapeRet();
     r.setTitle("rec");

     VerticalPanel v1 = new VerticalPanel();
     v1.setStyleName("vertical");
     v1.add(r);
     v1.add(t1);  
     initWidget(v1);
    }
}

Question: Is there a way to get this working? and what would be your recommendation?

Thank you.

Answer 1

How about wrapping the Composite in a FocusPanel, instead of VerticalPanel? (you can put the VerticalPanel in the FocusPanel, if you need the layout, but make sure that FocusPanel is the one you call initWidget on) Then you can just add a ClickHandler to that panel and voila. FocusPanel also implements HasAllKeyHandlers, meaning you get KeyDown/UpHandlers, etc too.

Answer 2

You have to implement HasClickHandler interface in your "Test" composite widget.It will force you to implement addClickHandler method.Then you can add clickHandler.You can implement the following all iterfaces depends on your requirementHasAllFocusHandlers, HasAllKeyHandlers, HasAllMouseHandlers. If you want to add click listners for CustomShapeRet then implement the interfaces there also.For sample code Look at the following thread:

http://stackoverflow.com/questions/1512692/how-do-i-add-mouseevents-to-an-absolutepanel/1512885#1512885

Just try this.I dont have any idea about RaphaelJSWidget.

public class CustomShapeRet extends RaphaelJSWidget implements HasClickHandler{

public CustomShapeRet(){
    super();
    Rectangle r = new Rectangle(10, 10, 50, 20);

    r.attr("stroke", "black");
    r.attr("stroke-width", "5");
}

   public HandlerRegistration addMouseOutHandler(MouseOutHandler handler) {  
       return addDomHandler(handler, MouseOutEvent.getType());  
     }  
}

I am assuming that your RaphelJSWidget class extends Widget class.If it is true you can add click handler.It should work.