Lazily Initialize/Load a GXT Widget When Its Parent Becomes Visible

Question

I am very new to GXT (and GWT/GWTP for that matter). I want to know if I can lazily load a GXT (4.0) [custom] widget when a modal Dialog that contains its panel is displayed (dialog initially not shown and only appears when a button is clicked).

The reason I want this behavior is that this widget needs to load an applet HTML code which is not available when the page initially instantiates all the other field widgets/panels/dialogs. Therefore, I need to delay obtaining the applet code from another application until the dialog is explicitly appears.

Is this possible?

Answer 1

Lazy loading of images and urls loaded into a GWT Frame (IFrameElement). You can catch the event once say the image/url is loaded using the LoadHandler event.

private void loadLoginPage() {
    final Frame frame = new Frame(url_base + url_login); // set the frames url
    frame.addLoadHandler(new LoadHandler() {
        @Override
        public void onLoad(LoadEvent event) {
            // Get the document from the loaded frame (similar to RootPanel on main page)
            Document doc = IFrameElement.as(frame.getElement()).getContentDocument();

            // From here you can wrap widgets in the frame like this

            final TextBox username = TextBox.wrap(doc.getElementById("username")); // from the html doc using id="username"

            // grab a div element

            DivElement div = DivElement.as(doc.getElementById("mydiv"));

            // Create content to be added to the doc

            ButtonElement button_elem = doc.createPushButtonElement();
            Button button = Button.wrap(button_elem);

            // attach to the document

            div.appendChild(button.getElement());
        }
    });
    // Attach to DOM
    RootPanel.get("mything").add(frame);
}

And similar for image loading.

Image image = new Image(image_url);
image.addLoadHandler(new LoadHandler() {
    @Override
    public void onLoad(LoadEvent event) {
        // image is ready to be used.
    }
});
// attach to DOM to initiate loading of the image

Hope this helps...