This change provides two new widgets HorizontalSplitPanel and
VerticalSplitPanel. These panels arrange two widgets in a single vertical
column or horizontal row and allow the user to interactively change the
proportion of the area dedicated to each of the two widgets.
Review by: jgw
git-svn-id: https://google-web-toolkit.googlecode.com/svn/trunk@834 8db76d5a-ed1c-0410-87a9-c151d255dfc7
diff --git a/doc/src/HorizontalSplitPanel.png b/doc/src/HorizontalSplitPanel.png
new file mode 100644
index 0000000..8e74d97
--- /dev/null
+++ b/doc/src/HorizontalSplitPanel.png
Binary files differ
diff --git a/doc/src/VerticalSplitPanel.png b/doc/src/VerticalSplitPanel.png
new file mode 100644
index 0000000..cf4697c
--- /dev/null
+++ b/doc/src/VerticalSplitPanel.png
Binary files differ
diff --git a/user/src/com/google/gwt/user/SplitPanel.gwt.xml b/user/src/com/google/gwt/user/SplitPanel.gwt.xml
new file mode 100644
index 0000000..d30648a
--- /dev/null
+++ b/user/src/com/google/gwt/user/SplitPanel.gwt.xml
@@ -0,0 +1,32 @@
+<!--
+ Copyright 2007 Google Inc.
+
+ Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ use this file except in compliance with the License. You may obtain a copy of
+ the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations under
+ the License.
+-->
+<module>
+ <inherits name="com.google.gwt.user.User"/>
+
+ <replace-with class="com.google.gwt.user.client.ui.HorizontalSplitPanel.Impl">
+ <when-type-is class="com.google.gwt.user.client.ui.HorizontalSplitPanel.Impl"/>
+ </replace-with>
+
+ <replace-with class="com.google.gwt.user.client.ui.HorizontalSplitPanel.ImplIE6">
+ <when-type-is class="com.google.gwt.user.client.ui.HorizontalSplitPanel.Impl"/>
+ <when-property-is name="user.agent" value="ie6"/>
+ </replace-with>
+
+ <replace-with class="com.google.gwt.user.client.ui.HorizontalSplitPanel.ImplSafari">
+ <when-type-is class="com.google.gwt.user.client.ui.HorizontalSplitPanel.Impl"/>
+ <when-property-is name="user.agent" value="safari"/>
+ </replace-with>
+</module>
\ No newline at end of file
diff --git a/user/src/com/google/gwt/user/User.gwt.xml b/user/src/com/google/gwt/user/User.gwt.xml
index af67fc6..3a84ffd 100644
--- a/user/src/com/google/gwt/user/User.gwt.xml
+++ b/user/src/com/google/gwt/user/User.gwt.xml
@@ -1,6 +1,19 @@
-<!-- -->
-<!-- Copyright 2007 Google Inc. All Rights Reserved. -->
-<!-- -->
+<!--
+ Copyright 2007 Google Inc.
+
+ Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ use this file except in compliance with the License. You may obtain a copy of
+ the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations under
+ the License.
+-->
+
<!-- Combines all user facilities into a single module for convenience. -->
<!-- Most new code should inherit this module. -->
<!-- -->
@@ -16,4 +29,5 @@
<inherits name="com.google.gwt.user.Focus"/>
<inherits name="com.google.gwt.user.ImageBundle"/>
<inherits name="com.google.gwt.user.ClippedImage"/>
+ <inherits name="com.google.gwt.user.SplitPanel"/>
</module>
diff --git a/user/src/com/google/gwt/user/client/ui/HorizontalSplitPanel.java b/user/src/com/google/gwt/user/client/ui/HorizontalSplitPanel.java
new file mode 100644
index 0000000..6409eea
--- /dev/null
+++ b/user/src/com/google/gwt/user/client/ui/HorizontalSplitPanel.java
@@ -0,0 +1,362 @@
+/*
+ * Copyright 2007 Google Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.google.gwt.user.client.ui;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.user.client.Command;
+import com.google.gwt.user.client.DOM;
+import com.google.gwt.user.client.DeferredCommand;
+import com.google.gwt.user.client.Element;
+
+/**
+ * A panel that arranges two widgets in a single horizontal row and allows the
+ * user to interactively change the proportion of the width dedicated to each of
+ * the two widgets. Widgets contained within a <code>HorizontalSplitPanel</code>
+ * will be automatically decorated with scrollbars when necessary.
+ *
+ * <p>
+ * <img class='gallery' src='HorizontalSplitPanel.png'/>
+ * </p>
+ *
+ * <h3>CSS Style Rules</h3>
+ * <ul class='css'>
+ * <li>.gwt-HorizontalSplitPanel { the panel itself }</li>
+ * <li>.gwt-HorizontalSplitPanel left { the left container }</li>
+ * <li>.gwt-HorizontalSplitPanel right { the right container }</li>
+ * <li>.gwt-HorizontalSplitPanel splitter { the splitter }</li>
+ * </ul>
+ */
+public final class HorizontalSplitPanel extends SplitPanel {
+
+ /**
+ * The resizing implementation for standard browsers (Anything other than
+ * Safari and IE6/7)
+ */
+ private static class Impl {
+ // The x position of the mouse when drag resizing begins.
+ protected int initialThumbPos = 0;
+
+ // Widths of elements which are needed to do relative drag resizing.
+ protected int initialLeftWidth = 0;
+ protected int initialLeftContentWidth = 0;
+ protected int initialRightContentWidth = 0;
+
+ /**
+ * Initializes css properties on the panels DOM structure.
+ *
+ * @param panel the panel
+ */
+ protected void init(HorizontalSplitPanel panel) {
+ }
+
+ /**
+ * Called on each mouse move event during drag resizing.
+ *
+ * @param panel the panel
+ * @param pos the current horizontal mouse position relative to the panel
+ */
+ protected void onSplitResize(final HorizontalSplitPanel panel, int pos) {
+ // Compute the distance the splitter must be moved.
+ int offset = pos - initialThumbPos;
+
+ /*
+ * Compute the projected size of the content areas. This is to prevent
+ * out-of-bounds scrolling.
+ */
+ int newLeftContentWidth = initialLeftContentWidth + offset;
+ int newRightContentWidth = initialRightContentWidth - offset;
+
+ if (newLeftContentWidth < 0) {
+ offset -= newLeftContentWidth;
+ }
+
+ if (newRightContentWidth < 0) {
+ offset += newRightContentWidth;
+ }
+
+ // Move the split position by the offset.
+ setSplitPosition(panel, (initialLeftWidth + offset) + "px");
+ }
+
+ /**
+ * Called whenever drag resizing begins.
+ *
+ * @param panel the panel
+ * @param pos the current horizontal mouse position relative to the panel
+ */
+ protected void onSplitResizeStarted(final HorizontalSplitPanel panel,
+ int pos) {
+ initialThumbPos = pos;
+ initialLeftWidth = getOffsetWidth(panel.leftDiv);
+ initialLeftContentWidth = getClientWidth(panel.getElement(LEFT));
+ initialRightContentWidth = getClientWidth(panel.getElement(RIGHT));
+ }
+
+ /**
+ * Sets the horizontal position of the splitter.
+ *
+ * @param panel the panel
+ * @param pos the position as a css length
+ */
+ protected void setSplitPosition(final HorizontalSplitPanel panel,
+ final String pos) {
+ /*
+ * This default impl adjusts the width of the first level div and depends
+ * on the outer table to adjust its cell widths appropriately.
+ */
+ setWidth(panel.leftDiv, pos);
+ }
+ }
+
+ /**
+ * The resizing implementation for IE6/7.
+ */
+ private static class ImplIE6 extends Impl {
+ protected void init(final HorizontalSplitPanel panel) {
+ /*
+ * Without fixed table layout, IE will not respected the table width
+ * constraints.
+ */
+ DOM.setStyleAttribute(panel.table, "tableLayout", "fixed");
+
+ /*
+ * Since the DOM structure will not have finished full layout, we must
+ * defer until later to ensure that the inner divs update to the proper
+ * size.
+ */
+ DeferredCommand.addCommand(new Command() {
+ public void execute() {
+ updateDivWidth(panel);
+ }
+ });
+ }
+
+ protected void onSplitResizeStarted(final HorizontalSplitPanel panel,
+ final int x) {
+ initialThumbPos = x;
+ initialLeftWidth = getOffsetWidth(panel.leftTD);
+ initialLeftContentWidth = getClientWidth(panel.getElement(LEFT));
+ initialRightContentWidth = getClientWidth(panel.getElement(RIGHT));
+ }
+
+ protected void setSplitPosition(final HorizontalSplitPanel panel,
+ final String pos) {
+ final Element leftTD = panel.leftTD;
+ // adjust the width of the table cell instead of the inner div.
+ setWidth(leftTD, pos);
+ updateDivWidth(panel);
+ }
+
+ /*
+ * IE6 will not properly auto size the inner divs unless we explicitly set
+ * their width to something that forces a layout. NOTE: 100% works for
+ * quirks mode but will be problematic for standards mode when there are
+ * margins, border or padding.
+ */
+ private void updateDivWidth(final HorizontalSplitPanel panel) {
+ final String size = "100%";
+ setWidth(panel.leftDiv, size);
+ setWidth(panel.rightDiv, size);
+ setWidth(panel.getElement(LEFT), size);
+ setWidth(panel.getElement(RIGHT), size);
+ }
+ }
+
+ /**
+ * The resizing implemenation for Safari/WebKit.
+ */
+ private static class ImplSafari extends Impl {
+
+ protected void init(final HorizontalSplitPanel panel) {
+ /*
+ * Without fixed table layout, Safari will not respect the css width on
+ * the table.
+ */
+ DOM.setStyleAttribute(panel.table, "tableLayout", "fixed");
+
+ final String autoProp = "auto";
+ setWidth(panel.leftDiv, autoProp);
+ setWidth(panel.rightDiv, autoProp);
+ setWidth(panel.getElement(LEFT), autoProp);
+ setWidth(panel.getElement(RIGHT), autoProp);
+
+ /*
+ * Safari bug: a width must be set on the table when it is added to the
+ * DOM or else it cannot be set later.
+ */
+ panel.setWidth("100%");
+ }
+
+ protected void setSplitPosition(final HorizontalSplitPanel panel, String pos) {
+ // Adjust the width of the table cell instead of the inner div.
+ setWidth(panel.leftTD, pos);
+ }
+ }
+
+ /**
+ * Constants to provide more readable calls to {@link #getElement()} and
+ * {@link #getWidget(int)}.
+ */
+ private static final int LEFT = 0;
+ private static final int RIGHT = 1;
+
+ private static final int DEFAULT_SPLITTER_WIDTH = 10;
+
+ private static final int getClientWidth(final Element elem) {
+ return DOM.getIntAttribute(elem, "clientWidth");
+ }
+
+ private static final int getOffsetWidth(final Element elem) {
+ return DOM.getIntAttribute(elem, "offsetWidth");
+ }
+
+ private static final void setWidth(Element elem, String size) {
+ DOM.setStyleAttribute(elem, "width", size);
+ }
+
+ /**
+ * DOM elements needed to support splitter dragging. The underlying DOM
+ * structure is:
+ *
+ * <pre>
+ * table
+ * td (leftTD)
+ * div (leftDiv)
+ * div (getElement(LEFT))
+ * td (splitter)
+ * td (rightTD)
+ * div (rightDiv)
+ * div (getElement(RIGHT))
+ * </pre>
+ */
+ private final Element table;
+ private final Element leftTD, rightTD;
+ private final Element leftDiv, rightDiv;
+
+ private final Impl impl = (Impl) GWT.create(Impl.class);
+
+ /**
+ * Creates an empty horizontal split panel.
+ */
+ public HorizontalSplitPanel() {
+ super(DOM.createTable(), DOM.createTD(), DOM.createDiv(), DOM.createDiv());
+
+ table = getElement();
+ leftDiv = preventElementBoxStyles(DOM.createDiv());
+ rightDiv = preventElementBoxStyles(DOM.createDiv());
+ leftTD = preventElementBoxStyles(DOM.createTD());
+ rightTD = preventElementBoxStyles(DOM.createTD());
+
+ buildDOM();
+
+ setStyleName("gwt-HorizontalSplitPanel");
+
+ impl.init(this);
+ }
+
+ /**
+ * Gets the widget in the left side of the panel.
+ *
+ * @return the widget, <code>null</code> if there is not one.
+ */
+ public final Widget getLeftWidget() {
+ return getWidget(LEFT);
+ }
+
+ /**
+ * Gets the widget in the right side of the panel.
+ *
+ * @return the widget, <code>null</code> if there is not one.
+ */
+ public final Widget getRightWidget() {
+ return getWidget(RIGHT);
+ }
+
+ public final void setHeight(String height) {
+ DOM.setStyleAttribute(getElement(LEFT), "height", height);
+ DOM.setStyleAttribute(getElement(RIGHT), "height", height);
+ }
+
+ /**
+ * Sets the widget in the left side of the panel.
+ *
+ * @param w the widget
+ */
+ public final void setLeftWidget(Widget w) {
+ setWidget(LEFT, w);
+ }
+
+ /**
+ * Sets the widget in the right side of the panel.
+ *
+ * @param w the widget
+ */
+ public final void setRightWidget(Widget w) {
+ setWidget(RIGHT, w);
+ }
+
+ public final void setSplitPosition(String pos) {
+ impl.setSplitPosition(this, pos);
+ }
+
+ final void onSplitterResize(int x, int y) {
+ impl.onSplitResize(this, x);
+ }
+
+ final void onSplitterResizeStarted(int x, int y) {
+ impl.onSplitResizeStarted(this, x);
+ }
+
+ private void buildDOM() {
+ final Element leftContentDiv = getElement(LEFT);
+ final Element rightContentDiv = getElement(RIGHT);
+
+ final Element tbody = DOM.createTBody();
+ final Element tr = DOM.createTR();
+ final Element splitTD = getSplitElement();
+
+ DOM.appendChild(table, tbody);
+ DOM.appendChild(tbody, tr);
+ DOM.appendChild(tr, leftTD);
+ DOM.appendChild(tr, splitTD);
+ DOM.appendChild(tr, rightTD);
+ DOM.appendChild(leftTD, leftDiv);
+ DOM.appendChild(rightTD, rightDiv);
+ DOM.appendChild(leftDiv, leftContentDiv);
+ DOM.appendChild(rightDiv, rightContentDiv);
+
+ DOM.setInnerHTML(splitTD, " ");
+
+ DOM.setAttribute(table, "cellSpacing", "0");
+ DOM.setAttribute(table, "cellPadding", "0");
+
+ addElementScrolling(leftContentDiv);
+ addElementScrolling(rightContentDiv);
+
+ setElementClassname(leftContentDiv, "left");
+ setElementClassname(splitTD, "splitter");
+ setElementClassname(rightContentDiv, "right");
+
+ DOM.setStyleAttribute(leftTD, "verticalAlign", "top");
+ DOM.setStyleAttribute(rightTD, "verticalAlign", "top");
+
+ /*
+ * Ensures that the splitter is of reasonable width when no CSS is active on
+ * it, but this value is immediately overridden by CSS values.
+ */
+ DOM.setIntAttribute(splitTD, "width", DEFAULT_SPLITTER_WIDTH);
+ }
+}
diff --git a/user/src/com/google/gwt/user/client/ui/SplitPanel.java b/user/src/com/google/gwt/user/client/ui/SplitPanel.java
new file mode 100644
index 0000000..ce487e5
--- /dev/null
+++ b/user/src/com/google/gwt/user/client/ui/SplitPanel.java
@@ -0,0 +1,261 @@
+/*
+ * Copyright 2007 Google Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.google.gwt.user.client.ui;
+
+import com.google.gwt.user.client.DOM;
+import com.google.gwt.user.client.Element;
+import com.google.gwt.user.client.Event;
+
+import java.util.Iterator;
+
+/**
+ * Abstract base class for {@link HorizontalSplitPanel} and
+ * {@link VerticalSplitPanel}.
+ */
+abstract class SplitPanel extends Panel {
+
+ /**
+ * Adds clipping to an element.
+ *
+ * @param elem the element
+ */
+ static final void addElementClipping(final Element elem) {
+ DOM.setStyleAttribute(elem, "overflow", "hidden");
+ }
+
+ /**
+ * Adds as-needed scrolling to an element.
+ *
+ * @param elem the element
+ */
+ static final void addElementScrolling(final Element elem) {
+ DOM.setStyleAttribute(elem, "overflow", "auto");
+ }
+
+ /**
+ * Adds zero or none css values for padding, margin and border to prevent
+ * stylesheet overrides. Returns the element for convienence to support
+ * builder pattern.
+ *
+ * @param elem the element
+ * @return the element
+ */
+ static final Element preventElementBoxStyles(final Element elem) {
+ DOM.setIntStyleAttribute(elem, "padding", 0);
+ DOM.setIntStyleAttribute(elem, "margin", 0);
+ DOM.setStyleAttribute(elem, "border", "none");
+ return elem;
+ }
+
+ /**
+ * Adds zero size padding to an element.
+ *
+ * @param elem the element.
+ */
+ static final void preventElementPadding(final Element elem) {
+ DOM.setStyleAttribute(elem, "padding", "0");
+ }
+
+ /**
+ * Sets the elements css class name.
+ *
+ * @param elem the element
+ * @param className the class name
+ */
+ static final void setElementClassname(final Element elem,
+ final String className) {
+ DOM.setAttribute(elem, "className", className);
+ }
+
+ // The enclosed widgets.
+ private final Widget[] widgets = new Widget[2];
+
+ // The elements containing the widgets.
+ private final Element[] elements = new Element[2];
+
+ // The element that acts as the splitter.
+ private final Element splitElem;
+
+ // Indicates whether drag resizing is active.
+ private boolean isResizing = false;
+
+ /**
+ * Initializes the split panel.
+ *
+ * @param mainElem the root element for the split panel
+ * @param splitElem the element that acts as the splitter
+ * @param headElem the element to contain the top or left most widget
+ * @param tailElem the element to contain the bottom or right most widget
+ */
+ SplitPanel(Element mainElem, Element splitElem, Element headElem,
+ Element tailElem) {
+ setElement(mainElem);
+ this.splitElem = splitElem;
+ elements[0] = headElem;
+ elements[1] = tailElem;
+ sinkEvents(Event.MOUSEEVENTS);
+ }
+
+ public void add(Widget w) {
+ if (getWidget(0) == null) {
+ setWidget(0, w);
+ } else if (getWidget(1) == null) {
+ setWidget(1, w);
+ } else {
+ throw new IllegalStateException(
+ "A Splitter can only contain two Widgets.");
+ }
+ }
+
+ /**
+ * Indicates whether the split panel is being resized.
+ *
+ * @return <code>true</code> if the user is dragging the splitter,
+ * <code>false</code> otherwise
+ */
+ public boolean isResizing() {
+ return isResizing;
+ }
+
+ public Iterator iterator() {
+ return WidgetIterators.createWidgetIterator(this, widgets);
+ }
+
+ public void onBrowserEvent(Event event) {
+ switch (DOM.eventGetType(event)) {
+
+ case Event.ONMOUSEDOWN: {
+ Element target = DOM.eventGetTarget(event);
+ if (DOM.isOrHasChild(splitElem, target)) {
+ startResizingFrom(DOM.eventGetClientX(event) - getAbsoluteLeft(),
+ DOM.eventGetClientY(event) - getAbsoluteTop());
+ DOM.eventPreventDefault(event);
+ }
+ break;
+ }
+
+ case Event.ONMOUSEUP: {
+ stopResizing();
+ break;
+ }
+
+ case Event.ONMOUSEMOVE: {
+ if (isResizing()) {
+ onSplitterResize(DOM.eventGetClientX(event) - getAbsoluteLeft(),
+ DOM.eventGetClientY(event) - getAbsoluteTop());
+ DOM.eventPreventDefault(event);
+ }
+ break;
+ }
+ }
+ }
+
+ public boolean remove(Widget widget) {
+ if (widget == null) {
+ throw new IllegalArgumentException("Widget must not be null");
+ }
+
+ if (widgets[0] == widget) {
+ setWidget(0, null);
+ return true;
+ } else if (widgets[1] == widget) {
+ setWidget(1, null);
+ return true;
+ }
+
+ return false;
+ }
+
+ /**
+ * Moves the position of the splitter.
+ *
+ * @param size the new size of the left region in CSS units (e.g. "10px",
+ * "1em")
+ */
+ public abstract void setSplitPosition(String size);
+
+ /**
+ * Gets the content element for the given index.
+ *
+ * @param index the index of the element, only 0 and 1 are valid.
+ * @return the element
+ */
+ protected Element getElement(int index) {
+ return elements[index];
+ }
+
+ /**
+ * Gets the element that is acting as the splitter.
+ *
+ * @return the element
+ */
+ protected Element getSplitElement() {
+ return splitElem;
+ }
+
+ /**
+ * Gets one of the contained widgets.
+ *
+ * @param index the index of the widget, only 0 and 1 are valid.
+ * @return the widget
+ */
+ protected Widget getWidget(int index) {
+ return widgets[index];
+ }
+
+ /**
+ * Sets one of the contained widgets.
+ *
+ * @param index the index, only 0 and 1 are valid
+ * @param w the widget
+ */
+ protected final void setWidget(int index, Widget w) {
+ if (widgets[index] != null) {
+ disown(widgets[index]);
+ }
+
+ widgets[index] = w;
+
+ if (w != null) {
+ adopt(w, elements[index]);
+ }
+ }
+
+ /**
+ * Called on each mouse drag event as the user is dragging the splitter.
+ *
+ * @param x the x coordinate of the mouse relative to the panel's extent
+ * @param y the y coordinate of the mosue relative to the panel's extent
+ */
+ abstract void onSplitterResize(int x, int y);
+
+ /**
+ * Called when the user starts dragging the splitter.
+ *
+ * @param x the x coordinate of the mouse relative to the panel's extent
+ * @param y the y coordinate of the mouse relative to the panel's extent
+ */
+ abstract void onSplitterResizeStarted(int x, int y);
+
+ private void startResizingFrom(int x, int y) {
+ isResizing = true;
+ onSplitterResizeStarted(x, y);
+ }
+
+ private void stopResizing() {
+ isResizing = false;
+ }
+}
diff --git a/user/src/com/google/gwt/user/client/ui/VerticalSplitPanel.java b/user/src/com/google/gwt/user/client/ui/VerticalSplitPanel.java
new file mode 100644
index 0000000..b75e7d7
--- /dev/null
+++ b/user/src/com/google/gwt/user/client/ui/VerticalSplitPanel.java
@@ -0,0 +1,235 @@
+/*
+ * Copyright 2007 Google Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.google.gwt.user.client.ui;
+
+import com.google.gwt.user.client.Command;
+import com.google.gwt.user.client.DOM;
+import com.google.gwt.user.client.DeferredCommand;
+import com.google.gwt.user.client.Element;
+
+/**
+ * A panel that arranges two widgets in a single vertical column and allows the
+ * user to interactively change the proportion of the height dedicated to each
+ * of the two widgets. Widgets contained within a
+ * <code>VerticalSplitterPanel</code> will be automatically decorated with
+ * scrollbars when neccessary.
+ *
+ * <p>
+ * <img class='gallery' src='VerticalSplitPanel.png'/>
+ * </p>
+ *
+ * <h3>CSS Style Rules</h3>
+ * <ul class='css'>
+ * <li>.gwt-VerticalSplitPanel { the panel itself }</li>
+ * <li>.gwt-VerticalSplitPanel top { the top container }</li>
+ * <li>.gwt-VerticalSplitPanel bottom { the bottom container }</li>
+ * <li>.gwt-VerticalSplitPanel splitter { the splitter }</li>
+ * </ul>
+ */
+public final class VerticalSplitPanel extends SplitPanel {
+
+ private static final int TOP = 0;
+ private static final int BOTTOM = 1;
+
+ private static int getClientHeight(Element elem) {
+ return DOM.getIntAttribute(elem, "clientHeight");
+ }
+
+ private static int getOffsetTop(Element elem) {
+ return DOM.getIntAttribute(elem, "offsetTop");
+ }
+
+ private static Element lockStyles(final Element elem) {
+ DOM.setIntStyleAttribute(elem, "height", 0);
+ return preventElementBoxStyles(elem);
+ }
+
+ private static void setHeight(Element elem, int px) {
+ DOM.setStyleAttribute(elem, "height", Math.max(0, px) + "px");
+ }
+
+ // Element is added below bottom container element to make it possible to
+ // infer the bottom element's height.
+ private final Element probeElem;
+
+ // Captures the height of the top container when drag resizing starts.
+ private int initialTopHeight = 0;
+
+ // Captures the offset of a user's mouse pointer during drag resizing.
+ private int initialThumbPos = 0;
+
+ /**
+ * Creates an empty vertical split panel.
+ */
+ public VerticalSplitPanel() {
+ super(DOM.createDiv(), DOM.createDiv(), DOM.createDiv(), DOM.createDiv());
+
+ final Element thisElem = getElement();
+ final Element splitElem = getSplitElement();
+ final Element topElem = getElement(TOP);
+ final Element bottomElem = getElement(BOTTOM);
+ probeElem = lockStyles(DOM.createDiv());
+
+ DOM.appendChild(thisElem, topElem);
+ DOM.appendChild(thisElem, splitElem);
+ DOM.appendChild(thisElem, bottomElem);
+ DOM.appendChild(thisElem, probeElem);
+
+ addElementClipping(thisElem);
+ addElementScrolling(topElem);
+ addElementScrolling(bottomElem);
+
+ // Prevent padding on container elements.
+ preventElementPadding(thisElem);
+ preventElementPadding(topElem);
+ preventElementPadding(bottomElem);
+
+ setElementClassname(topElem, "top");
+ setElementClassname(splitElem, "splitter");
+ setElementClassname(bottomElem, "bottom");
+
+ setStyleName("gwt-VerticalSplitPanel");
+
+ // Must wait on layout to do the initial layout.
+ DeferredCommand.addCommand(new Command() {
+ public void execute() {
+ updateBottomHeight();
+ }
+ });
+ }
+
+ /**
+ * Gets the widget in the bottom of the panel.
+ *
+ * @return the widget, <code>null</code> if there is not one
+ */
+ public final Widget getBottomWidget() {
+ return getWidget(BOTTOM);
+ }
+
+ /**
+ * Gets the widget in the top of the panel.
+ *
+ * @return the widget, <code>null</code> if there is not one
+ */
+ public final Widget getTopWidget() {
+ return getWidget(TOP);
+ }
+
+ /**
+ * Sets the widget in the bottom of the panel.
+ *
+ * @param w the widget
+ */
+ public final void setBottomWidget(Widget w) {
+ setWidget(BOTTOM, w);
+ }
+
+ public final void setSplitPosition(String size) {
+ DOM.setStyleAttribute(getElement(TOP), "height", size);
+ updateBottomHeight();
+ }
+
+ /**
+ * Sets the widget in the top of the panel.
+ *
+ * @param w the widget
+ */
+ public final void setTopWidget(Widget w) {
+ setWidget(TOP, w);
+ }
+
+ final void onSplitterResize(int x, int y) {
+ /*
+ * When dragging starts we record the thumb position and the current height
+ * of the top div. On each subsequent resize event, we compute how far the
+ * thumb has moved and adjust the top and bottom div by that offset.
+ */
+ final Element topElem = getElement(TOP);
+ final Element botElem = getElement(BOTTOM);
+
+ // Compute what the new top height should be.
+ final int newTopHeight = initialTopHeight + (y - initialThumbPos);
+ final int newBotHeight = getClientHeight(botElem)
+ + getClientHeight(topElem) - newTopHeight;
+
+ /*
+ * NOTE: The bottom must be adjusted before the top due to FF bug which
+ * leaves scrollbar artifacts in the overflow region.
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=368190
+ */
+ if (newBotHeight < 0) {
+ setHeight(botElem, 0);
+ setHeight(topElem, newTopHeight + newBotHeight);
+ } else {
+ setHeight(botElem, newBotHeight);
+ setHeight(topElem, newTopHeight);
+ }
+
+ updateBottomHeight();
+ }
+
+ final void onSplitterResizeStarted(int x, int y) {
+ initialThumbPos = y;
+ initialTopHeight = getClientHeight(getElement(TOP));
+ }
+
+ /**
+ * Updates to the height on the bottom div so that it remains within the outer
+ * container.
+ */
+ private void updateBottomHeight() {
+ final Element thisElem = getElement();
+ final Element bottomElem = getElement(BOTTOM);
+
+ /*
+ * This is the definitive check that tells us how far (in pixels) the height
+ * of the bottom div must change. We do this by comparing the clientHeight
+ * of the root div with the offsetTop of a probe div under the bottom div.
+ */
+ final int adjust = getClientHeight(thisElem)
+ - (getOffsetTop(probeElem) - getOffsetTop(thisElem));
+
+ /*
+ * In the case where the user is dragging the splitter, resizeTopBy should
+ * generally guess the right adjustment based on how far the top div was
+ * adjusted. So for the most common case, we find we do not need adjustment
+ * and exit here.
+ */
+ if (adjust == 0) {
+ return;
+ }
+
+ /*
+ * We don't know what margins and borders are in play on the bottom div, so
+ * we naively guess they are all zero, which would mean that the CSS height
+ * property will be equal to the clientHeight attribute. After we set the
+ * height in css, we take the difference between what we set and the
+ * reported clientHeight. If that is non-zero, it tells us how much to
+ * accomodate for margin, border and what not.
+ */
+ final int curHeight = getClientHeight(bottomElem);
+ final int newHeight = curHeight + adjust;
+ setHeight(bottomElem, newHeight);
+ final int error = getClientHeight(bottomElem) - newHeight;
+
+ if (error == 0) {
+ return;
+ }
+
+ setHeight(bottomElem, newHeight - error);
+ }
+}
diff --git a/user/test/com/google/gwt/user/client/ui/SplitPanelTest.java b/user/test/com/google/gwt/user/client/ui/SplitPanelTest.java
new file mode 100644
index 0000000..bd082dd
--- /dev/null
+++ b/user/test/com/google/gwt/user/client/ui/SplitPanelTest.java
@@ -0,0 +1,119 @@
+/*
+ * Copyright 2007 Google Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.google.gwt.user.client.ui;
+
+import com.google.gwt.junit.client.GWTTestCase;
+import com.google.gwt.user.client.DOM;
+
+/**
+ * Tests both {@link HorizontalSplitPanel} and {@link VerticalSplitPanel}.
+ *
+ */
+public class SplitPanelTest extends GWTTestCase {
+ public String getModuleName() {
+ return "com.google.gwt.user.User";
+ }
+
+ private Widget createMockWidget() {
+ final Label label = new Label();
+ label.setText("Testing 1, 2, 3");
+ DOM.setStyleAttribute(label.getElement(), "fontSize", "72pt");
+ return label;
+ }
+
+ /**
+ * Tests creation, widget assignment, null assignment for
+ * {@link HorizontalSplitPanel}.
+ */
+ public void testHorizontalSplitPanelCreate() {
+ final HorizontalSplitPanel panel = new HorizontalSplitPanel();
+ final Widget widgetA = createMockWidget();
+ final Widget widgetB = createMockWidget();
+
+ // Intentionally add before setting widgets.
+
+ RootPanel.get().add(panel);
+
+ panel.setHeight("100px");
+ panel.setWidth("100px");
+
+ // Ensure position can be set before widgets are added.
+ panel.setSplitPosition("20px");
+
+ panel.setRightWidget(widgetB);
+ panel.setLeftWidget(widgetA);
+
+ assertTrue(panel.getRightWidget() == widgetB);
+ assertTrue(panel.getLeftWidget() == widgetA);
+
+ panel.setLeftWidget(null);
+ panel.setRightWidget(null);
+
+ assertTrue(panel.getRightWidget() == null);
+ assertTrue(panel.getLeftWidget() == null);
+
+ panel.setLeftWidget(widgetB);
+ panel.setRightWidget(widgetA);
+
+ assertTrue(panel.getLeftWidget() == widgetB);
+ assertTrue(panel.getRightWidget() == widgetA);
+
+ // Ensure we ended up at the right size.
+ assertEquals(panel.getOffsetWidth(), 100);
+ assertEquals(panel.getOffsetHeight(), 100);
+ }
+
+ /**
+ * Tests creation, widget assignment, null assigment for
+ * {@link VerticalSplitPanel}.
+ */
+ public void testVerticalSplitPanelCreate() {
+
+ final VerticalSplitPanel panel = new VerticalSplitPanel();
+ final Widget widgetA = createMockWidget();
+ final Widget widgetB = createMockWidget();
+
+ // Intentionally add before setting widgets.
+ RootPanel.get().add(panel);
+
+ panel.setHeight("100px");
+ panel.setWidth("100px");
+ // Ensure position can be set before widgets are added.
+ panel.setSplitPosition("20px");
+
+ panel.setBottomWidget(widgetB);
+ panel.setTopWidget(widgetA);
+
+ assertTrue(panel.getBottomWidget() == widgetB);
+ assertTrue(panel.getTopWidget() == widgetA);
+
+ panel.setTopWidget(null);
+ panel.setBottomWidget(null);
+
+ assertTrue(panel.getTopWidget() == null);
+ assertTrue(panel.getBottomWidget() == null);
+
+ panel.setTopWidget(widgetB);
+ panel.setBottomWidget(widgetA);
+
+ assertTrue(panel.getTopWidget() == widgetB);
+ assertTrue(panel.getBottomWidget() == widgetA);
+
+ // Ensure we ended up at the right size.
+ assertEquals(panel.getOffsetWidth(), 100);
+ assertEquals(panel.getOffsetHeight(), 100);
+ }
+}
