How to create a Tabbed interface for two different web applications to be displayed as a single page

Question

We have two separate web-apps, say 'retailUI' and 'bulkUI'. These two are basically two separate web applications (within the same business domain). Now, the requirement has been given to us to make the two work together in one page with a Tabbed interface (as a PoC).
My problem is that both the applications span over a number of JSP pages for navigation.
Is there a way that I can achieve this using some framework or some other approach?

Answer 1

Sounds like your easiest bet is to use Frames. For this, each of your two web apps will be frames of a wrapper web app. You would then hide or show the frames based on which one you want to be active.

This would allow you to have seperate navigation in each, and the two apps don't necessarily have to know anything about one another.

Answer 2

If you want to keep the two applications as much as possible the way they are now, without rewriting them entirely, you gotta use iframes. That means the content of each tab is actually an iframe.

For such cases I found of great use a ExtJS user developed component, ManagedIFrame which as it's names suggested is a managed iframe. Using it, your iframes can interact with each other(for instance sendind messages from one to another, listeners etc.)
Carefully planing the listeners and their registering by checking whether the peer is there you could build this integrated application without rendering the two separate applications unoperational when ran standalone.