RichFaces Showcase

Ajax Action

a4j:ajax

a4j:commandButton

a4j:commandLink

a4j:actionListener

a4j:jsFunction

a4j:poll

a4j:push

a4j:param

Ajax Queue

a4j:queue

a4j:attachQueue

Ajax Output/Containers

a4j:outputPanel

a4j:status

a4j:region

a4j:mediaOutput

a4j:log

Validation

Client Side Validation

rich:graphValidator

rich:message

rich:messages

rich:notify

Data Iteration

a4j:repeat

rich:dataTable

rich:extendedDataTable

rich:collapsibleSubTable

rich:dataScroller

rich:list

rich:dataGrid

Trees

rich:tree

Tree Adaptors

Output/Panels

rich:chart

rich:panel

rich:togglePanel

rich:tabPanel

rich:collapsiblePanel

rich:accordion

rich:popupPanel

rich:progressBar

rich:tooltip

Menus

rich:panelMenu

rich:toolbar

rich:contextMenu

rich:dropDownMenu

Inputs

rich:autocomplete

rich:calendar

rich:editor

rich:inputNumberSlider

rich:inputNumberSpinner

rich:inplaceInput

rich:fileUpload

Selects

rich:inplaceSelect

rich:select

rich:orderingList

rich:pickList

Drag and Drop

Miscellaneous

Standard elements skinning

rich:placeholder

RichFaces functions

rich:focus

rich:componentControl

rich:hashParam

rich:hotKey

rich:jQuery

VDL documentation
Component Reference

The rich:dropDownMenu component provides hierarchical menu systems similar to those found in many desktop applications.

Current Selection:

View Source

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich">

<ui:composition>

    <h:outputStylesheet>
        .pic {
            margin-bottom: -4px;
            margin-right: 2px;
        }

        .search .rf-ddm-itm-sel {
            background-color: transparent;
            background-image:none;
            border-color: transparent;
            cursor: default;
        }
    </h:outputStylesheet>

    <h:form id="form">
        <rich:toolbar height="26px">
            <rich:dropDownMenu mode="ajax">
                <f:facet name="label">
                    <h:panelGroup>
                        <h:graphicImage value="/images/icons/copy.gif" styleClass="pic" alt="copy" />
                        <h:outputText value="File" />
                    </h:panelGroup>
                </f:facet>
                <rich:menuItem label="New" action="#{dropDownMenuBean.doNew}" icon="/images/icons/create_doc.gif">
                </rich:menuItem>
                <rich:menuItem label="Open" action="#{dropDownMenuBean.doOpen}" icon="/images/icons/open.gif" />
                <rich:menuGroup label="Save As...">
                    <rich:menuItem label="Save" action="#{dropDownMenuBean.doSave}" icon="/images/icons/save.gif" />
                    <rich:menuItem label="Save All" action="#{dropDownMenuBean.doSaveAll}">
                        <f:facet name="icon">
                            <h:graphicImage value="/images/icons/save_all.gif" alt="save_all" />
                        </f:facet>
                    </rich:menuItem>
                </rich:menuGroup>
                <rich:menuItem label="Close" action="#{dropDownMenuBean.doClose}" />
                <rich:menuSeparator id="menuSeparator11" />
                <rich:menuItem label="Exit" action="#{dropDownMenuBean.doExit}" />

            </rich:dropDownMenu>

            <rich:dropDownMenu mode="ajax">
                <f:facet name="label">
                    <h:panelGrid cellpadding="0" cellspacing="0" columns="2" style="vertical-align:middle">
                        <h:outputText value="Links" />
                    </h:panelGrid>
                </f:facet>
                <rich:menuItem mode="client" onclick="document.location.href='http://richfaces.org/'">
                    <h:outputText value="RichFaces Home Page" />
                </rich:menuItem>
                <rich:menuItem mode="client"
                               onclick="document.location.href='https://developer.jboss.org/en/richfaces/content'">
                    <h:outputText value="RichFaces Forum" />
                </rich:menuItem>
            </rich:dropDownMenu>
        </rich:toolbar>
    </h:form>

    <br />
    <a4j:outputPanel ajaxRendered="true">
        <h:outputText value="Current Selection: " />
        <h:outputText style="font-weight:bold" value="#{dropDownMenuBean.current}" />
    </a4j:outputPanel>
    <br />

</ui:composition>

</html>

The drop-down menu has a label that always appears on the page, and an invisible panel that appears after a set client-side event. Use the showEvent attribute to define the event, such as mouseover or click.

Drop-down menus can contain a set of rich:menuItem components, rich:menuGroup components, and rich:menuSeparator components. Menu groups are used for secondary levels on the menu. Menu separators are represented with horizontal lines between items or groups. Menu items are active elements that might produce Ajax or non-Ajax requests. The submission mode is defined with mode attribute, which has three possible options: server, ajax, or client. The client mode does not submit a request, but allows you to provide your own functionality inside the menu item with any in-line content. The mode attribute can be over-ridden in child items.