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>
$("#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.