PhotoAlbum Application Download Support Developer Guide
Skins:
Resources/Beans Handling
Ajax Miscellaneous
Usage
Tag Information

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



View 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
ChevroletS-1047752
GMCSierra29695
FordTaurus31367
ChevroletMalibu42203
InfinitiG3535794
ToyotaAvalon24790
ChevroletS-1027862
ToyotaAvalon25116
InfinitiG3535145
ToyotaAvalon23698
Last Menu Action


View 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.

RichFaces Wiki RichFaces Project Site