GXT之旅:第二章:GXT组件(4)——容器的布局
2012-01-04 17:38
369 查看
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); } }
相关文章推荐
- GXT之旅:第二章:GXT组件(2)——渲染和容器
- ExtJS UI 之 容器内组件布局
- Flex之旅:第二部分:容器与布局(2)---动态添加组件(TabNavigator)
- Flex 3.x到Flex 4.5 容器与布局组件的不同
- GXT之旅:第二章:GXT组件(8)——Popup
- 哪种布局管理器的容器中的组件大小不随容器大小的变化而改变 .java 高手请进 容器被重新设置大小后
- 容器内 组件 流布局 float,如何撑开.
- Android菜鸟实训的第二天--视图容器组件Android中的布局的讲解。
- 谈谈Ext JS的组件——容器与布局
- GXT之旅:第二章:GXT组件(9)——Popup位置
- 谈谈Ext JS的组件——容器与布局
- 谈谈Ext JS的组件——容器与布局
- GXT之旅:第二章:GXT组件(3)——事件和监听
- Flex4基础-组件定位和容器布局
- 谈谈Ext JS的组件——容器与布局
- GXT之旅:第二章:GXT组件(1)——组件层次结构
- GXT之旅:第二章:GXT组件(6)——定制组件
- 谈谈Ext JS的组件――容器与布局
- 组件在容器中的布局
- GXT之旅:第二章:GXT组件(7)——Button和Tooltip