A simple example using the GWT SplitLayoutPanel with UiBinder

Post to Twitter

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.

Post to Twitter

This entry was posted in GWT, Java. Bookmark the permalink.

5 Responses to A simple example using the GWT SplitLayoutPanel with UiBinder

  1. Pingback: Daily del.icio.us for March 13th through March 15th — Vinny Carpenter's blog

  2. saimadhu says:

    Hello,
    Nice article.

    I created splitlayoutpanel. In west container, I am trying to add 2 radio buttons, but I am getting Null pointer exception. Please help.

    Issue:
    Unable to add radio buttons in splitlayoutpanel.

    Steps:
    I have a splitlayoutpanel, which contains west, east, south, centres.

    I want to add 2 radio buttons to westContainer.

    I tried the followign ways:
    1) add 2 radio buttons to west container.
    @UiField StackLayoutPanel westContainer;

    RadioButton searchButton;
    ..
    westContainer.add(searchButton, “Projects”, 0);
    ..
    Actual Output:
    —————-
    Caused by: java.lang.NullPointerException at com.google.gwt.user.client.ui.LayoutPanel.insert(LayoutPanel.java:185) at com.google.gwt.user.client.ui.StackLayoutPanel.insert(StackLayoutPanel.java:617) at com.google.gwt.user.client.ui.StackLayoutPanel.insert(StackLayoutPanel.java:421) at com.google.gwt.user.client.ui.StackLayoutPanel.insert(StackLayoutPanel.java:394) at com.google.gwt.user.client.ui.StackLayoutPanel.insert(StackLayoutPanel.java:407) at com.google.gwt.user.client.ui.StackLayoutPanel.add(StackLayoutPanel.java:203) at com.arcot.framework.gift.client.MySplitLayoutPanel.(MySplitLayoutPanel.java:58) at com.arcot.framework.gift.client.MyTabPanel.(MyTabPanel.java:36) at com.arcot.framework.gift.client.TestManager.onModuleLoad(TestManager.java:25) … 9 more

    2) add 2 radio buttons to Vertical Panel/ Flow Panel
    Actual Output:
    ————–
    Null Pointer exception
    ava.lang.reflect.InvocationTargetException at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source) at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source) at java.lang.reflect.Method.invoke(Unknown Source) at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:396) at com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:193) at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:510) at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:352) at java.lang.Thread.run(Unknown Source) Caused by: java.lang.NullPointerException at com.google.gwt.user.client.ui.ComplexPanel.add(ComplexPanel.java:88) at com.google.gwt.user.client.ui.VerticalPanel.add(VerticalPanel.java:48) at com.arcot.framework.gift.client.MySplitLayoutPanel.(MySplitLayoutPanel.java:57) at
    com.arcot.framework.gift.client.MyTabPanel.(MyTabPanel.java:36) at com.arcot.framework.gift.client.TestManager.onModuleLoad(TestManager.java:25) … 9 more

  3. Chad Lung says:

    @saimadhu,

    Try posting this issue to the Google GWT Group.

    Chad

  4. saimadhu says:

    Sorry, I haven’t initialized the radio buttons. So, NULL pointer exception is occuring.

  5. Pingback: Developer Sharing June Edition « GWT Buzz

Comments are closed.