Odd behaviour when trying to implement multi-tab browser support

General
1

Hello,

I read the numerous post regarding adding multi-tab browser support for an application.

I’ve tried to add this support in my application by adding the following code to my Application class:


        // Overriding getWindow(String) is required to get multiple browser
	// windows/tabs to work
	@Override
	public Window getWindow(String name) {

		// If the window is identified by name, we are good to go
		Window w = super.getWindow(name);

		// If not, we must create a new window for this new browser window/tab
		if (w == null) {
			w = new Window(name);

			// Use the random name given by the framework to identify this
			// window in future
			w.setName(name);
			addWindow(w);

			// Move to the url to remember the name in the future
			w.open(new ExternalResource(w.getURL()));
		}

		return w;
	}

When I try to navigate to my application, the application does not show up and instead a blank screen is shown as well a JSON UIDL file attempts to download. I’ve tried this on Firefox on both PC and Mac.

Here is the contents of the file that is downloaded:


for(;;);[{"changes":[["change",{"format": "uidl","pid": "PID0"},["0",{"id": "PID0","height": "667px","width": "1436px","caption": "","name": "UIDL","theme": "csmc","resizable":true,"layoutRelativeWidth":true,"v":{"scrollLeft":0,"scrollTop":0,"positionx":-1,"positiony":-1,"close":false}},["1",{"id": "PID1","cached":true}]
]]], "meta" : {}, "resources" : {}, "typeMappings" : { "com.vaadin.ui.Window" : 0 , "com.vaadin.ui.VerticalLayout" : 1 }, "locales":[]}]

Is there something I am doing wrong?

Thanks,
Ajay

2

Hi,

in your code, you create a new Window that by default contains only an empty VerticalLayout:

w = new Window(name);

If you want to see some content in the window, you have to add it by calling w.addComponent() for example :slight_smile:

-Henri

3

Hi Henri,

My application currently does use addComponent to add components to the window however that is in my init() procedure. I was under the impression that if I overrode the getWindow() with the code above, it would handle multiple sessions within the same browser using different tabs.

Currently my main window code is:


@Override
	public void init() {
		// Create the main window
		final Window mainWindow = new Window(MAINWINDOW_NAME);

		// Create system log object
		systemLog = new SystemLog(SYSTEMLOG_FILENAME);

		// Set the main window
		setMainWindow(mainWindow);

		// Build active alerts button
		activeAlertsButton = new Button();
		// Set to HTML style link
		activeAlertsButton.setStyleName(Button.STYLE_LINK);

		// Build active alerts table
		activeAlertsTable = new Table();
		// Hide header in active alerts table
		activeAlertsTable.setColumnHeaderMode(Table.COLUMN_HEADER_MODE_HIDDEN);
		// Do not allow selecting items from the table.
		activeAlertsTable.setSelectable(false);
		// When an item is selected, the selection is sent immediately to
		// server.
		activeAlertsTable.setImmediate(true);
		// Set the width of the table
		// alertsTable.setWidth("100.0%");
		activeAlertsTable.setWidth("500px");
		// Set the height of the table
		activeAlertsTable.setPageLength(5);
		// Define the names and data types of columns. The "default value"
		// parameter is meaningless here.
		activeAlertsTable.addContainerProperty("Icon", Embedded.class, null);
		activeAlertsTable.addContainerProperty("Alert", Label.class, null);
		activeAlertsTable.setColumnWidth("Icon", 24);

		activeAlertsButton.addListener(new ClickListener() {

			@Override
			public void buttonClick(ClickEvent event) {

				// Create active alerts pop up window
				Window activeAlertsWindow = new Window("Active Alerts");
                                activeAlertsWindow.setIcon(new ThemeResource("../csmc/icons/alert.png"));
				// Set active alerts window to be modal mode
				activeAlertsWindow.setModal(true);
				// Set active alerts window's dimension to auto-sizeable
				activeAlertsWindow.setSizeUndefined();
				activeAlertsWindow.getContent().setSizeUndefined();

				// Set active alerts window to be fixed size
				activeAlertsWindow.setResizable(false);

				// If there are active alerts display the alerts table
				if (activeAlertsTable.size() > 0) {
					// Add active alerts table to pop up window
					activeAlertsWindow.addComponent(activeAlertsTable);
				} else {
					// Otherwise, show a message with no active alerts
					activeAlertsWindow.addComponent(new Label(
							"There are currently no active alerts."));
				}
				// Add active alerts pop up window
				mainWindow.addWindow(activeAlertsWindow);
			}

		});

		// Build active alerts grid layout
		activeAlertsAL = new AbsoluteLayout();
		activeAlertsAL.setHeight("24px");
                activeAlertsAL.setWidth("944px");

		// Create main frame
		mainFrame = new MainFrame(this);

		// Build main frame
		mainFrame.buildMainFrame();

		// Add main frame to main window
		mainWindow.addComponent(mainFrame);

		// Set the theme
		setTheme("csmc");

	}

In the examples I’ve found over the forums, they were similar to this. All components of the window were added in the init() and then the getWindow() was overridden. Is there something I am missing here?

Also, why does the UIDL file attempt to download when I navigate to the page?

Thanks,
Ajay

4

I don’t know what examples you have looked, but for example
this
 example has a CalcWindow class that is set as the main window and created in getWindow().

I suggest you to create a similar class extending Window and create the layout there. Then set an instance of the class as the main window and in getWindow() create an instance of the class similarly in the wiki example.