Почему я решил написать его?
Проблема в том, что стандартный 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):
Если кто либо сделал это более красиво и элегантно, то прошу поделиться идеями ;)
Комментариев нет:
Отправить комментарий