Google Web Toolkit 2: Creating Page Layout

Exclusive offer: get 50% off this eBook here
Google Web Toolkit 2 Application Development Cookbook

Google Web Toolkit 2 Application Development Cookbook — Save 50%

Google Web Toolkit book and eBook - over 70 simple but incredibly effective practical recipes to develop web applications using GWT with JPA , MySQL and i Report

$23.99    $12.00
by Shamsuddin Ahammad | November 2010 | Cookbooks Oracle Web Development

In this article, 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.

In this article by Shamsuddin Ahammad, author of Google Web Toolkit 2 Application Development Cookbook, 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

 

Google Web Toolkit 2 Application Development Cookbook

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

 

        Read more about this book      

The layout will be as shown in the diagram below:

Google Web Toolkit 2: Creating Page Layout

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.

    Google Web Toolkit 2: Creating Page Layout

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

    Google Web Toolkit 2: Creating Page Layout

  5. Click on Finish.
  6. 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.

  7. Set the size in pixels for the content panel:
    setSize(980,630);
  8. Hide the header:
    setHeaderVisible(false);
  9. Create a BorderLayout instance and set it for the content panel:
    BorderLayout layout = new BorderLayout();
    setLayout(layout);
  10. 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));
  11. 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));
  12. 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));
  13. 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));
  14. 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));

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:

Class Package
BorderLayout com.extjs.gxt.ui.client.widget.layout
BorderLayoutData com.extjs.gxt.ui.client.widget.layout
ContentPanel com.extjs.gxt.ui.client.widget
Margins com.extjs.gxt.ui.client.util
Style com.extjs.gxt.ui.client

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 main content panel recipe
  • The Creating the footer recipe
  • The Using HomePage instance in EntryPoint recipe

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 \web\resources\images. 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.

See also

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

 

Google Web Toolkit 2 Application Development Cookbook Google Web Toolkit book and eBook - over 70 simple but incredibly effective practical recipes to develop web applications using GWT with JPA , MySQL and i Report
Published: November 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:
        Read more about this book      

Adding menus

In this recipe, we will create a method getMenuBar that does the following:

  • Creates a menu bar
  • Creates menus
  • Creates menu items
  • Adds menu items in menus
  • Adds menus in the menu bar

How to do it...

Write the method header public MenuBar getMenuBar(), and do the following in the method body. Finally, this method should be called in the constructor of the class HomePage to add the menu bar in the application.

  1. Create an instance of MenuBar:
    MenuBar menuBar=new MenuBar();
  2. Create instances of Menu:
    Menu fileMenu=new Menu();
    Menu reportsMenu=new Menu();
    Menu helpMenu=new Menu();
  3. Create the menu items and add them in corresponding menus:
    //Items for File menu
    MenuItem productMenuItem=new MenuItem("Product");
    fileMenu.add(productMenuItem);
    MenuItem stockMenuItem=new MenuItem("Stock");
    fileMenu.add(stockMenuItem);
    MenuItem purchaseMenuItem=new MenuItem("Purchase");
    fileMenu.add(purchaseMenuItem);
    MenuItem salesMenuItem=new MenuItem("Sales");
    fileMenu.add(salesMenuItem);
    //Items for Reports menu
    MenuItem productListMenuItem=new MenuItem("Product List");
    reportsMenu.add(productListMenuItem);
    MenuItem stockStatusMenuItem=new MenuItem("Stock Status");
    reportsMenu.add(stockStatusMenuItem);
    MenuItem purchaseDetailMenuItem=new MenuItem(
    "Purchase Detail");
    reportsMenu.add(purchaseDetailMenuItem);
    MenuItem salesDetailMenuItem=new MenuItem("Sales Detail");
    reportsMenu.add(salesDetailMenuItem);
    //Items for Help menu
    MenuItem aboutMenuItem=new MenuItem("About");
    helpMenu.add(aboutMenuItem);
  4. Create the menu bar items:
    MenuBarItem menuBarItemFile=new MenuBarItem("File",fileMenu);
    MenuBarItem menuBarItemReports=
    new MenuBarItem("Reports",reportsMenu);
    MenuBarItem menuBarItemHelp=
    new MenuBarItem("Help",helpMenu);
  5. Add the menu bar items in menu bar:
    menuBar.add(menuBarItemFile);
    menuBar.add(menuBarItemReports);
    menuBar.add(menuBarItemHelp);
  6. Return the menu bar:
    return menuBar;

