Modeless window is closed but detached client-side ui component is open.

Vaadin 6 / 7 / 8 Framework UI
1

Hi,
I am having trouble closing a modeless window.
When I close it (1st case) using the ‘cancel’ button in it, the window is closed properly, but when I (2nd case) use another button in the main window to change the current view (and close all of the open windows) the window is not closed. Well, the clien-side ui component is not closed.
As soon as I try to open another window it goes away instantly. Trying to close it using the close box is ignored by the application with a log statement dumped.
Since the 2nd case is way too complex involving lots of method calls and view changes I haven’t been able to reproduce it yet, but I have dumped the UIDL changes in both cases to compare.
Can anyone by looking at these messages tell me what prevents the window from being closed in the second case?

First case (when the window is closed using ‘cancel’ button):

["change",{"format": "uidl","pid": "PID0"},["window",{"id": "PID0","height": "100.0%","width": "100.0%","caption": "Director","name": "506144704","theme": "nstc","modal":true,"resizable":true,"main":true,"layoutRelativeHeight":true,"layoutRelativeWidth":true,"v":{"scrollLeft":0,"scrollTop":0,"action":"","positionx":-1,"positiony":-1,"close":false}},["verticallayout",{"id": "PID73","cached":true}]
,["actions",{}]
]]

["change",{"format": "uidl","pid": "PID160"},["button",{"id": "PID160","immediate":true,"caption": "New...","description": "Create a new network element","v":{"state":false}}]
]

Second case (when the window is closed as a part of view change):

