4.7. Context Menus
Keywords: RichFaces

### Create new RichFaces Documentation Jira issue

Summary
255 characters left
Description
Environment
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.org Community Documentation

- Prev
- Next

## 4.7. Context Menus

Context menus are called when you right-click on a UI element. RichFaces library provides a special component <rich:contextMenu > to implement this type of functionality.

Context menu is made for the following UI controls:

- Album menu item in navigation menu/Album thumbnail

  Figure 4.7. Context Menu for

- Image thumbnail

  Figure 4.8. Image thumbnail context menu

- Shelf menu item in navigation menu

  Figure 4.9. Context Menu for Shelf menu item

Let's have a look at how the context menu for a single image is constructed.

    ...

        <rich:contextMenu disableDefaultMenu="false" style="text-align:left;" rendered="#{controller.isUserImage(image)}"

            event="oncontextmenu" attached="true" submitMode="ajax" attachTo="#{mediaOutput}">

            <rich:menuItem value="#{messages['image.delete']}" limitToList="true"

                actionListener="#{confirmationPopupHelper.initImagePopup('deleteImage',messages['image.delete.confirm'],image)}"

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

                reRender="confirmation">

            </rich:menuItem>

            <rich:menuItem value="#{messages['image.edit']}" limitToList="true"

                actionListener="#{controller.startEditImage(image)}"

                reRender="mainArea">

            </rich:menuItem>

            <rich:menuItem value="#{messages['image_show']}" limitToList="true"

                actionListener="#{controller.showImage(image)}"

                reRender="mainArea">

            </rich:menuItem>

        </rich:contextMenu>

        ...

That is a listing from `\includes\contextMenu\CMForImage.xhtml`. This code is included into the very bottom of imageList.xhtml file like this:

    ...

            <ui:include src="/includes/contextMenu/CMForImage.xhtml" >

                <ui:param name="image" value="#{image}" />

                <ui:param name="mediaOutput" value="#{rich:clientId('img')}"/>

            </ui:include>

            ...

The context menu code is included with 2 parameters: `"image"` and `"mediaOutput"`. The first ( `"image"`) is the name of the current image. The <a4j:repeat> iterates over a collection of images(see the next listing), the name of the current image is stored in the `"image"` variable. `"mediaOutput"` parameter is set with the help of `rich:clientId('id')` that returns client id by short id or null if the component with the id specified hasn't been found.

This is the block of code that displays each image:

    ...

    <a4j:repeat id="imageList" value="#{model.images}" var="image" rows="20">

            <h:panelGroup layout="block" styleClass="#{imageSizeHelper.currentDimension.cssClass}">

                <h:graphicImage styleClass="pr_photo_bg" style="#{imageSizeHelper.currentDimension.imageBgStyle}" value="#{imageSizeHelper.currentDimension.imageBg}" />

                <h:panelGrid cellpadding="0">

                    <h:panelGroup>

                        <a4j:commandLink

                                actionListener="#{controller.showImage(image)}"

                                reRender="mainArea, treePanel">

                                    <a4j:mediaOutput id="img"  element="img"

                                        createContent="#{imageLoader.paintImage}"

                                        style="border : 1px solid #FFFFFF;"

                                        value="#{fileManager.transformPath(image.fullPath, imageSizeHelper.currentDimension.filePostfix)}">

                                        <f:param value="#{imageSizeHelper.currentDimension.x}" name="x" />

                                        <rich:dragSupport rendered="#{controller.isUserImage(image)}" reRender="mainArea, treePanel" id="dragSource" dragIndicator="dragIndicator"

                                    dragType="image" dragValue="#{image}">

                                    <rich:dndParam id="dragParam" name="label" value="#{image.name}" />

                                </rich:dragSupport>

                                </a4j:mediaOutput>

                        </a4j:commandLink>

                        <br/>

                    </h:panelGroup>

                </h:panelGrid>

                <h:panelGroup layout="block" styleClass="photo_name">#{image.name}</h:panelGroup>

                <h:panelGroup layout="block" styleClass="photo_data">

                    <h:outputText value="#{image.created}">

                        <f:convertDateTime />

                    </h:outputText>

                </h:panelGroup>

            </h:panelGroup>

            <ui:include src="/includes/contextMenu/CMForImage.xhtml" >

                <ui:param name="image" value="#{image}" />

                <ui:param name="mediaOutput" value="#{rich:clientId('img')}"/>

            </ui:include>

        </a4j:repeat>

        ...

The key attribute of <contextMenu> is "attachTo" that specifies for which control the context menu is displayed. As you can see this attribute has `#{mediaOutput}` as its value(`attachTo="#{mediaOutput}"` so this way the id of the current image is passed to <rich:contexMenu> and this is how it knows what photo is affected by user actions.

- Prev4.6. Upload Images
- Top of page
- Front page
- Next4.8. ToolTips