Integrating a GWT Dialog into an existing HTML application

Question

Hi all, I have a situation where I need to integrate a gwt dialog (which to the best of my understanding is implemented as a div with z-index manipulation) into an existing html page.
There are two scenarios:
1. Which is the preferrable and more complicated is where i give the host html page another page which they embed as an iframe and I work my magic through there (maybe connect somehow to the parent window and plant my dialog I'm not sure).
2. Where I have limited access to the html page and I plant some code there which will load my dialog box.

Any ideas or thoughts on how I can implement these?
I've been working for a few months now with GWT and have found it quite nice although I have stayed far far away from the whole HTML area and until now all my work has been done strictly inside my java classes.
Thanks for any ideas and help handed
Ittai

Answer 1

I'll assume by dialog you mean a popup that is invisible at page load and made visible by, say, a click on something in the existing HTML. A simple strategy to make this happen is wrapping the existing HTML.

I have no experience with option 1. As for 2, all you need to alter in the existing HTML is adding the JS import, e.g.

<script type="text/javascript" language="javascript" src="/com.your.org.Module/com.your.org.module.client.Module.nocache.js"></script>

then adding an id to some clickable element you want to activate your dialog, e.g.

<button id="launchDialog">Show Dialog</button>

and finally adding an empty div with an id to insert your dialog into the DOM.

<div id="dialog"></div>

Then all you need in your Module is

public class Module implements EntryPoint {

    @Override
    public void onModuleLoad() {
        Button b = Button.wrap(DOM.getElementById("launchDialog"));
        b.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                RootPanel panel = RootPanel.get("dialog");
                Widget w = ... // your dialog widget here
                panel.add(w); 
            }
        });
    }

}

Lastly, you can play with the visibility of your popup div with the "display: none" style and the show() and hide() methods on the widget.