Fix for #2181 - Caption update problems

svn changeset:5740/svn branch:trunk

diff --git a/WebContent/ITMILL/themes/default/caption/caption.css b/WebContent/ITMILL/themes/default/caption/caption.css
index 959b3ae37d100e716b3f29e36b448c3e01ac746c..efd3679ad646d4c06a6483c37f18627045d68784 100644 (file)
--- 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 0c6e55699b742d881b056464c00e3dc24708e015..b36fb7a45dd50a7ff1845fb4c23b6c3d551bdba4 100644 (file)
--- 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 fb626b34aa1b1de6e3c76a7dfa58c546082d202a..1efcf3bf05bf8fddc171c6486ae2f06ba2ed38f2 100644 (file)
--- 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 6922d3dcc094d1dbd4366597f40b0a24973b2092..06943d6765c94f4f6b2054b0ad2af27a5ac8a936 100644 (file)
--- 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;\r
         }\r
 \r
-        // ApplicationConnection.getConsole().log(\r
-        // "Layout size: " + activeLayoutSize);\r
+        ApplicationConnection.getConsole().log(\r
+                "Layout size: " + activeLayoutSize);\r
         return remainingSpace;\r
     }\r
 \r
@@ -361,7 +361,9 @@ public class IOrderedLayout extends CellBasedLayout {
          * the caption may determine the space used by the component\r
          */\r
         if (!childComponentContainer.widgetHasSizeSpecified(orientation)) {\r
-            int captionWidth = childComponentContainer.getCaptionWidth();\r
+            int captionWidth = childComponentContainer\r
+                    .getCaptionRequiredWidth();\r
+\r
             if (captionWidth > widgetWidth) {\r
                 widgetWidth = captionWidth;\r
             }\r
@@ -426,7 +428,10 @@ public class IOrderedLayout extends CellBasedLayout {
                     if (!childComponentContainer\r
                             .widgetHasSizeSpecified(orientation)) {\r
                         int captionWidth = childComponentContainer\r
-                                .getCaptionWidth();\r
+                                .getCaptionRequiredWidth();\r
+                        // ApplicationConnection.getConsole().log(\r
+                        // "Component width: " + width\r
+                        // + ", caption width: " + captionWidth);\r
                         if (captionWidth > width) {\r
                             width = captionWidth;\r
                         }\r
@@ -612,7 +617,14 @@ public class IOrderedLayout extends CellBasedLayout {
     public boolean requestLayout(Set<Paintable> children) {\r
         for (Paintable p : children) {\r
             /* Update widget size from DOM */\r
-            getComponentContainer((Widget) p).updateWidgetSize();\r
+            ChildComponentContainer componentContainer = getComponentContainer((Widget) p);\r
+            componentContainer.updateWidgetSize();\r
+\r
+            /*\r
+             * If this is the result of an caption icon onload event the caption\r
+             * size may have changed\r
+             */\r
+            componentContainer.updateCaptionSize();\r
         }\r
 \r
         boolean sameSize = recalculateLayoutAndComponentSizes();\r

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 c87afe4c6d300bfa8791d2b6d1bde9cba2a7f1f2..98c15b4790b8d1704d9c1785c3d33637f357fd68 100644 (file)
--- 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 ac7c955e73c0cde710ae34c78703970ae7275765..84b20c1dfd7fa5a82cc03a0e637ac2810d07c1ee 100644 (file)
--- 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 {
     /**\r
      * Size of the caption\r
      */\r
-    private Size captionSize = new Size(0, 0);\r
+    private int captionRequiredWidth = 0;\r
+    private int captionWidth = 0;\r
+    private int captionHeight = 0;\r
 \r
     /**\r
      * Padding added to the container when it is larger than the component.\r
@@ -207,12 +209,20 @@ public class ChildComponentContainer extends Panel {
                 alignmentLeftOffsetForWidget + "px");\r
     }\r
 \r
+    public int getCaptionRequiredWidth() {\r
+        if (caption == null) {\r
+            return 0;\r
+        }\r
+\r
+        return captionRequiredWidth;\r
+    }\r
+\r
     public int getCaptionWidth() {\r
         if (caption == null) {\r
             return 0;\r
         }\r
 \r
-        return captionSize.getWidth();\r
+        return captionWidth;\r
     }\r
 \r
     public int getCaptionHeight() {\r
@@ -220,7 +230,7 @@ public class ChildComponentContainer extends Panel {
             return 0;\r
         }\r
 \r
-        return captionSize.getHeight();\r
+        return captionHeight;\r
     }\r
 \r
     public int getCaptionWidthAfterComponent() {\r
@@ -365,16 +375,26 @@ public class ChildComponentContainer extends Panel {
 \r
         }\r
 \r
-        int w = 0;\r
-        int h = 0;\r
+        updateCaptionSize();\r
+    }\r
+\r
+    public void updateCaptionSize() {\r
+        captionWidth = 0;\r
+        captionHeight = 0;\r
 \r
         if (caption != null) {\r
-            w = caption.getWidth();\r
-            h = caption.getHeight();\r
+            captionWidth = caption.getRenderedWidth();\r
+            captionHeight = caption.getHeight();\r
+            captionRequiredWidth = caption.getRequiredWidth();\r
+\r
+            /*\r
+             * ApplicationConnection.getConsole().log(\r
+             * "Caption rendered width: " + captionWidth +\r
+             * ", caption required width: " + captionRequiredWidth +\r
+             * ", caption height: " + captionHeight);\r
+             */\r
         }\r
 \r
-        captionSize.setWidth(w);\r
-        captionSize.setHeight(h);\r
     }\r
 \r
     private void setCaption(ICaption newCaption) {\r
@@ -638,8 +658,7 @@ public class ChildComponentContainer extends Panel {
         // Also update caption max width\r
         if (caption != null) {\r
             caption.setMaxWidth(width);\r
-\r
-            captionSize.setWidth(caption.getWidth());\r
+            captionWidth = caption.getRenderedWidth();\r
         }\r
 \r
     }\r