ADF_010：ADF Layout 组件

1. ADF Layout 组件按使用功能可以划分为：
（1）panelFormLayout：按行列排列项目。
（2）panelSplitter，panelStretchLayout：自动伸缩组件。
（3）panelSplitter，panelAccordion：带折叠的
（4）panelTabbed：tabs
（5）showDetail：Hide and display groups of content
（6）panelGroupLayout：Enable automatic scrollbars in your pages, and arrange items horizontally or vertically
（7）panelCollection：Add menus, toolbars, and status bars to data aggregation components such as tables, trees, and tree tables
（8）panelHeader，showDetailHeader：Create titled sections and subsections
（9）group：Group semantically related components
（10）panelList，panelBox：Create styled lists and content boxes
（11）panelBorderLayout：Place items in fixed, peripheral areas around a central area
（12）spacer，separator：Add blank space and divider lines.

2. 如何自适应浏览器窗口大小？
使用ADF产生的所有JSF页面，都有以下Tag：
<f:view>
<af:document..>
<af:form..></af:form>
</af:document>
</f:view>

默认情况下，af:document 的属性maximized = true。因此，页面内容会自动随着浏览器窗口大小改变。

为了使组件能够自适应浏览器窗口大小，首先需要放置根一级的可伸缩的布局组件。
以下组件可以根据父容器的大小自动伸缩（加黑体的还可以伸缩其子组件）：

• Decorative Box
• Panel Accordion
• Panel Box （当 type="stretch" 或"default" ）
• Panel Collection
• Panel Dashboard
• Panel Group Layout （当 layout="scroll" 或"vertical" ）
• Panel Splitter
• Panel Stretch Layout
• Panel Tabbed

对于这些组件，不要设置其宽度、高度的百分比，设置了反而不好。

以下组件不能根据父容器的大小自动伸缩：

• Panel Border Layout
• Panel Box （当 type="flow" 或"vertical" ）
• Panel Form Layout
• Panel Group Layout （当 layout="default" 或"horizontal" ）
• Panel Header
• Panel Label and Message
• Panel List

如果你必须使用一个不能自动伸缩的容器，但又想达到自动伸缩的效果，可以为该容器套上一个可以自动伸缩的容器，如Panel Group Layout （当 layout="scroll" 或"vertical" ）。

最佳实践：
（1）布局时，根容器要可以自动伸缩。
（2）无法伸缩的容器，可以考虑外套一个Panel Group Layout （当 layout="scroll" 或"vertical" ）。