Border Layout

Border Layout是一种高级的布局组件， 它通过把界面分为东西南北中五部分，而且允许嵌套，来达到布局的目的，如果对Border Layout还不了解，请看 使用Border Layout组件管理Web页面的布局 一文。

下面，介绍怎样通过Apusic Studio来操作Border Layout：

第一步，从标签栏把Border Layout拖放到可视化编辑器上面，默认只有中间一部分如下图：

第二步，可以用鼠标右键点击Border Layout的边框，弹出菜单，可以选择添加或者删除东西南北任意一部分，如下图：

第三步，选择完东西南北之后，整体的布局已经完成，接下来可以对每一部分进行详细的设置，在大纲那里选中一个contentPanel，然后打开其属性视图，就可以对该组件进行详细的设置，例如可以增加标题栏，标题，关闭按钮等，如下图：

第四步，Border Layout的每一部分既可以当作容器，存放任何组件，这和其他的容器没有什么区别，也可以链接到另外一个页面，只要指定contentPanel的src属性，如下图：

第五步，如果一个contentPanel设置了src属性，那么可以通过右键菜单直接进入改页面的代码，如果该页面不存在，则会自动创建一个，如下图：

这样，一个Border Layout的布局已经完成，如果需要更加复杂的布局，则可以考虑嵌套，操作是一样的。

PanelGrid

用过SWT的都应该很熟悉PanelGrid，通过PanelGrid可以实现快速的布局，就像一个可以自定义列数的table一样，但又比table要灵活。

下面，介绍怎样通过Apusic Studio来操作PanelGrid：

第一步，从标签栏把PanelGrid拖放到可视化编辑器上面，默认的列数是3，如下图：

第二步，可以改变列数（panelGrid的columns属性），并把cell标签从标签栏拖放到panelGrid里面，如下图：

第三步，改变单元格的行数和列数，通过colspan和rowspan可以改变单元所占的列数和行数，就像table中的td一样，如下图：

第四步，设置单元格内部的排列方式，通过align属性可以让单元格的内容居中，居左还有居右，如下图：

由于panelGrid底层是由table来实现的，所以支持table的所有属性和样式，而cell的底层是用td来实现的，同样的支持td所有的属性和样式。