GXT之旅：第二章：GXT组件(4)——容器的布局

Viewport

Viewport的父类是LayoutContainer，它会自动的填充整个浏览器的窗口，并且会监听窗口的大小变化，随之变化。于此同时，也会负责处理其里面的子components在新改变窗口后的大小。对于去展现一个类似于桌面应用程序来说，Viewport是一个非常有用的component。

我们会使用Viewport，作为整个项目的基础面板。因此，它会被直接的添加到GWT的root panel上。不需要我们调用其layout()方法，viewport就会自动的伴随着root panel 的渲染而被渲染出来。

• 找到RSSReader.java类中的onModuleLoad()方法，这是程序的入口方法。我们创建一个Viewport，然后添加到GWT的RootPanel里：

public void onModuleLoad() {
Viewport viewport = new Viewport();
RootPanel.get().add(viewport);
}

• 此时我们运行浏览器，会仍然看到空白页面。那是因为Viewport目前没有应用任何css样式。所以在RSSReader.css文件中加入如下css样式，Viewport会自动的应用此样式。
  

.x-viewport
{
background-color: #070;
}

• .x-viewport 样式会自动的应用到GXT Viewport控件中，我们定义的是绿色背景，所以当我们启动程序时，浏览器会随着javaScript的执行，Viewport的渲染，而从白色变成绿色。
  

Layout

Layout类定义了Layoutcontainer里面components是如何布局和显式的。类路径是：com.extjs.gxt.ui.client.widget.Layout。稍后的章节会逐步使用到他们，这一章呢，我们先从BorderLayout开始学习。

BorderLayout

如果我们想展示一个全屏的应用程序，就一定要使用BorderLayout。对于一个应用程序来说，会被各种components充斥起来，但是他们也不会被胡乱的摆放。通常一个完整屏幕会被划分为中心区域，其周围由东，南，西，北包围着。BorderLayout就是为此布局设计的，用户可以随意的改变每个区域的大小，伸缩和隐藏。

这种布局对于开发应用系统来说非常常见。North区域用来作为页眉，South区域作为页脚，Center区域最为具体显式的内容，West或East最为导航区。

BorderLayoutData

在使用BorderLayout 添加子component到父component之前，我们要首先使用BorderLayoutData 对象来定义component是如何展现的。

具体来说，就是我们需要通过创建BorderLayoutData 对象，才可以设置其布局的区域（North，South，West，East，Center），初始化面积，用户是否可以折叠他，以及最大和最小面积等选项。

当我们定义好了一个具体的BorderLayoutData对象之后，我们才可以使用他去添加一个component，应用到一个BorderLayout中去。通过下面的步骤，一看便知：

• 找到RSSReader.java类中的onModuleLoad()方法，新建一个BorderLayout布局对象，然后让Viewport应用此布局。（大家一定要有个概念，就是控件和布局效果是分开的，需要创建各自的对象，然后再让一个控件去应用一个布局）

public void onModuleLoad() {
Viewport viewport = new Viewport();
final BorderLayout borderLayout = new BorderLayout();
viewport.setLayout(borderLayout);
RootPanel.get().add(viewport);
}

• 然后，创建一个BorderLayoutData对象，并设置他的布局位置，高度，以及是否可以折叠功能。

BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH,20);
northData.setCollapsible(false);
northData.setSplit(false);

• 新建一个HTML widget（一提到widget就是GWT的东东，一提到component就是GXT的东东），最为整个页面的页眉（就是放在North区域）。
  

HTML headerHtml = new HTML();
headerHtml.setHTML("<h1>RSS Reader</h1>");
viewport.add(headerHtml, northData);

• 再分别创建两个BorderLayoutData，分别负责Center和west区域的布局效果。West区最为导航菜单来说，当然是可以折叠的。同时对其宽度做具体的设置。

BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
centerData.setCollapsible(false);
BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 200, 150, 300);
westData.setCollapsible(true);
westData.setSplit(true);

• 最后要创建两个components（ContentPanel），分别对应，上面创建的两个BorderLayoutData。

ContentPanel mainPanel = new ContentPanel();
ContentPanel navPanel = new ContentPanel();
viewport.add(mainPanel, centerData);
viewport.add(navPanel, westData);

• 运行后的效果如下（怎么样，是不是看到有点像模像样啦）：

• 把完整的代码贴出来，给大家分享一下：

package com.danielvaughan.rssreader.client;

import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class RSSReader implements EntryPoint {

	/**
	 * This is the entry point method.
	 */
	@Override
	public void onModuleLoad() {
		Viewport viewport = new Viewport();
		final BorderLayout borderLayout = new BorderLayout();

		BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH,
				20);
		northData.setCollapsible(false);
		northData.setSplit(false);

		HTML headerHtml = new HTML();
		headerHtml.setHTML("<h1>RSS Reader</h1>");
		viewport.add(headerHtml, northData);

		BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
		centerData.setCollapsible(false);

		BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST,
				200, 150, 300);
		westData.setCollapsible(true);
		westData.setSplit(true);

		ContentPanel mainPanel = new ContentPanel();
		ContentPanel navPanel = new ContentPanel();
		viewport.add(mainPanel, centerData);
		viewport.add(navPanel, westData);

		viewport.setLayout(borderLayout);
		RootPanel.get().add(viewport);
	}
}