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>

Manolo Carrasco Moñino · Accepted Answer · 2013-11-24T09:03:10.993

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.

edited Nov 24 '13 at 09:03

answered Nov 24 '13 at 08:46

Manolo Carrasco Moñino

9,723
1
22
27

Since I'm using Errai, #bar's 1-3 are actually, 2 IFRAMEs, and one DIV styled as nav. Can an iframe tag be promoted into a widget without loosing its content? Also same with the DIVs will it loose its content that is hard-coded in the HTML template? As for the layout I would like to use GWT to have maximum compatibility with browsers. – quarks Nov 24 '13 at 11:27
Yes, `Widgets.panel()` supports ``, `<div>` and almost any element.</div> – Manolo Carrasco Moñino Nov 24 '13 at 12:07
Note that the element should be in the dom in order that `$("#bar1")` returns it, otherwise you have to specify the context where the element is attached: `$("#bar1", mywidget)` – Manolo Carrasco Moñino Nov 24 '13 at 12:22
$("#bar1, #bar2, #bar3").as(Widgets).panel(); // Compile-time error, can you link a actual working code? – quarks Nov 24 '13 at 14:48
Uhm, it should be Widgets.Widgets? And I did what you said, I checked the DOM and the horizontalPanel is still empty. – quarks Nov 24 '13 at 15:12
When using GQuery normally we use `import static com.google.gwt.query.client.GQuery.*;` so many vars and methods are available (like Widgets). – Manolo Carrasco Moñino Nov 24 '13 at 17:30
I double checked, and that works for me, test that all the stuff is in the dom before calling `panel()`. I'm using gquery 1.4.0-SNAPSHOT btw. – Manolo Carrasco Moñino Nov 24 '13 at 17:31

GWT detach widget from DOM and add to Panel

1 Answers1