rich:contextMenu contextMenu

Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.ContextMenu
component-class | org.richfaces.component.html.ContextMenu
component-family | org.richfaces.ContextMenu
renderer-type | org.richfaces.DropDownMenuRenderer
tag-class | org.richfaces.taglib.ContextMenuTagHandler

## Creating the Component with a Page Tag

Here is a simple example as it could be used on a page:

Example:

    ...
    <h:panelGroup id="MyGroup">
            <!-- Panel Content-->
            <rich:contextMenu id="Menu1">
                    <!--Nested menu components-->
            </rich:contextMenu>
    </h:panelGroup>
    ...

## Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlContextMenu;
    ...
    HtmlContextMenu myContextMenu = new HtmlContextMenu();
    ...

## Details of Usage

<rich:contexMenu> is a support-like component. It is possible to define it as a child to some component and specify some events that trigger the menu.

The "attached" attribute defines the state of the component. If the value of the "attached" attribute is true, component is attached to parent component.

Example:

    ...
    <rich:dataTable id="table" value="#{bean.model}" var="row" rows="5">
            <rich:column>
    	      <f:facet name="header">
    	              <h:outputText value="Packages" />
    	      </f:facet>
    	      <h:outputText value="#{row.first}" />
                    <rich:contextMenu id="Menu1" attached="true">
    	             <rich:menuItem value="Edit package" action="#{bean.create}" />
    	             <rich:menuItem value="Delete package" action="#{bean.edit}" />
    	      </rich:contextMenu>
            </rich:column>
    </rich:dataTable>
    ...

If the value of the "attached" attribute is false, component activates by JavaScript API or with assistance of <rich:componentControl>.

Example:

    ...
    <rich:dataTable id="table" value="#{bean.model}" var="row" rows="5">
            <rich:column id="c1">
    	      <f:facet name="header">
    	              <h:outputText value="Packages" />
    	      </f:facet>
    	      <h:outputText value="#{row.first}" />
    	      <rich:componentControl event="oncontextmenu" attachTo="c1" for=":f:m" operation="Show">
    	              <f:param name="param" value="#{row.first}" />
    	      </rich:componentControl>
            </rich:column>
    </rich:dataTable>
    <rich:contextMenu id="Menu1" attached="false">
            <rich:menuItem value="Edit package" action="#{bean.edit}" />
            <rich:menuItem value="Delete package" action="#{bean.delete}" />
     </rich:contextMenu>
     ...

This is the result:

Using the "attached" attribute

The "event" attribute defines the event on the parent element that triggers the menu's appearance (oncontextmenu by default).

The <rich:contextMenu> "submitMode" attribute can be set to three possible parameters:

- Server (default)

Regular form submition request is used

- Ajax

Ajax submission is used for switching

- None

The "action" and "actionListener" item's attributes are ignored. Menu items don't fire any submits themselves. The behavior is fully defined by the components nested inside items.

Note:

As the <rich:contextMenu> component doesn't provide its own form, use it between <h:form> and </h:form> tags.

<rich:menuGroup>, <rich:menuItem> and <rich:menuSeparator> components is used as nested elements for <rich:contextMenu>.

## JavaScript API

JavaScript API

Function | Description | Apply to
--- | --- | ---
Hide() | Hide component or group | Component, group
Show() | Show component or group | Component, group

## Look-and-Feel Customization

For skinnability implementation, the components use a style class redefinition method. Default style classes are mapped on skin parameters.

There are two ways to redefine the appearance of all <rich:contextMenu> components at once:

- Redefine the corresponding skin parameters
- Add to your style sheets style classes used by a <rich:contextMenu> component

## Skin Parameters Redefinition

Skin parameters redefinition for a border

Skin parameters | CSS properties
--- | ---
panelBorderColor | border-color
additionalBackgroundColor | background-color

Skin parameters redefinition for a background

Skin parameters | CSS properties
--- | ---
additionalBackgroundColor | border-top-color
additionalBackgroundColor | border-left-color
additionalBackgroundColor | border-right-color

## Definition of Custom Style Classes

On the screenshot there are classes names that define styles for component elements.

Style classes

Classes names that define the contextMenu element

Class name | Description
--- | ---
rich-menu-list-border | Defines styles for borders
rich-menu-list-bg | Defines styles for a general background list
rich-menu-list-strut | Defines styles for a wrapper <div> element for a strut of a popup list

In order to redefine styles for all <rich:contextMenu> components on a page using CSS, it's enough to create classes with the same names and define necessary properties in them.

To change styles of particular <rich:contextMenu> components, define your own style classes in the corresponding <rich:contextMenu> component attributes.

## Relevant Resources Links

Here you can see an example of <rich:contextMenu> usage and sources for the given example.