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 C ontentPanel getLeftSideBar()
 {
 ContentPanel leftSidebarPanel = new ContentPanel();
 leftSidebarPanel.setHeading("Left Sidebar");
 return leftSidebarPanel;
 }
 

1. Call the add method of class ContentPanel in the constructor to add the sidebar in
   the content panel:

 add(getL eftSideBar(), 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 the main content panel recipe
• The Creating the footer recipe
• The Using the 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:

 pu blic ContentPanel getRightSideBar()
 {
 ContentPanel rightSidebarPanel = new ContentPanel();
 rightSidebarPanel.setHeading("Right" Sidebar");
 return rightSidebarPanel;
 }
 

1. Call the add method of class ContentPanel in the constructor to add the sidebar in
   the content panel:

 ad d(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 the main content panel recipe
• The Creating the footer recipe
• The Using the 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 getMainContent s:

 public ContentPanel getMainContents()
 {
 ContentPanel mainContentsPanel = new ContentPanel();
 mainContentsPanel.setHeading("Main Contents");
 return mainContentsPanel;
 }
 

1. 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 the 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 getFo oter:

 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;
 }
 

1. Call the add method of class ContentPanel in the constructor to add the footer at
   the bottom of the content pan el:

 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

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 the HomePage instance in EntryPoint recipe

GWT Articles & Books

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