["change",{"format": "uidl","pid": "PID0"},["window",{"id": "PID0","height": "100.0%","width": "100.0%","caption": "Director","name": "506144704","theme": "nstc","modal":true,"resizable":true,"main":true,"layoutRelativeHeight":true,"layoutRelativeWidth":true,"v":{"scrollLeft":0,"scrollTop":0,"action":"","positionx":-1,"positiony":-1,"close":false}},["verticallayout",{"id": "PID73","height": "100.0%","width": "100.0%","margins":0,"alignments": {},"expandRatios": {"PID342":1.0}},["horizontallayout",{"id": "PID74","cached":true}]
,["horizontallayout",{"id": "PID78","cached":true}]
,["customlayout",{"id": "PID89","cached":true}]
,["verticallayout",{"id": "PID342","height": "100.0%","width": "100.0%","style": "mainAreaLayout","margins":0,"alignments": {},"expandRatios": {}},["hsplitpanel",{"id": "PID343","height": "100.0%","width": "100.0%","margins":0,"position": "20%"},["verticallayout",{"id": "PID344","width": "100.0%","margins":0,"alignments": {},"expandRatios": {}},["gridlayout",{"id": "PID345",####},["gr",{},####GCs####]
],["verticallayout",{"id": "PID348","width": "100.0%","margins":0,"spacing":true,"alignments": {},"expandRatios": {}},####TREE####,["verticallayout",{"id": "PID349","height": "100.0%","width": "100.0%","margins":0,"alignments": {},"expandRatios": {"PID350":1.0}},["customtabsheet",{"id": "PID350","height": "100.0%","width": "100.0%","immediate":true},["tabs",{}]
],["verticallayout",{"id": "PID351","invisible":true}]
]]],["customlayout",{"id": "PID129","cached":true}]
],["actions",{}]
]]

["change",{"format": "uidl","pid": "PID81"},["interfacelock",{"id": "PID81","height": "0px","width": "0px"}]
]

["change",{"format": "uidl","pid": "PID93"},["button",{"id": "PID93","style": "iconholder","immediate":true,"disabled":true,"caption": "","icon": "####.png","description": "Profile Manager","v":{"state":false}}]
]

["change",{"format": "uidl","pid": "PID83"},["progressindicator",{"id": "PID83","style": "invisible","indeterminate":true,"pollinginterval":800,"state": "0.0"}]
]

["change",{"format": "uidl","pid": "PID92"},["button",{"id": "PID92","style": "iconholder","immediate":true,"caption": "","icon": "####.png","description": "Topology","v":{"state":false}}]
]

["change",{"format": "uidl","pid": "PID83"},["progressindicator",{"id": "PID83","style": "invisible","indeterminate":true,"pollinginterval":10000,"state": "0.0"}]
]

Thanks,
Houman

2

I have been able to reproduce the problem.
Here is the ticket created for it:
http://dev.vaadin.com/ticket/4202

Here is the code to reproduce the problem:

public class VaadintestsApplication extends Application
{
	private final Window mainWindow;
	private final VerticalLayout mainLayout;
	private final Window popupWindow;
	private final VerticalLayout simpleLayout;
	private final VerticalLayout tabbedLayout;
	private Component centerComponent;
	
	public VaadintestsApplication()
	{
		mainLayout = new VerticalLayout();
		mainLayout.setSizeFull();
		mainWindow = new Window("Vaadin Tests, Main Window", mainLayout);
		popupWindow = new Window("Popup Window");
		simpleLayout = new VerticalLayout();
		tabbedLayout = new VerticalLayout();
	}

	private void showPopupWindow()
	{
		if (popupWindow.getParent() == null)
		{
			mainWindow.addWindow(popupWindow);
			popupWindow.setPositionX(200);
			popupWindow.setPositionY(100);
		}
	}

	private void hidePopupWindow()
	{
		if (popupWindow.getParent() != null)
			mainWindow.removeWindow(popupWindow);
	}

	private void replaceCenterComponent(Component newComponent)
	{
		if (newComponent != null)
		{
			newComponent.setSizeFull();
			mainLayout.replaceComponent(centerComponent, newComponent);
			mainLayout.setExpandRatio(newComponent, 1.0f);
			centerComponent = newComponent;
		}
	}
	
	@Override
	public void init()
	{
		setMainWindow(mainWindow);
		
		simpleLayout.addComponent(new Label("This is a simple component."));
		tabbedLayout.addComponent(new Label("This is a rather complex component having a tabsheet embedded inside."));
		// Removing the following 4 lines will fix the problem
		TabSheet tabSheet = new TabSheet();
		tabSheet.setSizeFull();
		tabbedLayout.addComponent(tabSheet);
		tabbedLayout.setExpandRatio(tabSheet, 1.0f);
		
		HorizontalLayout buttonsLayout = new HorizontalLayout();
		VerticalLayout emptyPane = new VerticalLayout();
		mainLayout.addComponent(buttonsLayout);
		replaceCenterComponent(emptyPane);
		
		Button showPopup = new Button("Show Window");
		showPopup.addListener(new Button.ClickListener()
		{
			@Override
			public void buttonClick(ClickEvent event)
			{
				showPopupWindow();
			}
		});
		buttonsLayout.addComponent(showPopup);
		
		Button hidePopup = new Button("Hide Window");
		hidePopup.addListener(new Button.ClickListener()
		{
			@Override
			public void buttonClick(ClickEvent event)
			{
				hidePopupWindow();
			}
		});
		buttonsLayout.addComponent(hidePopup);
		
		Button showSimpleLayout = new Button("Simple Layout");
		showSimpleLayout.addListener(new Button.ClickListener()
		{
			@Override
			public void buttonClick(ClickEvent event)
			{
				hidePopupWindow();
				replaceCenterComponent(simpleLayout);
			}
		});
		buttonsLayout.addComponent(showSimpleLayout);
		
		Button showTabbedLayout = new Button("Tabbed Layout");
		showTabbedLayout.addListener(new Button.ClickListener()
		{
			@Override
			public void buttonClick(ClickEvent event)
			{
				hidePopupWindow();
				replaceCenterComponent(tabbedLayout);
			}
		});
		buttonsLayout.addComponent(showTabbedLayout);
	}
}

To reproduce it follow these steps:
1- Click “Simple Layout”
2- Click “Show Window”
3- Click “Tabbed Layout”
4- Now try clicking the popup’s close button
5- Send me your account number for a $100 reward if you could close the popup window :wink:

3

I tested your steps to reproduce and step 3 closes the window properly.
Would a paypal account do for the $100? :slight_smile:

4

Thanks Artur for responding back to me,
Testing with 6.2.0 now and I don’t see the problem any more! (I was testing with 6.1.5)

Terms and conditions apply to the reward: Version 6.1.5 ONLY :grin: