UiBinder Dynamic DockPanel

Question

Simple Question .... If I have a StackLayoutPanel on the left, I want to click it have a dynamically loaded widget in my DockLayoutPanel on right ... similar to the GWt example http://gwt.google.com/samples/Mail/Mail.html.. where clicking anything under mailboxes would trigger a different widget on right...

Answer 1

I didn't use the specific widgets you're using, but this is the general idea.

public class Index implements EntryPoint {

    public void onModuleLoad() {
        // the panel that holds the content widgets
        final SimplePanel mainPanel = new SimplePanel();
        // the panel that holds the links
        FlowPanel leftPanel = new FlowPanel();
        // the first content widget
        final Label oneContent = new Label("one content");
        // the second content widget
        final Label twoContent = new Label("two content");
        // the anchor to load the first content widget when clicked
        Anchor one = new Anchor("one menu");
        // add the click handler to do the content swap
        one.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                // remove any previous content
                mainPanel.clear();
                // add the first content widget
                mainPanel.add(oneContent);
            }
        });

        // the anchor to load the first content widget when clicked
        Anchor two = new Anchor("two menu");
        // add the click handler to do the content swap
        two.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                // remove any previous content
                mainPanel.clear();
                // add the second content widget
                mainPanel.add(twoContent);
            }
        });

        leftPanel.add(one);
        leftPanel.add(two);
        // add everything to the RootPanel
        RootPanel.get().add(leftPanel);
        RootPanel.get().add(mainPanel);
    }
}