Creating the home page layout class_Google Web Toolkit 2 Application Development Cookbook-QQ阅读女生青春网

书名：Google Web Toolkit 2 Application Development Cookbook
作者名：Shamsuddin Ahammad
本章字数：879字
更新时间：2025-02-21 00:27:11

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

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, 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

 
   
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