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.