A simple example using the GWT SplitLayoutPanel with UiBinder

My previous article showed how to easy it is to use the GWT DockLayoutPanel with UiBinder. Today I’m going to show how to easily use the GWT SplitLayoutPanel. If you haven’t read my article on the DockLayoutPanel you might want to do that because in this article I will assume you have read that one first.

Interestingly enough the SplitLayoutPanel extends the DockLayoutPanel. The SplitLayoutPanel is defined by the documentation as:

“A panel that adds user-positioned splitters between each of its child widgets.”

Essentially you will see its very similar to the DockLayoutPanel with the main exception being you can adjust the panels with splitters.

Create a new GWT project in Eclipse.

Remove all the sample code from the new project (see my prior article on how to do this).

Right-click on the com.giantflyingsaucer.client package and select:
New -> Other -> Google Web Toolkit -> UiBinder

Name the new (UiBinder) file: MySplitLayoutPanel

The code from the DockLayoutPanel project is very similar to this project but I will make some minimal changes (mostly to the UiBinder file). Here are the files of concern:

File: UsingTheSplitLayoutPanel.java

package com.giantflyingsaucer.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootLayoutPanel;

public class UsingTheSplitLayoutPanel implements EntryPoint {

	public void onModuleLoad() {
		RootLayoutPanel.get().add(new MySplitLayoutPanel());
	}
}

File: MySplitLayoutPanel.java

package com.giantflyingsaucer.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;

public class MySplitLayoutPanel extends Composite {

	private static MySplitLayoutPanelUiBinder uiBinder = GWT
			.create(MySplitLayoutPanelUiBinder.class);

	interface MySplitLayoutPanelUiBinder extends
			UiBinder<Widget, MySplitLayoutPanel> {
	}

	public MySplitLayoutPanel() {
		initWidget(uiBinder.createAndBindUi(this));
	}
}

File: MySplitLayoutPanel.ui.xml

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
	xmlns:g="urn:import:com.google.gwt.user.client.ui">
	<ui:style>		
		.eastPanel {
			background-color: #F60;
		}
		.westPanel {
			background-color: #EEE;
		}
		.northPanel {
			background-color: #39F;
		}
		.southPanel {
			background-color: #99C;
		}
		.centerPanel {
			background-color: #FFC;
		}		
	</ui:style>
	 <g:SplitLayoutPanel>
	   <g:north size='60' unit='EM'>
	     <g:FlowPanel styleName="{style.northPanel}">
	       <g:Label>This is the NORTH panel</g:Label>
	     </g:FlowPanel>
	   </g:north>
	   <g:west size='200' unit='EM'>
	     <g:FlowPanel styleName="{style.westPanel}">
	       <g:Label>This is the WEST panel</g:Label>
	     </g:FlowPanel>
	   </g:west>
	   <g:center>
	     <g:FlowPanel styleName="{style.centerPanel}">
	       <g:Label>This is the CENTER panel</g:Label>
	     </g:FlowPanel>
	   </g:center>
	   <g:east size='200' unit='EM'>
	     <g:FlowPanel styleName="{style.eastPanel}">
	       <g:Label>This is the EAST panel</g:Label>
	     </g:FlowPanel>
	   </g:east>	   
	    <g:south size="60" unit='EM'>
	     <g:FlowPanel styleName="{style.southPanel}">
	       <g:Label>This is the SOUTH panel</g:Label>
	     </g:FlowPanel>
	    </g:south>	   
	 </g:SplitLayoutPanel>
</ui:UiBinder> 

You can quickly see how similar the UiBinder files are to each other from the previous project.

Note: In the DockLayoutPanel I could specify the unit of measurement as unit=EM but with the SplitLayoutPanel you will get an error when you do this. So keep that in mind. Instead I simply put the unit of measurement and the size property in each of the directional child elements.

Save and run the project. Here is the default rendering followed by me manually adjusting the splitters.