How to make GWT stack panel (Outlook Style)

Today i decided to publish Outlook Style GWT stack panel.
Why i decided to design Outlook Style GWT stack panel?
First of all, i wanted to do a simple stack panel, that works like Outlook.
I mean, not looks like, but works.
I was surprised, that GWT StackPanel doesn't support simple StackPanel algorithm,
that not moving tabs and content. It is really annoying, to see, how is moving your content, and trying to catch it. Can you imagine, how it looks, if you have 10 tabs? So, to find a content of last tab, you need to scroll to the end of page.

OutlookStackPanel has new element: header.
Evry time, you clicked a button, header display current title and content display the necessary content. Buttons stays at place and not moving.

There is some screen shots:
(since my english not so good, it is easier to see, to understand, what i'm talking about)



One more picture, to see how it works.




It is implemented using a GWT DockPanel.

There is my sponsor:
An Altetnative to GWT

Java-only AJAX framework. Server side. Very straightforward coding.

www.desisoft.com/jaxcent/gwt.html

Professional GWT Training

In depth hands on lab sessions Demystifying GWT

www.maartenvolders.co

 

There is code samples:

/**
* Creates an empty stack panel.
*/
public OutlookStackPanel() {
content.setAnimationEnabled(true);
content.setWidth(DEFAULT_WIDTH);

container.setStyleName(DEFAULT_STYLE);
header.setSize(DEFAULT_WIDTH, DEFAULT_HEADER_HIGHT);
footer.setSize(DEFAULT_WIDTH, "");

ScrollPanel scroller = new ScrollPanel();
scroller.setAlwaysShowScrollBars(false);
scroller.add(content);

container.setVerticalAlignment(HasVerticalAlignment.ALIGN_TOP);
container.add(header);
container.add(scroller);

container.setVerticalAlignment(HasVerticalAlignment.ALIGN_BOTTOM);
container.add(footer);

content.setAnimationEnabled(true);

header.setStyleName(DEFAULT_HEADER_STYLE);

initWidget(container);

sinkEvents(Event.ONCLICK);
sinkEvents(Event.ONMOUSEOVER);
sinkEvents(Event.ONMOUSEOUT);

}


Code example, to show necessary content.


@Override
public void onBrowserEvent(Event event) {

Element target = event.getTarget();
if (DOM.eventGetType(event) == Event.ONCLICK) {
for (Widget widget : buttons) {
if (widget.getElement() == target) {
buttons.get(header.getVisibleWidget()).removeStyleDependentName("selected");
widget.addStyleDependentName("selected");

int index = buttons.indexOf(widget);
if (index >= 0) {
header.showWidget(index);
content.showWidget(index);
}
}
}
} else if (DOM.eventGetType(event) == Event.ONMOUSEOVER) {
...
...
} else if (DOM.eventGetType(event) == Event.ONMOUSEOUT) {
...
...
}


You can get sources -= outlook stack panel source code =- !
In the future, i'm planning to put GWT application starter here (gwtfuse).

If somebody did it other way, or improved it, please share with me your ideas :)
Have a nice day!