Fix for #2181 - Caption update problems

svn changeset:5740/svn branch:trunk

6 files changed, 211 insertions, 110 deletions

diff --git a/WebContent/ITMILL/themes/default/caption/caption.css b/WebContent/ITMILL/themes/default/caption/caption.css
index 959b3ae37d..efd3679ad6 100644
--- a/WebContent/ITMILL/themes/default/caption/caption.css
+++ b/WebContent/ITMILL/themes/default/caption/caption.css
@@ -24,4 +24,13 @@
 .i-caption .i-icon {
 	padding-right: 2px;
 	vertical-align: middle;
+	float: left;
+}
+.i-caption .i-captiontext {
+	float: left;
+	overflow: hidden;
+}
+
+.i-caption .i-required-field-indicator {
+	float: left;
 }
diff --git a/WebContent/ITMILL/themes/default/styles.css b/WebContent/ITMILL/themes/default/styles.css
index 0c6e55699b..b36fb7a45d 100644
--- a/WebContent/ITMILL/themes/default/styles.css
+++ b/WebContent/ITMILL/themes/default/styles.css
@@ -127,6 +127,15 @@
 .i-caption .i-icon {
 	padding-right: 2px;
 	vertical-align: middle;
+	float: left;
+}
+.i-caption .i-captiontext {
+	float: left;
+	overflow: hidden;
+}
+
+.i-caption .i-required-field-indicator {
+	float: left;
 }
 /* body tag created by servlet */
 .i-generated-body {
diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ICaption.java b/src/com/itmill/toolkit/terminal/gwt/client/ICaption.java
index fb626b34aa..1efcf3bf05 100644
--- a/src/com/itmill/toolkit/terminal/gwt/client/ICaption.java
+++ b/src/com/itmill/toolkit/terminal/gwt/client/ICaption.java
@@ -4,10 +4,14 @@
 
 package com.itmill.toolkit.terminal.gwt.client;
 
+import java.util.HashSet;
+import java.util.Set;
+
 import com.google.gwt.user.client.DOM;
 import com.google.gwt.user.client.Element;
 import com.google.gwt.user.client.Event;
 import com.google.gwt.user.client.ui.HTML;
+import com.google.gwt.user.client.ui.Widget;
 import com.itmill.toolkit.terminal.gwt.client.ui.Icon;
 
 //TODO Move styles to CSS
@@ -30,9 +34,17 @@ public class ICaption extends HTML {
     private final ApplicationConnection client;
 
     private boolean placedAfterComponent = false;
+    private boolean iconOnloadHandled = false;
 
     private int maxWidth = -1;
 
+    private static String ATTRIBUTE_ICON = "icon";
+    private static String ATTRIBUTE_CAPTION = "caption";
+    private static String ATTRIBUTE_DESCRIPTION = "description";
+    private static String ATTRIBUTE_REQUIRED = "required";
+    private static String ATTRIBUTE_ERROR = "error";
+    private static String ATTRIBUTE_HIDEERRORS = "hideErrors";
+
     /**
      * 
      * @param component
@@ -69,36 +81,37 @@ public class ICaption extends HTML {
 
         placedAfterComponent = true;
 
-        if (uidl.hasAttribute("icon")) {
+        if (uidl.hasAttribute(ATTRIBUTE_ICON)) {
             if (icon == null) {
                 icon = new Icon(client);
-                DOM.sinkEvents(icon.getElement(), Event.ONLOAD);
 
-                Util.setFloat(icon.getElement(), "left");
-                placedAfterComponent = false;
-                DOM.insertChild(getElement(), icon.getElement(), 0);
+                DOM.sinkEvents(icon.getElement(), Event.ONLOAD);
+                DOM.insertChild(getElement(), icon.getElement(),
+                        getInsertPosition(ATTRIBUTE_ICON));
             }
-            icon.setUri(uidl.getStringAttribute("icon"));
+            placedAfterComponent = false;
+
+            icon.setUri(uidl.getStringAttribute(ATTRIBUTE_ICON));
+            iconOnloadHandled = false;
+
             isEmpty = false;
-        } else {
-            if (icon != null) {
-                DOM.removeChild(getElement(), icon.getElement());
-                icon = null;
-            }
+        } else if (icon != null) {
+            // Remove existing
+            DOM.removeChild(getElement(), icon.getElement());
+            icon = null;
         }
 
-        if (uidl.hasAttribute("caption")) {
+        if (uidl.hasAttribute(ATTRIBUTE_CAPTION)) {
             if (captionText == null) {
                 captionText = DOM.createDiv();
-                Util.setFloat(captionText, "left");
-                DOM.setStyleAttribute(captionText, "overflow", "hidden");
-                // DOM.setStyleAttribute(captionText, "textOverflow",
-                // "ellipsis");
-                DOM
-                        .insertChild(getElement(), captionText,
-                                icon == null ? 0 : 1);
+                captionText.setClassName("i-captiontext");
+
+                DOM.insertChild(getElement(), captionText,
+                        getInsertPosition(ATTRIBUTE_CAPTION));
             }
-            String c = uidl.getStringAttribute("caption");
+
+            // Update caption text
+            String c = uidl.getStringAttribute(ATTRIBUTE_CAPTION);
             if (c == null) {
                 c = "";
             } else {
@@ -106,11 +119,13 @@ public class ICaption extends HTML {
                 placedAfterComponent = false;
             }
             DOM.setInnerText(captionText, c);
-        } else {
-            // TODO should element also be removed
+        } else if (captionText != null) {
+            // Remove existing
+            DOM.removeChild(getElement(), captionText);
+            captionText = null;
         }
 
-        if (uidl.hasAttribute("description")) {
+        if (uidl.hasAttribute(ATTRIBUTE_DESCRIPTION)) {
             if (captionText != null) {
                 addStyleDependentName("hasdescription");
             } else {
@@ -118,36 +133,37 @@ public class ICaption extends HTML {
             }
         }
 
-        if (uidl.getBooleanAttribute("required")) {
+        if (uidl.getBooleanAttribute(ATTRIBUTE_REQUIRED)) {
             isEmpty = false;
             if (requiredFieldIndicator == null) {
                 requiredFieldIndicator = DOM.createDiv();
-                Util.setFloat(requiredFieldIndicator, "left");
+                requiredFieldIndicator
+                        .setClassName("i-required-field-indicator");
                 DOM.setInnerText(requiredFieldIndicator, "*");
-                DOM.setElementProperty(requiredFieldIndicator, "className",
-                        "i-required-field-indicator");
 
-                // TODO Insert before if errorIndicatorElement exists
-                DOM.appendChild(getElement(), requiredFieldIndicator);
-            }
-        } else {
-            if (requiredFieldIndicator != null) {
-                DOM.removeChild(getElement(), requiredFieldIndicator);
-                requiredFieldIndicator = null;
+                DOM.insertChild(getElement(), requiredFieldIndicator,
+                        getInsertPosition(ATTRIBUTE_REQUIRED));
             }
+        } else if (requiredFieldIndicator != null) {
+            // Remove existing
+            DOM.removeChild(getElement(), requiredFieldIndicator);
+            requiredFieldIndicator = null;
         }
 
-        if (uidl.hasAttribute("error")
-                && !uidl.getBooleanAttribute("hideErrors")) {
+        if (uidl.hasAttribute(ATTRIBUTE_ERROR)
+                && !uidl.getBooleanAttribute(ATTRIBUTE_HIDEERRORS)) {
             isEmpty = false;
             if (errorIndicatorElement == null) {
                 errorIndicatorElement = DOM.createDiv();
                 DOM.setInnerHTML(errorIndicatorElement, " ");
                 DOM.setElementProperty(errorIndicatorElement, "className",
                         "i-errorindicator");
-                DOM.appendChild(getElement(), errorIndicatorElement);
+
+                DOM.insertChild(getElement(), errorIndicatorElement,
+                        getInsertPosition(ATTRIBUTE_ERROR));
             }
         } else if (errorIndicatorElement != null) {
+            // Remove existing
             DOM.removeChild(getElement(), errorIndicatorElement);
             errorIndicatorElement = null;
         }
@@ -160,21 +176,38 @@ public class ICaption extends HTML {
             DOM.setStyleAttribute(clearElement, "overflow", "hidden");
             DOM.appendChild(getElement(), clearElement);
         }
-        // Workaround for IE weirdness, sometimes returns bad height in some
-        // circumstances when Caption is empty. See #1444
-        // IE7 bugs more often. I wonder what happens when IE8 arrives...
-        if (Util.isIE()) {
-            if (isEmpty) {
-                setHeight("0px");
-                DOM.setStyleAttribute(getElement(), "overflow", "hidden");
-            } else {
-                setHeight("");
-                DOM.setStyleAttribute(getElement(), "overflow", "");
-            }
 
+        return (wasPlacedAfterComponent != placedAfterComponent);
+    }
+
+    private int getInsertPosition(String element) {
+        int pos = 0;
+        if (element.equals(ATTRIBUTE_ICON)) {
+            return pos;
+        }
+        if (icon != null) {
+            pos++;
         }
 
-        return (wasPlacedAfterComponent != placedAfterComponent);
+        if (element.equals(ATTRIBUTE_CAPTION)) {
+            return pos;
+        }
+
+        if (captionText != null) {
+            pos++;
+        }
+
+        if (element.equals(ATTRIBUTE_REQUIRED)) {
+            return pos;
+        }
+        if (requiredFieldIndicator != null) {
+            pos++;
+        }
+
+        // if (element.equals(ATTRIBUTE_ERROR)) {
+        // }
+        return pos;
+
     }
 
     public void onBrowserEvent(Event event) {
@@ -184,29 +217,38 @@ public class ICaption extends HTML {
             client.handleTooltipEvent(event, owner);
         }
 
-        if (DOM.eventGetType(event) == Event.ONLOAD) {
+        if (DOM.eventGetType(event) == Event.ONLOAD
+                && icon.getElement() == target && !iconOnloadHandled) {
+            /*
+             * IE6 pngFix causes two onload events to be fired and we want to
+             * react only to the first one
+             */
+            iconOnloadHandled = true;
+
             setMaxWidth(maxWidth);
 
-            // TODO: What if the caption's height changes drastically. Should we
-            // send the size updated message?
-            // Set<Widget> w = new HashSet<Widget>();
-            // w.add(this);
-            // Util.componentSizeUpdated(w);
+            /*
+             * The size of the icon might affect the size of the component so we
+             * must report the size change to the parent
+             */
+            Set<Widget> w = new HashSet<Widget>();
+            w.add((Widget) owner);
+            Util.componentSizeUpdated(w);
         }
 
     }
 
     public static boolean isNeeded(UIDL uidl) {
-        if (uidl.getStringAttribute("caption") != null) {
+        if (uidl.getStringAttribute(ATTRIBUTE_CAPTION) != null) {
             return true;
         }
-        if (uidl.hasAttribute("error")) {
+        if (uidl.hasAttribute(ATTRIBUTE_ERROR)) {
             return true;
         }
-        if (uidl.hasAttribute("icon")) {
+        if (uidl.hasAttribute(ATTRIBUTE_ICON)) {
             return true;
         }
-        if (uidl.hasAttribute("required")) {
+        if (uidl.hasAttribute(ATTRIBUTE_REQUIRED)) {
             return true;
         }
 
@@ -226,35 +268,41 @@ public class ICaption extends HTML {
         return placedAfterComponent;
     }
 
-    public int getWidth() {
+    public int getRenderedWidth() {
         int width = 0;
 
         if (icon != null) {
             width += icon.getOffsetWidth();
         }
 
-        if (maxWidth >= 0) {
-            if (captionText != null) {
-                width += captionText.getOffsetWidth();
-            }
-            if (requiredFieldIndicator != null) {
-                width += requiredFieldIndicator.getOffsetWidth();
-            }
-            if (errorIndicatorElement != null) {
-                width += errorIndicatorElement.getOffsetWidth();
-            }
+        if (captionText != null) {
+            width += captionText.getOffsetWidth();
+        }
+        if (requiredFieldIndicator != null) {
+            width += requiredFieldIndicator.getOffsetWidth();
+        }
+        if (errorIndicatorElement != null) {
+            width += errorIndicatorElement.getOffsetWidth();
+        }
 
-        } else {
-            if (captionText != null) {
-                width += captionText.getScrollWidth();
-            }
-            if (requiredFieldIndicator != null) {
-                width += requiredFieldIndicator.getScrollWidth();
-            }
-            if (errorIndicatorElement != null) {
-                width += errorIndicatorElement.getScrollWidth();
-            }
+        return width;
 
+    }
+
+    public int getRequiredWidth() {
+        int width = 0;
+
+        if (icon != null) {
+            width += icon.getOffsetWidth();
+        }
+        if (captionText != null) {
+            width += captionText.getScrollWidth();
+        }
+        if (requiredFieldIndicator != null) {
+            width += requiredFieldIndicator.getScrollWidth();
+        }
+        if (errorIndicatorElement != null) {
+            width += errorIndicatorElement.getScrollWidth();
         }
 
         return width;
@@ -262,7 +310,15 @@ public class ICaption extends HTML {
     }
 
     public int getHeight() {
-        return clearElement.getOffsetTop() - getElement().getOffsetTop();
+        int height = clearElement.getOffsetTop() - getElement().getOffsetTop();
+        if (icon != null) {
+            int iconHeight = icon.getOffsetHeight();
+            ApplicationConnection.getConsole().log(
+                    "Caption height: " + height + ", icon height: "
+                            + iconHeight);
+        }
+
+        return height;
     }
 
     public void setAlignment(String alignment) {
@@ -270,9 +326,8 @@ public class ICaption extends HTML {
     }
 
     public void setMaxWidth(int maxWidth) {
-
         this.maxWidth = maxWidth;
-        DOM.setStyleAttribute(getElement(), "width", "");
+        DOM.setStyleAttribute(getElement(), "width", maxWidth + "px");
 
         if (icon != null) {
             DOM.setStyleAttribute(icon.getElement(), "width", "");
@@ -282,19 +337,16 @@ public class ICaption extends HTML {
             DOM.setStyleAttribute(captionText, "width", "");
         }
 
-        if (maxWidth < 0) {
-            return;
-        }
-
-        int currentWidth = getWidth();
-        if (currentWidth > maxWidth) {
+        int requiredWidth = getRequiredWidth();
+        /*
+         * ApplicationConnection.getConsole().log( "Caption maxWidth: " +
+         * maxWidth + ", requiredWidth: " + requiredWidth);
+         */
+        if (requiredWidth > maxWidth) {
             // Needs to truncate and clip
             int availableWidth = maxWidth;
 
-            // ApplicationConnection.getConsole().log(
-            // "Caption maxWidth: " + maxWidth);
-
-            DOM.setStyleAttribute(getElement(), "width", maxWidth + "px");
+            // DOM.setStyleAttribute(getElement(), "width", maxWidth + "px");
             if (requiredFieldIndicator != null) {
                 // ApplicationConnection.getConsole().log(
                 // "requiredFieldIndicator width: "
diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/IOrderedLayout.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/IOrderedLayout.java
index 6922d3dcc0..06943d6765 100644
--- a/src/com/itmill/toolkit/terminal/gwt/client/ui/IOrderedLayout.java
+++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/IOrderedLayout.java
@@ -340,8 +340,8 @@ public class IOrderedLayout extends CellBasedLayout {
             remainingSpace = 0;

         }

 

-        // ApplicationConnection.getConsole().log(

-        // "Layout size: " + activeLayoutSize);

+        ApplicationConnection.getConsole().log(

+                "Layout size: " + activeLayoutSize);

         return remainingSpace;

     }

 

@@ -361,7 +361,9 @@ public class IOrderedLayout extends CellBasedLayout {
          * the caption may determine the space used by the component

          */

         if (!childComponentContainer.widgetHasSizeSpecified(orientation)) {

-            int captionWidth = childComponentContainer.getCaptionWidth();

+            int captionWidth = childComponentContainer

+                    .getCaptionRequiredWidth();

+

             if (captionWidth > widgetWidth) {

                 widgetWidth = captionWidth;

             }

@@ -426,7 +428,10 @@ public class IOrderedLayout extends CellBasedLayout {
                     if (!childComponentContainer

                             .widgetHasSizeSpecified(orientation)) {

                         int captionWidth = childComponentContainer

-                                .getCaptionWidth();

+                                .getCaptionRequiredWidth();

+                        // ApplicationConnection.getConsole().log(

+                        // "Component width: " + width

+                        // + ", caption width: " + captionWidth);

                         if (captionWidth > width) {

                             width = captionWidth;

                         }

@@ -612,7 +617,14 @@ public class IOrderedLayout extends CellBasedLayout {
     public boolean requestLayout(Set<Paintable> children) {

         for (Paintable p : children) {

             /* Update widget size from DOM */

-            getComponentContainer((Widget) p).updateWidgetSize();

+            ChildComponentContainer componentContainer = getComponentContainer((Widget) p);

+            componentContainer.updateWidgetSize();

+

+            /*

+             * If this is the result of an caption icon onload event the caption

+             * size may have changed

+             */

+            componentContainer.updateCaptionSize();

         }

 

         boolean sameSize = recalculateLayoutAndComponentSizes();

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 c87afe4c6d..98c15b4790 100644
--- a/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java
+++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/ITabsheet.java
@@ -297,7 +297,7 @@ public class ITabsheet extends ITabsheetBase implements
          * Force the width of the caption container so the content will not wrap
          * and tabs won't be too narrow in certain browsers
          */
-        c.setWidth(c.getWidth() + "px");
+        c.setWidth(c.getRequiredWidth() + "px");
         captions.put("" + index, c);
         if (selected) {
             renderContent(tabUidl.getChildUIDL(0));
diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/layout/ChildComponentContainer.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/layout/ChildComponentContainer.java
index ac7c955e73..84b20c1dfd 100644
--- a/src/com/itmill/toolkit/terminal/gwt/client/ui/layout/ChildComponentContainer.java
+++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/layout/ChildComponentContainer.java
@@ -32,7 +32,9 @@ public class ChildComponentContainer extends Panel {
     /**

      * Size of the caption

      */

-    private Size captionSize = new Size(0, 0);

+    private int captionRequiredWidth = 0;

+    private int captionWidth = 0;

+    private int captionHeight = 0;

 

     /**

      * Padding added to the container when it is larger than the component.

@@ -207,12 +209,20 @@ public class ChildComponentContainer extends Panel {
                 alignmentLeftOffsetForWidget + "px");

     }

 

+    public int getCaptionRequiredWidth() {

+        if (caption == null) {

+            return 0;

+        }

+

+        return captionRequiredWidth;

+    }

+

     public int getCaptionWidth() {

         if (caption == null) {

             return 0;

         }

 

-        return captionSize.getWidth();

+        return captionWidth;

     }

 

     public int getCaptionHeight() {

@@ -220,7 +230,7 @@ public class ChildComponentContainer extends Panel {
             return 0;

         }

 

-        return captionSize.getHeight();

+        return captionHeight;

     }

 

     public int getCaptionWidthAfterComponent() {

@@ -365,16 +375,26 @@ public class ChildComponentContainer extends Panel {
 

         }

 

-        int w = 0;

-        int h = 0;

+        updateCaptionSize();

+    }

+

+    public void updateCaptionSize() {

+        captionWidth = 0;

+        captionHeight = 0;

 

         if (caption != null) {

-            w = caption.getWidth();

-            h = caption.getHeight();

+            captionWidth = caption.getRenderedWidth();

+            captionHeight = caption.getHeight();

+            captionRequiredWidth = caption.getRequiredWidth();

+

+            /*

+             * ApplicationConnection.getConsole().log(

+             * "Caption rendered width: " + captionWidth +

+             * ", caption required width: " + captionRequiredWidth +

+             * ", caption height: " + captionHeight);

+             */

         }

 

-        captionSize.setWidth(w);

-        captionSize.setHeight(h);

     }

 

     private void setCaption(ICaption newCaption) {

@@ -638,8 +658,7 @@ public class ChildComponentContainer extends Panel {
         // Also update caption max width

         if (caption != null) {

             caption.setMaxWidth(width);

-

-            captionSize.setWidth(caption.getWidth());

+            captionWidth = caption.getRenderedWidth();

         }

 

     }