JSF Chapter06

.      <rich:panel>

1） 任何控件都可以被置于 <rich:panel> 控件中；

2） 可以通过 header 属性或者 <f:facet name=”header”> 给 <rich:panel> 添加一个头部。

 

 

2.      <rich:simpleTogglePanel>

1） 与 <rich:panel> 相似，但可以被展开或收起；

2） switchType 属性具有三种切换模式可选：

l    Server ：也是默认模式，在展开或收敛时，会产生一个常规的页面提交（ process ），并且整个页面都会被刷新。每次只有一个 Panel 会被发送到 Client 端。

l    Ajax ：在展开或收敛时，会产生一个 Ajax Form 提交（ process ），只有当前 Panel 内的内容，以及 reRender 属性里的控件会被刷新。一次也只有一个 Panel 会被发送到 Client 端。

l    Client ：所有的 Panel 都会被预先 render 到 Client 端，切换时只是调用客户端 Javascript 代码，与 Server 不会产生交互。

3） 使用 opened 属性可以控制 Panel 初始的开启状态。该属性接受 EL 表达式。

4） 可以通过 label 属性，或者 <f:facet name=”label”> 添加头部。

 

 

3.      <rich:tabPanel> 和 <rich:tab>

1） <rich:tabPanel> 是用来装载多个 <rich:tab> 的容器；

2） <rich:tabPanel> 的 headerAlignment 属性可以控制 <rich:tab> 的对齐方式；

3） 可以通过 <f:facet name=”label”> 添加头部；

4） switchType 属性具有三种切换模式可选：

l    Server ：也是默认模式，在切换时，会产生一个常规的页面提交（ process ），并且整个页面都会被刷新。每次只有一个 Panel 会被发送到 Client 端。

l    Ajax ：在切换时，会产生一个 Ajax Form 提交（ process ），只有当前 Panel 内的内容，以及 reRender 属性里的控件会被刷新。一次也只有一个 Panel 会被发送到 Client 端。

l    Client ：所有的 Panel 都会被预先 render 到 Client 端，切换时只是调用客户端 Javascript 代码，与 Server 不会产生交互。

5） selectedTab 属性控制初始阶段哪个 tab 被选中，值是 tab 的 ID ；

 

【注意】关键是看form的位置，如果是form包含tabPanel，则Server/Ajax模式下切换tab的提交就会产生效果；如果是tabPanel的tab里面包含form，则切换tab不会产生提交的效果。


 

4.      <rich:panelBar> 和 <rich:panelBarItem>

1） 所有 Panel 的内容都被预先发送到了 Client 。因此，每当打开或关闭 Panel 的时候，只有 Browser 端产生变化，而并不会与 Server 交互；

2） 可以通过 <f:facet name=”label”> 添加头部；

3） selectedPanel 属性用于控制哪个 Panel 在初始就被选中了。

 

 

5.      <rich:panelMenu>

1） <rich:panelMenu> 也是一个容器类控件，可以装载任意多个 <rich:panelMenuItem> 和 <rich:panelGroup> 。

<rich:panelGroup> 也可以装载任意多个 <rich:panelMenuItem> 。

2） 每个 Group 和 Item 都分别有 action 和 actionListener 属性，可以将 action 或 actionListener 方法绑定其上；当 Group 或 Item 被选中点击的时候，相应方法也就会被调用了。可以使用 <f:param> 等方式为这些方法传递参数。

3） mode 和 expandMode 属性：

mode 属性，适用于 <rich:panelMenu> 、 <rich:panelMenuItem> 和 <rich:panelGroup> ，用来控制节点被点击时，表单提交的方式；

expandMode 属性，仅适用于 <rich:panelMenu> 和 <rich:panelGroup> ，用来控制 Menu 或 Group 在收放时，提交的方式。

两者都具有三种选择：

l    Server ：也是默认模式，在切换时，会产生一个常规的表单提交（ process ），并且整个页面都会被刷新。

l    Ajax ：在切换时，会产生一个 Ajax Form 提交（ process ），只有 reRender 属性里的控件会被刷新。

l    None ： action 和 actionListener 属性会被忽略掉， Item 不产生任何提交，具体会产生什么行为，完全由 Item 里内嵌的控件所决定。 Group 的展开和收敛动作完全基于 Client 端。

4） mode 和 expandMode 属性的设定都可以被子节点自动继承，除非手动更改子节点的相关属性。

5） expandSingle 属性默认为 false ，当设为 true 的时候，每次只有一个 Group 可以被展开。

6） disabled 属性用于禁用某一 Item 或 Group 。

 

 

6.      <rich:togglePanel>

1） 通过定义不同的 <f:facet> ， <rich:togglePanel> 可以包含多个 Panel ，而通过 stateOrder 属性定义切换的顺序。

2） switchType 属性具有三种切换模式可选：

l    Server ：也是默认模式，在切换时，会产生一个常规的页面提交（ process ），并且整个页面都会被刷新。每次只有一个 Panel 会被发送到 Client 端。

l    Ajax ： 在切换时，会产生一个 Ajax Form 提交（ process ），只有当前 Panel 内的内容，以及 reRender 属性里的控件会被刷新。一次也只有一个 Panel 会被发送到 Client 端。

