Creating simple toolbar using RichFaces tag library

July 19, 2008

rich:toolBar, rich:dropDownMenu and rich:menuItem

This example demonstrates how to create simple toolbar using RichFaces tag library. RichFaces provides predefined tags like rich:toolBar which will be easily plugged into our webpages to disply the toolbar component. Apart from rich:toolBar, to create menus we have to use other tags rich:dropDownMenu and rich:menuItem.

rich:dropDownMenu is used for creating the group of menus and inside that use rich:menuItem to add a single menu. You can view the image in this article bottom to know how it looks like.

richfaces.jsp

 
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib prefix="rich" uri="http://richfaces.org/rich" %>
<%@ taglib prefix="a4j" uri="http://richfaces.org/a4j"%>
<html>
    <body>
        <f:view>
            <h:form>
                <rich:toolBar>
                    <rich:dropDownMenu>
                        <f:facet name="label">
                            <h:outputText value="File"/>
                        </f:facet>
                        <rich:menuItem value="New"/>
                        <rich:menuItem value="Open"/>
                        <rich:menuItem value="Exit"/>
                    </rich:dropDownMenu>
                    <rich:dropDownMenu>
                        <f:facet name="label">
                            <h:outputText value="Edit"/>
                        </f:facet>
                        <rich:menuItem value="Find"/>
                        <rich:menuItem value="Replace"/>
                    </rich:dropDownMenu>
                </rich:toolBar>
            </h:form>
        </f:view>
    </body>
</html>