Inserting a Widget into Existing HTML
This was a little trick that I finally found. I have a template page with a left-column navigation bar. I wanted to add a feedback function to this nav bar. This got me to the question of what the RootPanel is and what needs to happen to add functionality.
I figured that widgets are ultimately DOM items, so I inserted the widget element at the top of the column. This almost worked: my widget showed up where I wanted it, but it didn’t do anything. It turns out that you need to add it to the RootPanel first, then move it’s element to the desired location in the DOM.
In the onModuleLoad function, I have:
public void onModuleLoad() {
final String idStr = “LeftCol”;
Element leftCol = DOM.getElementById(idStr);final Label link = new Label(”Not finding what you want?”);
RootPanel.get().add(link);
DOM.insertChild(leftCol, link.getElement(), 0);
link.addClickListener( new ClickListener() {
public void onClick(Widget w) {
PopupPanel pu = new MyPopup();
pu.setPopupPosition(link.getAbsoluteLeft(), link.getAbsoluteTop());
pu.show();
}
});
}
This also provides a popup window which relocates itself to the top left corner of the Label. The popup code was taken directly from the example code in the Google documentation of PopupPanel.
I don’t know exactly what happens when widgets are added to the RootPanel, but this technique does allow for proper positioning and functionality of the widget when it is added to an existing part of the DOM structure.
September 26th, 2007 at 2:25 am
what about this solution? create a class WrapperLabel extending GWT Label.
public class WrapperLabel extends Label {
public WrapperLabel(String id) {
setElement(DOM.getElementById(id));
sinkEvents(Event.ONCLICK | Event.MOUSEEVENTS | Event.ONMOUSEWHEEL);
onAttach();
}
}
then define label directly in HTML with attribute ID and onModuleLoad():
public void onModuleLoad() {
Label link = new WrappedLabel(”id”);
link.addClickListener(….);
}
see Widget.onAttach() for futher details.