Context menu on a NativeButton ?

Hi.
can anyone give a code example of a context menu (right mouse menu) on a NativeButton?
Thank you very much!

NativeButton is a button generated by the browser, right? Any reason to prefer it to a Vaadin button? The JavaDoc is nearly empty and the component is half deprecated.

And since it isn’t generated by Vaadin, I don’t know if we will have much control over it (appearance, z-order with Vaadin popups, handling of right-click, etc.). I can be wrong, of course.
Oh, and out of curiosity, what is the use case?

In simple cases, NativeButton is actually much easier to theme than Button, especially if you are applying a standard theme such as reindeer to the rest of the buttons in the application and would have to override it for some button.

The fancier themes for Button and the underlying code are very complex as they try to achieve the same look, feel and functionality on various browsers. You’d be surprised at how much work the seemingly simple Button component and its themes have required…

Try to use the
ContextMenu
add-on.

Wow, so much help… Thanks already! I am totally new to Vaadin, this is great.

Well, the use case is that I am creating an application and I follow the skeleton as explained here:
https://vaadin.com/tutorial/-/chapter/skeleton.html

When I click on any item on the left (these are NativeButtons) i am opening specific content on the right side.
This works.

Now I’d like to add this:
a context menu on the left buttons
with the option “open in a new Tab”
which then adds a tab on the right side with the selected content in it.

Since the skeleton is using NativeButtons, i used them as well.
The context menu ADDON seems not possible on NativeButtons. I could not get it working, i don’t know how…

Questions:
can I just as well use Button or something else in the left side of the before mentioned left side bar?
or can I stick to NativeButtons and get a context menu on that working somehow?

All help is highly appreciated!

I think indeed it is impossible to have a context menu work on a NativeButton
because a NativeButton can only have registered three types of Listeners:
(source: https://vaadin.com/api/com/vaadin/ui/NativeButton.html#methods_inherited_from_class_com.vaadin.ui.Button )

A - a Button.ClickListener
B - a BlurListener which gets fired when it loses keyboard focus.
C - a FieldEvents.FocusNotifier which gets fired when it receives keyboard focus.

The only I would have is the first listener-registration, giving back a https://vaadin.com/api/com/vaadin/ui/Button.ClickEvent.html
Which HAPPENS to have https://vaadin.com/api/com/vaadin/terminal/gwt/client/MouseEventDetails.html
which seems to reveal which button was clicked (LEFT, MIDDLE, RIGHT).

HOWEVER… it is both private and final !!!
So no way to get to the Button.ClickEvent.mouseEventDetails

:frowning:

I will leave the idea of a context menu on a Button
and seek more luck with a Tree instead of a VerticalLayout with NativeButtons.

Anyone: do you see a way to detect a right click on a NativeButton?

I see two ways to achieve your use case:

  • Add a check box near the button, making the action to open in a new tab
  • Use the SplitButton add-on, it displays a drop-down section on the button to have precisely a list of actions.

And thank you, Henri, for explaining how such button is useful. Yes, buttons are deceptively looking simple… :slight_smile: