Practical_RichFaces要点Chapter09

Chapter09      Menu Components

 

1.      <rich:dropDownMenu>

1)      <rich:dropDownMenu> 生成下拉菜单。

2)      每一个 menu item 都可以设定 action 或 actionListener 以供 Ajax 调用。 reRender 属性定义需要被刷新的控件。

3)      <rich:toolBar> 是装载下拉菜单的容器。

4)      <rich:dropDownMenu> 不提供其自己的 form ，所以必须置于 form 里才能使用。

5)      可以使用 <rich:dropDownMenu> 的 value 属性或者 <f:facet name=”label”> 来指定菜单的名称。

6)      submitMode 属性控制提交模式，三种选择：

l        Server （默认）：使用常规的表单提交 Request ；

l        Ajax ：使用 Ajax 提交；

l        None ： action 和 actionListener 都被忽略掉， menu item 不触发任何提交，所有行为都取决于嵌于 item 内部的控件。

如果在 <rich:dropDownMenu> 设置该属性，则其内部的所有 menuItem 也将继承其属性值。

7)      <rich:menuItem> 也提供了 onXXXX 属性，例如 onselect 、 onclick 、 oncomplete 等，用于调用自定义 JavaScript 代码（如显示 modalPanel 等）。

 

 

2.      <rich:contextMenu>

1)      event 属性用于设定引起 contextMenu 弹出的事件，比如 oncontextmenu 、 onclick 等，主要还是要看 <rich:contextMenu> 所服务的控件支持哪些 onXXXX 事件。

2)      submitMode 属性控制提交模式，三种选择：

l        Server （默认）：使用常规的表单提交 Request ；

l        Ajax ：使用 Ajax 提交；

l        None ： action 和 actionListener 都被忽略掉， menu item 不触发任何提交，所有行为都取决于嵌于 item 内部的控件。

如果在 <rich:contextMenu> 设置该属性，则其内部的所有 menuItem 也将继承其属性值。

3)      attachTo 属性用于指定将 contextMenu 指定给哪个控件。

4)      或是将 <rich:contextMenu> 直接置于某个控件体内，并将 attached 属性设为 true ，也可以实现以上效果。比如在表格中使用时，可以将 <rich:contextMenu> 直接放在 <rich:column> 中。

但应注意，根据用户指南提示， <rich:contextMenu> 应该放在 <h:outputText> 外面，或者为 <h:outputText> 设置 ID ，已实现正常使用。

5)      disableDefaultMenu 属性可以彻底禁用页面的默认右键菜单。

6)      可以在 menuItem 体内，使用 <f:setPropertyActionListener> 或 <a4j:actionparam> ，传递参数。

 

 

3.      <rich:contextMenu> 与 <rich:componentControl>

1)      可以用 <rich:componentControl> 来调用显示 contextMenu ，并传递参数，例如：

<rich:componentControl event="onRowClick" for="menu" operation="show">

<f:param value="#{air.name}" name="airlineName" />

</rich:componentControl>

2)      这时 <rich:contextMenu> 的 attached 属性应该设为 false 。

3)      通过 <f:param> 传递的参数，可以在 contextMenu 中使用，比如：

<rich:menuItem value="Select {airlineName} " actionListener="#{airlinesBean.select}">

</rich:menuItem>

              注意，这里用的是 {paramName} ，而 #{paramName} ，没有“ # ”。

 

 

4.      <rich:contextMenu> 与 <a4j:support>

1)      当需要动态的向 <rich:contextMenu> 传递参数的时候，尤其是在 dataTable 中的时候，有两种方法：

l      将 <rich:contextMenu> 放在 dataTable 体内，则 <rich:contextMenu> 可以直接使用 dataTable 的 var 属性；但局限性就是，必须置于 dataTable 体内；

l      另方法就是使用 <a4j:support> 。

2)      具体方法就是通过设定 <a4j:support> 的 event 属性，指定父控件的什么样的事件会弹出 contextMenu 。例如：

<a4j:form>

<rich:dataTable id="dtTable" value="#{dataTableTestBean.xcvrList}" var="xcvr" rows="15">

 

<rich:column>

<f:facet name="header">

<h:outputText value="Item Code"></h:outputText>

</f:facet>

<h:outputText value="#{xcvr.itemCode}"></h:outputText>

</rich:column>

 

<rich:column>

<f:facet name="header">

<h:outputText value="Market Name"></h:outputText>

</f:facet>

<h:outputText value="#{xcvr.marketName}"></h:outputText>

</rich:column>

 

<a4j:support event="onRowContextMenu" reRender="ctxMenu" oncomplete=" #{rich:component('ctxMenu')}.doShow(event,{}) " >

<f:setPropertyActionListener value="#{xcvr}" target="#{dataTableTestBean.selectedXcvr}"/>

</a4j:support>

 

</rich:dataTable>

 

<rich:contextMenu id="ctxMenu" submitMode="ajax" attached="false" disableDefaultMenu="true">

<rich:menuItem value="View #{dataTableTestBean.selectedXcvr.itemCode}" reRender="detailPanel" ajaxSingle="true" actionListener="#{dataTableTestBean.menuClicked}" oncomplete="#{rich:component('detailPanel')}.show()">

</rich:menuItem>

</rich:contextMenu>

</a4j:form>

 

 

5.      尚存疑问

1)      在使用 contextMenu 时，我曾想通过点击 menuItem 来弹出 modalPanel ，也确实成功了。但是问题是，只是隔次成功，换句话说，就是第一次成功、第二次失败、第三次成功、第四次失败……但奇怪的是，如果只是弹出菜单，而没有点击，则再次右键弹出时，就又成功了。

2)      失败的时候，连 actionListener 都不会执行， modalPanel 更是没有弹出。我换了好几种方法， dataTable 内外都试过了，均是如此。但如果去除要弹出modalPanel的代码，则一切恢复正常，actionListener每次也能正常运行。

3)      我在 JavaRanch 的论坛上，发了帖子，还在等待解答。

http://www.coderanch.com/t/449548/JSF/java/Trouble-with-ContextMenu-ModalPanel-RichFaces

 

Hi all,

I met some trouble when I used the RichFaces contextMenu and modalPanel together.

I hope to show the modalPanel by clicking the context menu item.

For the first time I clicked the menu item, the modal was showed. However, the second time, the menu item even didn't execute. Then the third time, everything went well again. And then 4th time failed, 5th time succeeded, 6th time failed..., alternately.

Thus, 50% succeeded and 50% failed. It's too weird.

1.               <f:view>  

2.                   <a4j:form>  

3.                       <h:panelGroup id="panelGroup" >  

4.                           <h:outputText value="Right Click Me!" ></h:outputText>  

5.                       </h:panelGroup>  

6.         

7.                       <rich:contextMenu attachTo="panelGroup"  event="oncontextmenu"   

8.                           submitMode="ajax"  disableDefaultMenu="true" >  

9.                           <rich:menuItem value="try"   

10.                           oncomplete="#{rich:component('modalPanel')}.show()"   

11.                           actionListener="#{contextMenuTestBean.menuClicked}" ></rich:menuItem>  

12.                   </rich:contextMenu>  

13.               </a4j:form>  

14.     

15.               <rich:modalPanel id="modalPanel" >  

16.                   <f:facet name="header" >  

17.                       <h:outputText value="Modal Panel"  />  

18.                   </f:facet>  

19.                   <h:outputText value="Hello!"  />  

20.                   <a4j:commandLink value="Close"   

21.                       οnclick="#{rich:component('modalPanel')}.hide()" ></a4j:commandLink>  

22.               </rich:modalPanel>  

23.           </f:view>     

When I remove the code on line 10.

oncomplete="#{rich:component('modalPanel')}.show()"     

The actionListener of menuItem can be executed successfully every time.

Can anybody help to advise the reason?

Thanks in advance!