четверг, 6 ноября 2008 г.

Как сделать GWT StackPanel пοхожим на Outlook

На этот раз хочется поделиться новым компонентом на GWT - Outlook Stack Panel.
Почему я решил написать его?
Проблема в том, что стандартный StackPanel от GWT, работает так, что при выборе закладки, она сдвигает другие закладки и показывается ее содержание. При этом получается так, что содержание закладки все время скочет вверх и вниз, что на мой взгляд не очень user friendly.

Пример stack панели, как бы я ее хотел видеть - Outlook stack panel: содержимое всегда находится в одном месте, кнопки не скочат и имеют один и тот же порядок.
Вот что у меня получилось.




Как видете, при смене закладки сами закладки остаются на том же месте, меняется заголовок и содержание.
Реализуется это используя DeckPanel компонент.


/**
* 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);
}


Затем не хитрый код, для отображениа нужного содержания

@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) {
...
...
}


Вы можете скачать исходники здеся ;) Удачи!
В скором времени, я надеюсь выложить GWT application starter here (gwtfuse):

Если кто либо сделал это более красиво и элегантно, то прошу поделиться идеями ;)

Комментариев нет: