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:

<!doctype html>
<!-- The DOCTYPE declaration above will set the    -->
<!-- browser's rendering engine into               -->
<!-- "Standards Mode". Replacing this declaration  -->
<!-- with a "Quirks Mode" doctype may lead to some -->
<!-- differences in layout.                        -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="UsingTheDockLayoutPanel.css">

    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>Web Application Starter Project</title>
    
    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
    <script type="text/javascript" language="javascript" src="usingthedocklayoutpanel/usingthedocklayoutpanel.nocache.js"></script>
  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
    
    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>
  </body>
</html>

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<Widget, MyDockLayoutPanel> {
	}

	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.

<!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:DockLayoutPanel unit='EM'>
	   <g:north size='5'>
	     <g:FlowPanel styleName="{style.northPanel}">
	       <g:Label>This is the NORTH panel</g:Label>
	     </g:FlowPanel>
	   </g:north>
	   <g:west size='15'>
	     <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='15'>
	     <g:FlowPanel styleName="{style.eastPanel}">
	       <g:Label>This is the EAST panel</g:Label>
	     </g:FlowPanel>
	   </g:east>	   
	    <g:south size="5">
	     <g:FlowPanel styleName="{style.southPanel}">
	       <g:Label>This is the SOUTH panel</g:Label>
	     </g:FlowPanel>
	    </g:south>	   
	 </g:DockLayoutPanel>
</ui:UiBinder> 

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.