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

Vaadin 6 / 7 / 8 Framework UI
1

Hi,
Does anyone know how do I control and override the behavior of ‘right click’ in the UI components?
All I want to do is to display my own panel when someone right clicks on an item in a tree or table.
I would appreciate if someone can guide me through this problem or give me a clue.
Thanks,
Houman.

2

Do you only need a list of options that pops up when you click right button, or are you planning some fancy pants panel with all the bells and whistles?

If it is just a menu with labels, like “Delete”, “Open”, “Send” etc, then you’re in luck! You can implement Action.Handler and give it either to a table or a tree.

goes something like this

class x implements Action.Handler(){
 public Action[] getActions(Object target, Object sender) {...}
 public void handleAction(Action action, Object sender, Object target){...}
....
myFineTable.addActionHandler(new x());
}

If I recall correctly, getActions gives a list of the menu options, and handleAction tells what to do when an action is taken (a menu item is clicked).

3

Hi,
Thanks for your reply.

Since we have got lots of actions for each item and the actions are of different categories, we are going to develop a multi-layer context menu, imagine it just like a vertical menu bar.

These actions are so dynamic and they change based on the application’s context. So we need them to be refreshed every time user tries to access them (via right click).

Of course, our last resort is to use the Action.Handler if we find it very difficult to implement our own. [This way, we may still need to change the intermediate tags (and producer/renderer code as well) to support multiple levels of actions.]

Regards,
Houman.

4

Allright! Good thing that you got everything under control. Tell us how it goes every now and then, since I’d figure here is many interested to hear about it, me included.

5

Hi,
I still don’t know how to control right click on a tree/table to put my own code there :cry:

6

Al right then, This is what I have found out so far:

First I am going to make sure that list of actions are always empty for the Tree/Table so that no IContextMenu will be displayed.

Then I handle mouse event with tree/table.addListener(new ItemClickEvent.ItemClickListener() { … })

What next? Then I display my own component or lift one of ITMill’s :wink:

ANY HELP/HINT/SUGGESTION IS APPRECIATED.

7

Hi,

Quick hint:

In the ItemClickListener you should be able to getClientX()/getClientY() and open a window at that position. Since the basic window might look a bit heavy for your purposes, you might want to theme it to remove most decorations. You might want to make it modal too…

If this does not get you the desired result, you’ll probably have to implement custom client-side functionality.

Best Regards,
Marc

8

Hi Marc,
I have done the exact thing to get the position of click.
Then I have changed client-side of MenuBar to pop up the first level of menu items as well (as a new client-side component).
Then I inherited from MenuBar, change the widget name and added positioning information to the UIDL being passed to my new client side component.
And it looks perfect now.
Thanks,
Houman.

9

Hi Houman,
Could you please show me how you do this! I don’t understand how you can do a right click??

10

Hi Anonymous,

Assuming your problem is not that you have recently acquired a Mac :wink: , you’re probably looking for getButton() in ItemClickEvent - something like this:


t.addListener(new ItemClickListener() {
  public void itemClick(ItemClickEvent event) {
    if (event.getButton()==ItemClickEvent.BUTTON_RIGHT) {
       // Right mouse button clicked, do greatThings!
    }
  }
});

Samples here:

http://toolkit.itmill.com/demo/sampler/#Components/Table%20(Grid)/TableMouseEvents


http://toolkit.itmill.com/demo/sampler/#Components/Trees/TreeMouseEvents

Best Regards,
Marc

11

Hi Marc!
Thanks for your response! But this doesn’t work!
I tried that yesterday but when I right cllick, ItemClickListener is not called! So if do

if(event.getButton()==ItemClickEvent.BUTTON_RIGHT)

it does nothing!
I have already see sample but I don’t find what I want! In fact, I’d like to make a jpopupmenu like in java swing with menu and submenu. Is it possible??
Sorry for my english :oops:
Julie

12

Without more code, I can only guess why it’s not working: which component are you attaching the ItemClickListener to? At the moment, only Tree and Table support it…

However, it sounds like you really want Houman’s component - currently you can’t make submenus (‘sub-actions’) using action handlers, which would often be the easiest solution.

(Your English is fine, by the way :slight_smile:

Best Regards,
Marc

13

Thanks for my english!

I’m attaching the ItemClickListener to a table! Right click works fine with tree but not at all with table! Must I only use ActionHandler with table?

Julie

14

if it is the menu you want from the right click, rather than just that something happens when you click, then use the table example that Marc linked to. Here is the relevant part of the example


//field variables
static final Action ACTION_RED = new Action("red");
static final Action ACTION_BLUE = new Action("blue");
static final Action ACTION_GREEN = new Action("green");
static final Action ACTION_NONE = new Action("none");
static final Action[] ACTIONS = new Action[]
 { ACTION_RED, ACTION_GREEN, ACTION_BLUE, ACTION_NONE };

...

// Actions (a.k.a context menu)
table.addActionHandler(new Action.Handler() {
public Action[] getActions(Object target, Object sender) {
  return ACTIONS;
}

public void handleAction(Action action, Object sender, Object target) {
  markedRows.remove(target);
  //Do something when the user chooses a item from the popup menu.
}
});

(Hundredth post. Narf!)

15

Thanks! But I already see that, and with this solution, I can’t use submenu! Nevertheless, if there isn’t any other solution, I’ll do this!

16

Ah, so you want to have the multi level menu. Then you need to do it as Houman, and make your own component using the MenuBar as the “popup” widget.

17

.

18

Thanks! So I tried to do this but I have this error : GWT.create() is only usable in client code!
How can I code in client side ?

19

You usually need two different classes when doing a Server side component. All normal components in the toolkit are of this sort. One is for the server side and one is for the client.

The server side needs to implement the interface Component while the client side must implement the interface Paintable. Usually you can use already a lot of the code and just extend some other components, so you don’t have to do everything from the beginning. I guess the ones you want to extend here is Table.class and IScrollTable.class. Somebody smarter can correct me if I’m wrong.

You should read up on chapter 8 in the IT Mill Manual: “Developing Custom Components”.

http://www.itmill.com/documentation/itmill-toolkit-5-reference-manual/gwt.html

Also normal GWT Manuals may help here.

20

Thanks! I tried to do this since the begining of the afternoon, and I don’t succeed! I read all the manual but I don’t know how to apply to my case!
Can someone help me, please??