How it works...

The menu bar containing all the required menus with menu items is created in the following ways:

  1. MenuBar instance menuBar is created where the menu bar items will be added.
  2. Three menus are created for File, Reports, and Help.
  3. Menu items are created and added under corresponding menus.
  4. Three instances of MenuBarItem are created for the three menus.
  5. All of the menu bar items are added in the menu bar. Call this method in the HomePage constructor by writing add(getMenuBar,menuBarToolBarLayoutData).
Class Package
MenuBar com.extjs.gxt.ui.client.widget.menu
Menu com.extjs.gxt.ui.client.widget.menu
MenuItem com.extjs.gxt.ui.client.widget.menu
MenuBarItem com.extjs.gxt.ui.client.widget.menu

See also

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

Creating the left-hand sidebar

In this recipe, we are going to create a sidebar to be placed on the left-hand side of the homepage. This sidebar will be used for navigation.

How to do it...

  1. Define the method getLeftSidebar:
    public ContentPanel getLeftSideBar()
    {
    ContentPanel leftSidebarPanel = new ContentPanel();
    leftSidebarPanel.setHeading("Left Sidebar");
    return leftSidebarPanel;
    }
  2. Call the add method of class ContentPanel in the constructor to add the sidebar in the content panel:
    add(getLeftSideBar(), leftSidebarLayoutData);

How it works...

The method getLeftSideBar creates a content panel instance and sets a heading Left Sidebar. This heading will be modified later.

The left-hand sidebar created by this method is added in the west region of the main content panel by invoking add(getLeftSideBar(), leftSidebarLayoutData) in the constructor.

See also

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

Creating the right-hand sidebar

In this recipe, we are going to create a sidebar to be placed on the right-hand side. This sidebar will be used for some dynamic contents based on the main contents at the center.

