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.  

                    onclick="#{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!