]> source.dussan.org Git - vaadin-framework.git/commitdiff
small fixes (panel, splitpanel, expandlayout)
authorMatti Tahvonen <matti.tahvonen@itmill.com>
Fri, 5 Oct 2007 11:31:42 +0000 (11:31 +0000)
committerMatti Tahvonen <matti.tahvonen@itmill.com>
Fri, 5 Oct 2007 11:31:42 +0000 (11:31 +0000)
svn changeset:2443/svn branch:trunk

src/com/itmill/toolkit/terminal/gwt/client/ui/IExpandLayout.java
src/com/itmill/toolkit/terminal/gwt/client/ui/IPanel.java
src/com/itmill/toolkit/terminal/gwt/client/ui/ISplitPanel.java
src/com/itmill/toolkit/tests/TestBench.java

index 7fe485aa96cc288a316e60965aa40b479e70e03d..751ea4924c93ce3cdc23fb1ddeea664448541450 100644 (file)
@@ -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);
        }
-       
+
 }
index ab36b3bce585ae74913a7fa72d13b3187b179ddc..c1e904cda73541cc95e5e4776a06ada3aaed49a0 100644 (file)
@@ -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);
        }
-       
+
 }
index ef081144e684dfc0e21a9dda050eef8440cb776a..e6107136205b60ec6c49acae8e06dc9713650957 100644 (file)
@@ -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);
        }
 
 }
index a215bed177a3c3f0bcdc811a98084e0d4fad295b..660c01b5745c3cc8f4485ebcc16081a9d835987d 100644 (file)
@@ -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);
        }