I have seen a few people asking how to integrate GWT and existing web applications. Our company was in the same position as a lot of people are i.e. we want to move to GWT but have a lot of legacy code. We wanted a way of using our existing apps (jsp/servlet based) but wrap them in a new 'container' that would allow us to migrate the existing application code to GWT on an incremental basis. In this specific example, we wanted to make 3 applications appear to the user as a unified application. Eventually they will be rewritten in GWT as a single application.
The approach we have taken is to create the main container/navigation in GWT and display the legacy code in iframes. However, it wasn't quite that straightforward because the new GWT app and the legacy apps would need to communicate with each other. To do this we used a combination of cookies (for session), URL parameters passed to the legacy apps and cross frame javascript communication. The following link shows how it looks. https://docs.google.com/document/pub?id=1VZjQuz6j6OjdAhe1DXK4YNW5wHFm_qBCsboK72_WGfw On image one, the section bordered in red is the legacy app within a iframe. Image two shows a new screen totally written in GWT. Image 3 shows a modal dialog with the contents of which are provided by the legacy app. The action buttons are however GWT. Ignore the extra scrollbars, I was just playing around with the browser window to reduce the image size. The 3rd screen is the most interesting because clicking on the GWT buttons executes code in the embedded frame. The embedded frame will also communicate to the GWT code displaying the dialog to disable the buttons until successful form submit occurs. Code in the embedded frame is executed by a function similar to: private native void callEmbeddedIframeFunction(Element iframeEl, String functionName) /*-{ try { iframeEl.contentWindow[functionName](); }catch(e) { alert(functionName + " Error: " + e.message); } }-*/; So if you make a call such as callEmbeddedIframeFunction(embeddedFrame, "onSubmit") it will call a javascript function in the embedded frame defined as onSubmit. Without going into details we just added extra functions following the pattern onContainer<button name> that would then call the current legacy app function. This allows us to still run the legacy applications in their current form. To allow the legacy app to call back to the GWT app we exported a couple of GWT functions such as private static native void exportInterfaceApi() /*-{ $wnd.modalIframeOnSuccessfulSubmit = $entry(@com.ocs.nirvana.client.container.presenters.ModalIFramePresenter::onIframeSuccessSubmit()); $wnd.modalIframeReenableActionBtns = $entry(@com.ocs.nirvana.client.container.presenters.ModalIFramePresenter::reenableActionBtns()); }-*/; So in the legacy javascript code you can make calls such as window.modalIframeReenableActionBtns(); In the case where the user hits submit, if there are no errors we redirect on the server to a jsp page that just calls window.modalIframeOnSuccessfulSubmit(). In GWT this closes the dialog box. A couple of extra tricks may also help. If you want to hide the border that is normally displayed on the iframe you can use private native void hideIFrameBorder(Element iframeEl) /*-{ iframeEl['frameBorder'] = '0'; }-*/; If you want to reliably refresh the contents of an iframe you can use private native void reloadIFrame(Element iframeEl) /*-{ iframeEl.contentWindow.location.reload(true); }-*/; In may ways it's like programming on the web 10 years ago when frames were the rage. In many ways it's not pretty. However, the ability to incrementally move to GWT is well worth it. -- You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
