A simple example using the GWT DockLayoutPanel with UiBinder

Post to Twitter

The Google Web Toolkit or GWT as its commonly referred to continues to grow and some of my most popular articles are the GWT based articles. Today I’m going to show a simple application that uses the DockLayoutPanel and I’ll use it via the UiBinder.


According to the GWT documentation the DockLayoutPanel is described as:

A panel that lays its child widgets out “docked” at its outer edges, and allows its last widget to take up the remaining space in its center. This widget will only work in standards mode, which requires that the HTML page in which it is run have an explicit !DOCTYPE declaration.

Note: Don’t worry about the !DOCTYPE declaration because by default in a new GWT Project that is already setup to keep browsers in Standards Mode versus Quirks Mode (this is mostly for the sake of older IE browsers).

In a nutshell, the DockLayoutPanel lets you create complex interfaces easily. I’ve used some colors in the image below to demo one possible way you can layout the DockLayoutPanel:

Of course your not bound to that particular layout but that is the one I’ll be showing you how to create today.

Note: At this point I assume you have Eclipse, Java, and the Google Web Toolkit Eclipse plug-in already installed.

Create your project just like the images below (you don’t have to include App Engine support):

You don’t have to generate the GWT project sample code but I assume you have so you need to make some adjustments to the project. First, remove the files in the com.giantflyingsaucer.shared and the com.giantflyingsaucer.server packages as we won’t be using those. Second, remove the GreetingService files from the com.giantflyingsaucer.client package. Finally, remove the servlet info from the web.xml file that is no longer needed.

Your project layout should look like this:

Go into the UsingTheDockLayoutPanel.html file (in the WEB-INF folder) and remove all the HTML between the closing noscript and closing body tags so your code looks like this:









  
    

    
    
    
    

    
    
    
    Web Application Starter Project
    
    
    
    
    
    
    
  

  
  
  
  
  
  

    
    
    
    
    
  

Go into the UsingTheDockLayoutPanel.java file now and modify the code to look like this (we are getting rid of all the demo sample code):

package com.giantflyingsaucer.client;

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

public class UsingTheDockLayoutPanel implements EntryPoint {
	
	  
	public void onModuleLoad() {
		RootLayoutPanel.get().add(new MyDockLayoutPanel());
	}	
}

Note: Make sure your using the RootLayoutPanel and not the RootPanel in the code above!

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

Name the new (UiBinder) file: MyDockLayoutPanel

The newly created MyDockLayoutPanel.java file should be modified to look like this:

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 MyDockLayoutPanel extends Composite {

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

	interface MyDockLayoutPanelUiBinder extends
			UiBinder {
	}

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

Ok, now we can get into the MyDockLayoutPanel.ui.xml which is where we can create the DockLayoutPanel and add some text and a unique background color in each panel so we can identify each of the panels.



			
		.eastPanel {
			background-color: #F60;
		}
		.westPanel {
			background-color: #EEE;
		}
		.northPanel {
			background-color: #39F;
		}
		.southPanel {
			background-color: #99C;
		}
		.centerPanel {
			background-color: #FFC;
		}		
	
	 
	   
	     
	       This is the NORTH panel
	     
	   
	   
	     
	       This is the WEST panel
	     
	   
	   
	     
	       This is the CENTER panel
	     
	   
	   
	     
	       This is the EAST panel
	     
	   	   
	    
	     
	       This is the SOUTH panel
	     
	    	   
	 
 

As you can see I’m making use of all the panels (north, south, east, west, center). You don’t have to use all of them if you don’t wish, modify it as you see fit for your projects. You can have multiple north, south, east and west panels but only one center so keep that in mind.

Save all the files and run the project.

Post to Twitter

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

3 Responses to A simple example using the GWT DockLayoutPanel with UiBinder

  1. Pingback: A simple example using the Google Web Toolkit (GWT) SplitLayoutPanel with UiBinder | Giant Flying Saucer

  2. reda says:

    Thank you. Works perfectly and is a good starter :)

  3. Pingback: Developer Sharing June Edition « GWT Buzz

Comments are closed.