From: Jouni Koivuviita Date: Mon, 29 Oct 2007 13:08:11 +0000 (+0000) Subject: New implementation for ITabsheet content rendering (now with lazy-loading). X-Git-Tag: 6.7.0.beta1~5759 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=3d0753213023799d21192cbd2492a4febcc7687c;p=vaadin-framework.git New implementation for ITabsheet content rendering (now with lazy-loading). svn changeset:2616/svn branch:trunk --- diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java index 43fee197a1..f51c897883 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java @@ -3,7 +3,9 @@ package com.itmill.toolkit.terminal.gwt.client.ui; import java.util.ArrayList; import java.util.Iterator; +import com.google.gwt.user.client.Command; import com.google.gwt.user.client.DOM; +import com.google.gwt.user.client.DeferredCommand; import com.google.gwt.user.client.Element; import com.google.gwt.user.client.ui.FlowPanel; import com.google.gwt.user.client.ui.SourcesTabEvents; @@ -32,19 +34,26 @@ public class ITabsheet extends FlowPanel implements Paintable, int activeTabIndex = 0; private TabBar tb; + private ITabsheetPanel tp; + private Element deco; private TabListener tl = new TabListener() { - public void onTabSelected(SourcesTabEvents sender, int tabIndex) { - if (client != null && activeTabIndex != tabIndex) - ITabsheet.this.client.updateVariable(id, "selected", "" - + tabKeys.get(tabIndex), true); + public void onTabSelected(SourcesTabEvents sender, final int tabIndex) { + if (client != null && activeTabIndex != tabIndex) { + addStyleDependentName("loading"); + DeferredCommand.addCommand(new Command() { + public void execute() { + ITabsheet.this.client.updateVariable(id, "selected", "" + + tabKeys.get(tabIndex), true); + } + }); + } } public boolean onBeforeTabSelected(SourcesTabEvents sender, int tabIndex) { - // TODO give user indication of progress return true; } @@ -60,6 +69,7 @@ public class ITabsheet extends FlowPanel implements Paintable, deco = DOM.createDiv(); tp.setStyleName(CLASSNAME + "-content"); + addStyleDependentName("loading"); // Indicate initial progress tb.setStyleName(CLASSNAME + "-tabs"); DOM.setElementProperty(deco, "className", CLASSNAME + "-deco"); @@ -78,23 +88,17 @@ public class ITabsheet extends FlowPanel implements Paintable, if (client.updateComponent(this, uidl, false)) return; - + // Add proper stylenames for all elements if (uidl.hasAttribute("style")) { String[] styles = uidl.getStringAttribute("style").split(" "); - String tabsBaseClass = CLASSNAME + "-tabs"; - String contentBaseClass = CLASSNAME + "-content"; String decoBaseClass = CLASSNAME + "-deco"; - String tabsClass = tabsBaseClass; - String contentClass = contentBaseClass; String decoClass = decoBaseClass; for (int i = 0; i < styles.length; i++) { - tabsClass += " " + tabsBaseClass + "-" + styles[i]; - contentClass += " " + contentBaseClass + "-" + styles[i]; + tb.addStyleDependentName(styles[i]); + tp.addStyleDependentName(styles[i]); decoClass += " " + decoBaseClass + "-" + styles[i]; } - tp.setStyleName(contentClass); - tb.setStyleName(tabsClass); DOM.setElementProperty(deco, "className", decoClass); } @@ -112,6 +116,8 @@ public class ITabsheet extends FlowPanel implements Paintable, this.height = null; tp.setHeight("auto"); // We don't need overflow:auto when tabsheet height is not set + // TODO reconsider, we might sometimes have wide, non-breaking + // content DOM.setStyleAttribute(tp.getElement(), "overflow", "hidden"); } @@ -129,11 +135,7 @@ public class ITabsheet extends FlowPanel implements Paintable, UIDL tab = (UIDL) it.next(); if (tab.getBooleanAttribute("selected")) { activeTabIndex = index; - UIDL contentUIDL = tab.getChildUIDL(0); - Widget content = client.getWidget(contentUIDL); - ((Paintable) content).updateFromUIDL(contentUIDL, client); - tp.remove(index); - tp.insert(content, index); + renderContent(tab.getChildUIDL(0)); } index++; } @@ -151,27 +153,40 @@ public class ITabsheet extends FlowPanel implements Paintable, captions.add(caption); tabKeys.add(key); - tb.addTab(caption); + // Add new tab (additional SPAN-element for loading indication) + tb.insertTab(""+caption+"", true, tb.getTabCount()); + + // Add placeholder content + tp.add(new ILabel("")); if (tab.getBooleanAttribute("selected")) { - Widget content = client.getWidget(tab.getChildUIDL(0)); - tp.add(content); activeTabIndex = index; - ((Paintable) content).updateFromUIDL(tab.getChildUIDL(0), - client); - } else - tp.add(new ILabel("")); - + renderContent(tab.getChildUIDL(0)); + } index++; } } // Open selected tab tb.selectTab(activeTabIndex); - tp.showWidget(activeTabIndex); + // tp.showWidget(activeTabIndex); } + private void renderContent(final UIDL contentUIDL) { + DeferredCommand.addCommand(new Command() { + public void execute() { + // Loading done, start drawing + Widget content = client.getWidget(contentUIDL); + tp.remove(activeTabIndex); + tp.insert(content, activeTabIndex); + tp.showWidget(activeTabIndex); + ((Paintable) content).updateFromUIDL(contentUIDL, client); + removeStyleDependentName("loading"); + } + }); + } + private void clearTabs() { int i = tb.getTabCount(); while (i > 0) @@ -192,13 +207,14 @@ public class ITabsheet extends FlowPanel implements Paintable, public void iLayout() { if (height != null) { + // Make content zero height + tp.setHeight("0"); + DOM.setStyleAttribute(tp.getElement(), "overflow", "hidden"); // First, calculate needed pixel height super.setHeight(height); int neededHeight = getOffsetHeight(); super.setHeight(""); // Then calculate the size the content area needs to be - tp.setHeight("0"); - DOM.setStyleAttribute(tp.getElement(), "overflow", "hidden"); int pixelHeight = getOffsetHeight(); tp.setHeight(neededHeight - pixelHeight + "px"); DOM.setStyleAttribute(tp.getElement(), "overflow", ""); diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/common/img/ajax-loader.gif b/src/com/itmill/toolkit/terminal/gwt/public/default/common/img/ajax-loader.gif new file mode 100755 index 0000000000..2c5a7c0a3c Binary files /dev/null and b/src/com/itmill/toolkit/terminal/gwt/public/default/common/img/ajax-loader.gif differ diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/tabsheet/tabsheet.css b/src/com/itmill/toolkit/terminal/gwt/public/default/tabsheet/tabsheet.css index cfe4d39830..10b0dc0232 100644 --- a/src/com/itmill/toolkit/terminal/gwt/public/default/tabsheet/tabsheet.css +++ b/src/com/itmill/toolkit/terminal/gwt/public/default/tabsheet/tabsheet.css @@ -107,6 +107,16 @@ */ +/* Progress indication */ + +.i-tabsheet-loading .i-tabsheet-tabs .gwt-TabBarItem-selected span{ + background: transparent url(../common/img/ajax-loader.gif) no-repeat; + display: block; + padding-left: 20px; + margin-left: -20px; +} + + /* Tabsheet without padding (NO_PADDING style) */