Google Web Toolkit 2 Application Development Cookbook

Over 70 simple but incredibly effective practical recipes to develop web applications using GWT with JPA , MySQL and i Report

Create impressive, complex browser-based web applications with GWT 2

Learn the most effective ways to create reports with parameters, variables, and subreports using iReport

Create Swing-like web-based GUIs using the Ext GWT class library

Develop applications using browser quirks, Javascript,HTML scriplets from scratch

Part of Packt's Cookbook series: Each recipe is a carefully organized sequence of instructions to complete the task as efficiently as possible

The layout will be as shown in the diagram below:

google-web-toolkit-2-creating-page-layout-img-0

Creating the home page layout class

This recipe creates a panel to place the menu bar, banner, sidebars, footer, and the main application layout. Ext GWT provides several options to define the top-level layout of the application. We will use the BorderLayout function. We will add the actual widgets after the layout is fully defined. The other recipes add the menu bar, banner, sidebars, and footers each, one-by-one.

Getting ready

Open the Sales Processing System project.

How to do it...

Let's list the steps required to complete the task.

Go to File | New File.

Select Java from Categories, and Java Class from File Types.

Click on Next.

Enter HomePage as the Class Name, and com.packtpub.client as Package.

Click on Finish.

Inherit the class ContentPanel. Press Ctrl + Shift + I to import the package automatically. Add a default constructor:
```
package com.packtpub.client;
import com.extjs.gxt.ui.client.widget.ContentPanel;
public class HomePage extends ContentPanel
{
  public HomePage()
  {
  }
}
```
Write the code of the following steps in this constructor.

Set the size in pixels for the content panel:
```
setSize(980,630);
```

Hide the header:
```
setHeaderVisible(false);
```

Create a BorderLayout instance and set it for the content panel:
```
BorderLayout layout = new BorderLayout();
setLayout(layout);
```

Create a BorderLayoutData instance and configure it to be used for the menu bar and toolbar:

BorderLayoutData menuBarToolBarLayoutData=
  new BorderLayoutData(LayoutRegion.NORTH, 55);
menuBarToolBarLayoutData.setMargins(new Margins(5));

Create a BorderLayoutData instance and configure it to be used for the left-hand sidebar:

BorderLayoutData leftSidebarLayoutData =
  new BorderLayoutData(LayoutRegion.WEST, 150);
leftSidebarLayoutData.setSplit(true);
leftSidebarLayoutData.setCollapsible(true);
leftSidebarLayoutData.setMargins(new Margins(0, 5, 0, 5));

Create a BorderLayoutData instance and configure it to be used for the main contents, at the center:

BorderLayoutData mainContentsLayoutData =
  new BorderLayoutData(LayoutRegion.CENTER);
mainContentsLayoutData.setMargins(new Margins(0));

Create a BorderLayoutData instance and configure it to be used for the right-hand sidebar:

BorderLayoutData rightSidebarLayoutData =
  new BorderLayoutData(LayoutRegion.EAST, 150);
rightSidebarLayoutData.setSplit(true);
rightSidebarLayoutData.setCollapsible(true);
rightSidebarLayoutData.setMargins(new Margins(0, 5, 0, 5));

Create a BorderLayoutData instance and configure it to be used for the footer:
```
BorderLayoutData footerLayoutData =
  new BorderLayoutData(LayoutRegion.SOUTH, 20);
footerLayoutData.setMargins(new Margins(5));
```
Unlock access to the largest independent learning library in Tech for FREE!

Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.

Renews at €14.99/month. Cancel anytime

How it works...

Let's now learn how these steps allow us to complete the task of designing the application for the home page layout. The full page (home page) is actually a "content panel" that covers the entire area of the host page. The content panel is a container having top and bottom components along with separate header, footer, and body sections. Therefore, the content panel is a perfect building block for application-oriented user interfaces.

In this example, we will place the banner at the top of the content panel. The body section of the content panel is further subdivided into five regions in order to place these—the menu bar and toolbar at the top, two sidebars on each side, a footer at the bottom, and a large area at the center to place the contents like forms, reports, and so on. A BorderLayout instance lays out the container into five regions, namely, north, south, east, west, and center. By using BorderLayout as the layout of the content panel, we will get five places to add five components.

BorderLayoutData is used to specify layout parameters of each region of the container that has BorderLayout as the layout. We have created five instances of BorderLayoutData, to be used in the five regions of the container.

There's more...

Now, let's talk about some general information that is relevant to this recipe.

Setting the size of the panel

The setSize method is used to set the size for a panel. Any one of the two overloaded setSize methods can be used. A method has two int parameters, namely, width and height. The other one takes the same arguments as string.

Showing or hiding header in the content panel

Each content panel has built-in headers, which are visible by default. To hide the header, we can invoke the setHeaderVisible method, giving false as the argument, as shown in the preceding example.

BorderLayoutData

BorderLayoutData is used to set the layout parameters, such as margin, size, maximum size, minimum size, collapsibility, floatability, split bar, and so on for a region in a border panel.

Consider the following line of code in the example we just saw:

BorderLayoutData leftSidebarLayoutData =
  new BorderLayoutData(LayoutRegion.WEST, 150)

It creates a variable leftSidebarLayoutData, where the size is 150 pixels and the region is the west of the border panel.

rightSidebarLayoutData.setSplit(true) sets a split bar between this region and its neighbors. The split bar allows the user to resize the region.

leftSidebarLayoutData.setCollapsible(true) makes the component collapsible, that is, the user will be able to collapse and expand the region.

leftSidebarLayoutData.setMargins(new Margins(0, 5, 0, 5)) sets a margin where 0, 5, 0, and 5 are the top, right, bottom, and left margins, respectively.

Classes and packages

In the preceding example, some classes are used from Ext GWT library, as shown in the following table:

ClassPackageBorderLayoutcom.extjs.gxt.ui.client.widget.layoutBorderLayoutDatacom.extjs.gxt.ui.client.widget.layoutContentPanelcom.extjs.gxt.ui.client.widgetMarginscom.extjs.gxt.ui.client.utilStylecom.extjs.gxt.ui.client

Adding the banner

This recipe will create a method that we will use to add a banner in the content panel.

Getting ready

Place the banner image banner.png at the location webresourcesimages. You can use your own image or get it from the code sample provided on the Packt Publishing website (www.packtpub.com).

How to do it...

Create the method getBanner:

public ContentPanel getBanner()
{
  ContentPanel bannerPanel = new ContentPanel();
  bannerPanel.setHeaderVisible(false);
  bannerPanel.add(new Image("resources/images/banner.png"));
  Image("resources/images/banner.png"));
  return bannerPanel;
}

Call the method setTopComponent of the ContentPanel class in the following constructor:
```
setTopComponent(getBanner());
```

How it works...

The method getBanner() creates an instance bannerPanel of type ContentPanel. The bannerPanel will just show the image from the location resources/images/banner.png. That's why, the header is made invisible by invoking setHeaderVisible(false). Instance of the com.google.gwt.user.client.ui.Image class, which represents the banner image, is added in the bannerPanel.

In the default constructor of the HomePage class, the method setTopComponent(getBanner()) is called to set the image as the top component of the content panel.