l    Client ：所有的 Panel 都会被预先发送到 Client 端，切换时只是调用客户端 Javascript 代码，与 Server 不会产生交互。

3） stateOrder 定义切换的顺序，是一个以逗号分隔的 Panel ID 列表。

4） initialState 属性定义第一次显示时，哪个 facet 会被显示。

5） <rich:toggleControl> 的 switchToState 定义将要切换到的 facet ID 。

 

 

7.      <rich:toolBar>

1） <rich:toolBar> 在使用的时候会和 <rich:panel> 结合在一起。

2） 任何控件都可以被加入到 <rich:toolBar> 中。

3） itemSeparator 属性定义 <rich:toolBarGroup> 或控件间的间隔符号，自带五种选择：

none 、 line 、 square 、 disc 、 grid

4） 也可以自定义间隔符，用 <f:facet name=”itemSeparator”> 或者用 itemSeparator 属性直接引用 “/” 开头的资源路径。

5） location 属性可以定义 <rich:toolBarGroup> 的位置。

 

 

8.      <rich:separator> 和 <rich:spacer>

1） <rich:separator> 有五种线形（ lineType 属性）： beveled （默认）、 dotted 、 dashed 、 double 、 solid 。

2） <rich:spacer> 用 width 属性定义宽度。

 

 

9.      <rich:modalPanel>

1） 打开和关闭 modalPanel 的方法：

#{rich:component(‘modalPanal_id’)}.show()

#{rich:component(‘modalPanal_id’)}.hide()

可以将上面的方法加入到任意的 onXXXX 类属性中，以触发 Javascript 代码。

2） #{rich:component(‘id’)}.show() 中的 id 是 modalPanel 控件的 id ，也就是 Server 端 ID 。

3） 可以用 <f:facet name=”header”> 来增加头部。

4） 可以用 <f:facet name=”controls”> 来增加头部控制器。例如：

<f:facet name="controls">

<h:graphicImage value="/modalPanel/close.png" style="cursor:pointer"

onclick="#{rich:component('modalPanel')}.hide()" />

</f:facet>

5） 如果希望重新刷新 modalPanel 里面的控件，就必须将其控件的 ID 放入其他控件的 reRender 属性里。因为 modalPanel 可以被认为是同一个页面的一部分，除了具有开关功能外，所有的 render 规则和页面的其他部分一样。

6） 当需要在 modalPanel 中进行表单提交的时候，需要注意应该将一个独立的 form 放在 modalPanel 中。如果 modalPanel 中存在一个独立的 form ，那么它将不能被置于其他外部 form 中。相反，如果 modalPanel 中不存在一个独立的 form ，那么它似乎可以被置于其他外部 form 中。所遵循的原则就是 form 不能被嵌套。

【注意】

依照 RichFaces 官方使用指南，要想 modalPanel 总能正常工作，就不要将其至于原来的 <h:form> 中；对于需要在 modalPanel 进行表单提交的情况，应该在 modalPanel 中放置其自己的 <h:form> 。

7） 打开和关闭 modalPanel 的其他方法：

<rich:componentControl for=”modalPanel_id” attachTo=”commandLink_id”

operaton=”hide” event=”onclick”/>

事实上， <rich:componentControl> 是一个通用控件，用于根据特定的事件（如 onclick ），在任意控件上（如 modalPanel ），调用 JavaScript API （如 hide 或 show ）。

8） resizeable 和 moveable 属性用于定义 modalPanel 是否可以缩放尺寸和能否拖动。

9） 常用情况：

l    用于 Wizard ，和 <a4j:include> 、 <a4j:keepAlive> 配合使用；

l    用于表格行详情查看；

l    用于状态提示框：

<a4j:status id=”action status” onstart=” #{rich:component(‘modalPanal_id’)}.show()”

onstop=” #{rich:component(‘modalPanal_id’)}.hide()” />

 

 

10.  <rich:toolTip>

1） for 属性，用于指定显示 tip 的控件 ID ，也可以将 toolTip 直接放在控件体内而不加 for 属性。

2） mode 属性用于控制 toolTip 内容载入的方式，有两种选择：

l    Ajax ：当发生鼠标事件时， Ajax Request 被发送到 server ，并得到 toolTip 的内容。

l    Client ： toolTip 的内容会被预先 render 到 Client 。

3） 当 mode 属性为 ajax 时，可以定义一个 <f:facet name=”defaultContent”> 用于在 toolTip 未被传回 Client 之前的默认显示内容。比如：

<f:facet name="defaultContent">

Loading...

</f:facet>

4） 对于数据遍历类的控件（比如 <h:dataTable> ）， toolTip 的 mode 模式还不支持 Ajax ，只能使用 Client 。

5） followMouse 属性用于指定 toolTip 是否随鼠标指针一起移动。

6） showEvent 和 hideEvent 属性用于指定哪些事件会显示或隐藏 tooTip ：

onclick 、 ondblclick 、 onmouseover （默认）等。

from:http://blog.csdn.net/gengv/archive/2009/06/10/4259160.aspx