Closeable PopupView

Vaadin 6 / 7 / 8
1

Is possible to put a button inside a PopupView to close it? Just to add a more direct way close other then have to move the mouse away from the view.

2

Hi,

you can put any components in the PopupView, so you could just put e.g. a layout containing the content you need and the close button. In the button’s click listener just call setPopupVisible(false) for the PopupView. Should be quite simple.

-tepi

3

Tepi,

I already did this way before, it close the popup, but after that, the popup will not open anymore, even if you call setPopupVisible(true) in another button.

Must I open a ticket?

4

Okay, that’s strange. Which Vaadin version are you using? I wrote a quick test app with Vaadin 6.8.8 and at least on that this seems to work as intended. See the code below:

package com.example.popuptest;

import com.vaadin.Application;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.PopupView;
import com.vaadin.ui.Window;

public class PopuptestApplication extends Application {

    private PopupView p;

    @Override
    public void init() {
        Window mainWindow = new Window();
        setMainWindow(mainWindow);

        Button close = new Button("close");
        close.addListener(new Button.ClickListener() {

            public void buttonClick(ClickEvent event) {
                p.setPopupVisible(false);
            }
        });
        p = new PopupView("test", close);

        Button open = new Button("open");
        open.addListener(new Button.ClickListener() {

            public void buttonClick(ClickEvent event) {
                p.setPopupVisible(true);
            }
        });
        mainWindow.addComponent(p);
        mainWindow.addComponent(open);
    }
}

If this doesn’t work for you, then I’d say it is a bug in Vaadin and you should file a ticket.

5

The popupview that I need have dynamic content, then is developed using ‘PopView.Content’ were it calls back getPopupComponent() when is about to open the popup.

See my code bellow:


package com.example.labs;

import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.Component;
import com.vaadin.ui.Label;
import com.vaadin.ui.PopupView;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

/**
 * Main UI class
 */
@SuppressWarnings("serial")
public class LabsUI extends UI {

	MyPopupContent mypopContent;

	@Override
	protected void init(VaadinRequest request) {
		final VerticalLayout layout = new VerticalLayout();
		layout.setMargin(true);
		setContent(layout);
		
		mypopContent = new MyPopupContent();
		
		final PopupView pop = new PopupView(new PopupView.Content() {
			@Override
			public Component getPopupComponent() {
				mypopContent.showAgain();
				return mypopContent;
			}

			@Override
			public String getMinimizedValueAsHTML() {
				return null;
			}
		});
		
		mypopContent.getBtClose().addClickListener(new ClickListener() {
			@Override public void buttonClick(ClickEvent event) {
				pop.setVisible(false);
				
			}
		});
		
		layout.addComponent(pop);

		Button button = new Button("Click Me");
		button.addClickListener(new Button.ClickListener() {
			public void buttonClick(ClickEvent event) {
				layout.addComponent(new Label("Thank you for clicking"));
				pop.setPopupVisible(true);
			}
		});
		layout.addComponent(button);
	}

}


package com.example.labs;

import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;
import com.vaadin.ui.Label;
import com.vaadin.ui.VerticalLayout;

public class MyPopupContent extends VerticalLayout {

	private Button btClose = new Button("[X]
close");
	private Label lbl;
	private static int count = 1;

	public Button getBtClose() {
		return btClose;
	}
	public MyPopupContent() {
		show();
	}
	public void showAgain() {
		removeAllComponents();
		show();
	}

	public void show() {
		btClose.setStyleName("link");
		addComponent(btClose);
		setComponentAlignment(btClose, Alignment.TOP_RIGHT);

		setWidth("240px");
		setHeight(100, Unit.PIXELS);
		lbl = new Label("Count="+count++);
		addComponent(lbl);
		setComponentAlignment(lbl, Alignment.MIDDLE_CENTER);

	}
}

The popup works nicely changing the counter while I do not press ‘Close’.

6

On line 45 of your first code block you’re calling pop.setVisible(false); which hides the entire PopupView from the layout completely. Changing this to pop.setPopupVisible(false); seems to do the trick.

7

Teppo,

Sometimes we get blind. The trick now work.

Thanks.