Using popout windows

Almost every office program, graphic suite or text editor supports multi window setups – which makes perfect sense, seeing that it helps a lot with utilising desktop space or using parts of an app as standalone widgets.

So how come web-apps so rarely do this?

Opening new windows from a web-page was traditionally used for aggressive advertisement – until browser-vendors started introducing all sorts of constrains and security features. This makes it now very hard for advertisers to annoy you with popup-ads, but even harder for web-apps to use them.

How can Strelit Layout make any difference with that?

Strelit Layout deals with the cross browser quirks and vendor limitations around popouts – and there are many. But more importantly, Strelit Layout allows to use popouts in a way that mitigates most security concerns: by loading the same URL in every window and passing instructions about what to create as GET-parameter. This fulfils the same-origin policy and keeps programatical communication between windows to a minimum.

So, all good? Can I just use popouts free from care?

Unfortunately: no. Strelit Layout makes it easy to create production ready apps with multi window support, all the way back to IE 8, but there are a few things you as a developer still needs to consider.

Communication between windows

Communication between windows via EventHub

Because detached windows exist in distinct browsing contexts, memory is not shared globally across windows.

Strelit UI Kit includes a native cross-window EventHub (accessed via layout.eventHub) that utilizes DOM event routing across the root and child BrowserPopout layouts:

// In the primary workspace window:
myLayout.eventHub.emitUserBroadcast('tickerPrice', { symbol: 'AAPL', price: 184.20 });

// In any detached BrowserPopout or auxiliary window:
myLayout.eventHub.on('userBroadcast', (data) => {
  console.log('Received multi-window message:', data);
});

Keeping state up to date with stateRequestEvent

When a stack or component item is popped out, Strelit serializes its item configuration using container.stateRequestEvent and rehydrates it in the popup window. Ensure your component assigns a state provider:

container.stateRequestEvent = () => {
  return {
    activeFilter: currentFilter,
    scrollPosition: container.element.scrollTop
  };
};

Popout Window Configuration Settings

Control how popouts behave across monitors inside layoutConfig.settings:

const config = {
  settings: {
    popoutWholeStack: false,          // Pop out only the active tab or entire tab stack
    blockedPopoutsThrowError: true,   // Throw PopoutBlockedError if browser blocks popup
    closePopoutsOnUnload: true,       // Close child popouts when the main window closes
    popInOnClose: false               // Redock tabs back into main window when popout is closed
  },
  root: { /* ... */ }
};

Handling Blocked Popout Windows

Modern browsers block programmatic window.open calls unless triggered by an explicit user gesture (such as clicking the popout tab header button).

When restoring serialized layouts containing previously opened popouts, catch PopoutBlockedError:

try {
  myLayout.loadLayout(restoredConfig);
} catch (error) {
  if (error.name === 'PopoutBlockedError' || error.message.includes('popout')) {
    // Prompt the user with a banner to allow popouts for this domain
    showNotificationBanner('Please allow popups in your browser to restore detached workspace windows.');
  }
}

Once the user grants popup permissions, detached windows will spawn seamlessly across secondary monitors.

Location Bar

Your pop-up will display a location bar - which helps to avoid phishing attacks (opening something that looks like your bank login etc.) but takes up space for your web-app. Unfortunately this is a security feature and can't be turned off (even though there's a locationbar:'no' option when opening the window, but it will just be ignored).

Community & Support