GWT从DOM分离小部件并添加到面板

Question

I need to be able to detach a node from the DOM and attach it to a HorizontalPanel at runtime using GwtQuery .

My code looks like this:

    @PageShown
    public void pageReady() {
        horizontalPanel.add($("#bar1").widget());
        horizontalPanel.add($("#bar2").widget()); 
        horizontalPanel.add($("#bar3").widget());   
    }

Where #bar1 , et. al are already attached in the DOM, what I need to do is that these 3 bars should be piled horizontally so I need to attach them to a HorizontalPanel.

Update:

After promoting the DOM element into Panel the horizontalPanel is still empty:

<table cellspacing="0" cellpadding="0" data-field="navPanel"><tbody><tr></tr></tbody></table>

Answer 1

$("#bar1") should be a gwt-widget, otherwise the method widget() of gQuery will return null.

You can, though, promote certain dom-elements to widgets with gQuery:

    // Promote 3 elements attached to the dom to 3 GWT Panel Widgets
    $("#bar1, #bar2, #bar3").as(Widgets).panel();

    horizontalPanel.add($("#bar1").widget());
    horizontalPanel.add($("#bar2").widget()); 
    horizontalPanel.add($("#bar3").widget());

Apart from panel() which promotes an element to a GWT Panel , the gQuery Widgets plugin comes with other predefined methods like label() textBox() passwordBox() and textArea() . But you can code your own WidgetFactory to promote any dom element to customized widgets through the method widgets(WidgetFactory) .

Anyway, if you only want to layout elements in your page, an easier way could be just use css instead of wrapping them into widgets.