Create new RichFaces Documentation Jira issue

This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.orgCommunity Documentation

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:

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.