aom布局

1.常用布局1: layout:tableLayout 表格布局

<layout:tableLayout height="400" width="500" columns="2" border="false"> 
  <layout:panel rowspan="1" colspan="2" width="300" height="200" header="false">cell1</layout:panel>
  <layout:panel rowspan="1" header="false">cell2</layout:panel> 
  <layout:panel rowspan="1" header="false">cell3</layout:panel> 
</layout:tableLayout>

 

2.常用布局2: layout:borderLayout 东南西北中布局(常只用的region=center)

<layout:borderLayout fitToBody="true"> 
  <layout:panel region="east" width="100" title="east" split="true" collapsible="true"> east </layout:panel> 
  <layout:panel region="north" height="100" title="north"> north </layout:panel> 
  <layout:panel region="west" width="100" title="west" split="true" collapsible="true"> west </layout:panel> 
  <layout:panel region="center" title="center"> center </layout:panel> 
  <layout:panel region="south" height="100" title="south"> south </layout:panel> 
</layout:borderLayout>

 

上面两种布局各有千秋，第一种是表格布局，类似是在用<table>来布局，第二种则是类似于Swing中的BorderLayout布局, 把界面分成东南西北中五个部分。
有时大多只用到其中的一部分，那只需设置region="center"就行了。
通常情况下第二种布局会比较多，因为它的扩展性比较好，比如以后要在界面上加一个域，那只需要再加一个 region就好了。并且各个区域的伸缩效果比较好。

 

3.常用布局3：layout:tabLayout  标签式布局

<layout:tabLayout height="400"> 
  <layout:panel title="tab1">tab1</layout:panel> 
  <layout:panel title="tab2">tab2</layout:panel> 
  <layout:panel title="tab3">tab3</layout:panel> 
</layout:tabLayout>

 

 TabLayout是一个标签页面板,这也是常用的布局，通常情况下，各个tab中可以放入一个<w:iframe>来引用别的视图,如下
<w:iframe style="width: 100%; height: 100%"  frameborder="no" id="formStylerame" src="xxxx.faces" />
这个布局是可以放在前面两个布局中的，这个根据具体的需要来布置。

===============================
从上面三个布局来看，layout:panel是配合布局标签来用的，就像是table中的tr,td的功能

4.常用布局4：layout:window 弹出式布局
渲染成一个窗口，常用于弹出窗口或者弹出面板

5.常用布局5：layout:panelGrid 

<layout:panelGrid columns="2" style="width:100%">
<layout:cell style="padding-right: 3px;" align="right">
aaaa
</layout:cell> 
<layout:cell style="padding-right: 3px;" align="right">
aaaa
</layout:cell>
</layout:panelGrid>

 
PanelGrid组件相当于HTML的表格

================================
layout:panelGrid  通常放在前面四种布局中使用。
Cell是PanelGrid组件的一个单元格，必须作为PanelGrid的子元素才能使用
=================================

 

6.常用布局6：layout:gridLayout

 

<layout:gridLayout columns="2" rules="rows" rowClasses="row1,row2"> 
  <layout:faceletSet id="contentDemo"> 
    <layout:facelet name="cell1">Replaced Cell 1</layout:facelet> 
    <layout:facelet name="cell2">Replaced Cell 2</layout:facelet> 
    <layout:facelet name="cell3">Replaced Cell 3</layout:facelet> 
    <layout:facelet name="cell4">Replaced Cell 4</layout:facelet> 
    <layout:facelet name="cell5">Replaced Cell 5</layout:facelet> 
    <layout:facelet name="cell6">Replaced Cell 6</layout:facelet> 
  </layout:faceletSet> 
</layout:gridLayout>

 

layout:gridLayout与h:panelGrid类似，可以把包含其中的子元素按照一定规则放到网格中。但是GridLayout可以把任意复杂的内容放到网格中，每一块复杂内容由Facelet提供，因此解决了h:panelGrid的两个限制：一是每个单元格只能放一个组件；二是单元格中内容不能来自于外部文件
===================================
PanelGrid组件与GridLayout组件功能相似，各属性也很相似。但是请记住它们的不同之处：GridLayout组件的每个小格内容需用Facelet提供，所以可以使用FaceletSet；PanelGrid组件可由多种组件提供内容，但无法渲染FaceletSet
===================================