Floating Panel in Gwt

Floating panel in GWT

If I understood you correctly, you should apply the style below to a Panel (any basic Panel should do: FlowPanel, HTMLPanel, etc) and add it to the body (it doesn't have to be <body> but we know that it's always there and won't be removed ;)) via RootPanel.get().add(fixedPanel);

position: absolute; /* Or fixed - depends on what you want */
right: 0; /* The part that puts the Panel in bottom right of the page/client area */
bottom: 0;

GWT resizable panel

Figured it out myself, here is an example:

public class DraggablePanel extends VerticalPanel {
    private boolean isBeingDragged = false;
    private boolean isBeingMoved = false;
    private Element movingPanelElement;

    public void setMovingPanelElement(Element movingPanelElement) {
        this.movingPanelElement = movingPanelElement;
    }

    public DraggablePanel() {
        super();
        DOM.sinkEvents(getElement(), Event.ONMOUSEDOWN | Event.ONMOUSEMOVE
                | Event.ONMOUSEUP | Event.ONMOUSEOVER);
    }

    @Override
    public void onBrowserEvent(Event event) {
        final int eventType = DOM.eventGetType(event);
        if (Event.ONMOUSEOVER == eventType) {
            if (isCursorResize(event)) {
                getElement().getStyle().setProperty("cursor", "s-resize");
            } else if (isCursorMove(event)) {
                getElement().getStyle().setProperty("cursor", "move");
            } else {
                getElement().getStyle().setProperty("cursor", "default");
            }
        }
        if (Event.ONMOUSEDOWN == eventType) {
            if (isCursorResize(event)) {
                if (!isBeingDragged) {
                    isBeingDragged = true;
                    DOM.setCapture(getElement());
                }
            } else if (isCursorMove(event)) {
                DOM.setCapture(getElement());
                isBeingMoved = true;
            }
        } else if (Event.ONMOUSEMOVE == eventType) {
            if (!isCursorResize(event) && !isCursorMove(event)) {
                getElement().getStyle().setProperty("cursor", "default");
            }
            if (isBeingDragged) {
                int currentY = event.getClientY();
                int originalY = getElement().getAbsoluteTop();
                if (currentY > originalY) {
                    Integer height = currentY - originalY;
                    this.setHeight(height + "px");
                }
            } else if (isBeingMoved) {
                RootPanel.get().setWidgetPosition(this,
                        event.getClientX(), event.getClientY());
            }
        } else if (Event.ONMOUSEUP == eventType) {
            if (isBeingMoved) {
                isBeingMoved = false;
                DOM.releaseCapture(getElement());
            }
            if (isBeingDragged) {
                isBeingDragged = false;
                DOM.releaseCapture(getElement());
            }
        }
    }

    protected boolean isCursorResize(Event event) {
        int cursor = event.getClientY();
        int initial = getAbsoluteTop();
        int height = getOffsetHeight();
        return initial + height - 20 < cursor && cursor <= initial + height;
    }

    protected boolean isCursorMove(Event event) {
        int cursor = event.getClientY();
        int initial = movingPanelElement.getAbsoluteTop();
        int height = movingPanelElement.getOffsetHeight();
        return initial <= cursor && cursor <= initial + height;
    }
}

GWT detach widget from DOM and add to Panel

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

GWT launch method only when panel is loaded

~~to launch javascript from java you can use native methods:~~

public static native void alert(String msg) /*-{
  $wnd.alert(msg);
}-*/;

~~for a short example look here~~

~~more explanation you can find in this documentation~~

EDIT:
if I got it right then just add a Scheduler which will execute when control is returned to the JavaScript event loop.

Scheduler.get().scheduleDeferred(new ScheduledCommand() {
    @Override
    public void execute() {
        executeYourJavaScript(); 
    }
});

more explanation here and a little example

Floating Panel in Gwt