From 3d0753213023799d21192cbd2492a4febcc7687c Mon Sep 17 00:00:00 2001
From: Jouni Koivuviita <jouni.koivuviita@itmill.com>
Date: Mon, 29 Oct 2007 13:08:11 +0000
Subject: [PATCH] New implementation for ITabsheet content rendering (now with
 lazy-loading).

svn changeset:2616/svn branch:trunk
---
 .../terminal/gwt/client/ui/ITabsheet.java     |  76 +++++++++++-------
 .../public/default/common/img/ajax-loader.gif | Bin 0 -> 2277 bytes
 .../gwt/public/default/tabsheet/tabsheet.css  |  10 +++
 3 files changed, 56 insertions(+), 30 deletions(-)
 create mode 100755 src/com/itmill/toolkit/terminal/gwt/public/default/common/img/ajax-loader.gif

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("<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
index 0000000000000000000000000000000000000000..2c5a7c0a3c61f10398a5c3047551e2a206e032a8
GIT binary patch
literal 2277
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

literal 0
HcmV?d00001

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) */
-- 
2.39.5