From: Matti Tahvonen Date: Fri, 5 Oct 2007 11:31:42 +0000 (+0000) Subject: small fixes (panel, splitpanel, expandlayout) X-Git-Tag: 6.7.0.beta1~5903 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=740690180a69edc1a3115b190e1be3d10c7831f5;p=vaadin-framework.git small fixes (panel, splitpanel, expandlayout) svn changeset:2443/svn branch:trunk --- diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/IExpandLayout.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/IExpandLayout.java index 7fe485aa96..751ea4924c 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/IExpandLayout.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/IExpandLayout.java @@ -17,22 +17,25 @@ import com.itmill.toolkit.terminal.gwt.client.Util; * * @author IT Mill Ltd */ -public class IExpandLayout extends IOrderedLayout implements ContainerResizedListener { +public class IExpandLayout extends IOrderedLayout implements + ContainerResizedListener { + public static final String CLASSNAME = "i-expandlayout"; private Widget expandedWidget; private UIDL expandedWidgetUidl; public IExpandLayout() { super(IOrderedLayout.ORIENTATION_VERTICAL); + setStyleName(CLASSNAME); } public void updateFromUIDL(UIDL uidl, ApplicationConnection client) { this.client = client; - + // Ensure correct implementation if (client.updateComponent(this, uidl, false)) return; - + String h = uidl.getStringAttribute("height"); setHeight(h); String w = uidl.getStringAttribute("width"); @@ -106,6 +109,9 @@ public class IExpandLayout extends IOrderedLayout implements ContainerResizedLis removePaintable(p); } + if (uidlWidgets.size() == 0) + return; + iLayout(); /* @@ -117,32 +123,37 @@ public class IExpandLayout extends IOrderedLayout implements ContainerResizedLis } public void iLayout() { -// ApplicationConnection.getConsole().log("EL layouting..."); + if (expandedWidget == null) { + return; + } + // ApplicationConnection.getConsole().log("EL layouting..."); Element expandedElement = DOM.getParent(expandedWidget.getElement()); - String origDisplay = DOM.getStyleAttribute(expandedElement, "display"); - DOM.setStyleAttribute(expandedElement, "display", "none"); + // take expanded element temporarely out of flow to make container + // minimum sized + String origiginalPositioning = DOM.getStyleAttribute(expandedWidget.getElement(), "position"); + DOM.setStyleAttribute(expandedWidget.getElement(), "position", "absolute"); + DOM.setStyleAttribute(expandedElement, "height", ""); // add temp element to make some measurements Element meter = createWidgetWrappper(); DOM.setStyleAttribute(meter, "overflow", "hidden"); - DOM.setStyleAttribute(meter, "height", "1px"); + DOM.setStyleAttribute(meter, "height", "0px"); DOM.appendChild(childContainer, meter); int usedSpace = DOM.getElementPropertyInt(meter, "offsetTop") - DOM.getElementPropertyInt(DOM.getFirstChild(childContainer), "offsetTop"); -// ApplicationConnection.getConsole().log("EL h" + getOffsetHeight()); -// ApplicationConnection.getConsole().log("EL h" + getOffsetHeight()); + // ApplicationConnection.getConsole().log("EL h" + getOffsetHeight()); + // ApplicationConnection.getConsole().log("EL h" + getOffsetHeight()); int freeSpace = getOffsetHeight() - usedSpace; - DOM.setStyleAttribute(expandedElement, - "height", freeSpace + "px"); - - DOM.setStyleAttribute(expandedElement, "display", origDisplay); - + DOM.setStyleAttribute(expandedElement, "height", freeSpace + "px"); + + DOM.setStyleAttribute(expandedWidget.getElement(), "position", origiginalPositioning); + DOM.removeChild(childContainer, meter); - + // TODO save previous size and only propagate if really changed Util.runAnchestorsLayout(this); } - + } diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/IPanel.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/IPanel.java index ab36b3bce5..c1e904cda7 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/IPanel.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/IPanel.java @@ -7,98 +7,138 @@ import com.google.gwt.user.client.ui.Label; import com.google.gwt.user.client.ui.SimplePanel; import com.google.gwt.user.client.ui.Widget; import com.itmill.toolkit.terminal.gwt.client.ApplicationConnection; +import com.itmill.toolkit.terminal.gwt.client.ContainerResizedListener; import com.itmill.toolkit.terminal.gwt.client.Paintable; import com.itmill.toolkit.terminal.gwt.client.UIDL; +import com.itmill.toolkit.terminal.gwt.client.Util; + +public class IPanel extends SimplePanel implements Paintable, + ContainerResizedListener { -public class IPanel extends FlowPanel implements Paintable { - public static final String CLASSNAME = "i-panel"; - + ApplicationConnection client; - + String id; - - private Label caption; - - private SimplePanel content; - + + private Element captionNode = DOM.createDiv(); + private Element bottomDecoration = DOM.createDiv(); + + private Element contentNode = DOM.createDiv(); + public IPanel() { super(); setStyleName(CLASSNAME); - caption = new Label(); - caption.setStyleName(CLASSNAME+"-caption"); - content = new SimplePanel(); - content.setStyleName(CLASSNAME+"-content"); + + DOM.appendChild(getElement(), captionNode); + DOM + .setElementProperty(captionNode, "className", CLASSNAME + + "-caption"); + DOM.appendChild(getElement(), contentNode); + DOM + .setElementProperty(contentNode, "className", CLASSNAME + + "-content"); + DOM.appendChild(getElement(), bottomDecoration); + DOM.setElementProperty(bottomDecoration, "className", CLASSNAME + + "-deco"); + } + + protected Element getContainerElement() { + return contentNode; } public void updateFromUIDL(UIDL uidl, ApplicationConnection client) { // Ensure correct implementation if (client.updateComponent(this, uidl, false)) return; - + this.client = client; this.id = uidl.getId(); - - // TODO optimize: if only the caption has changed, don't re-render whole content - clear(); - // Remove shadow - Element deco = DOM.getChild(getElement(), 0); - if(deco != null) - DOM.removeChild(getElement(), deco); - - if(uidl.hasAttribute("style")) - setStyleName(CLASSNAME + " " + CLASSNAME+"-"+uidl.getStringAttribute("style")); + + // Size panel + String h = uidl.hasVariable("height") ? uidl + .getStringVariable("height") : null; + String w = uidl.hasVariable("width") ? uidl.getStringVariable("width") + : null; + + setWidth(w != null ? w : ""); + + if (h != null) { + setHeight(h); + } else { + DOM.setStyleAttribute(contentNode, "height", ""); + // We don't need overflow:auto when panel height is not set + // (overflow:auto causes rendering errors at least in Firefox when a + // a panel is inside a tabsheet with overflow:auto set) + DOM.setStyleAttribute(contentNode, "overflow", "hidden"); + } + + // TODO optimize: if only the caption has changed, don't re-render whole + // content + if(getWidget() != null) { + clear(); + } + + if (uidl.hasAttribute("style")) + setStyleName(CLASSNAME + " " + CLASSNAME + "-" + + uidl.getStringAttribute("style")); else setStyleName(CLASSNAME); - + // Handle caption displaying - if(uidl.hasAttribute("caption") && !uidl.getStringAttribute("caption").equals("")) { - caption.setText(uidl.getStringAttribute("caption")); - caption.setStyleName(CLASSNAME+"-caption"); - add(caption); + if (uidl.hasAttribute("caption") + && !uidl.getStringAttribute("caption").equals("")) { + DOM.setInnerHTML(captionNode, uidl.getStringAttribute("caption")); + DOM.setElementProperty(captionNode, "className", CLASSNAME + + "-caption"); } else { // Theme needs this to work around different paddings - caption.setStyleName(CLASSNAME+"-nocaption"); - caption.setText(""); - add(caption); + DOM.setElementProperty(captionNode, "className", CLASSNAME + + "-nocaption"); + DOM.setInnerHTML(captionNode, ""); } + iLayout(); + // Render content UIDL layoutUidl = uidl.getChildUIDL(0); Widget layout = client.getWidget(layoutUidl); - content.setWidget(layout); - add(content); - ((Paintable)layout).updateFromUIDL(layoutUidl, client); - - // Add a decoration element for additional styling - deco = DOM.createDiv(); - DOM.setElementProperty(deco, "className", CLASSNAME+"-deco"); - DOM.appendChild(getElement(), deco); - - // Size panel - String h = uidl.hasVariable("height")? uidl.getStringVariable("height") : null; - String w = uidl.hasVariable("width")? uidl.getStringVariable("width") : null; - - setWidth(w!=null? w : ""); - - // Try to approximate the height as close as possible - if(h!=null) { - // First, calculate needed pixel height - setHeight(h); - int neededHeight = getOffsetHeight(); - setHeight("auto"); - // Then calculate the size the content area needs to be - content.setHeight("0"); - int height = getOffsetHeight(); - content.setHeight(neededHeight-height + "px"); - } else { - content.setHeight(""); - // We don't need overflow:auto when panel height is not set - // (overflow:auto causes rendering errors at least in Firefox when a - // a panel is inside a tabsheet with overflow:auto set) - DOM.setStyleAttribute(content.getElement(), "overflow", "hidden"); + setWidget(layout); + ((Paintable) layout).updateFromUIDL(layoutUidl, client); + + } + + public void iLayout() { + String h = DOM.getStyleAttribute(getElement(), "height"); + if (h != null && h != "") { + // need to fix containers height properly + + boolean hasChildren = getWidget() != null; + Element contentEl = null; + String origPositioning = null; + if(hasChildren) { + // remove children temporary form normal flow to detect proper size + contentEl = getWidget().getElement(); + origPositioning = DOM.getStyleAttribute(contentEl, "position"); + DOM.setStyleAttribute(contentEl, "position", "absolute"); + } + DOM.setStyleAttribute(contentNode, "height", ""); + int availableH = DOM.getElementPropertyInt(getElement(), + "clientHeight"); + + int usedH = DOM + .getElementPropertyInt(bottomDecoration, "offsetTop") + + DOM.getElementPropertyInt(bottomDecoration, + "offsetHeight"); + int contentH = availableH - usedH; + if(contentH < 0) + contentH = 0; + DOM.setStyleAttribute(contentNode, "height", contentH + "px"); + if(hasChildren) { + DOM.setStyleAttribute(contentEl, "position", origPositioning); + } } - + Util.runAnchestorsLayout(this); } - + } diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/ISplitPanel.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/ISplitPanel.java index ef081144e6..e610713620 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/ISplitPanel.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/ISplitPanel.java @@ -11,13 +11,14 @@ import com.itmill.toolkit.terminal.gwt.client.Paintable; import com.itmill.toolkit.terminal.gwt.client.UIDL; import com.itmill.toolkit.terminal.gwt.client.Util; -public class ISplitPanel extends ComplexPanel implements Paintable, ContainerResizedListener { +public class ISplitPanel extends ComplexPanel implements Paintable, + ContainerResizedListener { public static final String CLASSNAME = "i-splitpanel"; public static final int ORIENTATION_HORIZONTAL = 0; public static final int ORIENTATION_VERTICAL = 1; - private static final int SPLITTER_SIZE = 8; + private static final int SPLITTER_SIZE = 10; private int orientation; private Widget firstChild; @@ -44,11 +45,19 @@ public class ISplitPanel extends ComplexPanel implements Paintable, ContainerRes public ISplitPanel(int orientation) { setElement(DOM.createDiv()); - setStyleName(CLASSNAME); + switch (orientation) { + case ORIENTATION_HORIZONTAL: + setStyleName(CLASSNAME + "-horizontal"); + break; + case ORIENTATION_VERTICAL: + default: + setStyleName(CLASSNAME + "-vertical"); + break; + } constructDom(); setOrientation(orientation); setSplitPosition("50%"); - DOM.sinkEvents(splitter, Event.MOUSEEVENTS); + DOM.sinkEvents(splitter, (Event.MOUSEEVENTS)); } protected void constructDom() { @@ -64,7 +73,6 @@ public class ISplitPanel extends ComplexPanel implements Paintable, ContainerRes DOM.setStyleAttribute(splitter, "position", "absolute"); DOM.setStyleAttribute(secondContainer, "position", "absolute"); DOM.setElementProperty(splitter, "className", "splitter"); - DOM.setStyleAttribute(splitter, "background", "cyan"); DOM.setStyleAttribute(firstContainer, "overflow", "hidden"); DOM.setStyleAttribute(secondContainer, "overflow", "hidden"); @@ -199,26 +207,26 @@ public class ISplitPanel extends ComplexPanel implements Paintable, ContainerRes onMouseDown(event); break; case Event.ONMOUSEUP: - onMouseUp(event); + if(resizing) + onMouseUp(event); + break; + case Event.ONCLICK: + resizing = false; break; } } public void onMouseDown(Event event) { - resizing = true; - DOM.setCapture(getElement()); - origX = DOM.getAbsoluteLeft(splitter); - origY = DOM.getAbsoluteTop(splitter); - origMouseX = DOM.eventGetClientX(event); - origMouseY = DOM.eventGetClientY(event); - DOM.eventCancelBubble(event, true); - DOM.eventPreventDefault(event); - } - - public void onMouseEnter(Widget sender) { - } - - public void onMouseLeave(Widget sender) { + if (DOM.compare(DOM.eventGetTarget(event), splitter)) { + resizing = true; + DOM.setCapture(getElement()); + origX = DOM.getElementPropertyInt(splitter, "offsetLeft"); + origY = DOM.getElementPropertyInt(splitter, "offsetTop"); + origMouseX = DOM.eventGetClientX(event); + origMouseY = DOM.eventGetClientY(event); + DOM.eventCancelBubble(event, true); + DOM.eventPreventDefault(event); + } } public void onMouseMove(Event event) { @@ -256,9 +264,9 @@ public class ISplitPanel extends ComplexPanel implements Paintable, ContainerRes } public void onMouseUp(Event event) { - onMouseMove(event); - resizing = false; DOM.releaseCapture(getElement()); + resizing = false; + onMouseMove(event); } } diff --git a/src/com/itmill/toolkit/tests/TestBench.java b/src/com/itmill/toolkit/tests/TestBench.java index a215bed177..660c01b574 100644 --- a/src/com/itmill/toolkit/tests/TestBench.java +++ b/src/com/itmill/toolkit/tests/TestBench.java @@ -94,12 +94,15 @@ public class TestBench extends com.itmill.toolkit.Application implements menu.addListener(this); menu.setImmediate(true); - mainLayout.setHeight(700); - mainLayout.setHeightUnits(SplitPanel.UNITS_PIXELS); mainLayout.addComponent(menu); + + bodyLayout.setHeight(100); + bodyLayout.setHeightUnits(Panel.UNITS_PERCENTAGE); + bodyLayout.setLayout(new ExpandLayout()); + mainLayout.addComponent(bodyLayout); - mainWindow.addComponent(mainLayout); + mainWindow.setLayout(mainLayout); setMainWindow(mainWindow); }