Google Web Toolkit 2 Application Development CookbookGWT 2.0 radically improves the web experience for users by using the existing Java
tools to build a no-compromise AJAX for any modern browser. It provides a solid
platform so that the other great libraries can be built on top of the GWT. Creating
web applications efficiently and making them impressive, however, is not as easy as it
sounds. Writing web applications for multiple browsers can be quite tasking. In addition,
building, reusing, and maintaining large JavaScript code bases and AJAX components
can be difficult.

GWT 2.0 Application Development Cookbook eases these burdens by allowing the
developers to build and maintain complex, yet highly efficient JavaScript frontend
applications in the Java programming language quickly. It tells you how to make the
web experience all the more thrilling and hassle-free by using various tools along with
the GWT SDK.

This book starts with developing an application from scratch. Right from creating the
layout of the home page to home page elements including left and right sidebars, to
placing a tree-like navigational menu, menu bars, tool bars, banners, and footers are
discussed with examples.

You will see how to create forms using the Ext GWT library widgets and handle different
types of events. Then, you will move on to see how to design a database for sales
processing systems, and learn how to create the database in MySQL with the help of
easy-to-follow recipes.

One of the interesting topics of this book is using the JPA in GWT. Using the JPA object
in GWT 2.0 is a challenge. To use it perfectly, a mechanism to convert the JPA object into a
plain object and vice versa is required. You will see recipes to use entity classes, entity
managers, and controller classes in the GWT 2.0 application. You will efficiently create
reports with parameters, variables, and subreports, and get the report output in both
HTML and PDF formats using real-world recipes.

You will then learn how to configure the GlassFish server to deploy a GWT application
with a database. Finally, you will learn how to trace speed and improve performance in
web applications using tracing techniques.

Create impressive web applications with tool bars, menus, multiple windows, and more
with this step-by-step guide.

GWT Articles & Books

• Google Web ToolKit(GWT)
• History Management in GWT
• GWT Books
• GWT Official Site

What This Book Covers

Chapter 1, Setting up the GWT Environment in NetBeans shows which tools and
technologies are required to build a web application using GWT, JPA, and iReport
in NetBeans. The required installation and configuration of the tools are shown as
easy-to-follow recipes.

Chapter 2, Creating Home Page with Panels and Menus creates the layout of the
application. It shows how to divide the page into the banner, left and right sidebars,
and the center and footer sections.

Chapter 3, Forms with Layout and Widgets includes recipes that show how to use
widgets to create forms, sidebars for navigation, tab panel, and so on.

Chapter 4, Handling your First Events includes easy-to-follow recipes that show how to
handle the typical GWT events such as button event, field event, menu event, focus
event, change event, and so on.

Chapter 5, Creating Database for Sales Processing creates a sample database in MySQL
for Sales Processing Systems. To create a database and its tables with the required
constraints, easily the uses of MySQL GUI tools have been shown.

Chapter 6, Managing Entities using JPA deals with the Java Persistence API (JPA)
framework. It is a framework that is used to manage relational data in Java EE and Java
SE applications. JPA provides a Plain Old Java Object (POJO) persistence model for
object relational mapping. This chapter shows how to create a database connection,
persistence unit, entity classes, and controller classes for the database CRUD operations.

Chapter 7, Communicating with Server using GWT RPC deals with the communication
between the client and the server. The recipes in this chapter describe how to use the JPA in
the server side and Data Transfer Objects (DTO) in the client side. It discusses how the
GWT RPC mechanism allows the server and the client to pass Java objects back and forth.

Chapter 8, Reporting with iReport shows how to use iReport for the reporting solutions
in Java web applications. Parameterized reports, subreports, and reports with variables
are shown in some recipes. Then, the chapter discusses and shows how to show the
created reports as HTML or PDF in the GWT application.

Chapter 9, Deploying a GWT Application includes recipes that show how to build the
GWT project for the deployment, and before the deployment, how to create JDBC
connection pool and resources in the GlassFish server are given as recipes.

Chapter 10, Using Speed Tracer deals with the extension Speed Tracer. Speed Tracer is a
Google Chrome browser extension which is used to identify and fix performance
problems in web applications. Installation and use of Speed Tracer for the created GWT
applications are shown in this chapter.

Creating Home Page with Panels and MenusIn this chapter, we will cover:

• Creating the home page layout class
• Adding the banner
• Adding menus
• Creating the left-hand sidebar
• Creating the right-hand sidebar
• Creating the main content panel
• Creating the footer
• Using HomePage instance in EntryPoint

Introduction

In this chapter, we will learn about creating the home page of our application. The home page
will include a banner at the top, a sidebar for navigation on the left-hand side, another sidebar
on the right-hand side for showing dynamic content, a footer to show copyright and other
information, and the main content at the center.

The layout will be as shown in the diagram below:

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.

1. Go to File | New File.
2. Select Java from Categories, and Java Class from File Types.

1. Click on Next.
2. Enter HomePage as the Class Name, and com.packtpub.client as Package.

1. Click on Finish.
2. Inherit the cla ss 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.

1. Set the size in pixels for the content panel:

 setSize(980,630);
 

1. Hide the header:

 setHeaderVisible(false);
 

1. Create a BorderLayout instance and set it for the content panel:

 BorderLayout layout = new BorderLayout();
 setLayout(layout);
 

1. Create a BorderLayoutData instance and configure it to be used for the menu bar
   and toolba r:

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

1. Create a BorderLayoutData instance and configure it to be used for the left-hand
   sideb ar:

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

1. Create a BorderLayoutData instance and configure it to be used for the main
   contents, at the cent er:

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

1. Create a BorderLayoutData instance and configure it to be used for the right-hand
   sideb ar:

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

1. Create a BorderLayoutData instance and configure it to be used for the foot er:

 BorderLayoutData footerLayoutData =
 new BorderLayoutData(LayoutRegion.SOUTH, 20);
 footerLayoutData.setMargins(new Margins(5));
 

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 BordeLayout 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, fl oatability, 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

See also

• The Adding the banner recipe
• The Adding menus recipe
• The Creating the left-hand sidebar recipe
• The Creating the right-hand sidebar recipe
• The Creating the main content panel recipe
• The Creating the footer recipe
• The Using the HomePage instance in EntryPoint recipe

GWT Articles & Books

• Google Web ToolKit(GWT)
• History Management in GWT
• GWT Books
• GWT Official Site