顾名思义，该布局所提供的功能就是让处于布局中的组件能够相对于布局框架而绝对定位。好，现在我就使用ApusicStudio5.0m5来为大家演示一下如何使用该布局。

（1）首先，我们从操作面板上拖拽一个AbsoluteLayout组件到编辑页面上：

（2）我们可以通过拖拉来设定AbsoluteLayout的大小：

（3）向布局容器里拖入panel，而且可以使用拖拽的方式可视化定位panel：

（4）现在我再加多几个panel进来，并且向panel里添加一些小组件：

（5）OK，一个及其简单的例子就做完了，让我们看看运行时的效果：

（6）那么让我们分析一下代码，看看主要的属性都起了什么效果：

<layout:absoluteLayout width="356" height="256">
  <layout:panel width="194" height="136" x="143" y="15">
    <w:textArea height="108" value="TextArea" width="183"></w:textArea>
  </layout:panel>
  <layout:panel width="83" height="26" x="42" y="185" header="false">
    <w:button value="button" />
  </layout:panel>
 <layout:panel width="64" height="68" x="35" y="27">Panel1</layout:panel>
</layout:absoluteLayout>

	这行标签的属性说明绝对定位布局组件的大小为宽356，高256。
	这是一个panel组件的标签，主要是x和y这两个属性说明了相对于绝对定位布局框架的绝对定位坐标是多少。

当我们打开Windows操作系统的“我的电脑”时，我们会看到左边导航是分类的，通过点击某个分类，该分类的子面板就会展开，点击另一个分类时，当前打开的分类面板会合起，点中的那个分类面板就展开。这就是抽屉式布局，好，我们一起做个例子熟悉一下。

（1）首先，我们应该知道抽屉式布局里每个“抽屉”都是一个Panel，所以我们先拉几个panel到编辑页面，然后设计一番（这里我们要做个简单的QQ面板）：

（2）设计好几个panel后，我们拖个AccordionLayout组件到编辑页面，设定好大小，并把设计好的panel拖入AccordionLayout中：

（3）Ok，就这么多，看看运行效果：

（4）给出标签代码，是不是非常简单：

<layout:accordionLayout width="194" height="200">
  <layout:panel width="191" height="103" title="我的好友">
    <h:outputLabel>* 超人迪加</h:outputLabel><br />
    <h:outputLabel>* 擎天柱</h:outputLabel><br />
    <h:outputLabel>* 贝壳汉姆</h:outputLabel><br />
    <h:outputLabel>* 杰克船长</h:outputLabel>
  </layout:panel>
  <layout:panel width="191" height="104" title="我的群">
    <h:outputLabel>* J2EE开发团队</h:outputLabel><br />
    <h:outputLabel>* 星际争霸高手群</h:outputLabel><br />
    <h:outputLabel>* 极品飞车高手群</h:outputLabel><br />
    <h:outputLabel>* CS菜鸟群</h:outputLabel>
  </layout:panel>
  <layout:panel width="191" height="104" title="黑名单">
    <h:outputLabel>* 威震天</h:outputLabel><br />
    <h:outputLabel>* 小明</h:outputLabel><br />
    <h:outputLabel>* 小红</h:outputLabel><br />
    <h:outputLabel>* 小黄</h:outputLabel>
  </layout:panel>
</layout:accordionLayout>

这个布局与Swing中的BorderLayout布局是一样的，我们可以向方位布局的东西南北和中心添加panel，再向panel添加其它组件，这样我们的组件就能设定到我们指定的方位。

（1）拖拽BorderLayout组件到编辑页面，分别向东西南北中拖入panel，然后拖入一些button小组件：

（2）运行效果：

（3）标签属性分析：

<layout:borderLayout width="387" height="286">
  <layout:panel region="east" width="100">
    <w:button value="east" />
  </layout:panel>
  <layout:panel region="west" width="100" collapsible="true">
    <w:button value="west" />
  </layout:panel>
  <layout:panel region="south" height="64">
    <w:button value="south" />
  </layout:panel>
  <layout:panel region="north" height="63">
    <w:button value="north"/>
  </layout:panel>
  <layout:panel region="center" collapsible="true">
    <w:button value="center" />
  </layout:panel>
</layout:borderLayout>

	region这个属性指明panel是属于哪个方位的，可选值为：east、west、south、north、center。
	collapsible设置为true之后就可以让该panel进行折叠缩放，通过点击panel上的小箭头实现。

注意：为了让东西南北的panel能够正常显示，我们需要对东西的panel分别设定宽度，南北的panel设定高度，这样才能保证这些panel的显示。

卡片式布局的作用就是让至于其中的panel像卡片一样叠在一起，通过设置某张卡片（panel）为激活状态以使其在最上层展现出来，例如我们可以来做一个operamasks网站上的demo——注册流程的例子。

（1）拖入一个CardLayout组件到编辑页面上，向其中拖入一个panel，以后要继续向CardLayout里添加panel可以通过在前一个panel的title上点击右键菜单来实现：

（2）在编辑状态下如果要进行前后翻页，可以点击title头，出现左右的三角形按钮后进行前后切换（注意真实运行的情况下并不会有这两个按钮）：

（3）添加完panel后我们可以通过编写后台ManagedBean来操作激活的panel，以下给出标签和ManagedBean的部分代码：

<layout:cardLayout id="demoCardLayout" height="300" width="400" styleClass="alignCenter">
  <layout:panel title="第一步">填写基本信息：</layout:panel>
  <layout:panel title="第二步">填写详细信息：</layout:panel>
  <layout:panel title="完成">恭喜你,注册已经完成!</layout:panel>
