Richfaces panelMenu

Richfaces is a JSF framework extremely powerful. It offers lots of ajax enabled components. In this post I will show how to create a left side navigation bar.

Step 1: We create an eclipse Dynamic Web Project with version 2.5. We activate JSF 1.2. We also have to configure Richfaces as described in: http://www.jboss.org/file-access/default/members/jbossrichfaces/freezone/docs/devguide/en/html_single/index.html.

Step 2: We create a .jsp file in the previously created project with the following code:

<%@page pageEncoding="UTF8" contentType="text/html; charset=ISO-8859-2" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j" %>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich" %>

<f:view>
<h:form>

<rich:panelmenu event="onclick" mode="ajax" width="300">
<rich:panelmenugroup label="Meniu test">
<rich:panelmenuitem label="Optiune 1" onclick="window.location.href='test.jsf';">
<rich:panelmenuitem label="Optiune 2" onclick="window.location.href='test.jsf';">
<rich:panelmenuitem label="Optiune 3" onclick="window.location.href='test.jsf';">
</rich:panelMenuGroup>
</rich:panelMenu>

</h:form>
</f:view>

Comments:

In this moment, we have a navigation bar without any action implemented. In most common cases we'll have to redirect to another page when clicking an item. We can achieve this in many ways, but I think the easiest one is to use javascript code and onclick attribute. We also have to explain what event="onclick" and mode="ajax" means.
Onclick tells richfaces to generate a floating menu which folds/unfolds when an item is clicked. Another value could be onmouseover. The second attribute, mode, defines the submit mode. The default value for this attribute is server, which means that everytime an item is clicked, the page is reloaded. We can also bind panelMenuXXX(XXX stands for: {"" | Item | Group}), to a java object. Data type for attribute is HtmlPanelMenuXXX(XXX stands for: {"" | Item | Group}). The package for this data type is org.richfaces.component.html. Most components that you will use are defined in this package.