How to control right click (How to develop custom pop-up/context menu)

Vaadin 6 / 7 / 8 Framework UI
21

Houman please, could you explain and show me how you did it, and especially how you do a right click on table component?

22

Julie:
I will be going to answer your second question first. Currently right click events are not supported by the Table component. You have to change it as well. Once you get to know how to develop a custom component this one will not be a big deal for you.
Well, back to the main question.
First of all, have a look at my directory structure under X.X.X.itmill (Ignore the crossed-off lines since they are irrelevant to this topic):

Your .gwt.xml file should contain these lines:


<module>
	<inherits name="com.itmill.toolkit.terminal.gwt.DefaultWidgetSet" />
	<stylesheet src="customcomponents/styles.css"/>
	<entry-point class="X.X.X.itmill.customcomponents.client.CustomComponentsWidgetSet"/>
</module>

Your CustomComponentsWidgetSet.java can be like this:


public class CustomComponentsWidgetSet extends DefaultWidgetSet
{
    protected Class<?> resolveWidgetType(UIDL uidl)
    {
        final String tag = uidl.getTag();
        if ("popupverticalmenu".equals(tag))
            return IPopupVerticalMenu.class;
        return super.resolveWidgetType(uidl);
    }

    public Paintable createWidget(UIDL uidl)
    {
        final Class<?> type = resolveWidgetType(uidl);
        if (IPopupVerticalMenu.class == type)
            return new IPopupVerticalMenu();
        return super.createWidget(uidl);
    }
}

PopupVerticalMenu simply inherits from ITMill’s MenuBar:


public class PopupVerticalMenu extends MenuBar
{
    private Integer positionX = 0;
    private Integer positionY = 0;

    public PopupVerticalMenu()
    {
        super();
        setVisible(false);
        setCollapse(false);
    }

    public String getTag()
    {
        return "popupverticalmenu";
    }

    @Override
    public void paintContent(PaintTarget target) throws PaintException
    {
        target.addVariable(this, "positionx", positionX);
        target.addVariable(this, "positiony", positionY);
        super.paintContent(target);
    }

    public void showMenu(Integer positionX, Integer positionY)
    {
        this.positionX = positionX;
        this.positionY = positionY;
        setVisible(false);
        setVisible(true);
    }

    @Override
    public void changeVariables(Object source, Map variables)
    {
        super.changeVariables(source, variables);
        if (variables.containsKey("visible"))
        {
            Boolean nowVisible = (Boolean) variables.get("visible");
            if (!nowVisible.equals(isVisible()))
            {
                setVisible(nowVisible);
                requestRepaint();
            }
        }
        else if (variables.containsKey("clickedId"))
        {
            setVisible(false);
            requestRepaint();
        }
    }
}

Note that getTag() method returns the same string that is caught in the widget set class.
The client side component (IPopupVerticalMenu) is rather more complex and most of the work lies here.
For the start copy the existing IMenuBar and then tweak it to handle X-Y and be a pop-up client-side component using IToolkitOverlay that does most of the work for you.
Then compile your files against GWT (Use the ant task from color picker application), copy generated files in your classpath, and add these lines to your ITMill application to use it:


<servlet>
	 ...
	<init-param>
			<param-name>widgetset</param-name>
			<param-value>X.X.X.itmill.customcomponents.CustomComponentsWidgetSet</param-value>
		</init-param>
</servlet>

Good luck :mrgreen:

23

BTW, be patient. I spent a couple of days to have my own component.
8)

24

Seems like a clean solution. Good job and thanks for the tips!

25

This is a bug - I did not find a previous ticket for this, so I created one (please let me know if you have reported this already, and this is a duplicate): http://dev.vaadin.com/ticket/2987

Best Regards,
Marc

26

I fixed this, in Vaadin 6 the Table ItemClickListener will support middle- and right-click in addition to left-click.

Best Regards,
Marc

27

Three month later…
I’ve do all you said me and I have always a problem… I can’t create the menu with the right click. Actually, the “paintContent” method of my PopupVerticalMenu is not call when I call showMenu. She is only call when I add the component on my layout.
Do you understand what happened??

28

.

29

Bump :glare:

Here’s another problem, quite the opposite to what original poster pointer out. Table component captures right-mouse clicks which prevents browsers from showing standard context menu on Table body. It happens even if no action handlers or click listeners are registered on Table (!). Is that really designed to work like that?

I am having a look at Vaadin Testbench and not having a possibility to right-click Table body in order to get standard context menu with Testbench Recorder commands is painful.

Anyone else experiencing the same?
Is there any way to delegate/route right-clicks back to browser’s handler?

Thanks,
Tomas

30

Ha, I have found simple workaround to that. Instead of clicking right-mouse button, I use context-menu keyboard button. It works.

31

That’s one of the reasons why right-click events should not be handled by web apps. Besides any user can disable context menu overriding in his browser settings. For Firefox it’s available in Options → Content → JavaScript → Advanced. Especially you might find this setting useful :wink:

32

Thanks Michal, that’s good tip too :slight_smile:

33

how to disable right click in our application…