</layout:cardLayout>
<w:form>
  <layout:panelGrid columns="3" styleClass="alignCenter">
    …………
    <layout:cell colspan="1" rowspan="1">
      <w:button value="下一步" id="next" />
    </layout:cell>
    …………
  </layout:panelGrid>
</w:form>

@Bind
private UICardLayout demoCardLayout;

@Action(id="next")
public void next() {
  int currentActiveItem = 0;
  if (demoCardLayout.getActiveItem() != null) {
    currentActiveItem = demoCardLayout.getActiveItem();
  }
  demoCardLayout.setActiveItem(currentActiveItem);
  if (currentActiveItem > -1 && currentActiveItem < 2) {
    demoCardLayout.activeItem(currentActiveItem + 1);
  }
}
…………
…………

	通过UICardLayout的getActiveItem()方法我们可以获得当前激活的是哪一号panel
	通过UICardLayout的activeItem(int page)方法我们可以设置哪个panel激活

在列式布局中，置于其中的panel会一列列显示，当一行排不下时，则会自动过行继续排列，使用比较简单，以下分别给出设计模式图、运行模式图和标签代码。

（1）设计模式图：

（2）运行模式图：

（3）标签代码，非常简单：

<layout:columnLayout width="285" height="70">
  <layout:panel width="70" height="70">column1</layout:panel>
  <layout:panel width="70" height="70">column2</layout:panel>
  <layout:panel width="70" height="70">column3</layout:panel>
  <layout:panel width="70" height="70">column4</layout:panel>
</layout:columnLayout>

PanelGrid是AOM前一个版本的组件容器，现在已经不再做更新了，AOM2.0提供了一个类似的布局组件TableLayout，稍后会做介绍，现在让我们看看PanelGrid的功能。

（1）PanelGrid的内部是由一个个Cell组件组成，Cell里可以放置其它组件，PanelGrid的column属性用于设置PanelGrid的列数，我们可以通过设置Cell的colspan和rowspan属性可以进行列或行的合并，当然我们可以不使用Cell作为中间层而直接把其它组件放入PanelGrid中，同样能起到按照PanelGrid指定的列数进行排列的效果，不过这样做就无法进行行或列的合并。下面做个小例子看看效果：

（2）运行时效果：

（3）标签代码：

<layout:panelGrid columns="4">
  <layout:cell colspan="1" rowspan="1" style="width: 65px;background-color:red">2</layout:cell>
  <layout:cell colspan="2" rowspan="1" style="width: 66px;background-color:blue">3</layout:cell>
  <layout:cell colspan="1" rowspan="3" style="width: 66px;background-color:green">3</layout:cell>
  <layout:cell colspan="1" rowspan="1" style="width: 65px;background-color:yellow">2</layout:cell>
  <layout:cell colspan="1" rowspan="1" style="width: 66px;background-color:pink">3</layout:cell>
  <layout:cell colspan="1" rowspan="2" style="width: 65px;background-color:black">2</layout:cell>
  <w:timeField value="12:00AM"></w:timeField>
  <layout:cell colspan="1" rowspan="1" style="width: 65px;background-color:orange">2</layout:cell>
</layout:panelGrid>

	说明PanelGrid有4列
	说明该Cell占用2列
	说明该Cell占用3行
	说明PanelGrid支持非Cell组件

标签布局在桌面UI应用程序中是一种很常用的布局，例如在FireFox浏览器打开多个分页的情况下，分页就是处于标签布局容器中，我们可以通过点击分页头进行分页的切换显示，这样即节省空间有可以方便地进行切换选择，下面演示一个例子。

（1）向编辑页面拖入一个TabLayout，然后向TabLayout中拖入“分页容器”Panel，在使用ApusicStudio进行Panel拖入操作时应该注意要将Panel拖置蓝色的标签栏，这样才能保证拖入的Panel成为分页容器：

（2）查看运行效果：

（3）标签代码很简单：

<layout:tabLayout width="236" height="177">
  <layout:panel title="Tag1" collapsible="true">
    <w:textArea width="229" height="173" value="hello world!"></w:textArea>
  </layout:panel>
  <layout:panel title="Tag2">
    <w:calcNumberField></w:calcNumberField>
  </layout:panel>
  <layout:panel title="Tag3">
    <w:dateField></w:dateField>
  </layout:panel>
</layout:tabLayout>

表格布局这是AOM2.0加入的类似PanelGrid的一种布局，PanelGrid严格上讲不是布局而是一种特殊的Panel容器。

（1）设计模式：

（2）运行效果：

（3）标签代码，与PanelGrid类似，只是子容器为Panel：

<layout:tableLayout width="286" height="264" columns="2">
  <layout:panel header="false" width="129" height="61">
    <h:graphicImage url="/cs.jpg"></h:graphicImage>
  </layout:panel>
  <layout:panel rowspan="2" width="128" height="140" collapsible="true">TableLayout</layout:panel>
  <layout:panel header="false" width="131" height="61">
    <h:graphicImage url="/sc.jpg"></h:graphicImage>
  </layout:panel>
  <layout:panel colspan="2" height="86" header="false" width="269">
    <w:simpleHtmlEditor enableAlignments="false" enableLinks="false" 
                        enableLists="false" enableFormat="false" 
                        enableFontSize="false" width="269" height="85">
    </w:simpleHtmlEditor>
  </layout:panel>
</layout:tableLayout>