layout:cardLayout是一种卡片布局。
表 31.11. 构件信息
| Component Type | org.operamasks.faces.component.layout.impl.UICardLayout |
| Component Family | org.operamasks.faces.component.layout.impl.UIPanel |
| Component Class | org.operamasks.faces.component.layout.impl.UICardLayout |
| Tag Class | org.operamasks.faces.webapp.layout.UICardLayoutTag |
| Renderer Type | org.operamasks.faces.component.layout.impl.UICardLayout |
| Renderer Class(AJAX) | org.operamasks.faces.render.layout.ajax.AjaxCardLayoutRenderer |
+java.lang.Object
++javax.faces.component.UIComponent
+++javax.faces.component.UIComponentBase
++++org.operamasks.faces.component.layout.base.UIPanelBase
+++++org.operamasks.faces.component.layout.impl.UIPanel
++++++org.operamasks.faces.component.layout.impl.UILayout
+++++++org.operamasks.faces.component.layout.base.UICardLayoutBase
++++++++org.operamasks.faces.component.layout.impl.UICardLayout
表 31.12. 属性
| activeItem | 定义类 | org.operamasks.faces.component.layout.impl.UICardLayout | ||
| 类型 | javax.el.ValueExpression(java.lang.Integer) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 当前激活的卡片 | ||||
| animCollapse | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 在构件收缩时是否显示动画效果 | ||||
| animFloat | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 是否允许面板收缩/展开的激活. 当点击一个收缩区域的bar时，这个区域的面板就会显示成一个浮动的面板，并且当鼠标移开该区域（或者在autoHide被设置成false时，点击面板外的地方）时，面板会收缩。把animFloat设置成false可以阻止面板收缩/展开的激活 (默认值：true) | ||||
| autoHeight | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 是否允许构件自适应高度(默认值： false). | ||||
| autoHide | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 鼠标移开浮动面板时面板是否自动收缩 (默认值：true) | ||||
| autoWidth | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 是否允许构件自适应宽度 (默认值：false) | ||||
| binding | 定义类 | javax.faces.component.UIComponentBase | ||
| 类型 | javax.el.ValueExpression(javax.faces.component.UIComponent) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 一个值表达式，用于把该组件链接到一个ManagedBean的某个属性。 | ||||
| bodyStyle | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.String) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 容器内元素使用的CSS样式 | ||||
| border | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 是否显示面板body元素的边框(默认值：true)。默认情况下，边框是一个2px宽的内嵌边框，但当bodyBorder属性被设置成false时可以进一步修改 | ||||
| closable | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 作为TabLayout的一页时，这一页是否可以关闭 | ||||
| cmargins | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.String) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 区域内收缩的构件的margins设置， 格式为： {left: (left margin), top: (top margin), right: (right margin), bottom: (bottom margin)} | ||||
| collapseMode | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.String) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 面板的收缩模式,支持的属性值有mini,此属性只在borderLayout中起效 | ||||
| collapsed | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 构件的初始状态是否是收缩的(默认值：false) | ||||
| collapsible | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 构件是否可以收缩和展开(默认值：false) | ||||
| colspan | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Integer) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 构件占据的列数 | ||||
| columnWidth | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Float) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 构件宽度的百分比小数值 | ||||
| deferredRender | 定义类 | org.operamasks.faces.component.layout.impl.UICardLayout | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 是否在卡片激活时渲染 | ||||
| fit | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 构件是否充满父容器 | ||||
| floatable | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 是否允许面板漂浮 (默认值：true) | ||||
| floating | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 面板是否漂浮 (默认值：false) | ||||
| frame | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 如何渲染面板边框. 为True时用用户定义的圆角边框渲染面板, 为false时用1px宽的直角边框渲染面板 (默认值：false) | ||||
| header | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 是否为容器生成header。如果没有设置header属性，而设置了title属性，header会自动生成；如果设置了title属性，但header属性设置为false，则不会生成header | ||||
| headerAsText | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 是否在header中显示title(默认值： true). | ||||
| height | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.String) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 构件高度的像素值 (默认是auto) | ||||
| hideBorders | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 是否隐藏边框。为true时隐藏内部构件的边框, 为false时适应内部构件的边框设置 (默认值：false). | ||||
| hideCollapseTool | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 是否显示收缩/折叠按钮(默认false), 仅在当collapsible属性设置为true时生效 | ||||
| iconCls | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.String) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| title前的小图标的CSS Class名称, 比如:"myIcon", 而myIcon的内容可以定义为：.myIcon {background: url(myIcon.gif);} | ||||
| id | 定义类 | javax.faces.component.UIComponentBase | ||
| 类型 | java.lang.String | |||
| 是否必须 | 否 | 延时求值 | 否 | |
| 这个组件的组件标识符。这个值在最近的命名容器类型的父组件范围内，必须是唯一的。 | ||||
| initConfig | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Object) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 初始化配置对象。取值可以是ExtConfig对象, 或String，表示一个JavaScript对象，比如:{"a": "avalue", "b":true, "c":200, "d":"var::dvalue"} 如果取值是表示一个JavaScript对象的String，则key必须用(双）引号包起来，比如"a"。 | ||||
| jsvar | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.String) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 客户端脚本使用的javascript变量名 | ||||
| margins | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.String) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 设置构件的margin值，格式为 {left: (left margin), top: (top margin), right: (right margin), bottom: (bottom margin)} | ||||
| maskDisabled | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 在面板disabled时，是否用直观的方式标识 (默认值：true) | ||||
| maxSize | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Integer) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 构件的最大Size | ||||
| minSize | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Integer) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 构件的最小Size | ||||
| onactivate | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.String) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 构件激活时执行的JavaScript代码 | ||||
| onbeforeexpand | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.String) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 构件展开前执行的JavaScript代码 | ||||
| region | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.String) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 该区域的布局位置，合法值有： north、south、east、west、center | ||||
| rendered | 定义类 | javax.faces.component.UIComponentBase | ||
| 类型 | boolean(boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 一个标志，指出该组件是否要在任何随后的form提交过程中被渲染或处理。 这个属性的缺省值是true。 | ||||
| rowspan | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Integer) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 构件占据的行数 | ||||
| shadow | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 构件是否显示阴影效果.该属性仅在floating属性被设置成true时有效 | ||||
| shadowOffset | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Integer) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 阴影偏离的像素数 (默认值：4).该属性仅在floating属性被设置成true时有效 | ||||
| shim | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 是否在需要的时候enable内框架边界 (默认值：true). 该属性仅在floating属性被设置成true时有效 | ||||
| showTitleOnCollapse | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 在构件收缩后是否显示标题 (默认值：false). 注意：该属性仅在region="north"或者region="south"，属性被设置成true时有效 | ||||
| split | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 是否在该区域和它的邻近区域之间显示分隔条 (默认值：false). 当该属性被设置成true时，一般要设置minSize和maxSize属性 | ||||
| style | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.String) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 构件渲染时应用到构件的CSS风格，对应于元素的style属性 | ||||
| styleClass | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.String) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 空格分隔的CSS风格类名列表，渲染时作为元素的"class"属性 | ||||
| title | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.String) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 在构件的header上显示的标题 | ||||
| titleCollapse | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Boolean) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 是否允许在单击构件的header时收缩或展开构件 (默认值：false) | ||||
| toolBarPosition | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.String) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 内置工具栏的位置，可能的取值为"top","bottom",或"both"。 | ||||
| width | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.String) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 构件宽度的像素值 (默认是auto) | ||||
| x | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Integer) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 构件左边界距离父容器左边界的像素数 | ||||
| y | 定义类 | org.operamasks.faces.component.layout.impl.UIPanel | ||
| 类型 | javax.el.ValueExpression(java.lang.Integer) | |||
| 是否必须 | 否 | 延时求值 | 是 | |
| 构件上边界距离父容器上边界的像素数 | ||||
表 31.13. 常用方法
| collapse | 方法签名 | public void collapse(boolean animate) |
| 参数说明 | animate: true表示以动画形式收缩，false表示没有动画过程，收缩过程瞬间完成 | |
| 返回值 | 无返回值 | |
| 方法描述 | 收缩Panel | |
| expand | 方法签名 | public void expand(boolean animate) |
| 参数说明 | animate: true表示以动画形式扩展，false表示没有动画过程，扩展过程瞬间完成 | |
| 返回值 | 无返回值 | |
| 方法描述 | 扩展Panel | |
| activeItem | 方法签名 | public void activeItem(java.lang.Integer item) |
| 参数说明 | item: 要激活的页的索引，从0开始 | |
| 返回值 | 无返回值 | |
| 方法描述 | 激活指定的页，使它显示在最前面 |
下面的例子是一个简单的cardLayout布局。
<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="pre" />
</layout:cell>
<layout:cell colspan="1" rowspan="1">
<w:button value="下一步" id="next" />
</layout:cell>
<layout:cell colspan="1" rowspan="1">
<w:button value="完成" id="finish" />
</layout:cell>
</layout:panelGrid>
</w:form>