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 43fee197a1e8e40bcae66f408b249bf252bdef6a..f51c897883f9c037b53908ad1c574c6f394cc449 100644 (file)
--- 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("<span>"+caption+"</span>", 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 (executable)
index 0000000..2c5a7c0
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 cfe4d398307bf7e1b6c9edc0a21c8f07de588211..10b0dc0232cc9e0477a0e92c75d97be2b8aa2ceb 100644 (file)
--- 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 @@
 */\r
 \r
 \r
+/* Progress indication */\r
+\r
+.i-tabsheet-loading .i-tabsheet-tabs .gwt-TabBarItem-selected span{\r
+       background: transparent url(../common/img/ajax-loader.gif) no-repeat;\r
+       display: block;\r
+       padding-left: 20px;\r
+       margin-left: -20px;\r
+}\r
+\r
+\r
 \r
 \r
 /* Tabsheet without padding (NO_PADDING style) */\r