GWT SplitLayoutPanel

GWT SplitLayoutPanel is similar to the GWT DockLayoutPanel, except its children sizes are always specified in absolute value. Its child widget has splitter in between each widget which help user to drag widget accordingly.

GWT SplitLayoutPanel Class Declaration

Let's see the declaration of com.google.gwt.user.client.ui.SplitLayoutPanel

SplitLayoutPanel Nested Classes

Class	Description
SplitLayoutPanel.HSplitter	It splits the panel horizontally.
SplitLayoutPanel.Splitter	Its is the common splitter.
SplitLayoutPanel.VSplitter	It splits the panel vertically.

GWT SplitLayoutPanel Constructors

Constructor	Description
SplitLayoutPanel()	It construct a new SplitLayoutPanel with the default splitter size of 8px.
SplitLayoutPanel(int splitterSize)	It construct a new SplitLayoutPanel with the specified splitter size in pixels.

SplitLayoutPanel Common Methods

Modifier and Types	Method	Description
int	getSplitterSize()	It return the size of the splitter in pixels.
void	insert(Widget child, DockLayoutPanel.Direction direction, double size, Widget before)	It adds a widget to the specified edge of the dock.
boolean	remove(Widget child)	It removes a child widget.
void	setWidgetHidden(Widget widget, boolean hidden)	It sets whether or not the given widget should be hidden.
void	setWidgetMinSize(Widget child, int minSize)	It sets the minimum allowable size for the given widget.
void	setWidgetSnapClosedSize(Widget child, int snapClosedSize)	It sets a size below which the slider will close completely.
void	setWidgetToggleDisplayAllowed(Widget child, boolean allowed)	It sets whether or not double-clicking on the splitter should toggle the display of the widget.

GWT SplitLayoutPanel Example

//SampleSplitLayoutPanel.java

import com.google.gwt.event.logical.shared.ResizeEvent;
import com.google.gwt.event.logical.shared.ResizeHandler;
import com.google.gwt.user.client.Window;

/*This is the entry point method. */

 public void onModuleLoad() { 

// Create a two-pane layout with splitters. 

SplitLayoutPanel p = new SplitLayoutPanel(); 
p.addWest(new HTML("Navigation Tree"), 128); 

// Attach the LayoutPanel to the RootLayoutPanel. 

RootLayoutPanel rp = RootLayoutPanel.get(); 
rp.add(p);
 }

//SampleSplitLayoutPanel.css

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}
.dockpanel td {
   border: 1px solid #BBBBBB;
   padding: 3px;
}

Output: