Hello!
I created a Vaadin component called PopupButton. It’s a button, which opens a popup when the button is clicked. PopupButton is licensed under the Apache License 2.0.
-Henri
Quite cool!
Suggestion: make a click close the popup if it is already open.
I just released version 0.8 of PopupButton. This version now closes the popup when the button is clicked. Also, this version containts one bug fix, and clicking Vaadin’s debug window doesn’t close the popup.
Hi,
I am using your PopupComponent, but I have a little problem.
I have a layout in a window, when the window moves the popup does not move.
Any idea how it could solve this problem?
Could I close the popup by code when the window is moved?
Thanks for your help!
Hi,
You found a bug from the component. I fixed it and released a new version. Get this version from
Directory
.
-Henri
One really really minor enhancement proposal: should the down-arrow in the button automatically be changed to “up-arrow” if the menu opens on top of the button?
Let’s say that we have a scrollable window, which contains a PopupButton and other components. Initially, the popup opens above the button because there is no enough space below the button. The user scrolls down the window and now there is enough space to open the popup below the button. In this case, the PopupButton should somehow detect scroll events and change the arrow accordingly.
So I guess it’s better that the component not try to be too smart. If somebody wants to change the arrow, it can be done with CSS.
-Henri
Ahh… Did not think of that. Agreed.
It would be nice if dropdown button was different from the right part of button.
So a behavior like Eclipse “Run” “Debug” toolbar buttons.
Hi,
You are correct, that would be useful in some cases. However, the current implementation of PopupButton bases on a single button. Maybe Peter’s
MultiButton
would help you?
-Henri
Hi,
Love this one. A minor improvement proposal: adding a default constructor would make the PopupButton more Visual Editor-friendly as the Visual Editor (in its current incarnation) generates code that expects a default constructor to be present in components.
-Martin Söderström
I just released a new version 1.2.0 of PopupButton that has a default constructor. Other improvments:
- For easier styling of popup, button’s style names are copied to popup. Thanks to
Marcus
for implementing this feature. - Disabled PopupButton does’t try to send events to server anymore
I just tried the latest 1.2.0 version of the addon and I can’t get it to work at all.
On click the button does create 2 divs in the upper-left of the screen but the element styling on them is visibility:hidden.
So it creates the divs in the wrong place and they are not even visible.
Here is the code I am testing with:
public class TestApplication extends Application
{
@Override
public void init()
{
Window w = new Window();
PopupButton popupButton = new PopupButton("Action");
HorizontalLayout popupLayout = new HorizontalLayout();
popupButton.setComponent(popupLayout); // Set popup content
Button modifyButton = new Button("Modify");
modifyButton.setIcon(new ThemeResource("../runo/icons/16/document-txt.png"));
popupLayout.addComponent(modifyButton);
Button addButton = new Button("Add");
addButton.setIcon(new ThemeResource("../runo/icons/16/document-add.png"));
popupLayout.addComponent(addButton);
Button deleteButton = new Button("Delete");
deleteButton.setIcon(new ThemeResource("../runo/icons/16/document-delete.png"));
popupLayout.addComponent(deleteButton);
w.addComponent(popupButton);
this.setMainWindow(w);
}
}
In my tests, your code works as expected. In which browsers do you have this problem? Have you recompiled the widgetset after updating the addon?
Hi,
can you give me an example to change the indicator with CSS, pls.
I found a solution by adding the div tag.
div.v-button div.v-popup-indicator {
display: inline-block;
cursor: pointer;
width: 13px;
height: 11px;
background: transparent url(../../themes/base/common/img/sprites.png) no-repeat -5px 5px;
}But I want to control the Indicator with a stylename. Is that possible?
Thanks
Jan
If add a style name to your PopupButton by saying
popupButton.addStyleName("mystyle");then you can say in your CSS:
div.v-button-mystyle div.v-popup-indicator { … }This was the component I was really looking for: needed a popUp window appear right out from the button and This did the trick.
There is one thing though I’d like to comment:
PopUp window closes now just by mouseclick somewhere else. Can there be also a choise to use CloseWindow button with event also.
CloseButton could also have the icon property and place in the layout.
Thanx.
Did I understand correctly that you want to close the popup by pressing a button in the popup? If so, the following button should do the trick:
Button button = new Button("Close", new ClickListener() {
public void buttonClick(ClickEvent event) {
popupButton.setPopupVisible(false);
}
});
Cheers,
-Henri
Hi Henri,
we are using your component, version 1.2.1 and found 2 issues.
- Component does not atach his child components to the application. This was easily solved by overriding attach() method but still caused some confusion.
- In IE9 when tagpopup button is clicked and popup is opened there is no way to close it. Mouseclick somewhere else has no result. It works fine with other browsers.
Can you check if these issues exist and fix them or provide some workaround.
Hi Henri,
Great addon. I am using it now. I have a question that I can use it with eclipse vaadin plugin to compile it. But when I was using maven-vaadin-plugin to compile it. It always displays:
Widgetset does not contain implementation for org.vaadin.hene.popupbutton.PopupButton. Check its @ClientWidget mapping, widgetsets GWT module description file and re-compile your widgetset. In case you have downloaded a vaadin add-on package, you might want to refer to add-on instructions. Unrendered UIDL://…
So how can I fix this issue?
Thank you very much!
Best,
Chun