GWT detach widget from DOM and add to Panel

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.