OperaMasks Layout Demo
OperaMasks Layout Demo 是用AOM的layout组件库实现的布局场景的示例集合。其中包括常用布局组件borderLayout、accordionLayout、cardLayout、tabLayout、panel、window、panelGrid等的单独应用示例和这些组件的嵌套使用场景，以及tree、dataGrid在这些组件中的使用场景，共提供了30余种常见页面布局的解决方案。为了响应实际需求，我们对每一种布局都提供了较为真实的应用场景。
OperaMasks Layout Demo 展示了AOM常用布局组件强大的布局能力，也是常用布局场景的最佳布局实践。我们针对每个示例都提供在线体验和查看源码功能：在线体验可查看示例对应的真实布局场景；查看源码提供示例的所有源代码（包括页面源文件和Managed Bean源文件），其中核心代码均添加相应注释，方便用户快速找到符合需求的代码。为了达到较好的查看效果，请使用1024x768或者更高分辨率浏览本示例。
为了方便用户使用，我们将这些示例分为4个大类，分别是页面框架布局（页面的顶层布局场景）、组件布局场景（AOM单个布局组件使用）、 嵌套布局场景（AOM布局组件嵌套使用）、综合布局场景（多种布局混合使用）。各个分类示例列表如下：
说明：如果想把示例的页面代码直接拷贝使用，需要先在工程的web.xml中作如下配置（以防止facelets把注释当作组件来解析）：
<context-param>
<param-name>facelets.SKIP_COMMENTS</param-name>
<param-value>true</param-value>
</context-param>
<param-name>facelets.SKIP_COMMENTS</param-name>
<param-value>true</param-value>
</context-param>
页面框架布局
组件布局场景
borderLayout使用——系统主界面
tabLayout使用——页签式信息展示
静态accordionLayout——静态抽屉式导航菜单
动态accordionLayout——动态抽屉式导航菜单
panelGrid使用——注册界面
window使用——信息提示窗口
tabLayout使用——页签式信息展示
静态accordionLayout——静态抽屉式导航菜单
动态accordionLayout——动态抽屉式导航菜单
panelGrid使用——注册界面
window使用——信息提示窗口
嵌套布局场景
borderLayout嵌套accordionLayout——包含抽屉式导航的系统主界面
borderLayout嵌套borderLayout——系统主界面
borderLayout嵌套静态tabLayout——多页签信息展示的系统主界面
borderLayout嵌套动态tabLayout——多页签信息展示的系统主界面
独立的panel中嵌套panelGrid——单据界面
tabLayout的panel中嵌套panelGrid——多页签展示单据界面
cardLayout的panel中嵌套panelGrid——注册界面
borderLayout的panel中嵌套panelGrid——包含单据页面的主界面
window中嵌套panelGrid——单据窗口
window中嵌套cardLayout——注册窗口
window中嵌套borderLayout——主界面窗口
window中嵌套tabLayout——多页签信息展示窗口
window中的iframe包含dataGrid——数据显示窗口
borderLayout的panel中放置静态树——包含静态树导航的系统主界面
borderLayout的panel中放置动态树——包含动态树导航的系统主界面
accordionLayout的panel中放置静态树——包含抽屉式静态树导航的系统主界面
accordionLayout的panel中放置动态树——包含抽屉式动态树导航的系统主界面
borderLayout的panel的iframe中包含dataGrid——包含数据显示的系统主界面
tabLayout的panel的iframe中包含dataGrid——多页签数据展示界面
独立的panel中放置dataGrid——数据展示界面
独立panel的iframe中包含dataGrid——数据展示界面
borderLayout嵌套borderLayout——系统主界面
borderLayout嵌套静态tabLayout——多页签信息展示的系统主界面
borderLayout嵌套动态tabLayout——多页签信息展示的系统主界面
独立的panel中嵌套panelGrid——单据界面
tabLayout的panel中嵌套panelGrid——多页签展示单据界面
cardLayout的panel中嵌套panelGrid——注册界面
borderLayout的panel中嵌套panelGrid——包含单据页面的主界面
window中嵌套panelGrid——单据窗口
window中嵌套cardLayout——注册窗口
window中嵌套borderLayout——主界面窗口
window中嵌套tabLayout——多页签信息展示窗口
window中的iframe包含dataGrid——数据显示窗口
borderLayout的panel中放置静态树——包含静态树导航的系统主界面
borderLayout的panel中放置动态树——包含动态树导航的系统主界面
accordionLayout的panel中放置静态树——包含抽屉式静态树导航的系统主界面
accordionLayout的panel中放置动态树——包含抽屉式动态树导航的系统主界面
borderLayout的panel的iframe中包含dataGrid——包含数据显示的系统主界面
tabLayout的panel的iframe中包含dataGrid——多页签数据展示界面
独立的panel中放置dataGrid——数据展示界面
独立panel的iframe中包含dataGrid——数据展示界面
综合布局场景
本示例布局是一块固定大小的区域居中显示，区域四周会随浏览器窗口的大小调整，但区域本身不发生变化。使用layout:panel组件实现，panel的高宽设定为一固定区域，通过设置panel的top,left外间距实现随四周边距浏览器窗口的大小变化但panel区域始终居中显示。本示例以登录界面为例说明这类布局场景的最佳做法。
本示例布局是区域四周的边距固定不变，区域本身随浏览器窗口的大小调整。使用borderLayout组件嵌套实现，外层borderLayout设置fitToBody="true"随浏览器窗口自适应大小即中间区域自动扩充，内层borderLayout用margins="10
50 10 50"设置四周边距实现四周区域尺寸固定。本示例以系统主界面为例说明这类布局场景的最佳做法。
本示例布局是常见的页面内容分区显示。使用borderLayout组件布局，可分north,south,center,west,east五个区域分别显示内容。本示例以系统主界面为例说明这类布局场景的最佳做法。
本示例布局是常见的多页签信息展示。使用tabLayout组件实现多页签信息展示，示例演示了tabLayout组件可根据需要放置在任何位置。本示例以页签式信息展示为例说明这类布局场景的最佳做法。
本示例布局是静态抽屉式导航菜单。borderLayout组件的west区域嵌套accordionLayout组件实现抽屉式布局，在accordionLayout组件的panel中使用outputLink实现导航，borderLayout组件的center区域显示导航内容。本示例以静态抽屉式导航菜单为例说明这类布局场景的最佳做法。
本示例布局是动态抽屉式导航菜单。borderLayout组件的west区域嵌套accordionLayout组件实现抽屉式布局，在accordionLayout组件的panel中使用outputLink实现导航，borderLayout组件的center区域显示导航内容。accordionLayout组件的panel和panel中的outputLink是根据登录用户的不同权限选择性显示的，组件和权限的内容从xml配置文件中读取。本示例以动态抽屉式导航菜单为例说明这类布局场景的最佳做法。
本示例布局是弹出窗口提示信息。使用layout:window组件显示窗口信息，点击按钮触发window打开。本示例以信息提示窗口为例说明这类布局场景的最佳做法。
本示例布局是抽屉式导航菜单。borderLayout组件的west区域嵌套accordionLayout组件实现抽屉式布局，在accordionLayout组件的panel中使用outputLink实现导航，borderLayout组件的center区域显示导航内容。本示例以包含静态抽屉式导航菜单的系统主界面为例说明这类布局场景的最佳做法。
本示例布局是页面内容分区显示。使用borderLayout组件嵌套实现，外层borderLayout分north,south,west,center四个区域，内层borderLayout又将center分为上下两部分显示。本示例以系统主界面为例说明这类布局场景的最佳做法。
本示例布局是主界面上的多页签信息显示。在borderLayout组件的center区域嵌套tabLayout实现。本示例以包含多页签信息显示的系统主界面为例说明这类布局场景的最佳做法。
本示例布局是主界面上的多页签信息显示。在borderLayout组件的center区域嵌套tabLayout实现多页签信息显示，west区域的树结点单击触发动态增加相应的页签。本示例以包含多页签信息显示的系统主界面为例说明这类布局场景的最佳做法。
本示例布局是表单页面。在panel中嵌套panelGrid组件实现表格式布局，使表单页面整齐有序。本示例以单据界面为例说明这类布局场景的最佳做法。
本示例布局是多个单据页面分页签展示。在tabLayout的多个panel中嵌套panelGrid组件实现的表格式布局。本示例以多页签展示单据界面为例说明这类布局场景的最佳做法。
本示例布局是分步骤展示表单页面。在cardLayout的多个panel中嵌套panelGrid组件实现的表格式布局。本示例以注册界面为例说明这类布局场景的最佳做法。
本示例布局是表单布局放置在主界面上的某一区域。在borderLayout的center区域嵌套panelGrid组件实现的表格式布局。本示例以包含单据界面的主界面为例说明这类布局场景的最佳做法。
本示例布局是表单页面放置在弹出的窗口中。在layout:window中嵌套panelGrid组件实现的表格式布局，点击按钮触发window打开显示表单页面。本示例以单据窗口为例说明这类布局场景的最佳做法。
本示例布局是在弹出的窗口中分步骤展示表单页面。在layout:window中嵌套cardLayout组件实现，点击按钮触发window打开显示cardLayout分步骤操作。本示例以注册窗口为例说明这类布局场景的最佳做法。
本示例布局是在弹出的窗口页面上分区显示内容。在layout:window中嵌套borderLayout组件实现，borderLayout组件仍可分north,south,center,west,east五个区域分别显示内容，点击按钮触发window打开显示内容。本示例以主界面窗口为例说明这类布局场景的最佳做法。
本示例布局是在弹出的窗口中分多页签展示信息。在layout:window中嵌套tabLayout组件实现分多页签展示信息，点击按钮触发window打开显示内容。本示例以多页签信息展示窗口为例说明这类布局场景的最佳做法。
本示例布局是在弹出的窗口中显示表格数据。在layout:window的iframe中载入包含dataGrid组件实现的表格式数据展现页面，点击按钮触发window打开显示数据信息。本示例以数据显示窗口为例说明这类布局场景的最佳做法。
本示例布局是在主界面上展现静态树导航。在borderLayout的west区域嵌套静态树实现导航，center区域显示导航内容。本示例以包含静态树导航的主界面为例说明这类布局场景的最佳做法。
本示例布局是在主界面上展现动态树导航。在borderLayout的west区域嵌套动态树实现导航，center区域显示导航内容，导航树根据登录用户的权限选择性生成，树和权限的内容从xml配置文件中读取。本示例以包含动态树导航的主界面为例说明这类布局场景的最佳做法。
本示例布局是在主界面上展现抽屉式布局的静态树导航。在borderLayout的west区域嵌套accordionLayout实现抽屉式布局，在accordionLayout的panel中放置静态树实现导航，borderLayout的center区域显示导航内容。本示例以包含静态树导航的主界面为例说明这类布局场景的最佳做法。
本示例布局是在主界面上展现抽屉式布局的动态树导航。在borderLayout的west区域嵌套accordionLayout实现抽屉式布局，在accordionLayout的panel中放置动态树实现导航，导航树根据登录用户的权限选择性生成，树和权限的内容从xml配置文件中读取，borderLayout的center区域显示导航内容。本示例以包含动态树导航的主界面为例说明这类布局场景的最佳做法。
本示例布局是在主界面中展示表格数据。在borderLayout布局的center区域用iframe导入包含dataGrid组件实现的表格式数据展现页面。本示例以主界面为例说明这类布局场景的最佳做法。
本示例布局是在在多个页签中展示表格数据。在tabLayout组件的多个panel中用iframe导入包含dataGrid组件实现的表格式数据展现页面。本示例以多页签数据展示界面为例说明这类布局场景的最佳做法。
本示例布局是在页面展示表格数据。在独立的panel中放置dataGrid组件实现表格式数据展现。本示例以数据展示界面为例说明这类布局场景的最佳做法。
本示例布局是在页面展示表格数据。在独立的panel中用iframe导入包含dataGrid组件实现的表格式数据展现页面。本示例以数据展示界面为例说明这类布局场景的最佳做法。
本示例布局为多种布局嵌套的综合场景，包括导航树，单据界面，查询界面，弹出窗口等。使用组件涵盖borderLayout,panelGrid,dataGrid,tree等。本示例以费用申请界面为例说明这类布局场景的最佳做法。