RichFaces Context menu is a component that allows to organize the hierarchical context menus similar to one that almost every desktop application has.

Context Menu can contain a set of Menu Items, Menu Groups and Menu Separators. Usage of these components are similar to usage in RichFaces Drop Down Menu.

Example

To call the menu - perform the right click on the picture

HideView Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
    <style>
    .cent{
        text-align:center;
    }
    .rich-menu-item{
        text-align:left;
    }
    .rich-menu-group{
        text-align:left;
    }
</style>
    <a4j:loadScript src="/scripts/picturesUtils.js"/>
    <h:panelGrid columns="1" columnClasses="cent">

            <h:panelGroup id="picture">
                <h:graphicImage value="/richfaces/jQuery/images/pic1.jpg" id="pic" style="border : 5px solid #E4EAEF"/>
                <rich:contextMenu event="oncontextmenu" attachTo="pic" submitMode="none">
                    <rich:menuItem value="Zoom In" onclick="enlarge('pic');" id="zin"></rich:menuItem>
                    <rich:menuItem value="Zoom Out" onclick="decrease('pic');" id="zout"></rich:menuItem>
                </rich:contextMenu>
            </h:panelGroup>

    </h:panelGrid>
</ui:composition>

<<Hide Source

In this example menu is just defined as nested to panelGroup with "picture" Id. You should be careful with such definitions, because on the client menu component searches for the DOM element with the client Id of the parent component on the server. If the component doesn't encode id on the client, it will be not found by the menu and menu will be attached to its closest parent in a DOM tree. For example you should not define the menu as a child for images components.

Context menu itself is an invisible panel that appears after a particular client side event (onmouseover, onclick etc) occured on a parent component. The event is defined with an event attribute.

Note: As you can see from the first example the component could use "oncontextmenu" event to call the Menu on right click event. But in this case the component should be called via componentControl component (as it is shown at the second example) rather than using a4j:support style. If a4j:support style is used then many of the components don't encode this event and also in case of support-like definition the component will not work properly.

Other usefull attributes are:

• disableDefaultMenu - if it is true, the event defined on the menu will not be handled by other client handlers except context menu handler. You may see on the first example that a standard browser menu isn't called after right click.
• attached - if it is true, the menu is attached to parent component. In other case it should be called via JS API (using componentControl)

Unlike dropDownMenu, contextMenu has no representation element, and has strong right-click support.

And the main difference from drop down menu is that a context menu could be defined once on the page and used by different components. Single instance of the menu will be created and shared between the components.

To customize shared menu for every component, macrosubstitutions could be used. ComponentControl component could be used to call the instance of the menu for the particular component. f:param components could be used to add parameters to menu.

Example

To call the menu - click any car row.

Make Model Price Toyota Avalon 29202 Ford Taurus 51255 Toyota Avalon 49071 Toyota 4-Runner 50204 Chevrolet Malibu 23898 Ford Taurus 37141 Chevrolet S-10 49149 Chevrolet S-10 23093 GMC Sierra 38995 Toyota 4-Runner 40070

Last Menu Action

HideView Source

<f:subview xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich" id="subview"> 
    <style>
    .cur{
        cursor: pointer; 
    }
    .top{
        vertical-align: top;
    }
    </style>
    <h:form id="form">
        
        <rich:contextMenu attached="false" id="menu" submitMode="ajax">
            <rich:menuItem ajaxSingle="true">
                <b>{car} {model}</b> details
                <a4j:actionparam name="det" assignTo="#{ddmenu.current}" value="{car} {model} details"/>
            </rich:menuItem>
            <rich:menuGroup value="Actions">  
                <rich:menuItem ajaxSingle="true">
                    Put <b>{car} {model}</b> To Basket
                    <a4j:actionparam name="bask" assignTo="#{ddmenu.current}" value="Put {car} {model} To Basket"/>
                </rich:menuItem>
                <rich:menuItem value="Read Comments" ajaxSingle="true">
                    <a4j:actionparam name="bask" assignTo="#{ddmenu.current}" value="Read Comments"/>
                </rich:menuItem>                
                <rich:menuItem ajaxSingle="true">
                    Go to <b>{car}</b> site
                    <a4j:actionparam name="bask" assignTo="#{ddmenu.current}" value="Go to {car} site"/>
                </rich:menuItem>
            </rich:menuGroup>
        </rich:contextMenu> 

        <h:panelGrid columns="2" columnClasses="top, top">

        <rich:dataTable value="#{dataTableScrollerBean.tenRandomCars}" var="car" id="table"
        onRowMouseOver="this.style.backgroundColor='#F8F8F8'"
        onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'" rowClasses="cur">
            <rich:column>
                <f:facet name="header">
                    Make
                </f:facet>
                    <h:outputText value="#{car.make}"/>
            </rich:column>
            <rich:column>
                <f:facet name="header">
                    Model
                </f:facet>
                    <h:outputText value="#{car.model}"/>
            </rich:column>
            <rich:column>
                <f:facet name="header">
                    Price
                </f:facet>
                    <h:outputText value="#{car.price}" />
            </rich:column>

            <rich:componentControl event="onRowClick" for="menu" operation="show">
                <f:param value="#{car.model}" name="model"/>
                <f:param value="#{car.make}" name="car"/>
            </rich:componentControl>

        </rich:dataTable>
    
        <a4j:outputPanel ajaxRendered="true">
            <rich:panel>
                <f:facet name="header">Last Menu Action</f:facet>
                <h:outputText value="#{ddmenu.current}"></h:outputText>
            </rich:panel>       
        </a4j:outputPanel>
        </h:panelGrid>
    </h:form>           
</f:subview>

<<Hide Source

Pay your attention to the source code. Inside the table you may see component control that calls the menu. Menu recreated after every call on the client and new {car} and {model} values are inserted into the menu.

Look through componentControl demo page for more information.