From: Artur Signell Date: Mon, 27 Oct 2008 13:39:26 +0000 (+0000) Subject: Fix for #2181 - Caption update problems X-Git-Tag: 6.7.0.beta1~3917 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=e11b767debff2fa7bf32bf8cbea5f8e38b799e4e;p=vaadin-framework.git 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 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 w = new HashSet(); - // 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 w = new HashSet(); + 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 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(); } }