How to do it...

  1. Define the method getRightSidebar:
    public ContentPanel getRightSideBar()
    {
    ContentPanel rightSidebarPanel = new ContentPanel();
    rightSidebarPanel.setHeading("Right" Sidebar");
    return rightSidebarPanel;
    }
  2. Call the add method of class ContentPanel in the constructor to add the sidebar in the content panel:
    add(getRightSideBar(), rightSidebarLayoutData);

How it works...

The method getRightSideBar creates a content panel instance, and sets a heading Right Sidebar. This heading will be modified later.

The right-hand sidebar created by this method is added in the east region of the main content panel by invoking add(getRightSideBar(), rightSidebarLayoutData) in the constructor.

See also

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

Creating the main content panel

In this recipe, we are going to create the main content panel, to be placed at the center. All forms and reports will be shown in this panel.

How to do it...

  1. Define the method getMainContents:
    public ContentPanel getMainContents()
    {
    ContentPanel mainContentsPanel = new ContentPanel();
    mainContentsPanel.setHeading("Main Contents");
    return mainContentsPanel;
    }
  2. Call the add method of the ContentPanel class in the constructor to add the sidebar in the content panel:
    add(getMainContents(), mainContentsLayoutData);

How it works...

The method getMainContents creates a ContentPanel instance and sets a heading Main Contents. This heading will be modified later.

The content panel created by this method is added at the center of the home page content panel by invoking add(getMainContents(), mainContentsLayoutData) in the constructor.

See also

  • The Creating the home page layout class recipe
  • 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 footer recipe
  • The Using HomePage instance in EntryPoint recipe

Creating the footer

We are going to create the footer to place at the bottom of the page.

How to do it...

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

  1. Define the method getFooter:
    public VerticalPanel getFooter()
    {
    VerticalPanel footerPanel = new VerticalPanel();
    footerPanel.setHorizontalAlignment
    (HasHorizontalAlignment.ALIGN_CENTER);
    Label label = new Label("Design by Shamsuddin Ahammad.
    Copyright © Packt Publishing.");
    footerPanel.add(label);
    return footerPanel;
    }
  2. Call the add method of class ContentPanel in the constructor to add the footer at the bottom of the content panel:
    add(getFooter(), footerLayoutData);

How it works...

Method getFooter() creates an instance of VerticalPanel, which contains a Label instance with some text. The label will be shown at the center of the vertical panel, as its horizontal alignment is set to center.

VerticalPanel

VerticalPanel is a panel that lays out its children in a vertical single column. In this recipe, only a single instance of Label is added as the child in the panel; that's why the VerticalPanel is chosen here.

Setting alignment for VerticalPanel

Two methods, setHorizontalAlignment and setVerticalAlignment, are used for setting alignment for VerticalPanel. The first method takes values of HasHorizontalAlignment.HorizontalAlignmentConstant type as arguments. The available constants are:

  • HasHorizontalAlignment.ALIGN_CENTER
  • HasHorizontalAlignment.ALIGN_DEFAULT
  • HasHorizontalAlignment.ALIGN_LEFT
  • HasHorizontalAlignment.ALIGN_RIGHT

The setVerticalAlignment method takes values of HasVerticalAlignment.VerticalAlignmentConstant type as argument. The available options are:

  • HasVerticalAlignment.BOTTOM
  • HasVerticalAlignment.MIDDLE
  • HasVerticalAlignment.TOP
Class Package
HasHorizontalAlignment com.google.gwt.user.client.ui
VerticalPanel com.google.gwt.user.client.ui
Label com.extjs.gxt.ui.client.widget

See also

  • The Creating the home page layout class recipe
  • 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 Using HomePage instance in EntryPoint recipe

Using the HomePage instance in EntryPoint

To see the output of the created home page layout, we must add the HomePage instance in the root panel at the entry point class.

Getting ready

Open the file MainEntryPoint.java.

How to do it...

  1. Remove all previous code from the method onModuleLoad:
  2. Create an instance of the HomePage class in this method:
    HomePage homePage=new HomePage();
  3. Add the homepage instance in the RootPanel:

How it works...

After adding the HomePage instance in the RootPanel, if we run the project, we will get the following output:

Google Web Toolkit 2: Creating Page Layout

EntryPoint

EntryPoint is an interface that allows a class to act as a module entry point. When a module is loaded, each entry point class listed in the Main.gwt.xml file is instantiated and its onModuleLoad method is called. When the host page is accessed by the browser, the onModuleLoad function is called to display the first panels and widgets.

RootPanel

RootPanel corresponds to an HTML element on the host page. It can be used to add other panels and widgets. A RootPanel is accessed by calling RootPanel.get(id), where id is the value of the HTML ID attribute. The <body> element of the host page can be accessed by calling RootPanel.get().

RootPanels are never created directly. Instead, they are accessed via get().

Class and packages

The following table shows the class and its corresponding package:

Class Package
EntryPoint com.google.gwt.core.client
RootPanel com.google.gwt.user.client.ui

See also

  • The Creating the home page layout class recipe
  • 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

Summary

In this article we saw how to create the layout of the application; how to divide the page into the banner, left and right sidebars, and the center and footer sections.

Google Web Toolkit 2 Application Development Cookbook Google Web Toolkit book and eBook - over 70 simple but incredibly effective practical recipes to develop web applications using GWT with JPA , MySQL and i Report
Published: November 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Shamsuddin Ahammad

Shamsuddin Ahammad is a Senior Lecturer and the Course Coordinator at Daffodil Institute of IT, Bangladesh. He has been teaching Java, Programming Methods, and Database Systems since 2002. He has experience in supervising hundreds of academic projects. Shamsuddin has a Masters degree in Management Information Systems (MIS) from Daffodil International University, Dhaka. He obtained the BSc(Hons) degree in Computing & Information Systems (CIS) of NCC Education Ltd, UK and London Metropolitan University joint programme from Daffodil Institute of IT. Before that, he completed the IDCS & IADCS of NCC Education Ltd. He is an Additional Reviewer of Conference on Quality Engineering in Software Technology (CONQUEST) organized by International Software Quality Institute (iSQI) in Germany. He is the author of book titled iReport 3.7 published from PACKT Publishing in March 2010.

Books From Packt


Inkscape 0.48 Essentials for Web Designers
Inkscape 0.48 Essentials for Web Designers

TYPO3 Templates
TYPO3 Templates

CMS Made Simple 1.6: Beginner's Guide
CMS Made Simple 1.6: Beginner's Guide

Blender 2.5 Lighting and Rendering
Blender 2.5 Lighting and Rendering

PostgreSQL 9.0 High Performance
PostgreSQL 9.0 High Performance

PrestaShop 1.3 Theming – Beginner’s Guide
PrestaShop 1.3 Theming – Beginner’s Guide

jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide

Learning jQuery 1.3
Learning jQuery 1.3


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
v
Q
5
X
w
f
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software